Updated navbar colors and fixed alignment issues

apu52 · Jul 14, 2024 · f67efeb · f67efeb
1 parent ccb2a61
commit f67efeb
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 19 deletions.
diff --git a/styles.css b/styles.css
@@ -1,3 +1,6 @@
+
+
+
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&family=Oxygen:wght@300&display=swap");
 
@@ -506,7 +509,7 @@ body {
 }
 
 nav {
-  background-color: #091020;
+  background-color: #123456;
   position: fixed;
   top: 0;
   width: 100%;
@@ -526,30 +529,32 @@ nav {
   color: #3685fb;
   /* Assuming this is your primary color */
 }
-
-/* .nav__links {
-  list-style: none;
+/* 
+.nav__links {
+  /* list-style: none;
   display: flex;
   align-items: center;
   gap: 1rem; /* Increased gap between links */
 /* font-size: 1.2rem; Increased font size for the links   */
 /* } */
-
 .link a {
-  /* padding: 0.5rem 1rem; Adjusted padding for links */
-  color: #ffffff;
-  transition: 0.3s;
-  font-weight: 600;
+  color: #fff; /* Sets text color to white */
+  padding-top: 1.75rem; /* Equivalent to py-7 in Tailwind, adjust according to your base font size */
+  padding-bottom: 1.75rem; /* Equivalent to py-7 in Tailwind */
+  transition: color 0.3s; /* Transition effect for color change */
+  font-weight: 600; /* Sets font weight to 600 */
 }
 
-.link a:hover {
-  color: #ff0000;
+link a:hover {
+  color: #60a5fa; 
+  background-color:red;
 }
 
 .home {
   margin-left: 210px;
 }
 
+
 header {
   background-color: var(--secondary-color);
 }
@@ -1204,9 +1209,12 @@ body, html {
 
 .footer {
   width: 100%;
-  background-color: #091020;
+  background-color: rgb(102, 116, 204);
   padding: 2rem;
 }
+.footer:hover{
+   background-color :#16171c;
+}
 
 .footer__col p {
   font-size: 0.8rem;

diff --git a/thankyou.css b/thankyou.css
@@ -4,20 +4,35 @@ body {
   align-items: center;
   height: 100vh;
   margin: 0;
-  background: linear-gradient(to right, #8e2de2, #4a00e0);
+  background-image: linear-gradient(to right, rgb(91, 57, 165) , rgb(108, 144, 185));
   font-family: 'Roboto', sans-serif;
 }
 
-.container {
+/* .container {
   text-align: center;
   padding: 20px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   max-width: 400px;
   width: 90%;
+} */
+
+.container {
+  text-align: center;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px,
+              rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
+              rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
+  max-width: 400px;
+  text-shadow: 2px 2px 5px rgb(121, 113, 113);
+  width: 90%;
 }
 
+
+
 .container:hover {
   transform: scale(1.05);
   transition: transform 0.3s ease;

diff --git a/trending.css b/trending.css
@@ -50,7 +50,7 @@ div.niha{
 
 #button1 {
     color: black;
-    margin: 18px 18px 50px 680px;
+    margin: 18px 18px 50px 540px;
     transition: 1s;
     border: none;
     background-color:#C07F00;
@@ -63,6 +63,8 @@ div.niha{
     font-weight: bold;
     border-radius: 20px ;
     cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
 
 }
 
@@ -89,15 +91,19 @@ a {
 
 #container2 {
     text-align: center;
-    width: 1360px;
+    /* width:  1360px; */
+    width: 1159px;
     height: 500px;
     display: flex;
     flex-direction: row;
-    margin-left: 75px;
-    margin-right: 100px;
+    margin-left: 40px;
+    margin-right: 40px;
     margin-top:5px;
     margin-bottom: 110px;
+    box-sizing:border-box;
     border: 10 solid rgb(255, 130, 130);
+    /* align-items:center; */
+    justify-content:space-between;
 }
 
 #box5 {
@@ -109,13 +115,16 @@ a {
     margin-right: 10px;
     position: relative;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
 }
 
 #box5:hover {
     transform: scale(1.1);
     border: 3px solid rgb(206, 9, 6);
     transition: 0.9s;
     box-shadow: rgb(206, 9, 6);
+
 }
 
 #box6 {
@@ -129,13 +138,16 @@ a {
     position: relative;
     top: 45px;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
 
 }
 
 #box6:hover {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
+
 }
 
 #box7 {
@@ -150,6 +162,8 @@ a {
     top: 80px;
     text-align: center;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
 
 
 
@@ -159,6 +173,7 @@ a {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
+
 }
 
 #box8 {
@@ -172,6 +187,9 @@ a {
     position: relative;
     top: 45px;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
+
+
 
 }
 
@@ -180,7 +198,6 @@ a {
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
 }
-
 #box9 {
     background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPF21UstFZ23Hy_Kfnad_8zlAcnMohJLuoBg&s");
     background-size: cover;
@@ -191,13 +208,16 @@ a {
     margin-left: 10px;
     position: relative;
     border: 2px solid rgb(206, 9, 6);
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px, rgba(255, 255, 255, 1) 0px 0px 10px;
 
+
 }
 
 #box9:hover {
     transform: scale(1.1);
     border: 5px solid rgb(206, 9, 6);
     transition: 0.9s;
+
 }
 #text1{
     color: #c84d4d;