Skip to content

Commit

Permalink
Improoved Color Combination & Navbar font-size
Browse files Browse the repository at this point in the history
  • Loading branch information
AshaSatpathy08 committed May 10, 2024
1 parent 7bae17d commit 5a68bf9
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 54 deletions.
4 changes: 3 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal"></script>


<title>Beautiify</title>
</head>

Expand All @@ -31,7 +33,7 @@

<ul class="nav-menu">
<li class="nav-item">
<a href="#home" class="nav-link" style="color: red;"><i class="fa-solid fa-house"></i> Home</a>
<a href="#home" class="nav-link" style="color: #FEB941;"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li class="nav-item">
<a href="./assets/html_files/about.html" class="nav-link"><i class="fa-solid fa-circle-info"></i> About</a>
Expand Down
119 changes: 66 additions & 53 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ html {
body,
html {
font-family: "Poppins", sans-serif;
font-weight: 300;
/* font-weight: 300; */
line-height: 1.4;
scroll-behavior: smooth;
}
Expand Down Expand Up @@ -275,14 +275,14 @@ button#dark-mode-toggle {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 20px 16px 0 rgba(0, 0, 0, 0.37);
/* box-shadow: 0 20px 16px 0 rgba(0, 0, 0, 0.37); */
}

a {
text-decoration: none;
color: white;
font-weight: 500;
text-shadow: 1px 1px 2px black, 1px 1px 1px white;
/* text-shadow: 1px 1px 2px black, 1px 1px 1px white; */
}

