From 3ff3a01f3a9b875ac804ba47da6805c1e9c3a432 Mon Sep 17 00:00:00 2001 From: chaanakyaaM Date: Thu, 17 Oct 2024 19:01:43 +0530 Subject: [PATCH] bug fixed --- style.css | 171 +++++++++++++++++++++--------------------------------- 1 file changed, 67 insertions(+), 104 deletions(-) diff --git a/style.css b/style.css index 0cbb809..2522264 100644 --- a/style.css +++ b/style.css @@ -67,18 +67,6 @@ body { /* Navbar */ -/* nav{ - display: flex; - width: 100%; - justify-content: space-between; - align-items: center; - -} - -.nav-links{ - display: flex; - align-items: center; -} */ .nav-link{ text-decoration: none; } @@ -89,13 +77,8 @@ body { cursor: pointer; } - - - - /* General Styles for Navbar */ nav { - /* background: yellow; */ display: flex; width: 100%; justify-content: space-between; @@ -147,13 +130,11 @@ img#icon { flex-direction: column; justify-content: center; align-items: center; - /* margin-bottom: 5px; */ } .nav-links { margin-top: 10px; flex-direction: column; - /* align-items: flex-end; */ display: flex; flex-direction: column; justify-content: center; @@ -183,28 +164,6 @@ img#icon { } } - - - - - - - - - - - - - - - - - - - - - - body, .title, h3, @@ -234,10 +193,7 @@ body .title { .profile { --backdrop-bg-color: var(--color-profile-card-bg); - position: relative; - /* border: 0.2em solid var(--color-profile-border); - border-radius: 10px; */ border-radius: 10px; padding: 40px; margin: 20px; @@ -332,6 +288,7 @@ body .title { position: absolute; inset: 3px; background: var(--color-body-bg); + border-radius: 7px; } .profile .pfp { @@ -517,7 +474,6 @@ header { } .title { - /* flex-grow: 1; */ text-align: center; font-size: 36px; font-family: "PT Serif", serif; @@ -540,7 +496,6 @@ header { display: flex; align-items: center; justify-content: center; - /* position: absolute; */ top: 10px; right: 10px; cursor: pointer; @@ -574,7 +529,6 @@ header { } .icon-position { - /* position: absolute; */ top: 6px; right: 12px; } @@ -656,42 +610,44 @@ footer { color: black; margin: 0 10px; display: inline-block; - padding: 8px 15px; /* Adds padding to make room for the box effect */ + padding: 8px 15px; transition: 0.3s; text-decoration: none; opacity: 0.75; font-weight: 300; - border-radius: 5px; /* Rounded corners for the box */ + border-radius: 5px; } /* Add hover effect to menu links */ + .menu__link:hover { - background-color: black; /* Adds the translucent box effect */ - color: #e35205; /* Keeps text color orange */ - opacity: 1; /* Fully opaque on hover */ - transform: translateY(-3px); /* Slight upward movement */ - border-radius: 8px; /* Slightly more rounded corners */ + background-color: black; + color: #e35205; + opacity: 1; + transform: translateY(-3px); + border-radius: 8px; } /* About Page Styling */ + .about-container { max-width: 1200px; margin: 0 auto; padding: 50px; background-color: var( --color-profile-card-bg - ); /* Use the card background color */ + ); border-radius: 10px; - color: var(--color-white); /* Text color */ - font-family: "Poppins", sans-serif; /* Consistent font */ + color: var(--color-white); + font-family: "Poppins", sans-serif; } .about-section { - background-color: var(--color-body-bg); /* Match body background */ - border: 1px solid var(--color-profile-border); /* Use border color from profile */ + background-color: var(--color-body-bg); + border: 1px solid var(--color-profile-border); padding: 20px; border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Slightly heavier shadow for depth */ + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); margin: 20px 0; } @@ -700,12 +656,12 @@ footer { font-weight: bold; color: var( --color-profile-border - ); /* Use the profile border color for titles */ + ); } .about-content { font-size: 16px; - color: var(--color-white); /* Use white for better readability */ + color: var(--color-white); margin-bottom: 10px; } @@ -717,11 +673,11 @@ footer { .contribution-steps li { padding: 10px; font-size: 16px; - color: var(--color-white); /* Consistent text color */ + color: var(--color-white); transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; - border-radius: 4px; /* Rounded corners for list items */ - margin-bottom: 10px; /* Space between list items */ + border-radius: 4px; + margin-bottom: 10px; } .contribution-steps li i { @@ -730,15 +686,15 @@ footer { } .contribution-steps li:hover { - background-color: #e35205; /* Highlight on hover */ - color: white; /* Change text color to black on hover */ - transform: scale(1.05); /* Slightly enlarge the item */ - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */ + background-color: #e35205; + color: white; + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; } .contribution-steps li:hover i { - color: white; /* Change icon color to black on hover */ + color: white; } #backToTopBtn i { @@ -746,7 +702,7 @@ footer { } #backToTopBtn { - display: none; /* Hidden by default */ + display: none; position: fixed; bottom: 20px; right: 30px; @@ -766,6 +722,7 @@ footer { } /* Button hover effect */ + #backToTopBtn:hover { background-color: #333; transform: translateY(-5px); @@ -773,16 +730,18 @@ footer { } /* Footer for About Page */ + .about-footer { background-color: var( --color-profile-border - ); /* Consistent footer background */ + ); padding: 20px; color: var(--color-white); text-align: center; } /* Contact Section */ + .contact-section { display: flex; flex-wrap: wrap; @@ -790,12 +749,13 @@ footer { } /* Left Contact Info Styling */ + .contact-info { display: flex; flex-direction: column; - flex: 1; /* Takes up available space */ - max-width: 400px; /* Limit the width of the contact info */ - margin-right: 100px; /* Space between containers */ + flex: 1; + max-width: 400px; + margin-right: 100px; justify-content: center; align-items: flex-start; gap: 20px; @@ -803,26 +763,27 @@ footer { .info-item { display: flex; - justify-content: flex-start; /* Align items to the left */ - align-items: center; /* Center items vertically */ + justify-content: flex-start; + align-items: center; margin-bottom: 15px; font-family: "Poppins", sans-serif; - text-decoration: none; /* Remove underline from links */ - color: #ffffff; /* Default text color */ - transition: color 0.3s, background-color 0.3s; /* Transition for smooth hover effect */ - padding: 10px; /* Add some padding for hover effect */ - border-radius: 8px; /* Rounded corners */ + text-decoration: none; + color: #ffffff; + transition: color 0.3s, background-color 0.3s; + padding: 10px; + border-radius: 8px; } /* Hover effect */ + .info-item:hover { - background-color: rgba(255, 99, 71, 0.1); /* Light background color on hover */ + background-color: rgba(255, 99, 71, 0.1); color: #ff6347; - border: 1px solid rgba(255, 255, 255, 0.509);/* Change text color on hover */ + border: 1px solid rgba(255, 255, 255, 0.509); } .info-item i { - margin-right: 10px; /* Space between icon and text */ + margin-right: 10px; color: #ff6347; } @@ -830,6 +791,7 @@ footer { /* Right Contact Form Container */ /* Contact Container Styling */ + .contact-container { max-width: 800px; margin: 50px auto; @@ -843,7 +805,7 @@ footer { .contact-container:hover { border: 1px solid rgba(0, 0, 0, 0.061); - box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.869); /* Inner shadow effect */ + box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.869); } .contact-container h2 { @@ -857,17 +819,18 @@ footer { .contact-container p { color: black; margin-bottom: 30px; - text-align: center; /* Center the paragraph text */ + text-align: center; } /* Contact Form Styling */ + .contact-form { display: flex; - flex-direction: column; /* Arrange inputs in a column */ + flex-direction: column; } .input-group { - margin-bottom: 20px; /* Space between input fields */ + margin-bottom: 20px; } .contact-form input, @@ -878,43 +841,43 @@ footer { border: 1px solid #ccc; font-size: 16px; color: #333; - box-sizing: border-box; /* Ensures padding is included in width */ + box-sizing: border-box; font-family: "Poppins", sans-serif; } .contact-form input:focus, .contact-form textarea:focus { outline: none; - border: 1px solid #ff6347; /* Change border color on focus */ - box-shadow: 0 0 10px rgba(255, 99, 71, 0.2); /* Shadow on focus */ + border: 1px solid #ff6347; + box-shadow: 0 0 10px rgba(255, 99, 71, 0.2); } /* Submit Button Styling */ + .contact-form button { - width: 70%; /* Button width */ + width: 70%; padding: 15px; - background-color: #ff6347; /* Button color */ - color: white; /* Text color */ + background-color: #ff6347; + color: white; border: none; border-radius: 8px; font-size: 18px; - cursor: pointer; /* Pointer on hover */ - transition: background-color 0.3s ease; /* Smooth background color transition */ - align-self: center; /* Center the button */ + cursor: pointer; + transition: background-color 0.3s ease; + align-self: center; } .contact-form button:hover { - background-color: #e5533d; /* Darker color on hover */ + background-color: #e5533d; } /* Error Message Styling */ + .error-message { - color: rgb(0, 0, 0); /* Error message color */ - text-align: center; /* Center the error message */ - margin-top: 20px; /* Space above the error message */ + color: rgb(0, 0, 0); + text-align: center; + margin-top: 20px; height: fit-content; padding: 2rem; border-radius: 10px; - font-weight: ; - }