From e5420e1ba1216b08a2729db1a6c977890d1ea7e0 Mon Sep 17 00:00:00 2001 From: Kunal Shah Date: Sun, 21 Jan 2024 01:37:31 +0530 Subject: [PATCH 1/2] Bug-Fixes | Nav Bar Change --- Pledge-Ceartificate/index.html | 51 +++++++++---- Pledge-Ceartificate/script.js | 35 +++++++++ Pledge-Ceartificate/style.css | 118 +++++++++++++++++++++++++++--- Project-Feedback/index.html | 0 Project-Feedback/script.js | 0 Project-Feedback/style.css | 0 assets/dropdown-icon.png | Bin 0 -> 10505 bytes index.html | 59 +++++++++++---- script.js | 35 +++++++++ style.css | 128 ++++++++++++++++++++++++++++----- 10 files changed, 371 insertions(+), 55 deletions(-) create mode 100644 Project-Feedback/index.html create mode 100644 Project-Feedback/script.js create mode 100644 Project-Feedback/style.css create mode 100644 assets/dropdown-icon.png diff --git a/Pledge-Ceartificate/index.html b/Pledge-Ceartificate/index.html index 80c030f..30e145f 100644 --- a/Pledge-Ceartificate/index.html +++ b/Pledge-Ceartificate/index.html @@ -19,22 +19,49 @@ @@ -58,7 +85,7 @@

Get Your Anti-Drug Warrior Certificate

