From 3c17881c8334a9f1f79c114ecb8fd3b3891ff163 Mon Sep 17 00:00:00 2001 From: Gamerking177 <130808542+Gamerking177@users.noreply.github.com> Date: Tue, 9 Jul 2024 22:49:24 +0530 Subject: [PATCH 01/11] --- assets/css/aboutus.css | 358 ++++++++++++++++++++++++++++++-- assets/html/about.html | 319 +--------------------------- assets/html/book_recommend.html | 104 ++++------ index.html | 4 - 4 files changed, 375 insertions(+), 410 deletions(-) diff --git a/assets/css/aboutus.css b/assets/css/aboutus.css index 5ffc63b5..8ac91bfe 100644 --- a/assets/css/aboutus.css +++ b/assets/css/aboutus.css @@ -5,10 +5,19 @@ body { background-color: #f9f9f9; } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; +.header .container { + padding-inline: 0px 30px; +} + +.header .container { + display: flex; + justify-content: space-between; + align-items: center; + height: 90px; +} +.logo { + display: flex; + align-items: center; } header { @@ -167,6 +176,42 @@ h1, h2, h3 { .navbar-item.dropdown:hover .dropdown-arrow { transform: rotate(180deg); } + + @media (min-width: 990px) { + .navbar { + max-width: 987px; + border-radius: 10px; + padding: 0; + } + .navbar-list { + margin-block-end: 0; + display: flex; + gap: 12px; + align-items: center; + text-align: center; + gap: 12px; + } + } + + @media (min-width: 1200px) { + .navbar { + max-width: 1330px; + border-radius: 10px; + } + .navbar-list { + /* Increase gap between navbar items */ + justify-content: center; + /* Center align navbar items */ + padding-left: 2rem; + } + } + + @media (max-width: 641px) { + .navbar-list { + flex-direction: column; + } + } + /* Media Query for Mobile Devices */ @media (max-width: 600px) { .container { @@ -230,26 +275,295 @@ label.newsletter-form{ background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); } -@media (max-width: 990px) { - .light-mode .navbar-item{ + +@media (max-width: 320px) { + .navbar-list { + flex-direction: column; + } +} + +@media (max-width: 881px) { + .navbar-list { + flex-direction: column; + } +} +@media (max-width: 961px) { + .light-mode .navbar { background-color: white; + } + .dark-mode .navbar { + background-color: black; + } + body .navbar { + display: flex; + justify-content: center; + position: absolute; width: 100%; + height: auto; + max-height: unset; + visibility: unset; + overflow: unset; + max-height: unset; + transition: 0.3s ease-in; + border: none; } - .dark-mode .navbar-item{ - background-color: black; - width: 100%; - } - body .navbar-list{ - display: block; - width:100%; - height:100vh; - overflow-y:scroll; - overflow-x: hidden; - transition: 0.3s ease-in; - border: none; - position: absolute; - top: 0; - left: -6px; + /* body .nav_activated{ + transform:translateX(-200%) + } */ + .navbar-list { + flex-direction: column; } +} +@media (max-width: 641px) { + .navbar-list { + flex-direction: column; + } +} + + + +.about { + background-color: var(--seashell); + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border: 1px solid #ddd; + padding: 20px; + margin-bottom: 40px; +} + +.about h2 { + color: var(--sonic-silver); + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; + text-align: center; +} + +.about p { + color: var(--sonic-silver); + font-size: 16px; + line-height: 1.6; + margin-bottom: 20px; +} + +.stats-box { + background-color: var(--seashell); + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border: 1px solid #ddd; + padding: 20px; + margin-bottom: 40px; +} + +.stats-box h2 { + color: var(--sonic-silver); + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; + text-align: center; +} + +.stats { + display: flex; + justify-content: space-around; + margin-top: 20px; +} + +.stat { + + text-align: center; +} + +.stat h3 { + color: var(--sonic-silver); + font-size: 36px; + font-weight: bold; + margin-bottom: 5px; +} + +.stat p { + color: var(--sonic-silver); + font-size: 16px; +} + +.mission-values { + background-color: var(--seashell); + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border: 1px solid #ddd; + padding: 20px; + margin-bottom: 40px; +} + +.mission-values h2 { + color: var(--sonic-silver); + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; + text-align: center; +} + +.about-us-heading { + text-align: center; + margin-bottom: 5rem; + margin-top: 160px; + /* Adjust this value to position it below the header */ + color: red; + +} + + +.about-us-block { + display: flex; + justify-content: space-around; + margin-top: 20px; +} + +.about-us-community, +.about-us-product, +.about-us-event, +.about-us-location { + background-color: var(--seashell); + border: 1px solid rgba(206, 212, 218, 1); + border-radius: 8px; + padding: 20px; + width: 45%; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + margin-bottom: 21px; +} + +.about-us-blk-text { + color: var(--sonic-silver); + font-size: 20px; + font-weight: 600; + margin-bottom: 10px; +} + +.about-us-blk-para { + color: var(--sonic-silver); + font-size: 16px; + line-height: 1.6; +} +.switch-label { +/* right: 0.5rem; */ +left: 8.0rem; +top: 0.5rem; +position: relative; +width: 40px; +height: 30px; +background-color: #ccc; +border-radius: 20px; +cursor: pointer; +display: flex; +align-items: center; +justify-content: center; +padding: 0 5px; +box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +transition: background-color 0.5s ease; +} +.switch-label .sun-icon, +.switch-label .moon-icon { + font-size: 19spx; + position: absolute; + cursor: pointer; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.5s ease, color 0.5s ease; +} + +.switch-label .sun-icon { + color: #f39c12; + left: 2px; +} + +.switch-label .moon-icon { + color: #bdc3c7; + opacity: 0; + left: 5px; +} + +/* Switch Button */ +.switch-button { + position: absolute; + top: 3px; + left: 3px; + width: 25px; + height: 25px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + transition: transform 0.5s ease, background-color 0.5s ease; +} + +/* Checkbox Checked State */ +.switch-checkbox:checked+.switch-label { + background-color: #34495e; +} + +.switch-checkbox:checked+.switch-label .sun-icon { + opacity: 0; +} + +.switch-checkbox:checked+.switch-label .moon-icon { + opacity: 1; +} + +.switch-checkbox:checked+.switch-label .switch-button { + transform: translateX(13px); + /* background-color: #34495e; */ +} + +.team-member{ + width: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; -} \ No newline at end of file +} + +#progressBar { + position: fixed; + top: 0; + left: 0; + width: 0%; + height: 5px; + background-color: #ff2525; + z-index: 99; +} + +.action .profile img { +position: absolute; +top: 0; +left: 0; +width: 100%; +height: 100%; +object-fit: cover; +z-index: 1; +} +* { +margin: 0; +padding: 0; +font-family: "Poppins", sans-serif; +} +.action .profile { +position: relative; +width: 60px; +height: 60px; +border-radius: 50%; +overflow: hidden; +cursor: pointer; +} +.hamburger{ +display: none; +cursor: pointer; +position: absolute; +top: 24px; +left: 1.5%; +} +.line{ +width: 36px; +height: 5px; +margin: 4px 4px; +background-color: rgb(240, 15, 15); +} diff --git a/assets/html/about.html b/assets/html/about.html index 2f815cc6..babc489c 100644 --- a/assets/html/about.html +++ b/assets/html/about.html @@ -30,319 +30,6 @@
Contribute to eco-friendly practices by participating in book swaps, reducing the demand for new @@ -1178,7 +1178,7 @@
Tailor your reading list to your preferences by selecting books from other users' collections, @@ -1376,7 +1376,7 @@