From f67efebbf81e394c911f48108e790fb99187507d Mon Sep 17 00:00:00 2001 From: PRANJALIMALETHA <126933724+PRANJALIMALETHA@users.noreply.github.com> Date: Sun, 14 Jul 2024 20:30:05 +0530 Subject: [PATCH] Updated navbar colors and fixed alignment issues --- styles.css | 32 ++++++++++++++++++++------------ thankyou.css | 19 +++++++++++++++++-- trending.css | 30 +++++++++++++++++++++++++----- 3 files changed, 62 insertions(+), 19 deletions(-) diff --git a/styles.css b/styles.css index 2aa247a2..4da9af6b 100644 --- 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 index b3e05128..25077d09 100644 --- a/thankyou.css +++ b/thankyou.css @@ -4,11 +4,11 @@ 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; @@ -16,8 +16,23 @@ body { 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 index bf3d4c55..247de9eb 100644 --- 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,6 +115,8 @@ 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 { @@ -116,6 +124,7 @@ a { border: 3px solid rgb(206, 9, 6); transition: 0.9s; box-shadow: rgb(206, 9, 6); + } #box6 { @@ -129,6 +138,8 @@ 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; + } @@ -136,6 +147,7 @@ a { 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;