- +
diff --git a/Pledge-Ceartificate/script.js b/Pledge-Ceartificate/script.js index c4bea37..8cd1d77 100644 --- a/Pledge-Ceartificate/script.js +++ b/Pledge-Ceartificate/script.js @@ -19,6 +19,41 @@ window.addEventListener("scroll", function () { lastScrollPos = currentScrollPos; }); +// dropdown +var isDropdownOpen = false; +function dropDown() { + const dropdownContent = document.querySelector(".dropdown-content"); + const dropdownIcon = document.querySelector(".dropdown img"); + const mobileDropdownContent = document.querySelector( + ".mobile-dropdown-content" + ); + const mobileDropdownIcon = document.querySelector(".mobile-dropdown img"); + + if (!isDropdownOpen) { + dropdownContent.style.display = "flex"; + dropdownIcon.style.transform = "rotate(180deg)"; + mobileDropdownContent.style.display = "flex"; + mobileDropdownIcon.style.transform = "rotate(180deg)"; + console.log("showing dropdown"); + isDropdownOpen = true; + setTimeout(() => { + // if mouse is not hovering over the dropdown hide the dropdown + dropdownContent.addEventListener("mouseleave", () => { + dropdownContent.style.display = "none"; + dropdownIcon.style.transform = "rotate(0deg)"; + isDropdownOpen = false; + }); + }, 1000); + } else { + dropdownContent.style.display = "none"; + dropdownIcon.style.transform = "rotate(0deg)"; + mobileDropdownContent.style.display = "none"; + mobileDropdownIcon.style.transform = "rotate(0deg)"; + console.log("hiding dropdown"); + isDropdownOpen = false; + } +} + // Mobile Menu const mobileMenu = document.querySelector(".menu-overlay"); const menuButton = document.querySelector(".hamburger-menu"); diff --git a/Pledge-Ceartificate/style.css b/Pledge-Ceartificate/style.css index e8ed32f..136ca16 100644 --- a/Pledge-Ceartificate/style.css +++ b/Pledge-Ceartificate/style.css @@ -5,6 +5,19 @@ font-family: 'Poppins', sans-serif; } +::-webkit-scrollbar { + width: 3px; +} + +::-webkit-scrollbar-track { + background: #212121; +} + +::-webkit-scrollbar-thumb { + background: #0edf23; + border-radius: 10px; +} + nav { display: flex; height: 70px; @@ -25,44 +38,95 @@ nav * { .logo { height: 50%; margin-left: 30px; + cursor: pointer; } -.nav-links { +.nav-links-container { list-style-type: none; display: flex; - width: 50%; + width: 60%; height: 100%; justify-content: space-around; align-items: center; margin-left: auto; } -.nav-links li a { +.nav-link{ text-decoration: none; color: #fff; font-size: 20px; font-weight: 500; outline: none; + cursor: pointer; + text-align: center; } -.nav-links li a strong, .menu-overlay-items li a strong{ +.nav-link strong, .menu-overlay-items li a strong{ color: #0edf23; } -.nav-links li a:hover { +.nav-link:hover { color: #fff; border-bottom: 2px solid #0edf23; } -.nav-links li a:active { +.nav-link:active { color: #fff; border-bottom: 2px solid #0edf23; } -.ai-button{ +.dropdown{ + display: flex; + justify-content: center; + align-items: center; + gap: 7px; +} + +.dropdown img{ + width: 20px; + height: 20px; cursor: pointer; + transition: all 0.3s ease; + transform: rotate(0deg); +} + +.dropdown-content{ + display: none; + position: absolute; + background-color: #1c1b1b; + box-shadow: 0px 8px 16px 0px rgba(59, 255, 59, 0.192); + min-width: 160px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + padding: 10px 10px; + z-index: 1; + margin-top: 170px; + border-radius: 10px; + animation: dropdown 0.6s ease-in-out; +} + +@keyframes dropdown{ + 0%{ + opacity: 0; + transform: translateY(-10px); + } + + 100%{ + opacity: 1; + transform: translateY(0px); + } } +.play-game{ + background-color: #0edf23; + padding: 5px 10px; + border-radius: 10px; + border: 3px solid #fff; + cursor: pointer; +} + .hamburger-menu { position: absolute; right: 0; @@ -113,7 +177,7 @@ nav * { margin-bottom: 25px; } -.menu-overlay-items li a { +.menu-overlay-link { text-decoration: none; color: #fff; font-size: 20px; @@ -422,13 +486,13 @@ main{ } @media screen and (max-width: 1150px) { - .nav-links { + .nav-links-container { width: 60%; } } @media screen and (max-width: 1000px) { - .nav-links { + .nav-links-container { display: none; } @@ -436,6 +500,38 @@ main{ display: flex; } + .dropdown{ + position: relative; + } + + .dropdown-content{ + display: none; + } + + .mobile-dropdown{ + height: 30px; + display: flex; + /* border: 1px solid red; */ + gap: 7px; + } + + + .mobile-dropdown img{ + height: 20px; + align-self: center; + cursor: pointer; + transition: all 0.3s ease; + transform: rotate(0deg); + /* border: 1px solid red; */ + } + + .mobile-dropdown-content{ + display: none; + position: absolute; + margin-top: 50px; + right: 30px; + } + } @media screen and (max-width: 620px){ @@ -444,7 +540,7 @@ main{ margin-left: 10px; } - .nav-links { + .nav-links-container { display: none; } diff --git a/Project-Feedback/index.html b/Project-Feedback/index.html new file mode 100644 index 0000000..e69de29 diff --git a/Project-Feedback/script.js b/Project-Feedback/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Project-Feedback/style.css b/Project-Feedback/style.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/dropdown-icon.png b/assets/dropdown-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..5d7b1bbd48bcd857f781924345bd69c2f1bf15da GIT binary patch literal 10505 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 @@ -90,7 +118,7 @@

Kunal Shah

-
+
Team Member @@ -128,7 +156,7 @@

Raunak Gupta

- Team Member
@@ -169,9 +197,10 @@

About Project

- + allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" + allowfullscreen>
diff --git a/script.js b/script.js index 4867d47..2b4f48e 100644 --- a/script.js +++ b/script.js @@ -162,3 +162,38 @@ function comingSoon(a) { a.textContent = "Ai Counselling"; }, 1000); } + +// dropdown +var isDropdownOpen = false; +function dropDown() { + const dropdownContent = document.querySelector(".dropdown-content"); + const dropdownIcon = document.querySelector(".dropdown img"); + const mobileDropdownContent = document.querySelector( + ".mobile-dropdown-content" + ); + const mobileDropdownIcon = document.querySelector(".mobile-dropdown img"); + + if (!isDropdownOpen) { + dropdownContent.style.display = "flex"; + dropdownIcon.style.transform = "rotate(180deg)"; + mobileDropdownContent.style.display = "flex"; + mobileDropdownIcon.style.transform = "rotate(180deg)"; + console.log("showing dropdown"); + isDropdownOpen = true; + setTimeout(() => { + // if mouse is not hovering over the dropdown hide the dropdown + dropdownContent.addEventListener("mouseleave", () => { + dropdownContent.style.display = "none"; + dropdownIcon.style.transform = "rotate(0deg)"; + isDropdownOpen = false; + }); + }, 1000); + } else { + dropdownContent.style.display = "none"; + dropdownIcon.style.transform = "rotate(0deg)"; + mobileDropdownContent.style.display = "none"; + mobileDropdownIcon.style.transform = "rotate(0deg)"; + console.log("hiding dropdown"); + isDropdownOpen = false; + } +} diff --git a/style.css b/style.css index 2b14794..e54dd79 100644 --- a/style.css +++ b/style.css @@ -5,6 +5,19 @@ font-family: 'Poppins', sans-serif; } +::-webkit-scrollbar { + width: 3px; +} + +::-webkit-scrollbar-track { + background: #212121; +} + +::-webkit-scrollbar-thumb { + background: #0edf23; + border-radius: 10px; +} + nav { display: flex; height: 70px; @@ -25,40 +38,95 @@ nav * { .logo { height: 50%; margin-left: 30px; + cursor: pointer; } -.nav-links { +.nav-links-container { list-style-type: none; display: flex; - width: 50%; + width: 60%; height: 100%; justify-content: space-around; align-items: center; margin-left: auto; } -.nav-links li a { +.nav-link{ text-decoration: none; color: #fff; font-size: 20px; font-weight: 500; outline: none; + cursor: pointer; + text-align: center; } -.nav-links li a strong, .menu-overlay-items li a strong{ +.nav-link strong, .menu-overlay-items li a strong{ color: #0edf23; } -.nav-links li a:hover { +.nav-link:hover { color: #fff; border-bottom: 2px solid #0edf23; } -.nav-links li a:active { +.nav-link:active { color: #fff; border-bottom: 2px solid #0edf23; } +.dropdown{ + display: flex; + justify-content: center; + align-items: center; + gap: 7px; +} + +.dropdown img{ + width: 20px; + height: 20px; + cursor: pointer; + transition: all 0.3s ease; + transform: rotate(0deg); +} + +.dropdown-content{ + display: none; + position: absolute; + background-color: #1c1b1b; + box-shadow: 0px 8px 16px 0px rgba(59, 255, 59, 0.192); + min-width: 160px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + padding: 10px 10px; + z-index: 1; + margin-top: 170px; + border-radius: 10px; + animation: dropdown 0.6s ease-in-out; +} + +@keyframes dropdown{ + 0%{ + opacity: 0; + transform: translateY(-10px); + } + + 100%{ + opacity: 1; + transform: translateY(0px); + } +} + +.play-game{ + background-color: #0edf23; + padding: 5px 10px; + border-radius: 10px; + border: 3px solid #fff; + cursor: pointer; +} + .hamburger-menu { position: absolute; right: 0; @@ -109,7 +177,7 @@ nav * { margin-bottom: 25px; } -.menu-overlay-items li a { +.menu-overlay-link { text-decoration: none; color: #fff; font-size: 20px; @@ -123,7 +191,6 @@ nav * { border-bottom: 2px solid #0edf23; } - main { height: 100vh; width: 100%; @@ -251,8 +318,8 @@ main { align-items: center; width: 20%; height: 100%; - /* border: 1px solid red; */ } + .member-image img{ height: 80%; border-radius: 50%; @@ -512,9 +579,8 @@ main { border-bottom: 2px solid #ffffff; } - @media screen and (max-width: 1150px) { - .nav-links { + .nav-links-container { width: 60%; } @@ -529,16 +595,44 @@ main { } @media screen and (max-width: 1000px) { - .nav-links { + .nav-links-container { display: none; } - + .hamburger-menu { display: flex; } - - .tag-line { - width: 100%; + + .dropdown{ + position: relative; + } + + .dropdown-content{ + display: none; + } + + .mobile-dropdown{ + height: 30px; + display: flex; + /* border: 1px solid red; */ + gap: 7px; + } + + + .mobile-dropdown img{ + height: 20px; + align-self: center; + cursor: pointer; + transition: all 0.3s ease; + transform: rotate(0deg); + /* border: 1px solid red; */ + } + + .mobile-dropdown-content{ + display: none; + position: absolute; + margin-top: 50px; + right: 30px; } .description { @@ -632,7 +726,7 @@ main { z-index: -1; } - .nav-links { + .nav-links-container { display: none; } From fef3ba356973487e3c821df756e4e1ab67c66937 Mon Sep 17 00:00:00 2001 From: Kunal Shah Date: Sun, 21 Jan 2024 05:43:16 +0530 Subject: [PATCH 2/2] Added Feedback page --- Project-Feedback/index.html | 239 +++++++++++++++++ Project-Feedback/script.js | 146 ++++++++++ Project-Feedback/style.css | 512 ++++++++++++++++++++++++++++++++++++ 3 files changed, 897 insertions(+) diff --git a/Project-Feedback/index.html b/Project-Feedback/index.html index e69de29..49db6db 100644 --- a/Project-Feedback/index.html +++ b/Project-Feedback/index.html @@ -0,0 +1,239 @@ + + + + + + + Project Feedback + + + + + + + + + + + +
+
+