.flex-container {
Expand All @@ -305,8 +305,8 @@ a {
margin-left: 5px;
font-size: 2.3rem;
color: white;
text-shadow: 1px 1.5px 2px black, 1px 1px 1px white;
font-weight: 700;
/* text-shadow: 1px 1.5px 2px black, 1px 1px 1px white; */
font-weight: 300;
flex: 10%;
}

Expand All @@ -319,7 +319,7 @@ nav {
justify-content: space-between;
align-items: center;
padding: 1rem;
box-shadow: 0px 3px 5px rgb(30, 30, 30);
/* box-shadow: 0px 3px 5px rgb(30, 30, 30); */
}

nav ul {
Expand All @@ -330,31 +330,36 @@ nav ul {

nav li {
font-size: 2.1rem;
font-weight: bolder;
font-weight: 100;
border-bottom: 0.4rem transparent solid;
transition: 0.3s ease-in-out;
margin-right: 10px;
padding: 3px;
}

nav li:hover {
border-bottom: 0.2rem rgb(8, 24, 196) solid;
border-bottom: 0.1rem rgb(8, 24, 196) solid;
border-radius: 10px;
transition: 0.3s ease-in-out;
background-color: #3498db;
color: #df87ef;
background-color: #6DC5D1;

}

nav a {
font-weight: bolder;
nav li a {
padding: 5px;
text-align: center;
font-weight: 100;

}


.logo {
font-size: 2.3rem;
font-weight: 700;
font-weight: 400;
margin-left: 10px;
font-family: Ubuntu;
color: white;
text-shadow: 1px 1.5px 2px black, 1px 1px 1px white;
/* text-shadow: 1px 1.5px 2px black, 1px 1px 1px white; */
}

.hamburger {
Expand Down Expand Up @@ -393,14 +398,14 @@ section {

.comp-section .compcontainer h1 {
font-size: 7rem;
text-shadow: 2px 2px 3px black, 1px 1px 2px white;
/* text-shadow: 2px 2px 3px black, 1px 1px 2px white; */
}

.comp-section .compcontainer h3 {
font-weight: 300;
font-size: 2.8rem;
margin: 0.5%;
text-shadow: 2px 2px 2px black, 0.5px 0.5px 1px white;
/* text-shadow: 2px 2px 2px black, 0.5px 0.5px 1px white; */
}

.paragraph {
Expand All @@ -410,7 +415,7 @@ section {
margin: auto;
padding: 10px;
color: white;
text-shadow: 1px 1px 2px black, 0.5px 0.5px 1px white;
/* text-shadow: 1px 1px 2px black, 0.5px 0.5px 1px white; */
}

.comp-section .compcontainer a {
Expand All @@ -420,16 +425,16 @@ section {
.comp-section .compcontainer .started {
height: auto;
font-size: 25px;
font-weight: 600;
font-weight: 400;
margin-top: 20px;
padding: 10px 45px;
border-radius: 30px;
color: rgb(57, 4, 100);
background: rgba(224, 202, 245, 0.743);
cursor: pointer;
transition: transform 0.5s;
box-shadow: 2px 2px 2px black, 1px 1px 1px white;
text-shadow: 1px 1px 2px black, 1px 1px 1px rgb(57, 4, 100);
/* box-shadow: 2px 2px 2px black, 1px 1px 1px white;
text-shadow: 1px 1px 2px black, 1px 1px 1px rgb(57, 4, 100); */
}

.comp-section .compcontainer .started:hover {
Expand All @@ -441,7 +446,7 @@ section {
.dark-mode .comp-section .compcontainer .started {
color: rgb(47, 111, 174);
background-color: rgba(251, 251, 251, 0.743);
text-shadow: 1px 1px 2px rgb(197, 190, 190), 1px 1px 1px rgb(57, 4, 100);
/* text-shadow: 1px 1px 2px rgb(197, 190, 190), 1px 1px 1px rgb(57, 4, 100); */
}

.dark-mode .comp-section .compcontainer .started:hover {
Expand Down Expand Up @@ -475,29 +480,30 @@ section {
justify-content: center;
align-items: center;
margin: 25px;
background: rgba(224, 202, 245, 0.743);
border: 4px solid rgb(18, 100, 166);
/* background: rgba(224, 202, 245, 0.743); */
background-color: rgba(125, 139, 255, 0.26);
/* color: rgba(125, 139, 255, 0.26); */
border: 1px solid white;
border-radius: 14px;
box-shadow: 2px 2px 4px 2px rgb(28, 116, 189);
/* box-shadow: 2px 2px 4px 2px rgb(28, 116, 189); */
cursor: pointer;
}

.container .box:hover {
background-color: rgb(18, 100, 166);
border: 4px solid rgba(224, 202, 245, 0.743);
box-shadow: 2px 2px 4px 2px rgba(224, 202, 245, 0.743);
/* background-color: rgb(18, 100, 166);
border: 4px solid rgba(224, 202, 245, 0.743); */
/* box-shadow: 2px 2px 4px 2px rgba(224, 202, 245, 0.743); */
scale: 1.01
}

.dark-mode .container .box {
background: rgba(251, 251, 251, 0.743);
border: 4px solid rgb(238, 245, 251);
box-shadow: 2px 2px 4px 2px rgb(28, 116, 189);
background: #153448;
border: 1px solid rgb(238, 245, 251);
}

.dark-mode .container .box:hover {
background-color: rgb(192, 224, 251);
border: 4px solid rgba(234, 223, 244, 0.743);
box-shadow: 2px 2px 4px 2px rgba(224, 202, 245, 0.743);
background-color: #153448;
border: 1px solid rgba(234, 223, 244, 0.743);
}

.container .zoom-effect {
Expand All @@ -520,34 +526,40 @@ section {

.container .box .content i {
font-size: 73px;
color: rgb(18, 100, 166);
text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(37, 111, 172);
/* color: rgb(18, 100, 166); */
color:#F3CA52;
/* text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(37, 111, 172); */
}

.dark-mode .container .box .content i {
text-shadow: 1px 1px 2px black, 1px 1px 2px #a5b9c5;
/* text-shadow: 1px 1px 2px black, 1px 1px 2px #a5b9c5; */
}

.container .box .content h2 {
font-size: 23px;
color: rgb(37, 111, 172);
color:white;
margin-top: 25px;
margin-bottom: 5px;
text-shadow: 1px 1px 1px black, 1px 1px 2px rgb(37, 111, 172);
/* text-shadow: 1px 1px 1px black, 1px 1px 2px rgb(37, 111, 172); */
}

.container .box:hover .content i,
.container .box:hover .content h2 {
color: rgba(224, 202, 245, 0.743);
text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(37, 111, 172);
}


.dark-mode .container .box:hover .content i,
.dark-mode .container .box:hover .content h2 {
color: rgba(253, 252, 253, 0.743);
text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(175, 189, 200);
/* text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(175, 189, 200); */
}

.container .box:hover h2 {
color:#F3CA52;
/* text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(175, 189, 200); */
}
.container .box:hover i {
color:white;
/* text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(175, 189, 200); */
}
/* Footer Css */

.footer {
Expand All @@ -560,7 +572,7 @@ section {
footer {
position: relative;
width: 100%;
box-shadow: 0px -2.5px 6px rgb(30, 30, 30);
/* box-shadow: 0px -2.5px 6px rgb(30, 30, 30); */
min-height: 100px;
padding: 10px;
display: flex;
Expand Down Expand Up @@ -625,10 +637,10 @@ footer p a {
place-items: center;
border-radius: 50%;
transition: opacity 0.3s, background-color 0.3s;
box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3),
/* box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
inset 4px 4px 6px 0 rgba(0, 0, 0, .2); */
cursor: pointer;
}

Expand Down Expand Up @@ -670,7 +682,7 @@ footer p a {
#searchBar h1 {
font-family: Ubuntu;
font-size: 4rem;
text-shadow: 2px 2px 10px var(--light);
/* text-shadow: 2px 2px 10px var(--light); */
margin-top: 16px;
}

Expand All @@ -684,8 +696,8 @@ footer p a {
padding: .7rem;
width: 8rem;
border-radius: 5rem;
box-shadow: 2px 2px 2px black, 1px 1px 1px white;
text-shadow: 1px 1px 2px black, 1px 1px 1px rgb(57, 4, 100);
/* box-shadow: 2px 2px 2px black, 1px 1px 1px white;
text-shadow: 1px 1px 2px black, 1px 1px 1px rgb(57, 4, 100); */
}

#searchBar button:hover {
Expand All @@ -704,13 +716,14 @@ footer p a {
border-radius: 2rem;
width: 40rem;
transition: all linear .2s;
font-weight: 600;
font-weight: 400;
color:#3C5B6F;
padding-right: 0 !important;
}

#searchBar input:hover {
transform: scale(1.02);
box-shadow: -5px -5px 10px #682572;
/* box-shadow: -5px -5px 10px #682572; */
}

/* Media Queries */
Expand Down Expand Up @@ -845,13 +858,13 @@ footer p a {
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
/* box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); */
height: 100vh;
gap: 50px;
}

.nav-menu .nav-item.active .nav-link {
color: red;
color: yellow;
}

.compcontainer h1 {
Expand Down

0 comments on commit 5a68bf9

Please sign in to comment.