diff --git a/components/navbar.html b/components/navbar.html new file mode 100644 index 0000000..bdf1662 --- /dev/null +++ b/components/navbar.html @@ -0,0 +1,39 @@ + + + \ No newline at end of file diff --git a/index.html b/index.html index 6757350..5c90244 100644 --- a/index.html +++ b/index.html @@ -1,295 +1,183 @@ - - - - - - - - - - - - - - - - - Dots & Boxes Game - - - + + + + + + + + + + + + + + + + Dots & Boxes Game + - -
- -
- - - -
-
-
-
-
We'd Love Your Feedback!
- × -
-
- - - - - -
-
-
-
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
    -
    -
    - - - - - + + + + + + + + + + +
    +
    + + +
    +
    +
    +
    +
    We'd Love Your Feedback!
    + × +
    +
    + + + + + +
    +
    +
    +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • -
    - - +
    + + + + +
    +
    + + +
    +
    -
    -
    -
    - - -
    -
    - - -
    -
    + +
    - - + +
    -
    - - +
    + +
    - -
    +
    +
    + + +
    +
    + + +
    +
    - + -
    - -

    ▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂

    -

    - Instructions -

    -

    - 1. 🧩 Select the number of rows, columns, and players.
    - 2. 🏆 The player who has the maximum number of boxes on the board is - the winner.
    - 3. 🔄 Players will switch after every turn. But the player who fills - the last box will get one extra chance consecutively. 🎉
    -

    - - Read Detailed Instructions -
    -
    -
    -
    - - -
    -
    - -
    - - - - -
    -
    +
    + +

    ▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂

    +

    + Instructions +

    +

    + 1. 🧩 Select the number of rows, columns, and players.
    + 2. 🏆 The player who has the maximum number of boxes on the board is + the winner.
    + 3. 🔄 Players will switch after every turn. But the player who fills + the last box will get one extra chance consecutively. 🎉
    +

    -
    - - - + Read Detailed Instructions +
    +
    +
    +
    + + +
    +
    + +
    + + + +
    +
    -
    - - START - - - -
    +
    + + +
    -
    -
    -
    -
    - HowToPlay? - TermsOfService - PrivacyPolicy - Licensing -
    - -
    - -
    - - - +
    + + + - + + + \ No newline at end of file diff --git a/js/contributors.js b/js/contributors.js new file mode 100644 index 0000000..cfb51e5 --- /dev/null +++ b/js/contributors.js @@ -0,0 +1,69 @@ +document.addEventListener("DOMContentLoaded", function () { + const contributorsContainer = document.getElementById("contributors"); + const prevBtn = document.getElementById("prevBtn"); + const nextBtn = document.getElementById("nextBtn"); + const pageNoBox = document.getElementById("pageNoBox"); + let currentPage = 1; + const perPage = 30; + let totalContributors = []; + + async function fetchContributors() { + try { + let page = 1; + const perPage = 100; + while (true) { + const response = await fetch( + `https://api.github.com/repos/ChromeGaming/Dot-Box/contributors?per_page=${perPage}&page=${page}` + ); + const contributors = await response.json(); + if (contributors.length === 0) break; + totalContributors = totalContributors.concat(contributors); + page++; + } + updateContributors(); + } catch (error) { + console.error("Error fetching contributors:", error); + } + } + + function updateContributors() { + contributorsContainer.innerHTML = ""; + const start = (currentPage - 1) * perPage; + const end = start + perPage; + const paginatedContributors = totalContributors.slice(start, end); + + paginatedContributors.forEach((contributor) => { + const contributorCard = document.createElement("a"); + contributorCard.href = contributor.html_url; + contributorCard.target = "_blank"; + contributorCard.className = "contributor-card"; + contributorCard.innerHTML = ` + ${contributor.login} +

    ${contributor.login}

    +

    Contributions: ${contributor.contributions}

    +

    GitHub Profile

    + `; + contributorsContainer.appendChild(contributorCard); + }); + + pageNoBox.textContent = currentPage; + prevBtn.disabled = currentPage === 1; + nextBtn.disabled = end >= totalContributors.length; + } + + prevBtn.addEventListener("click", () => { + if (currentPage > 1) { + currentPage--; + updateContributors(); + } + }); + + nextBtn.addEventListener("click", () => { + if ((currentPage - 1) * perPage < totalContributors.length) { + currentPage++; + updateContributors(); + } + }); + + fetchContributors(); +}); diff --git a/js/index.js b/js/index.js index e7aed87..c56d098 100644 --- a/js/index.js +++ b/js/index.js @@ -20,18 +20,6 @@ document.addEventListener("DOMContentLoaded", function () { }); }); -// Navigation menu -const menu = document.querySelector(".nav-links"); -const hamburger = document.querySelector(".hamburger"); - -hamburger.addEventListener("click", () => { - if (menu.style.display === "none" || menu.style.display === "") { - menu.style.display = "flex"; - } else { - menu.style.display = "none"; - } -}); - // Themes for the game const video = document.getElementById("myVideo"); const themeSelect = document.getElementById("theme-select"); diff --git a/js/nav.footer.js b/js/nav.footer.js new file mode 100644 index 0000000..c84dc3c --- /dev/null +++ b/js/nav.footer.js @@ -0,0 +1,152 @@ +const navbar = ` + + +`; + +const footer = ` +
    +
    + + HowToPlay? + + + TermsOfService + + + PrivacyPolicy + + + Licensing + +
    +

    + Created with ❤️ by + + Chrome Gaming + +

    + + +
    +`; + +document.addEventListener("DOMContentLoaded", () => { + document.getElementById("nav-placeholder").innerHTML = navbar; + document.getElementById("footer-placeholder").innerHTML = footer; + + const mobile_menu = document.querySelector(".mobile-menu"), + mobile_trigger = document.querySelector(".mobile-menu__trigger"); + + let initialPoint, finalPoint; + + document.addEventListener("touchstart", function (event) { + initialPoint = event.changedTouches[0]; + }); + + document.addEventListener("touchend", function (event) { + finalPoint = event.changedTouches[0]; + + let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX), + yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY); + + if (xAbs > 120 || yAbs > 120) { + // 120 - SWIPE WIDTH + if (xAbs > yAbs) { + if (finalPoint.pageX < initialPoint.pageX) { + // SWIPE LEFT + mobile_menu.classList.remove("mobile-menu_open"); + } else { + // SWIPE RIGTH + mobile_menu.classList.add("mobile-menu_open"); + } + } else { + if (finalPoint.pageY < initialPoint.pageY) { + // SWIPE UP + } else { + // SWIPE DOWN + } + } + } + }); + + document.addEventListener("click", function (event) { + const target = event.target.closest(".mobile-menu__trigger"); + if (target && target == mobile_trigger) { + mobile_menu.classList.toggle("mobile-menu_open"); + } else if ( + event.target !== mobile_trigger && + event.target !== mobile_menu + ) { + if (mobile_menu.classList.contains("mobile-menu_open")) { + mobile_menu.classList.remove("mobile-menu_open"); + } + } + }); + + mobile_menu.querySelectorAll("a").forEach(function (element) { + element.addEventListener("click", function (event) { + const anchor_href = event.currentTarget.getAttribute("href"); + if (anchor_href.charAt(0) === "#") { + event.preventDefault(); + if (anchor_href.length > 1) { + // if #hash is not empty + const scroll_to_node = document.querySelector( + event.currentTarget.hash + ); + if (scroll_to_node) { + SmoothScrollTo(scroll_to_node); + } + } + } + }); + }); + + function SmoothScrollTo(element) { + if (element) { + element.scrollIntoView({ + behavior: "smooth", + }); + } + } +}); diff --git a/js/navbar.js b/js/navbar.js deleted file mode 100644 index f231fc0..0000000 --- a/js/navbar.js +++ /dev/null @@ -1,69 +0,0 @@ -const mobile_menu = document.querySelector(".mobile-menu"), - mobile_trigger = document.querySelector(".mobile-menu__trigger"); - -let initialPoint, finalPoint; - -document.addEventListener("touchstart", function (event) { - initialPoint = event.changedTouches[0]; -}); - -document.addEventListener("touchend", function (event) { - finalPoint = event.changedTouches[0]; - - let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX), - yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY); - - if (xAbs > 120 || yAbs > 120) { - // 120 - SWIPE WIDTH - if (xAbs > yAbs) { - if (finalPoint.pageX < initialPoint.pageX) { - // SWIPE LEFT - mobile_menu.classList.remove("mobile-menu_open"); - } else { - // SWIPE RIGTH - mobile_menu.classList.add("mobile-menu_open"); - } - } else { - if (finalPoint.pageY < initialPoint.pageY) { - // SWIPE UP - } else { - // SWIPE DOWN - } - } - } -}); - -document.addEventListener("click", function (event) { - const target = event.target.closest(".mobile-menu__trigger"); - if (target && target == mobile_trigger) { - mobile_menu.classList.toggle("mobile-menu_open"); - } else if (event.target !== mobile_trigger && event.target !== mobile_menu) { - if (mobile_menu.classList.contains("mobile-menu_open")) { - mobile_menu.classList.remove("mobile-menu_open"); - } - } -}); - -mobile_menu.querySelectorAll("a").forEach(function (element) { - element.addEventListener("click", function (event) { - const anchor_href = event.currentTarget.getAttribute("href"); - if (anchor_href.charAt(0) === "#") { - event.preventDefault(); - if (anchor_href.length > 1) { - // if #hash is not empty - const scroll_to_node = document.querySelector(event.currentTarget.hash); - if (scroll_to_node) { - SmoothScrollTo(scroll_to_node); - } - } - } - }); -}); - -function SmoothScrollTo(element) { - if (element) { - element.scrollIntoView({ - behavior: "smooth", - }); - } -} diff --git a/pages/FAQs.html b/pages/FAQs.html index 7cbc20c..9717b06 100644 --- a/pages/FAQs.html +++ b/pages/FAQs.html @@ -9,8 +9,6 @@ - - @@ -51,47 +49,13 @@ + - +

    @@ -183,22 +147,7 @@

    -
    -
    - HowToPlay? - TermsOfService - PrivacyPolicy - Licensing -
    -

    - Created with ❤️ by - Chrome Gaming -

    - -
    + diff --git a/pages/about.html b/pages/about.html index 2e32d2d..899f621 100644 --- a/pages/about.html +++ b/pages/about.html @@ -8,8 +8,6 @@ - - @@ -23,56 +21,10 @@ + - - - +
    @@ -191,33 +143,16 @@

    How to Play

    - + -
    -
    - HowToPlay? - TermsOfService - PrivacyPolicy - Licensing -
    -

    - Created with ❤️ by - Chrome Gaming -

    - - -
    + + -
    - -
    + +
    @@ -58,90 +37,8 @@
    - -
    -
    - HowToPlay? - TermsOfService - PrivacyPolicy - Licensing -
    -

    Created with ❤️ by Chrome Gaming

    - -
    - - + + \ No newline at end of file diff --git a/pages/howtoplay.html b/pages/howtoplay.html index b9f4a7d..e4c99a5 100644 --- a/pages/howtoplay.html +++ b/pages/howtoplay.html @@ -8,8 +8,6 @@ - - @@ -24,58 +22,14 @@ +
    - +

    ▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂

    @@ -174,14 +128,11 @@

    Tutorial Video

    them from completing boxes whenever possible. -
    - -
    -
    + + + \ No newline at end of file diff --git a/pages/licensing.html b/pages/licensing.html index 9506461..71b86e0 100644 --- a/pages/licensing.html +++ b/pages/licensing.html @@ -13,60 +13,62 @@ + +
    +

    Licensing

    @@ -111,14 +113,11 @@

    MIT License

    Last updated:
    -
    - -
    + + - + diff --git a/pages/privacypolicy.html b/pages/privacypolicy.html index 8af3dd7..0554d59 100644 --- a/pages/privacypolicy.html +++ b/pages/privacypolicy.html @@ -13,64 +13,66 @@ + +
    +

    Privacy Policy

    @@ -78,6 +80,7 @@

    Privacy Policy

    + Last updated:

    Introduction

    @@ -192,46 +195,45 @@

    Contact Us

    -
    - -
    - + + + + + - + \ No newline at end of file diff --git a/pages/termsofservice.html b/pages/termsofservice.html index e4a2f96..7e09a0e 100644 --- a/pages/termsofservice.html +++ b/pages/termsofservice.html @@ -14,58 +14,62 @@ - + + + +
    +

    Terms Of Services

    @@ -73,6 +77,7 @@

    Terms Of Services

    + Last updated:

    Introduction

    @@ -148,42 +153,41 @@

    Contact Information

    -
    - -
    + + + + diff --git a/pages/testimonials.html b/pages/testimonials.html index 4c2de3b..0255c34 100644 --- a/pages/testimonials.html +++ b/pages/testimonials.html @@ -13,33 +13,10 @@ - +

    What Players Say About Dot-Box?

    @@ -175,6 +152,7 @@

    Jack C

    + diff --git a/styles/FAQs.css b/styles/FAQs.css index 3c9d186..12a548e 100644 --- a/styles/FAQs.css +++ b/styles/FAQs.css @@ -46,30 +46,33 @@ body { .question { font-family: "WorkSans-SemiBold", Arial, sans-serif; padding: 20px; - font-size: 1.25rem; /* 20px */ + font-size: 1.25rem; + /* 20px */ border-bottom: 0.5px solid rgba(243, 218, 171, 0.5); - background: linear-gradient( - 135deg, - #f7f7f7, - #bababa - ); /* Subtle gradient for questions */ - transition: background-color 0.3s, transform 0.3s, text-shadow 0.3s; /* Added text-shadow transition */ + background: linear-gradient(135deg, + #f7f7f7, + #bababa); + /* Subtle gradient for questions */ + transition: background-color 0.3s, transform 0.3s, text-shadow 0.3s; + /* Added text-shadow transition */ border-radius: 8px; } /* Hover Effect */ .question:hover { - background: linear-gradient( - 15deg, - #cc3f47, - #de6f3d, - #f09f33, - #de6f3d, - #cc3f47 - ); /* Bright gradient on hover */ - transform: scale(1.05); /* Slight zoom effect */ - border-radius: 12px; /* Slight rounding for emphasis */ - text-shadow: #fff 3px 3px 5px; /* Text shadow effect on hover */ + background: linear-gradient(15deg, + #cc3f47, + #de6f3d, + #f09f33, + #de6f3d, + #cc3f47); + /* Bright gradient on hover */ + transform: scale(1.05); + /* Slight zoom effect */ + border-radius: 12px; + /* Slight rounding for emphasis */ + text-shadow: #fff 3px 3px 5px; + /* Text shadow effect on hover */ } /* Summary Styles */ @@ -79,11 +82,13 @@ body { align-items: center; padding: 0.5rem 1rem; transition: color 0.3s; - outline: none; /* Remove default focus outline */ + outline: none; + /* Remove default focus outline */ } .drop:hover { - color: #333; /* Darker text on hover */ + color: #333; + /* Darker text on hover */ } .drop img { @@ -91,7 +96,8 @@ body { } .drop:hover img { - transform: rotate(90deg); /* Rotate icon on hover */ + transform: rotate(90deg); + /* Rotate icon on hover */ } /* Answer Styles */ @@ -104,7 +110,8 @@ body { padding: 10px; border-radius: 5px; transition: all 2s ease-in; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Light shadow for depth */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); + /* Light shadow for depth */ } .question:hover p { @@ -112,57 +119,6 @@ body { text-shadow: #0000003e 0px 3px 3px; } -.author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 15px; - position: fixed; - bottom: 0; - z-index: 100; -} - -.fotbar { - display: flex; - gap: -22px; -} - -.fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - font-size: 18px; - background-color: transparent; -} - -.author p { - color: white; - padding: 10px; - margin-right: 10px; - font-size: 20px; - font-weight: 600; -} - -.social-icons { - display: flex; - gap: 10px; - margin-right: 20px; -} - -.author a { - color: white !important; -} - -.social-icons a { - color: white; - text-decoration: none; - font-size: 20px; -} - /* Mobile Styles */ @media (max-width: 768px) { .faqcontainer { @@ -171,15 +127,18 @@ body { } h1 { - font-size: 1.5rem; /* Responsive font size */ + font-size: 1.5rem; + /* Responsive font size */ } .question { - font-size: 1.125rem; /* 18px */ + font-size: 1.125rem; + /* 18px */ } .question p { - font-size: 1rem; /* 16px */ + font-size: 1rem; + /* 16px */ } .back-to-home { @@ -192,10 +151,6 @@ body { .back-to-home img { width: 18px; } - - .author { - position: relative !important; - } } @media (max-width: 480px) { @@ -205,15 +160,18 @@ body { } h1 { - font-size: 1.25rem; /* Responsive font size */ + font-size: 1.25rem; + /* Responsive font size */ } .question { - font-size: 1rem; /* 16px */ + font-size: 1rem; + /* 16px */ } .question p { - font-size: 0.875rem; /* 14px */ + font-size: 0.875rem; + /* 14px */ } .back-to-home { @@ -226,41 +184,4 @@ body { .back-to-home img { width: 16px; } -} - -@media screen and (max-width: 1190px) { - .author a { - font-size: small; - color: white; - } -} - -@media screen and (max-width: 1065px) { - .author .fotbar { - display: grid; - } - - .author .fotbar a { - font-size: 14px; - } -} - -@media screen and (max-width: 550px) { - .author { - padding: 10px; - } - - .author p { - font-size: 16px; - padding: 0; - } - - .author .fotbar a { - font-size: 12px; - color: white; - } - - .author .social-icons a { - font-size: 15px; - } -} +} \ No newline at end of file diff --git a/styles/about.css b/styles/about.css index 60637ec..4032e06 100644 --- a/styles/about.css +++ b/styles/about.css @@ -1,101 +1,102 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); -body, html { - margin: 0; - padding: 0; - font-family: 'Arial', sans-serif; - background-color: #0a0c27; - color: #fff; - text-align: center; +body, +html { + margin: 0; + padding: 0; + font-family: 'Arial', sans-serif; + background-color: #0a0c27; + color: #fff; + text-align: center; } /* Hero section styles */ .header { - padding: 50px 20px; - position: relative; - overflow: hidden; + padding: 50px 20px; + position: relative; + overflow: hidden; } .hero { - max-width: 870px; - margin: 0px auto; + max-width: 870px; + margin: 0px auto; } .main-heading { - font-size: 3rem; - margin-bottom: 20px; - color: rgb(245, 153, 5); - margin-top: 370px; - text-shadow: 1px 1px 2px rgb(255, 98, 0), 0 0 1em rgba(47, 219, 253, 0.618), 0 0 0.2em rgba(47, 219, 253, 0.382); + font-size: 3rem; + margin-bottom: 20px; + color: rgb(245, 153, 5); + margin-top: 370px; + text-shadow: 1px 1px 2px rgb(255, 98, 0), 0 0 1em rgba(47, 219, 253, 0.618), 0 0 0.2em rgba(47, 219, 253, 0.382); } .intro-text { - font-size: 1.2rem; - margin-bottom: 20px; + font-size: 1.2rem; + margin-bottom: 20px; } .cta-button { - background-color: #007BFF; - color: #fff; - padding: 10px 15px; - border-radius: 15px; - text-decoration: none; - font-size: 1.2rem; - transition: background-color 0.2s ease-in, transform 0.2s ease; + background-color: #007BFF; + color: #fff; + padding: 10px 15px; + border-radius: 15px; + text-decoration: none; + font-size: 1.2rem; + transition: background-color 0.2s ease-in, transform 0.2s ease; } .cta-button:hover { - background-color: #0764c7; - color: rgb(255, 255, 170); - transform: translateY(2px) !important; + background-color: #0764c7; + color: rgb(255, 255, 170); + transform: translateY(2px) !important; } /* About section styles */ .about-section { - background-color: #0a0c27; + background-color: #0a0c27; } .about-content { - max-width: 1400px; - margin: 200px auto; + max-width: 1400px; + margin: 200px auto; } .section-heading { - font-size: 2.8rem; - margin-bottom: 30px; - text-shadow: 1px 1px 2px rgb(255, 98, 0), 0 0 1em rgba(47, 219, 253, 0.618), 0 0 0.2em rgba(47, 219, 253, 0.382); + font-size: 2.8rem; + margin-bottom: 30px; + text-shadow: 1px 1px 2px rgb(255, 98, 0), 0 0 1em rgba(47, 219, 253, 0.618), 0 0 0.2em rgba(47, 219, 253, 0.382); } .section-subtext { - font-size: 1.2rem; - margin-bottom: 40px; - color: #bbb; + font-size: 1.2rem; + margin-bottom: 40px; + color: #bbb; } .cards-container { - display: flex; - justify-content: space-around; - flex-wrap: wrap; + display: flex; + justify-content: space-around; + flex-wrap: wrap; } .about-card { - background-color: #101239; - border-radius: 10px; - padding: 20px; - width:25%; - min-width: 160px; + background-color: #101239; + border-radius: 10px; + padding: 20px; + width: 25%; + min-width: 160px; height: 370px; - margin: 20px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - color: #fff; - position: relative; - transition: all 0.3s ease-in-out; - overflow: hidden; + margin: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + color: #fff; + position: relative; + transition: all 0.3s ease-in-out; + overflow: hidden; } ul li { @@ -103,133 +104,59 @@ ul li { } .about-card:hover { - transform: scale(1.05) translateY(2px); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + transform: scale(1.05) translateY(2px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); background-color: #007bff82; - + } -.about-card:hover .card-title, .about-card:hover .card-icon { - text-shadow: 1px 1px 2px rgba(0, 26, 255, 0.564), 0 0 1em rgba(34, 93, 255, 0.91), 0 0 0.2em rgba(47, 47, 253, 0.63); - +.about-card:hover .card-title, +.about-card:hover .card-icon { + text-shadow: 1px 1px 2px rgba(0, 26, 255, 0.564), 0 0 1em rgba(34, 93, 255, 0.91), 0 0 0.2em rgba(47, 47, 253, 0.63); + } -.about-card:hover strong { +.about-card:hover strong { text-shadow: rgb(3, 172, 194) 1px 0 10px; } .card-content { - position: relative; - z-index: 1; + position: relative; + z-index: 1; } .card-icon { - font-size: 2rem; - margin-bottom: 10px; - color: #39a2d3; + font-size: 2rem; + margin-bottom: 10px; + color: #39a2d3; transition: all 0.3s ease-in; } .card-title { - font-size: 1.6rem; - margin-bottom: 12px; + font-size: 1.6rem; + margin-bottom: 12px; color: orange; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; transition: all 0.3s ease-in; } .card-description { - font-size: 1.2rem; - color: #ccc; -} - - - -.author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 15px; - position: sticky; - bottom: 0; - z-index: 1000; -} - -.author .fotbar { - display: flex; - gap: -10px; -} - -.author .fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - font-size: 18px; - background-color: transparent; + font-size: 1.2rem; + color: #ccc; } ::-webkit-scrollbar { display: none; } -.author p { - color: white; - padding: 10px; - margin-right: 10px; - font-size: 20px; - font-weight: 600; -} - -.author .social-icons { - display: flex; - gap: 10px; - margin-right: 20px; -} - -.author a { - color: white !important; -} - -.author .social-icons a { - color: white; - text-decoration: none; - font-size: 20px; -} - /* Responsive Styles */ @media screen and (max-width: 769px) { - .navbar { - flex-direction: column; - padding: 20px; - } - - .logo a { - font-size: 20px; - } - - .navlinks { - flex-direction: column; - align-items: center; - margin-top: 10px; - } - - .navlinks a { - font-size: 16px; - margin: 5px 0; - } - main{ + main { flex-direction: column; } } @media screen and (max-width: 450px) { - .logo a { - font-size: 18px; - } .functionalities, .how-to-play { @@ -237,130 +164,39 @@ ul li { } } -body > .about-header { +body>.about-header { width: 100%; position: relative; top: 100px; } -body > .about-header > h1 { +body>.about-header>h1 { font-size: 5rem; } -body > p { +body>p { position: relative; top: 100px; } -body > main { +body>main { position: relative; top: 100px; padding-bottom: 100px; } -.author { - position: fixed; - bottom: 0; -} - -.navbarr { - width: 100vw; -} - -.navbar-toggler { - background-color: transparent; - border: none; -} - -.navbar-toggler .toggler-icon { - width: 30px; - height: 2px; - background-color: #fff; - display: block; - margin: 5px 0; - position: relative; - -webkit-transition: all 0.3s ease-out 0s; - -moz-transition: all 0.3s ease-out 0s; - -ms-transition: all 0.3s ease-out 0s; - -o-transition: all 0.3s ease-out 0s; - transition: all 0.3s ease-out 0s; -} - -.nav-links { - letter-spacing: 4px; - display: flex; - justify-content: space-between; - align-items: center; - list-style: none; - width: 50%; - padding: 0; - color: white; - font-family: inherit; -} - -.nav-links li a, -.logo a { - color: white; -} - -button a { - background-color: transparent; -} - -.start { - padding: 10px 5px; - border-radius: 5px; -} - -@media screen and (max-width: 1190px) { - .author a { - margin-left: 13px; - } -} - @media screen and (max-width: 1065px) { - .author .fotbar { - display: grid; - } - - .author .fotbar a { - font-size: 14px; - } - - body > .about-header > h1 { + body>.about-header>h1 { font-size: 3rem; } } @media screen and (max-width: 550px) { - .author { - padding: 10px; - } - - .author p { - font-size: 16px; - padding: 0; - } - - .author .fotbar a { - font-size: 12px; - } - - .author .social-icons a { - font-size: 15px; - } - - body > p { + body>p { padding: 30px; } - body > .about-header > h1 { + body>.about-header>h1 { font-size: 2rem; } -} - -@media (max-width: 768px) { - .author { - position: relative !important; - } -} +} \ No newline at end of file diff --git a/styles/contributors.css b/styles/contributors.css index a05b8b7..c8f45cc 100644 --- a/styles/contributors.css +++ b/styles/contributors.css @@ -98,6 +98,7 @@ body { max-width: 1200px; margin: 0 auto; padding: 16px; + margin-top: 6rem; } .text-center { @@ -212,20 +213,21 @@ body { width: 100%; display: flex; justify-content: center; - } +} - .pagination-btns button.btn { +.pagination-btns button.btn { border-radius: 5px; outline: none; margin: 5px 10px; border: 1px solid rgb(146, 110, 110); width: 50px; height: 50px; - } +} - .pagination-btns button.btn, .pagination-btns button.btn i.bi { +.pagination-btns button.btn, +.pagination-btns button.btn i.bi { font-size: 2rem; - } +} .text-lg { font-size: 1.125rem; @@ -280,153 +282,8 @@ body { } } -@media screen and (max-width: 769px) { - .navbar { - flex-direction: column; - align-items: center; - margin-top: 0px !important; - } - - .logo a { - font-size: 20px; - } - - .logo { - margin-bottom: 10px; - } - - .navlinks { - flex-direction: column; - align-items: center; - gap: 10px; - } - - .navlinks a { - font-size: 16px; - margin: 10px 0; - } -} - @media screen and (max-width: 450px) { .contributor-card { max-width: 90%; } - - .navbar { - flex-direction: column; - padding: 5px !important; - } - - .logo a { - font-size: 20px; - } - - .navlinks { - flex-direction: column; - margin: 0; - gap: 4px !important; - font-size: 1px !important; - list-style: none; - } - - .navlinks a { - font-size: 16px; - margin: 10px 0; - } -} - -.author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 15px; - position: sticky; - bottom: 0; - z-index: 1000; -} - -.author .fotbar { - display: flex; - gap: -22px; -} - -.author .fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - font-size: 18px; - background-color: transparent; -} - -.author p { - color: white; - padding: 10px; - margin-right: 10px; - font-size: 20px; - font-weight: 600; -} - -.author .social-icons { - display: flex; - gap: 10px; - margin-right: 20px; -} - -.author a { - color: white !important; -} - -.author .social-icons a { - color: white; - text-decoration: none; - font-size: 20px; -} - -@media screen and (max-width: 1190px) { - .author a { - font-size: small; - } -} - -@media screen and (max-width: 1065px) { - .author .fotbar { - display: grid; - } - - .author .fotbar a { - font-size: 14px; - } -} - -@media screen and (max-width: 550px) { - .author { - padding: 10px; - } - - .author p { - font-size: 16px; - padding: 0; - } - - .author .fotbar a { - font-size: 12px; - } - - .author .social-icons a { - font-size: 15px; - } -} - -@media (max-width: 768px) { - .author { - position: relative !important; - } -} - -.scroll-to-top { - bottom: 90px; -} +} \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index adbdff1..b45a9f1 100644 --- a/styles/global.css +++ b/styles/global.css @@ -52,7 +52,7 @@ .scroll-to-top { position: fixed; - bottom: 30px; + bottom: 90px; left: 30px; width: 50px; height: 50px; @@ -64,7 +64,7 @@ border-radius: 50%; cursor: pointer; display: none; - z-index: 1000; + z-index: 99; transition: transform 0.3s ease, background-color 0.3s ease, bottom 0.3s ease; } @@ -85,23 +85,6 @@ transform: translateY(-5px); } -.back-button { - display: inline-block; - padding: 6px 16px; - background-color: rgb(255, 120, 30); - color: white; - text-decoration: none; - font-size: 16px; - border-radius: 5px; - border: none; - transition: background-color 0.3s, transform 0.3s; -} - -.back-button:hover { - background-color: rgb(236, 94, 0); - transform: scale(1.1); -} - /* Loader */ #loader { position: fixed; @@ -147,6 +130,7 @@ } @keyframes down { + 0%, 100% { transform: none; @@ -166,6 +150,7 @@ } @keyframes up { + 0%, 100% { transform: none; @@ -183,3 +168,389 @@ transform: translateY(-100%); } } + +/* Navbar */ +.navbarr { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1.25rem; + background-color: #333; + position: fixed; + top: 0; + left: 0; + width: 100vw; + z-index: 300; +} + +.logo a { + text-decoration: none; + font-size: 2.25rem; + font-weight: bolder; +} + +.nav-links { + list-style: none; + margin: 0; + padding: 0; + letter-spacing: 1px; + display: flex; + justify-content: space-between; + align-items: center; + color: #fff; + font-family: inherit; +} + +.nav-links li { + display: inline-flex; + padding: 1rem 1.25rem; + font-size: 1rem; +} + +.nav-links li a, +.logo a { + color: white; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease-in-out; +} + +.nav-links a:hover, +.logo a:hover { + color: #f39d2c; +} + +.nav-links li a i { + margin-right: 0.25rem; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.overlay { + width: 100%; + height: 100%; + position: absolute; + z-index: 1; + top: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + visibility: hidden; + transition: all 0.3s; +} + +.mobile-menu { + top: 0; + right: 0; + width: 70vw; + height: 100vh; + position: fixed; + z-index: 2000; + background: rgba(0, 0, 0, 0.9); + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + transform: translateX(100%); + transition: transform 0.3s; +} + +/* Screen more than 991px wide */ +@media ((min-width: 991px)) { + .mobile-menu { + display: none !important; + } + +} + +.mobile-menu a { + /* box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); */ + /* border-top: 3px solid #fff; */ + /* border-bottom: 1px solid #fff; */ + width: 100%; + text-align: center; + margin: 1rem 0; + padding: 1rem; + color: #fff; + text-decoration: none; + text-transform: uppercase; + position: relative; +} + +.mobile-menu a:hover { + color: #f39d2c; +} + +/* .mobile-menu a:after { + content: ""; + position: absolute; + bottom: 0; + left: 25%; + width: 0; + height: 2px; + background-color: white; + transition: width 0.3s; + } + + .mobile-menu a:hover:after { + width: 50%; + } + + .mobile-menu .active-link { + background: + linear-gradient(white 0 0) bottom/ 60% 2px no-repeat, + transparent; + } */ +/* .mobile-menu a:hover { + box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); + border-left: 3px solid #fff; + border-right: 3px solid #fff; + } */ + +.mobile-menu__trigger { + cursor: pointer; + content: ""; + position: absolute; + z-index: 3; + width: 3rem; + height: 3rem; + border-radius: 50%; + top: 2rem; + left: -5rem; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + /* -webkit-transform: rotateX(90deg); + transform: rotateX(180deg); */ +} + +.mobile-menu__trigger span { + display: block; + width: 50%; + height: 2px; + background: #fff; + position: relative; +} + +.mobile-menu__trigger span::before, +.mobile-menu__trigger span::after { + content: ""; + position: absolute; + width: 100%; + height: 2px; + /* left: 0; */ + background: #fff; + transition: all 0.3s; +} + +.mobile-menu__trigger span::before { + top: -7px; +} + +.mobile-menu__trigger span::after { + top: 7px; +} + +.mobile-menu__trigger:hover span::before { + width: 50%; + top: -3px; + left: 0; + transform: rotate(-30deg); +} + +.mobile-menu__trigger:hover span::after { + width: 50%; + top: 3px; + left: 0; + transform: rotate(30deg); +} + +.mobile-menu_open { + transform: translateX(0%); + box-shadow: 0 0 2rem #000; +} + +.mobile-menu_open+.overlay { + visibility: visible; + opacity: 1; +} + +.mobile-menu_open .mobile-menu__trigger span::before, +.mobile-menu_open .mobile-menu__trigger span::after { + right: 0; +} + +/* .mobile-menu_open .mobile-menu__trigger:hover span::before { + transform: rotate(30deg); + right: 0; + } + .mobile-menu_open .mobile-menu__trigger:hover span::after { + transform: rotate(-30deg); + } */ + +.mobile-menu_open .mobile-menu__trigger:hover span::before { + width: 50%; + top: -3px; + right: 0; + transform: rotate(30deg); + left: auto; +} + +.mobile-menu_open .mobile-menu__trigger:hover span::after { + width: 50%; + top: 3px; + right: 0; + transform: rotate(-30deg); + left: auto; +} + +@media screen and (min-width: 990px) { + .navbarr .nav-links { + display: flex !important; + } +} + +@media screen and (max-width: 990px) { + .hamburger { + display: inline; + z-index: 400; + } + + .logo a { + font-size: 30px; + } + + .nav-links { + position: absolute; + right: 1rem; + top: 3rem; + background-color: #333; + flex-direction: column; + padding: 10px; + align-items: center; + } + + .navbarr .nav-links { + display: none; + } + + +} + + +/* Footer */ + +.author { + width: 100vw; + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(to right, #00093c, #2d0b00); + color: #fff; + padding: 15px; + position: fixed; + bottom: 0; + left: 0; + z-index: 99; +} + +.author .fotbar { + display: flex; + gap: -10px; +} + +.author .fotbar a { + color: white; + text-decoration: none; + padding: 10px; + border-radius: 5px; + font-size: 18px; + background-color: transparent; +} + +.author p { + color: white; + padding: 10px; + margin-right: 10px; + font-size: 20px; + font-weight: 600; +} + +.author .social-icons { + display: flex; + gap: 10px; + margin-right: 20px; +} + +.author a { + color: white !important; +} + +.author .social-icons a { + color: white; + text-decoration: none; + font-size: 20px; +} + +/* Responsive Styles */ + +@media screen and (max-width: 450px) { + .author { + position: fixed; + bottom: 0; + } + + .author, + .author .fotbar { + max-width: 100vw !important; + flex-wrap: wrap !important; + } +} + +@media screen and (max-width: 1190px) { + .author a { + margin-left: 13px; + } +} + +@media screen and (max-width: 1065px) { + .author .fotbar { + display: grid; + } + + .author .fotbar a { + font-size: 14px; + } +} + +@media screen and (max-width: 550px) { + .author { + padding: 10px; + } + + .author p { + font-size: 16px; + padding: 0; + } + + .author .fotbar a { + font-size: 12px; + } + + .author .social-icons a { + font-size: 15px; + } +} + +@media (max-width: 768px) { + .author { + position: relative !important; + } +} \ No newline at end of file diff --git a/styles/howtoplay.css b/styles/howtoplay.css index f4af571..7b00257 100644 --- a/styles/howtoplay.css +++ b/styles/howtoplay.css @@ -7,31 +7,34 @@ body { } ::-webkit-scrollbar { - width: 14px; - } + width: 14px; +} - ::-webkit-scrollbar-track { - background: linear-gradient(180deg, #d5d5ff, #9d9dff); /* Background color */ - border-radius: 10px; - } +::-webkit-scrollbar-track { + background: linear-gradient(180deg, #d5d5ff, #9d9dff); + /* Background color */ + border-radius: 10px; +} - ::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, #8000ff, #ffcc00, #0066ff); - border-radius: 10px; - border: 1px solid #ccccf7; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); - } +::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, #8000ff, #ffcc00, #0066ff); + border-radius: 10px; + border: 1px solid #ccccf7; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +} - ::-webkit-scrollbar-thumb:hover { - background: linear-gradient(180deg, #7e14e9, #f8d420, #3388ff); - box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); - } +::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, #7e14e9, #f8d420, #3388ff); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); +} + +::-webkit-scrollbar-thumb:active { + background: linear-gradient(180deg, #6600cc, #ffbb00, #0044cc); + /* Darker gradient on active */ + box-shadow: 0 0 20px rgba(0, 0, 0, 0.9); + /* Intense glow effect */ +} - ::-webkit-scrollbar-thumb:active { - background: linear-gradient(180deg, #6600cc, #ffbb00, #0044cc); /* Darker gradient on active */ - box-shadow: 0 0 20px rgba(0, 0, 0, 0.9); /* Intense glow effect */ - } - .navbar-toggler { @@ -154,38 +157,6 @@ body { } } -.nav-links { - letter-spacing: 2px; - display: flex; - justify-content: space-between; - align-items: center; - list-style: none; - width: 100%; - padding: 0; - color: #fff; - font-family: inherit; -} - -.nav-links li a, -.logo a { - color: #fff; - text-decoration: none; -} - -button a { - background-color: transparent; -} - -.start { - padding: 10px 5px; - border-radius: 5px; - background-color: #f1c40f; - color: #fff; - text-transform: uppercase; - font-weight: bold; - text-decoration: none; -} - .tutorial-video { display: flex; justify-content: center; @@ -218,4 +189,4 @@ button a { text-align: center; text-shadow: 1px 1px 2px rgb(208, 178, 11), 0 0 1em rgb(238, 255, 0), 0 0 0.2em rgb(255, 204, 0); -} +} \ No newline at end of file diff --git a/styles/index.style.css b/styles/index.style.css index 5e8f3ff..fc5c999 100644 --- a/styles/index.style.css +++ b/styles/index.style.css @@ -111,7 +111,7 @@ input:out-of-range { border: 5px solid red; } -input:out-of-range + .error::after { +input:out-of-range+.error::after { content: "Please enter value between 5 and 30"; font-size: 12px; font-style: italic; @@ -119,7 +119,7 @@ input:out-of-range + .error::after { color: hsl(0, 100%, 40%); } -input:out-of-range + .player::after { +input:out-of-range+.player::after { content: "Please enter value between 2 and 6"; font-size: 12px; font-style: italic; @@ -127,84 +127,6 @@ input:out-of-range + .player::after { color: hsl(0, 100%, 40%); } -/* .author { - position: sticky; - bottom: 0; - text-align: center; - padding: .3rem 0; - width: 100%; - font-size: 1.2rem; - background-color: white; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); -} */ -.author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - /* bottom: 0; */ - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 10px; -} - -/* .author p{ - align-items: center; - display: inline-block; - font-weight: 600; - font-size: 20px; -} */ - -.author .fotbar { - display: flex; - gap: 20px; -} - -.author .fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - background-color: transparent; -} - -.author p { - color: white; - padding: 10px; - margin-right: 10px; - font-size: 20px; - font-weight: 600; -} - -.author .social-icons { - display: flex; - gap: 10px; - margin-right: 20px; -} - -.author .social-icons a { - color: white; - text-decoration: none; - font-size: 20px; -} - -@media screen and (max-width: 1190px) { - .author a { - font-size: small; - } -} - -@media screen and (max-width: 1065px) { - .author .fotbar { - gap: 5px; - } - - .author { - flex-direction: column; - flex-wrap: wrap; - } -} - .difficulty { display: flex; align-items: center; @@ -255,7 +177,7 @@ input:out-of-range + .player::after { opacity: 1; } -.difficulty:hover > :not(.d-type:hover) { +.difficulty:hover> :not(.d-type:hover) { transition: 300ms; filter: blur(1px); transform: scale(0.95, 0.95); @@ -298,82 +220,90 @@ input:out-of-range + .player::after { background-color: grey; } -p,h3,h2{ +p, +h3, +h2 { font-family: 'Press Start 2P', cursive !important; } /* Modal styles */ .modal { -display: none; -position: fixed; -z-index: 1000; -left: 0; -top: 0; -width: 100%; -height: 150%; -overflow: auto; -background-color: rgba(0, 0, 0, 0.4); -backdrop-filter: blur(5px); + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 150%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(5px); } .modal-content { -background-color: white; -margin: 15% auto; -padding: 20px; -border-radius: 10px; -width: 50%; -max-width: 650px; -box-shadow: 0 5px 15px rgba(0,0,0,0.3); -animation: fadeIn 0.5s; + background-color: white; + margin: 15% auto; + padding: 20px; + border-radius: 10px; + width: 50%; + max-width: 650px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + animation: fadeIn 0.5s; } .close { -color: #aaa; -float: right; -font-size: 28px; -font-weight: bold; + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; } .close:hover, .close:focus { -color: black; -text-decoration: none; -cursor: pointer; + color: black; + text-decoration: none; + cursor: pointer; } form { -display: flex; -flex-direction: column; -gap: 15px; + display: flex; + flex-direction: column; + gap: 15px; } .form-group { -display: flex; -flex-direction: column; + display: flex; + flex-direction: column; } .form-group label { -margin-bottom: 5px; -font-weight: bold; -color: white; -text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.685); + margin-bottom: 5px; + font-weight: bold; + color: white; + text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.685); } + .form-group-1 { -display: flex; + display: flex; } .submitbtn { -display: flex; -justify-content: space-between; + display: flex; + justify-content: space-between; } @keyframes fadeIn { -from { opacity: 0; } -to { opacity: 1; } + from { + opacity: 0; + } + + to { + opacity: 1; + } } @@ -406,7 +336,7 @@ to { opacity: 1; } animation: formAppear 0.5s ease-out; } -.right-background{ +.right-background { font-family: 'Press Start 2P', cursive; } @@ -414,8 +344,9 @@ to { opacity: 1; } from { opacity: 0; transform: scale(0.8); - + } + to { opacity: 1; transform: scale(1); @@ -434,9 +365,9 @@ to { opacity: 1; } font-size: 27px; color: #fffefe; margin: 0; - font-family:Tahoma, Geneva, Verdana, sans-serif; + font-family: Tahoma, Geneva, Verdana, sans-serif; text-align: center; - text-shadow: 2px 2px 2px rgba(0, 20, 123, 0.87),2px 2px 4px rgba(157, 0, 255, 0.81), 2px 6px 7px rgba(248, 112, 255, 0.81); + text-shadow: 2px 2px 2px rgba(0, 20, 123, 0.87), 2px 2px 4px rgba(157, 0, 255, 0.81), 2px 6px 7px rgba(248, 112, 255, 0.81); } .close-button { @@ -445,8 +376,8 @@ to { opacity: 1; } cursor: pointer; transition: transform 0.3s ease; position: relative; - bottom:16px; - left:6px + bottom: 16px; + left: 6px } .close-button:hover { @@ -458,9 +389,9 @@ to { opacity: 1; } /* border-radius: 15px; */ padding: 15px; /* margin-bottom: 0px; */ - max-width:400px; + max-width: 400px; width: 100%; - + /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */ } @@ -495,19 +426,19 @@ to { opacity: 1; } width: 80%; } -#star-2:checked ~ .content .emojis .slideImg { +#star-2:checked~.content .emojis .slideImg { margin-top: -135px; } -#star-3:checked ~ .content .emojis .slideImg { +#star-3:checked~.content .emojis .slideImg { margin-top: -270px; } -#star-4:checked ~ .content .emojis .slideImg { +#star-4:checked~.content .emojis .slideImg { margin-top: -405px; } -#star-5:checked ~ .content .emojis .slideImg { +#star-5:checked~.content .emojis .slideImg { margin-top: -540px; } @@ -528,36 +459,36 @@ to { opacity: 1; } transform: scale(1.2) rotate(15deg); } -#star-1:hover ~ .content .stars .star-1, -#star-1:checked ~ .content .stars .star-1, -#star-2:hover ~ .content .stars .star-1, -#star-2:hover ~ .content .stars .star-2, -#star-2:checked ~ .content .stars .star-1, -#star-2:checked ~ .content .stars .star-2, -#star-3:hover ~ .content .stars .star-1, -#star-3:hover ~ .content .stars .star-2, -#star-3:hover ~ .content .stars .star-3, -#star-3:checked ~ .content .stars .star-1, -#star-3:checked ~ .content .stars .star-2, -#star-3:checked ~ .content .stars .star-3, -#star-4:hover ~ .content .stars .star-1, -#star-4:hover ~ .content .stars .star-2, -#star-4:hover ~ .content .stars .star-3, -#star-4:hover ~ .content .stars .star-4, -#star-4:checked ~ .content .stars .star-1, -#star-4:checked ~ .content .stars .star-2, -#star-4:checked ~ .content .stars .star-3, -#star-4:checked ~ .content .stars .star-4, -#star-5:hover ~ .content .stars .star-1, -#star-5:hover ~ .content .stars .star-2, -#star-5:hover ~ .content .stars .star-3, -#star-5:hover ~ .content .stars .star-4, -#star-5:hover ~ .content .stars .star-5, -#star-5:checked ~ .content .stars .star-1, -#star-5:checked ~ .content .stars .star-2, -#star-5:checked ~ .content .stars .star-3, -#star-5:checked ~ .content .stars .star-4, -#star-5:checked ~ .content .stars .star-5 { +#star-1:hover~.content .stars .star-1, +#star-1:checked~.content .stars .star-1, +#star-2:hover~.content .stars .star-1, +#star-2:hover~.content .stars .star-2, +#star-2:checked~.content .stars .star-1, +#star-2:checked~.content .stars .star-2, +#star-3:hover~.content .stars .star-1, +#star-3:hover~.content .stars .star-2, +#star-3:hover~.content .stars .star-3, +#star-3:checked~.content .stars .star-1, +#star-3:checked~.content .stars .star-2, +#star-3:checked~.content .stars .star-3, +#star-4:hover~.content .stars .star-1, +#star-4:hover~.content .stars .star-2, +#star-4:hover~.content .stars .star-3, +#star-4:hover~.content .stars .star-4, +#star-4:checked~.content .stars .star-1, +#star-4:checked~.content .stars .star-2, +#star-4:checked~.content .stars .star-3, +#star-4:checked~.content .stars .star-4, +#star-5:hover~.content .stars .star-1, +#star-5:hover~.content .stars .star-2, +#star-5:hover~.content .stars .star-3, +#star-5:hover~.content .stars .star-4, +#star-5:hover~.content .stars .star-5, +#star-5:checked~.content .stars .star-1, +#star-5:checked~.content .stars .star-2, +#star-5:checked~.content .stars .star-3, +#star-5:checked~.content .stars .star-4, +#star-5:checked~.content .stars .star-5 { color: gold; text-shadow: 0 0 5px #ff8800; animation: starPulse 0.5s infinite alternate; @@ -567,6 +498,7 @@ to { opacity: 1; } from { transform: scale(1); } + to { transform: scale(1.1); } @@ -574,141 +506,158 @@ to { opacity: 1; } /* General reset for margin and padding */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - font-family: Arial, sans-serif; + font-family: Arial, sans-serif; } /* Footer Styling */ footer { - background-color: #222; - color: #fff; - padding: 20px 0; + background-color: #222; + color: #fff; + padding: 20px 0; } .footer-container { - max-width: 1200px; - margin: 0 auto; - padding: 0 15px; - text-align: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; + text-align: center; } + .social-icons { - display: flex; - justify-content: flex-end; /* Aligns the icons to the right */ - gap: 10px; /* Adds space between the icons */ + display: flex; + justify-content: flex-end; + /* Aligns the icons to the right */ + gap: 10px; + /* Adds space between the icons */ } .social-icons a { - color: inherit; /* Ensures the icon color matches the current text color */ - text-decoration: none; /* Removes the underline from the links */ + color: inherit; + /* Ensures the icon color matches the current text color */ + text-decoration: none; + /* Removes the underline from the links */ } + #copyright { - margin-top: 20px; /* Adjust the value as needed to move it down */ - text-align: center; /* Center-align the text if desired */ - font-size: 14px; /* Optional: Adjust the font size */ + margin-top: 20px; + /* Adjust the value as needed to move it down */ + text-align: center; + /* Center-align the text if desired */ + font-size: 14px; + /* Optional: Adjust the font size */ } .footer-links { - list-style: none; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 20px; + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; } .footer-links li { - margin: 10px 0; + margin: 10px 0; } .footer-links a { - color: #fff; - text-decoration: none; - font-size: 16px; - transition: color 0.3s ease; + color: #fff; + text-decoration: none; + font-size: 16px; + transition: color 0.3s ease; } .footer-links a:hover { - color: #ffd700; /* Gold color on hover */ + color: #ffd700; + /* Gold color on hover */ } - -} - - body { - font-family: Arial, sans-serif; + font-family: Arial, sans-serif; } /* Footer Styling */ footer { - background-color: #222; - color: #fff; - padding: 20px 0; + background-color: #222; + color: #fff; + padding: 20px 0; } .footer-container { - max-width: 1200px; - margin: 0 auto; - padding: 0 15px; - text-align: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; + text-align: center; } + .social-icons { - display: flex; - justify-content: flex-end; /* Aligns the icons to the right */ - gap: 10px; /* Adds space between the icons */ + display: flex; + justify-content: flex-end; + /* Aligns the icons to the right */ + gap: 10px; + /* Adds space between the icons */ } .social-icons a { - color: inherit; /* Ensures the icon color matches the current text color */ - text-decoration: none; /* Removes the underline from the links */ + color: inherit; + /* Ensures the icon color matches the current text color */ + text-decoration: none; + /* Removes the underline from the links */ } + #copyright { - margin-top: 20px; /* Adjust the value as needed to move it down */ - text-align: center; /* Center-align the text if desired */ - font-size: 14px; /* Optional: Adjust the font size */ + margin-top: 20px; + /* Adjust the value as needed to move it down */ + text-align: center; + /* Center-align the text if desired */ + font-size: 14px; + /* Optional: Adjust the font size */ } .footer-links { - list-style: none; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 20px; + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; } .footer-links li { - margin: 10px 0; + margin: 10px 0; } .footer-links a { - color: #fff; - text-decoration: none; - font-size: 16px; - transition: color 0.3s ease; + color: #fff; + text-decoration: none; + font-size: 16px; + transition: color 0.3s ease; } .footer-links a:hover { - color: #ffd700; /* Gold color on hover */ + color: #ffd700; + /* Gold color on hover */ } /* Responsive Design */ @media (max-width: 768px) { - .footer-links { - flex-direction: column; - gap: 10px; - } + .footer-links { + flex-direction: column; + gap: 10px; + } -.footer span { - font-size: 18px; - font-weight: 600; - color: #eeeeee; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - text-shadow: 1px 1px 2px rgb(48, 158, 209), 0 0 1em rgb(7, 0, 109), 0 0 0.4em rgb(7, 0, 109); + .footer span { + font-size: 18px; + font-weight: 600; + color: #eeeeee; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + text-shadow: 1px 1px 2px rgb(48, 158, 209), 0 0 1em rgb(7, 0, 109), 0 0 0.4em rgb(7, 0, 109); + } } input[type="radio"] { @@ -728,6 +677,7 @@ input[type="email"] { font-size: 14px; transition: all 0.3s ease; } + textarea { background-color: #fff; border: 2px solid #0168ce; @@ -746,7 +696,8 @@ input[type="email"]:focus { border-color: #00438e; outline: none; } -.buttons { + +.buttons { /* background: linear-gradient(45deg, #4ecdc4, #45b7aa); */ background: linear-gradient(45deg, #cd4e4e, #fe165f); color: #fff; @@ -758,7 +709,7 @@ input[type="email"]:focus { font-size: 16px; font-weight: bold; transition: all 0.3s ease; - + } .buttons:hover { @@ -809,43 +760,43 @@ input[type="email"]:focus { content: "0 out of 5"; } -#star-1:checked ~ .footer .text::before { +#star-1:checked~.footer .text::before { content: "I just hate it 😣"; } -#star-1:checked ~ .footer .numb::before { +#star-1:checked~.footer .numb::before { content: "1 out of 5"; } -#star-2:checked ~ .footer .text::before { +#star-2:checked~.footer .text::before { content: "I don't like it 😓"; } -#star-2:checked ~ .footer .numb::before { +#star-2:checked~.footer .numb::before { content: "2 out of 5"; } -#star-3:checked ~ .footer .text::before { +#star-3:checked~.footer .text::before { content: "This is awesome 😄"; } -#star-3:checked ~ .footer .numb::before { +#star-3:checked~.footer .numb::before { content: "3 out of 5"; } -#star-4:checked ~ .footer .text::before { +#star-4:checked~.footer .text::before { content: "I just like it 😃"; } -#star-4:checked ~ .footer .numb::before { +#star-4:checked~.footer .numb::before { content: "4 out of 5"; } -#star-5:checked ~ .footer .text::before { +#star-5:checked~.footer .text::before { content: "I just love it ❤️"; } -#star-5:checked ~ .footer .numb::before { +#star-5:checked~.footer .numb::before { content: "5 out of 5"; } @@ -879,6 +830,7 @@ input[type="email"]:focus { max-width: 100vw !important; overflow-x: hidden !important; } + .settings { max-width: 100vw !important; } @@ -901,7 +853,7 @@ input[type="email"]:focus { .heading { width: max-content; - font-size: 1.2rem; + font-size: 1.2rem; } button.d-type { @@ -913,7 +865,8 @@ input[type="email"]:focus { width: 100% !important; flex-wrap: wrap !important; } - .button-container button{ + + .button-container button { width: 100% !important; } @@ -921,10 +874,11 @@ input[type="email"]:focus { margin-bottom: 300px !important; } - .author, .author .fotbar { - max-width: 100vw !important; - flex-wrap: wrap !important; + .author { + position: fixed !important; + bottom: 0 !important; } + } .button1 { @@ -968,19 +922,23 @@ input[type="email"]:focus { gap: 30px; top: 25vh; } + body { overflow: visible !important; } + .settings .form { padding: 1rem 6rem; margin: 4px 13rem; left: 15%; position: relative; } + .settings { top: -33px; } } + #copyright { color: white; } @@ -1032,5 +990,4 @@ input[type="email"]:focus { .disabled { opacity: 0.75; -} - +} \ No newline at end of file diff --git a/styles/mainstyle.css b/styles/mainstyle.css index e30494b..08670e5 100644 --- a/styles/mainstyle.css +++ b/styles/mainstyle.css @@ -26,21 +26,6 @@ a { color: #333; } -.author { - position: fixed; - bottom: 0; - left: 0; - text-align: center; - width: 100%; - color: #000; - background-color: white; - transition: all 0.3s ease; -} - -.author:hover { - color: Black; -} - /* .setting p a{ margin-top: 0.1rem; border-radius: 4px; @@ -53,10 +38,6 @@ a { text-align: center; } */ -.author a { - color: black; -} - .board { background: #fcfcfc; display: grid; @@ -68,9 +49,6 @@ a { .board { width: 80vw; } - .navbarr .nav-links { - display: none; - } } .box { @@ -603,12 +581,10 @@ select { margin-top: 10%; flex-direction: row; gap: 1rem; - background: linear-gradient( - 135deg, - rgba(251, 150, 26, 0.979), - rgba(255, 187, 55, 0.979), - rgba(252, 132, 72, 0.979) - ); + background: linear-gradient(135deg, + rgba(251, 150, 26, 0.979), + rgba(255, 187, 55, 0.979), + rgba(252, 132, 72, 0.979)); border-radius: 10px; padding: 10px 20px; box-shadow: 0px 5px 15px rgba(6, 6, 6, 0.829); @@ -824,122 +800,6 @@ input[type="number"] { } } -.navbarr { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 20px; - background-color: #333; - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 300; -} - -.logo a { - text-decoration: none; - font-size: 35px; - font-weight: bolder; - color: rgb(23, 13, 13); -} - -.nav-links { - list-style: none; - /* Removes default bullet points from list items */ - margin: 0; - padding: 0; -} - -.nav-links li { - display: inline-flex; - margin-right: 20px; - font-size: 18px; -} - -.nav-links a { - text-decoration: none; - /* Removes underline from links */ - color: black; - font-weight: bold; - transition: color 0.3s ease-in-out; -} - -.nav-links a:hover { - color: #f39d2c; -} - -.logo a:hover { - color: yellow; -} - -button a { - background-color: #fb946f; - text-shadow: none; - color: white; - font-weight: bold; - font-size: 18px; - padding: 5px 10px; - border: none; - border-radius: 5px; - cursor: pointer; -} - -@media screen and (max-width: 1141px) { - .navbar { - margin-top: 20px; - flex-direction: column; - } - - .logo a { - font-size: 25px; - } - - .nav-links li a { - font-size: 16px; - } - - .logo { - margin-bottom: 10px; - } - - .nav-links { - text-align: center; - display: flex; - } - - .nav-links li { - margin: 10px 0; - } - - .author { - font-size: medium; - } - - .settings a { - font-size: small; - } -} - -.hamburger { - display: none; - color: white; - font-size: x-large; - margin-right: 10px; -} - -/* .navbarr .nav-links { - display: none; -} */ - -.navbar-toggler { - display: inline !important; -} - -.navbar-toggler { - display: none; -} - .popup { position: fixed; top: 54%; @@ -970,4 +830,4 @@ button a { .hidden { display: none; -} +} \ No newline at end of file diff --git a/styles/navbar.css b/styles/navbar.css deleted file mode 100644 index d2d227e..0000000 --- a/styles/navbar.css +++ /dev/null @@ -1,334 +0,0 @@ - -.whole-background { - display: flex; - margin-top: 10%; - flex-direction: row; - gap: 1rem; - background-color: rgba(231, 181, 55, 0.979); - border-radius: 10px; - padding: 10px 20px; - box-shadow: none; - /* Change the upper one to 0px 5px 15px rgba(6, 6, 6, 0.829) */ -} - -.navbarr { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 20px; - background-color: #333; - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 300; -} - -.logo a { - text-decoration: none; - font-size: 35px; - font-weight: bolder; -} - -.nav-links { - list-style: none; - /* Removes default bullet points from list items */ - margin: 0; - padding: 0; -} - -.nav-links li { - display: inline-flex; - margin-right: 20px; - font-size: 18px; -} - -.nav-links a { - text-decoration: none; - /* Removes underline from links */ - color: black; - font-weight: bold; - transition: color 0.3s ease-in-out; -} - -.nav-links a:hover { - color: #f39d2c; -} - -.logo a:hover { - color: yellow; -} - -button a { - background-color: #fb946f; - text-shadow: none; - color: white; - font-weight: bold; - font-size: 18px; - padding: 5px 10px; - border: none; - border-radius: 5px; - cursor: pointer; -} - -.navbarr { - width: 100vw; - } - - .navbar-toggler { - background-color: transparent; - border: none; - } - - .navbar-toggler .toggler-icon { - width: 30px; - height: 2px; - background-color: #fff; - display: block; - margin: 5px 0; - position: relative; - -webkit-transition: all 0.3s ease-out 0s; - -moz-transition: all 0.3s ease-out 0s; - -ms-transition: all 0.3s ease-out 0s; - -o-transition: all 0.3s ease-out 0s; - transition: all 0.3s ease-out 0s; - } - - - .nav-links { - letter-spacing: 4px; - display: flex; - justify-content: space-between; - align-items: center; - list-style: none; - width: 70%; - padding: 0; - color: white; - font-family: inherit; - } - - .nav-links li a, - .logo a { - color: white; - } - - button a { - background-color: transparent; - } - - .start { - padding: 10px 5px; - border-radius: 5px; - } - - - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -.overlay { - width: 100%; - height: 100%; - position: absolute; - z-index: 1; - top: 0; - right: 0; - background-color: rgba(0,0,0,0.5); - opacity: 0; - visibility: hidden; - transition: all 0.3s; -} -.mobile-menu { - top: 0; - right: 0; - width: 70vw; - height: 100vh; - position: fixed; - z-index: 2; - background: rgba(0,0,0,0.9); - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - transform: translateX(100%); - transition: transform 0.3s; -} - -/* Screen more than 991px wide */ -@media ((min-width: 991px)) { - .mobile-menu { - display: none !important; - } - -} - -.mobile-menu a { - /* box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); */ - /* border-top: 3px solid #fff; */ - /* border-bottom: 1px solid #fff; */ - width: 100%; - text-align: center; - margin: 1rem 0; - padding: 1rem; - color: #fff; - text-decoration: none; - text-transform: uppercase; - position: relative; -} - -.mobile-menu a:hover { - color: #f39d2c; -} - -/* .mobile-menu a:after { - content: ""; - position: absolute; - bottom: 0; - left: 25%; - width: 0; - height: 2px; - background-color: white; - transition: width 0.3s; -} - -.mobile-menu a:hover:after { - width: 50%; -} - -.mobile-menu .active-link { - background: - linear-gradient(white 0 0) bottom/ 60% 2px no-repeat, - transparent; -} */ -/* .mobile-menu a:hover { - box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); - border-left: 3px solid #fff; - border-right: 3px solid #fff; -} */ -.mobile-menu__trigger { - cursor: pointer; - content: ""; - position: absolute; - z-index: 3; - width: 3rem; - height: 3rem; - border-radius: 50%; - top: 2rem; - left: -5rem; - background: rgba(0,0,0,0.5); - display: flex; - justify-content: center; - align-items: center; - /* -webkit-transform: rotateX(90deg); - transform: rotateX(180deg); */ -} -.mobile-menu__trigger span { - display: block; - width: 50%; - height: 2px; - background: #fff; - position: relative; -} -.mobile-menu__trigger span::before, -.mobile-menu__trigger span::after { - content: ""; - position: absolute; - width: 100%; - height: 2px; - /* left: 0; */ - background: #fff; - transition: all 0.3s; -} -.mobile-menu__trigger span::before { - top: -7px; -} -.mobile-menu__trigger span::after { - top: 7px; -} -.mobile-menu__trigger:hover span::before { - width: 50%; - top: -3px; - left: 0; - transform: rotate(-30deg); -} -.mobile-menu__trigger:hover span::after { - width: 50%; - top: 3px; - left: 0; - transform: rotate(30deg); -} -.mobile-menu_open { - transform: translateX(0%); - box-shadow: 0 0 2rem #000; -} -.mobile-menu_open+.overlay { - visibility: visible; - opacity: 1; -} -.mobile-menu_open .mobile-menu__trigger span::before, -.mobile-menu_open .mobile-menu__trigger span::after { - right: 0; -} -/* .mobile-menu_open .mobile-menu__trigger:hover span::before { - transform: rotate(30deg); - right: 0; -} -.mobile-menu_open .mobile-menu__trigger:hover span::after { - transform: rotate(-30deg); -} */ - -.mobile-menu_open .mobile-menu__trigger:hover span::before { - width: 50%; - top: -3px; - right: 0; - transform: rotate(30deg); - left: auto; -} -.mobile-menu_open .mobile-menu__trigger:hover span::after { - width: 50%; - top: 3px; - right: 0; - transform: rotate(-30deg); - left: auto; -} - -@media screen and (min-width: 990px) { - .navbarr .nav-links { - display: flex !important; - } -} - -@media screen and (max-width: 990px) { - .hamburger { - display: inline; - z-index: 400; - } - - .logo a { - font-size: 30px; - } - - .nav-links { - position: absolute; - right: 1rem; - top: 3rem; - background-color: #333; - flex-direction: column; - padding: 10px; - align-items: center; - } - - .navbarr .nav-links { - display: none; - } - - .navbar-toggler { - display: inline !important; - } - -} \ No newline at end of file diff --git a/styles/pages.footer.css b/styles/pages.footer.css index d892ff4..f31a888 100644 --- a/styles/pages.footer.css +++ b/styles/pages.footer.css @@ -16,7 +16,7 @@ body { .container { max-width: 900px; - margin: 2rem auto; + margin: 6rem auto; padding: 2rem; background-color: rgb(66, 61, 142); border-radius: 20px; @@ -94,10 +94,12 @@ body { 0% { transform: translateY(0px) rotate(-3deg); } + 50% { transform: translateY(-10px) rotate(-3deg); } + 100% { transform: translateY(0px) rotate(-3deg); } -} +} \ No newline at end of file