Thank you for your Feedback

+

will surely upgrade as per your rating & suggestions

+
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/Project-Feedback/script.js b/Project-Feedback/script.js index e69de29..5c786ce 100644 --- a/Project-Feedback/script.js +++ b/Project-Feedback/script.js @@ -0,0 +1,146 @@ +// Nav bar Scroll +const nav = document.querySelector("nav"); + +let lastScrollPos = 0; +window.addEventListener("scroll", function () { + const currentScrollPos = window.scrollY; + + if (currentScrollPos > lastScrollPos) { + // Scrolling down + nav.style.top = "-50%"; + } else { + // Scrolling up + nav.style.top = "0"; + } + lastScrollPos = currentScrollPos; +}); + +// Mobile Menu +const mobileMenu = document.querySelector(".menu-overlay"); +const menuButton = document.querySelector(".hamburger-menu"); + +let isMenuOpen = false; + +function showMenu() { + isMenuOpen = true; + mobileMenu.style.right = "0"; + menuButton.style.backgroundImage = "url(/assets/cross-icon.png)"; +} + +function hideMenu() { + isMenuOpen = false; + mobileMenu.style.right = "-100%"; + menuButton.style.backgroundImage = "url(/assets/menu-icon.png)"; +} + +function toggleMenu() { + if (!isMenuOpen) { + showMenu(); + console.log("Showing menu"); + } else { + hideMenu(); + console.log("Hiding menu"); + } +} + +// dropdown +var isDropdownOpen = false; +function dropDown() { + const dropdownContent = document.querySelector(".dropdown-content"); + const dropdownIcon = document.querySelector(".dropdown img"); + const mobileDropdownContent = document.querySelector( + ".mobile-dropdown-content" + ); + const mobileDropdownIcon = document.querySelector(".mobile-dropdown img"); + + if (!isDropdownOpen) { + dropdownContent.style.display = "flex"; + dropdownIcon.style.transform = "rotate(180deg)"; + mobileDropdownContent.style.display = "flex"; + mobileDropdownIcon.style.transform = "rotate(180deg)"; + console.log("showing dropdown"); + isDropdownOpen = true; + setTimeout(() => { + // if mouse is not hovering over the dropdown hide the dropdown + dropdownContent.addEventListener("mouseleave", () => { + dropdownContent.style.display = "none"; + dropdownIcon.style.transform = "rotate(0deg)"; + isDropdownOpen = false; + }); + }, 1000); + } else { + dropdownContent.style.display = "none"; + dropdownIcon.style.transform = "rotate(0deg)"; + mobileDropdownContent.style.display = "none"; + mobileDropdownIcon.style.transform = "rotate(0deg)"; + console.log("hiding dropdown"); + isDropdownOpen = false; + } +} + +// google sheet submission +const scriptURL = + "https://script.google.com/macros/s/AKfycbwil5CZ_EMIdBuafVM7JFonoohOQ-6Om7U95dtCtSfjj8CpVKFtcwE3q5_noXWuWWAp/exec"; +const form = document.getElementById("contact-form"); + +form.addEventListener("submit", function (e) { + e.preventDefault(); + showFullscreenMessage(); + + // Create a new FormData object + const formData = new FormData(form); + + // Get the value of the "Your-Name" input + const yourName = document.querySelector('input[name="Your-Name"]').value; + + // Append the "Your-Name" to the form data + formData.append("Your-Name", yourName); + + // Iterate through each rating container + document + .querySelectorAll(".rating-container") + .forEach(function (ratingContainer) { + // Get the selected star rating value within each container + const starRating = ratingContainer.querySelector( + 'input[name^="stars"]:checked' + ).value; + + // Append the star rating to the form data with a unique identifier + formData.append(ratingContainer.id + "-starRating", starRating); + + console.log(`Rating for ${ratingContainer.id}: ${starRating}`); + }); + + // Get the value of the "Suggestions" textarea + const suggestions = document.querySelector( + 'textarea[name="Suggestions"]' + ).value; + + // Append the "Suggestions" to the form data + formData.append("Suggestions", suggestions); + + // Log the entire form data + for (let pair of formData.entries()) { + console.log(pair[0] + ": " + pair[1]); + } + + // Submit the form data + fetch(scriptURL, { method: "POST", body: formData }) + .then((response) => response.json()) + .then((data) => { + console.log("Thank you! Your form is submitted successfully."); + // Reload the page after a short delay + }) + .catch((error) => console.error("Error!", error.message)); +}); + +// show fullscreen message + +const fullscreenMessage = document.querySelector(".fullscreen-msg"); + +function showFullscreenMessage() { + fullscreenMessage.style.display = "block"; + setTimeout(() => { + window.location.href = "/index.html"; + }, 10000); +} diff --git a/Project-Feedback/style.css b/Project-Feedback/style.css index e69de29..25c9fb0 100644 --- a/Project-Feedback/style.css +++ b/Project-Feedback/style.css @@ -0,0 +1,512 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +::-webkit-scrollbar { + width: 3px; +} + +::-webkit-scrollbar-track { + background: #212121; +} + +::-webkit-scrollbar-thumb { + background: #0edf23; + border-radius: 10px; +} + +nav { + display: flex; + height: 70px; + width: 100%; + background-color: rgba(27, 25, 25, 0.788); + align-items: center; + position: fixed; /* Fixed positioning to make it stay at the top */ + top: 0; /* Set distance from the top */ + z-index: 1000; /* Set a high z-index to ensure it's above other elements */ + transition: all 0.3s ease; + scroll-snap-align: start; +} + + +.logo { + height: 50%; + margin-left: 30px; + cursor: pointer; +} + +.nav-links-container { + list-style-type: none; + display: flex; + width: 60%; + height: 100%; + justify-content: space-around; + align-items: center; + margin-left: auto; +} + +.nav-link{ + text-decoration: none; + color: #fff; + font-size: 20px; + font-weight: 500; + outline: none; + cursor: pointer; +text-align: center; +} + +.nav-link strong, .menu-overlay-items li a strong{ + color: #0edf23; +} + +.nav-link:hover { + color: #fff; + border-bottom: 2px solid #0edf23; +} + +.nav-link:active { + color: #fff; + border-bottom: 2px solid #0edf23; +} + +.dropdown{ + display: flex; + justify-content: center; + align-items: center; + gap: 7px; +} + +.dropdown img{ + width: 20px; + height: 20px; + cursor: pointer; + transition: all 0.3s ease; + transform: rotate(0deg); +} + +.dropdown-content{ + display: none; + position: absolute; + background-color: #1c1b1b; + box-shadow: 0px 8px 16px 0px rgba(59, 255, 59, 0.192); + min-width: 160px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + padding: 10px 10px; + z-index: 1; + margin-top: 170px; + border-radius: 10px; + animation: dropdown 0.6s ease-in-out; +} + +@keyframes dropdown{ + 0%{ + opacity: 0; + transform: translateY(-10px); + } + + 100%{ + opacity: 1; + transform: translateY(0px); + } +} + +.play-game{ + background-color: #0edf23; + padding: 5px 10px; + border-radius: 10px; + border: 3px solid #fff; + cursor: pointer; +} + +.hamburger-menu { + position: absolute; + right: 0; + background-image: url(/assets/menu-icon.png); + background-size: cover; + background-repeat: no-repeat; + background-color: transparent; + border: none; + outline: none; + height: 35px; + width: 35px; + cursor: pointer; + margin-right: 30px; + display: none; + z-index: 1000; + transition: all 0.3s ease; +} + +.hamburger-menu:focus { + outline: none; +} + +.menu-overlay { + /* border: 1px solid red; */ + position: fixed; + top: 70px; + right: 0; + height: 50vh; + width: 200px; + background-color: rgba(27, 25, 25, 0.788); + z-index: 100; + right: -100%; + border-radius: 0 0 0 10px; + transition: all 0.3s ease; +} + +.menu-overlay-items { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + list-style-type: none; + padding: 0; +} + +.menu-overlay-items li { + margin-bottom: 25px; +} + +.menu-overlay-link { + text-decoration: none; + color: #fff; + font-size: 20px; + font-weight: 500; + outline: none; + margin-bottom: 20px; +} + +.menu-overlay-items li a:hover { + color: #fff; + border-bottom: 2px solid #0edf23; +} + +main{ + width: 100%; + padding-top: 90px; + background-color: #212121; + color: #fff; + min-height: 100vh; + text-align: center; + /* border: 1px solid red; */ +} + +.form-container{ + width: 100%; + display: flex; + flex-direction: column; + /* border: 1px solid red; */ + font-family: 'Poppins', sans-serif; + font-size: 17px; + font-weight: 500; +} + +.text-input{ + width: 50%; + height: 50px; + margin: 20px 10px; + border: none; + outline: none; + border-radius: 10px; + padding-left: 10px; + font-size: 20px; + font-weight: 500; + background-color: #1c1b1b; + color: #fff; +} + +.text-input:hover{ + border: 2px solid #0edf23; +} + +.text-input:focus{ + border: 2px solid #0edf23; +} + +.rating-container{ + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + margin: 20px 0; +} + +.rating{ + display: inline-block; +} + +.message-container{ + padding: 40px 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-items: center; + margin: 20px 0; + /* border: 1px solid red; */ +} + +.message{ + width: 50%; + height: 170px; + padding: 10px; + border: none; +} + +.fullscreen-msg{ + /* border: 1px solid red; */ + position: absolute; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(28, 27, 27, 0.671); + backdrop-filter: blur(8px); + color: white; + z-index: 1000; + padding: 2rem 2rem 0 2rem; + border-radius: 15px 15px; + display: none; + animation: growUp 1s ease-out forwards; /* Animation definition */ +} + +@keyframes growUp{ + 0%{ + transform: translate(-50%, -50%) scale(0); + } + 100%{ + transform: translate(-50%, -50%) scale(1); + } +} + +.fullscreen-msg h2{ + text-align: center; + font-size: 1.5rem; + padding-bottom: 2rem; + margin-top: 0; +} + +.fullscreen-msg h3{ + text-align: center; + font-size: 1.2rem; + padding-bottom: 2rem; + margin-top: 0; +} + +.fullscreen-btn{ + /* border: 1px solid red; */ + position: relative; + bottom: 10px; + left: 50%; + transform: translate(-50%, 0); + background-color: #0edf23; + backdrop-filter: blur(8px); + border-radius: 15px; + display: flex; + justify-content: center; + align-items: center; + width: 70%; + height: 50px; + font-size: 1.2rem; + font-weight: 400; + margin-bottom: 1rem; +} + +.fullscreen-btn:hover{ + /* background-color: rgba(0, 0, 0, 0.8); */ + box-shadow: 0 0 10px white; + cursor: pointer; +} + +.loading-bar{ + position: relative; + bottom: 0; + left: 0; + width: 100%; + height: 10px; + background-color: #0edf23; + border-radius: 10px 10px 15px 15px; + animation: reduceWidth 10s ease-out forwards; +} + +@keyframes reduceWidth{ + 0%{ + width: 100%; + } + 100%{ + width: 0%; + } +} + +#submit{ + width: 30%; + height: 50px; + margin: 20px 10px; + border: none; + outline: none; + border-radius: 10px; + font-size: 20px; + font-weight: 700; + background-color: #0edf23; + color: #fff; + cursor: pointer; + transition: transform 0.3s ease; +} + +#submit:hover{ + border: 2px solid #fff; + transform: scale(1.05); +} + + +@media screen and (max-width: 1150px) { + .nav-links-container { + width: 60%; + } +} + + + +@media screen and (max-width: 1000px) { + .nav-links-container { + display: none; + } + + .hamburger-menu { + display: flex; + } + + .dropdown{ + position: relative; + } + + .dropdown-content{ + display: none; + } + + .mobile-dropdown{ + height: 30px; + display: flex; + /* border: 1px solid red; */ + gap: 7px; + } + + + .mobile-dropdown img{ + height: 20px; + align-self: center; + cursor: pointer; + transition: all 0.3s ease; + transform: rotate(0deg); + /* border: 1px solid red; */ + } + + .mobile-dropdown-content{ + display: none; + position: absolute; + margin-top: 50px; + right: 30px; + } + + .form-container{ + margin-top: 30px; + width: 100%; + font-size: 20px; + } + .text-input{ + width: 80%; + } + + .rating-container{ + margin: 50px 0; + flex-direction: column; + } + + .fullscreen-msg{ + width: 80%; + } + + + .fullscreen-btn{ + width: 100%; + } + +} + + + + + + +.rating { + display: inline-block; + position: relative; + height: 50px; + line-height: 50px; + font-size: 50px; + } + + .rating label { + position: absolute; + top: 0; + left: 0; + height: 100%; + cursor: pointer; + } + + .rating label:last-child { + position: static; + } + + .rating label:nth-child(1) { + z-index: 5; + } + + .rating label:nth-child(2) { + z-index: 4; + } + + .rating label:nth-child(3) { + z-index: 3; + } + + .rating label:nth-child(4) { + z-index: 2; + } + + .rating label:nth-child(5) { + z-index: 1; + } + + .rating label input { + position: absolute; + top: 0; + left: 0; + opacity: 0; + } + + .rating label .icon { + float: left; + color: transparent; + } + + .rating label:last-child .icon { + color: #000; + } + + .rating:not(:hover) label input:checked ~ .icon, + .rating:hover label:hover input ~ .icon { + color: #0edf23; + } + + .rating label input:focus:not(:checked) ~ .icon:last-child { + color: #000; + text-shadow: 0 0 5px #0edf23; + } \ No newline at end of file