Skip to content

Enhanced UI of web page #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Enhanced UI of web page #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab653ce
enhanced ui
SrijanShovit Jul 12, 2022
b831839
Update index.html
SrijanShovit Jul 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 34 additions & 8 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,53 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

* html {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
margin: 0;
font-family: "Open Sans", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color:#0f0e13;
background-image:
radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
}

.desc{
color: thistle;
}


.logo{
width: 200px;
height: 200px;
margin-top: 2%;
}
.lcolor{
color: #D91B5B;
color: #c8c8d7;
}
.btns{
margin-top: 1%
}
#note{
border: 2px dotted black;
border: 2px dotted rgb(177, 189, 236);
padding-bottom: 7px;
width: 60%;
margin-bottom:1%;
border-radius: 10px;
}
#note:hover{
border: 2px dashed #D91B5B;
}
border: 2px dashed #7be76b;

.header{
font-family: Francois One;
}

.list-group-item{
font-family: Noticia Text;
}
font-family: Open Sans;
background-color: lavender;
font-size: medium;
}
24 changes: 13 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,15 @@
<a href="https://drive.google.com/file/d/1wXOwKf50dAGyyv7_jAwN8uMSY1gjirUo/view?usp=sharing" class="lcolor btn-lg" download="selection.min.js"> <i class="fas fa-download"></i> Download</a>
<a href="https://github.com/prateekkalra/Selection.js" target="_" class=" lcolor btn-lg"><i class="fab fa-github"></i> Github</a>
</div>

<h3 class="text-center center-block" style="width: 75%;font-family: Jua">A lightweight javascript library which provides users with a set of options in the form of a small popover over the selected portion of text.</h3>
<br>
<h4 class="text-center center-block desc" style="width: 75%;font-family: inherit">A lightweight javascript library which provides users with a set of options in the form of a small popover over the selected portion of text.</h4>
<br>
<div id="note" class="center-block">
<h2 class="text-uppercase text-center" style="font-family: Bree Serif">Try selecting any text on this page</h2>
<h2 class="text-uppercase desc text-center" style="font-family: Bree Serif">Try selecting any text on this page😏</h2>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="text-center header">Features</h3>
<h3 class="text-center header" style="color:#bce3f4">Features</h3>
<div class="list-group text-center center-block" style="width: 60%">
<a class="list-group-item">Lightweight</a>
<a class="list-group-item">No dependencies</a>
Expand All @@ -33,7 +34,7 @@ <h3 class="text-center header">Features</h3>
</div>
</div>
<div class="col-md-6">
<h3 class="text-center header">Menu Options Available</h3>
<h3 class="text-center header" style="color:#bce3f4">Menu Options Available</h3>
<div class="list-group text-center center-block" style="width: 60%">
<a class="list-group-item">Share on Twitter</a>
<a class="list-group-item">Share on Facebook</a>
Expand All @@ -45,16 +46,17 @@ <h3 class="text-center header">Menu Options Available</h3>
</div>
<div class="row">
<div class="col-md-6">
<h2 class="header text-center">Basic Usage</h2>
<h2 class="header text-center" style="color:#1aacec">Basic Usage</h2>
<script src="https://gist.github.com/prateekkalra/3320fdad383b4ffd8050b87239c5bb2a.js"></script>
<div class="text-center" style="margin-top: 31%">
<p>Designed with <i style="color:red" class="fa fa-heart"></i> by <a style="color: crimson" href="https://www.linkedin.com/in/prateek-kalra/" target="_blank">Prateek Kalra</a>.</p>
</div>
</div>
<div class="col-md-6">
<h2 class="header text-center">Advanced Usage</h2>
<h2 class="header text-center" style="color:#1aacec">Advanced Usage</h2>
<script src="https://gist.github.com/prateekkalra/a858930c0955576892a8aa400a18b472.js"></script>
</div>
<div class="text-center" style="color : whitesmoke">
<p>Designed with <i style="color:rgb(247, 80, 197)" class="fa fa-heart"></i> by <a style="color: rgb(11, 169, 247)" href="https://www.linkedin.com/in/prateek-kalra/" target="_blank">Prateek Kalra</a>🤔</p>
<p>Enhanced with <i style="color:rgb(247, 80, 197)" class="fa fa-heart"></i> by <a style="color: rgb(171, 239, 11)" href="https://www.linkedin.com/in/srijan-shovit-6b3b131ba/" target="_blank">Srijan Shovit</a>🤓</p>
</div>
</div>

</div>
Expand All @@ -72,7 +74,7 @@ <h2 class="header text-center">Advanced Usage</h2>
copy:true,
speak:true,
translate:true,
backgroundColor: 'crimson',
backgroundColor: 'violet',
iconColor: '#fff',
}).init();
</script>
Expand Down