From 1ade7528c890be799eca5c130c46278f3802e797 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Fri, 9 Aug 2024 23:54:40 +0530 Subject: [PATCH 1/5] Alligned Navbar --- index.html | 1 - styles/navbar.css | 569 ++++++++++++++++++++++------------------------ 2 files changed, 277 insertions(+), 293 deletions(-) diff --git a/index.html b/index.html index a5c76fb..330f4da 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,6 @@
  • About Us
  • FAQs
  • Contributors
    • -
  • Let's Go
    • diff --git a/styles/navbar.css b/styles/navbar.css index 57d57af..5f1e77a 100644 --- a/styles/navbar.css +++ b/styles/navbar.css @@ -1,334 +1,319 @@ - -.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) */ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background: #000; + color: #fff; } .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; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + background-color: #222; } -.logo a { - text-decoration: none; - font-size: 35px; - font-weight: bolder; +.navbarr .logo a { + text-decoration: none; + color: #fff; + font-size: 1.5em; } -.nav-links { +.navbarr .nav-links { + display: flex; list-style: none; - /* Removes default bullet points from list items */ +} + +.navbarr .nav-links li a { + text-decoration: none; + color: #fff; + margin-left: 20px; + font-size: 1em; + display: flex; + align-items: center; +} + +.navbarr .nav-links li a i { + margin-right: 5px; +} + +.navbarr .hamburger { + display: none; + cursor: pointer; +} + +.sticky-button { + position: fixed; + bottom: 10px; + right: 10px; + padding: 10px 20px; + background-color: #444; + color: #fff; + border: none; + cursor: pointer; + border-radius: 5px; +} + +.feed-bg { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: rgba(0, 0, 0, 0.5); +} + +.form-container { + max-width: 600px; + padding: 20px; + background: #222; + border-radius: 10px; +} + +.form-content { + display: flex; + flex-direction: column; + gap: 15px; +} + +.sub { + display: flex; + justify-content: space-between; + align-items: center; +} + +.sub h5 { + margin: 0; + font-size: 1.5em; + color: #fff; +} + +.close-button { + background: none; + border: none; + color: #fff; + font-size: 1.5em; + cursor: pointer; +} + +.wrapper { + display: flex; + flex-direction: column; + gap: 15px; +} + +.stars label { + color: #444; + font-size: 1.5em; + cursor: pointer; +} + +.stars input:checked ~ label { + color: #f90; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 5px; +} + +.form-group-1 { + display: flex; + justify-content: space-between; + gap: 15px; +} + +.form-group-1 .form-group { + flex: 1; +} + +textarea { + width: 100%; + resize: none; + padding: 10px; + background: #333; + color: #fff; + border: 1px solid #444; + border-radius: 5px; +} + +.submitbtn { + display: flex; + justify-content: space-between; + gap: 10px; +} + +.submitbtn .buttons { + padding: 10px 20px; + background-color: #444; + color: #fff; + border: none; + cursor: pointer; + border-radius: 5px; +} + +.heading { + font-size: 2em; + text-align: center; margin: 0; - padding: 0; } -.nav-links li { - display: inline-flex; - margin-right: 20px; - font-size: 18px; +.instructions-heading { + text-align: center; + font-size: 1.2em; + margin-top: 10px; } -.nav-links a { +.instructions { + font-size: 1em; + text-align: center; +} + +.button { + display: block; + width: max-content; + margin: 10px auto; + padding: 10px 20px; + background: #555; + color: #fff; text-decoration: none; - /* Removes underline from links */ - color: black; - font-weight: bold; - transition: color 0.3s ease-in-out; + border-radius: 5px; + text-align: center; } -.nav-links a:hover { - color: #f39d2c; +.right-background { + display: flex; + flex-direction: column; + gap: 15px; } -.logo a:hover { - color: yellow; +.form-item { + display: flex; + flex-direction: column; + gap: 5px; } -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; +.form-item select, +.form-item input { + padding: 10px; + background: #333; + color: #fff; + border: 1px solid #444; + border-radius: 5px; } -.navbarr { - width: 100vw; - } +.difficulty { + display: flex; + justify-content: space-between; +} - .navbar-toggler { - background-color: transparent; - border: none; - } +.d-type { + padding: 10px 20px; + background-color: #444; + color: #fff; + border: none; + cursor: pointer; + border-radius: 5px; +} - .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; - } +.d-type.active { + background-color: #f90; +} +.button-container { + display: flex; + gap: 10px; +} - .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; - } +.button1 { + flex: 1; + padding: 10px; + background-color: #444; + color: #fff; + text-align: center; + text-decoration: none; + border-radius: 5px; + cursor: pointer; +} - .nav-links li a, - .logo a { - color: white; - } +.button1:hover { + background-color: #555; +} - button a { - background-color: transparent; - } +.fotbar { + display: flex; + flex-direction: column; + gap: 10px; + text-align: center; + margin-bottom: 10px; +} - .start { - padding: 10px 5px; - border-radius: 5px; - } +.fotbar a { + text-decoration: none; + color: #fff; + font-size: 1em; + display: flex; + align-items: center; + justify-content: center; + gap: 5px; +} +.socials { + display: flex; + justify-content: center; + gap: 15px; +} +.socials a { + text-decoration: none; + color: #fff; + font-size: 1em; + display: flex; + align-items: center; + gap: 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; - } +.popup.hidden { + display: none; } -@media screen and (max-width: 990px) { - .hamburger { - display: inline; - z-index: 400; - } +.popup-content { + max-width: 400px; + padding: 20px; + background-color: #333; + border-radius: 5px; + text-align: center; +} - .logo a { - font-size: 30px; +@media (max-width: 768px) { + .navbarr .nav-links { + display: none; + flex-direction: column; + background-color: #222; + position: absolute; + top: 60px; + left: 0; + width: 100%; + z-index: 1000; } - .nav-links { - position: absolute; - right: 1rem; - top: 3rem; - background-color: #333; - flex-direction: column; - padding: 10px; - align-items: center; + .navbarr .nav-links li { + text-align: center; + padding: 10px 0; + width: 100%; } +.logo a { + text-decoration: none; + color: #fff; + font-size: 2em; /* Increase this value to make the font size larger */ +} - .navbarr .nav-links { - display: none; + .navbarr .hamburger { + display: block; } - .navbar-toggler { - display: inline !important; + .navbarr .nav-links.active { + display: flex; } - -} \ No newline at end of file +} From 0c7ab2885795224213b0bbd2da91eed9964be8ee Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Sat, 10 Aug 2024 00:02:09 +0530 Subject: [PATCH 2/5] Alligned Navbar --- index.html | 1 + styles/navbar.css | 1 + 2 files changed, 2 insertions(+) diff --git a/index.html b/index.html index 330f4da..9d5f910 100644 --- a/index.html +++ b/index.html @@ -40,6 +40,7 @@ +
    • Home
    • About Us
      • diff --git a/styles/navbar.css b/styles/navbar.css index 5f1e77a..e10c0bd 100644 --- a/styles/navbar.css +++ b/styles/navbar.css @@ -298,6 +298,7 @@ textarea { z-index: 1000; } + .navbarr .nav-links li { text-align: center; padding: 10px 0; From 071fc687642ced01c51048afb71277a2b963bfc1 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa Date: Sat, 10 Aug 2024 00:12:31 +0530 Subject: [PATCH 3/5] Alligned Navbar --- index.html | 2 +- pages/testimonials.html | 187 ++++++++++++++++++++++++++++++++++++++++ styles/navbar.css | 24 +++--- 3 files changed, 199 insertions(+), 14 deletions(-) create mode 100644 pages/testimonials.html diff --git a/index.html b/index.html index 9d5f910..c5c901f 100644 --- a/index.html +++ b/index.html @@ -40,12 +40,12 @@ -
      diff --git a/pages/testimonials.html b/pages/testimonials.html new file mode 100644 index 0000000..169bd68 --- /dev/null +++ b/pages/testimonials.html @@ -0,0 +1,187 @@ + + + + + + Testimonials - Dot-Box + + + + + + +
      +
      +

      What Players Say About Dot-Box?

      +

      Discover what our passionate community of gamers has to say about Dot-Box,
      From casual gamers to competitive strategists, players of all levels are raving about their experiences.

      +
      +
      + +
      +
      + Profile 1 +
      +
      +

      Jess K

      +

      Gamer Enthusiast

      +

      "Dot-Box is an incredibly strategic game. The multiplayer aspect really makes it engaging and fun! I've played so many rounds with my friends, and each time it feels like a new experience. The simplicity of the game belies the complex decisions you need to make, and that's what makes it so rewarding. Every win feels well-earned!" +

      +
      + + + + + +
      +
      +
      + +
      +
      + Profile 2 +
      +
      +

      Ryan L

      +

      Competitive Player

      +

      "I've always been a fan of competitive games, and Dot-Box takes the cake! The fast-paced nature of the game combined with the need to think ahead makes every match an intense battle of wits. The game’s design is elegant and addictive, making it perfect for both short and long gaming sessions. Dot-Box is not just a game—it's a challenge!"

      +
      + + + + + +
      +
      +
      + +
      +
      + Profile 3 +
      +
      +

      David Miller

      +

      Puzzle Lover

      +

      "It's amazing how such a simple concept can provide endless hours of entertainment. I love how each game can turn on a single decision, making it crucial to stay sharp and think several moves ahead. It’s like chess, but faster and more accessible. A must-play for any strategy lover!"

      +
      + + + + + +
      +
      +
      + +
      +
      + Profile 4 +
      +
      +

      Sophie M

      +

      Esports Aspirant

      +

      "I’ve played countless multiplayer games, but few have the perfect blend of strategy and simplicity that Dot-Box offers. The thrill of outsmarting your friends and pulling off a victory from the brink of defeat is unmatched."

      +
      + + + + + +
      +
      +
      + +
      +
      + Profile 5 +
      +
      +

      Nilu Sona

      +

      Game Enthusiast

      +

      "The game’s design is so clever that it constantly keeps you guessing and adapting. Whether you're setting traps for your opponent or trying to outmaneuver their tactics, there’s always a sense of accomplishment when your plan comes together. It’s one of those games that makes you think, 'Just one more round!' over and over again."

      +
      + + + + + +
      +
      +
      + +
      +
      + Profile 6 +
      +
      +

      Jack C

      +

      Board Game Buff

      +

      "As someone who loves exploring new games, Dot-Box has been a fantastic discovery. It's simple on the surface but offers layers of depth the more you play. The game’s pacing is perfect for both quick matches and longer sessions, making it versatile for different moods."

      +
      + + + + + +
      +
      +
      +
      +
      + + + + + + + \ No newline at end of file diff --git a/styles/navbar.css b/styles/navbar.css index e10c0bd..2c31419 100644 --- a/styles/navbar.css +++ b/styles/navbar.css @@ -258,6 +258,17 @@ textarea { justify-content: center; gap: 5px; } +.popup.hidden { + display: none; +} + +.popup-content { + max-width: 400px; + padding: 20px; + background-color: #333; + border-radius: 5px; + text-align: center; +} .socials { display: flex; @@ -274,17 +285,6 @@ textarea { gap: 5px; } -.popup.hidden { - display: none; -} - -.popup-content { - max-width: 400px; - padding: 20px; - background-color: #333; - border-radius: 5px; - text-align: center; -} @media (max-width: 768px) { .navbarr .nav-links { @@ -297,8 +297,6 @@ textarea { width: 100%; z-index: 1000; } - - .navbarr .nav-links li { text-align: center; padding: 10px 0; From b0a99004c8defe791eb73032de13021f2c1687d0 Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Sat, 10 Aug 2024 13:37:14 +0530 Subject: [PATCH 4/5] Update navbar.css --- styles/navbar.css | 284 +++++----------------------------------------- 1 file changed, 29 insertions(+), 255 deletions(-) diff --git a/styles/navbar.css b/styles/navbar.css index 2c31419..af75542 100644 --- a/styles/navbar.css +++ b/styles/navbar.css @@ -8,12 +8,11 @@ body { .navbarr { display: flex; - justify-content: space-between; align-items: center; - padding: 10px 20px; background-color: #222; } + .navbarr .logo a { text-decoration: none; color: #fff; @@ -23,19 +22,23 @@ body { .navbarr .nav-links { display: flex; list-style: none; + justify-content: flex-end; } -.navbarr .nav-links li a { +.nav-links li { + margin: 0 0px; /* Reduced spacing between nav items */ +} + +.nav-links li a { + padding: 2px 2px; /* Reduced padding inside each link */ text-decoration: none; - color: #fff; - margin-left: 20px; - font-size: 1em; display: flex; align-items: center; } -.navbarr .nav-links li a i { - margin-right: 5px; +.nav-links li a i { + margin-right: 3px; + /* Reduced spacing between icons and text */ } .navbarr .hamburger { @@ -55,264 +58,35 @@ body { border-radius: 5px; } -.feed-bg { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background: rgba(0, 0, 0, 0.5); -} - -.form-container { - max-width: 600px; - padding: 20px; - background: #222; - border-radius: 10px; -} - -.form-content { - display: flex; - flex-direction: column; - gap: 15px; -} - -.sub { - display: flex; - justify-content: space-between; - align-items: center; -} - -.sub h5 { - margin: 0; - font-size: 1.5em; - color: #fff; -} - -.close-button { - background: none; - border: none; - color: #fff; - font-size: 1.5em; - cursor: pointer; -} - -.wrapper { - display: flex; - flex-direction: column; - gap: 15px; -} - -.stars label { - color: #444; - font-size: 1.5em; - cursor: pointer; -} - -.stars input:checked ~ label { - color: #f90; -} - -.form-group { - display: flex; - flex-direction: column; - gap: 5px; -} - -.form-group-1 { - display: flex; - justify-content: space-between; - gap: 15px; -} - -.form-group-1 .form-group { - flex: 1; -} - -textarea { - width: 100%; - resize: none; - padding: 10px; - background: #333; - color: #fff; - border: 1px solid #444; - border-radius: 5px; -} - -.submitbtn { - display: flex; - justify-content: space-between; - gap: 10px; -} - -.submitbtn .buttons { - padding: 10px 20px; - background-color: #444; - color: #fff; - border: none; - cursor: pointer; - border-radius: 5px; -} - -.heading { - font-size: 2em; - text-align: center; - margin: 0; -} - -.instructions-heading { - text-align: center; - font-size: 1.2em; - margin-top: 10px; -} - -.instructions { - font-size: 1em; - text-align: center; -} - -.button { - display: block; - width: max-content; - margin: 10px auto; - padding: 10px 20px; - background: #555; - color: #fff; - text-decoration: none; - border-radius: 5px; - text-align: center; -} - -.right-background { - display: flex; - flex-direction: column; - gap: 15px; -} - -.form-item { - display: flex; - flex-direction: column; - gap: 5px; -} - -.form-item select, -.form-item input { - padding: 10px; - background: #333; - color: #fff; - border: 1px solid #444; - border-radius: 5px; -} - -.difficulty { - display: flex; - justify-content: space-between; -} - -.d-type { - padding: 10px 20px; - background-color: #444; - color: #fff; - border: none; - cursor: pointer; - border-radius: 5px; -} - -.d-type.active { - background-color: #f90; -} - -.button-container { - display: flex; - gap: 10px; -} - -.button1 { - flex: 1; - padding: 10px; - background-color: #444; - color: #fff; - text-align: center; - text-decoration: none; - border-radius: 5px; - cursor: pointer; -} - -.button1:hover { - background-color: #555; -} - -.fotbar { - display: flex; - flex-direction: column; - gap: 10px; - text-align: center; - margin-bottom: 10px; -} - -.fotbar a { - text-decoration: none; - color: #fff; - font-size: 1em; - display: flex; - align-items: center; - justify-content: center; - gap: 5px; -} -.popup.hidden { - display: none; -} - -.popup-content { - max-width: 400px; - padding: 20px; - background-color: #333; - border-radius: 5px; - text-align: center; -} - -.socials { - display: flex; - justify-content: center; - gap: 15px; -} - -.socials a { - text-decoration: none; - color: #fff; - font-size: 1em; - display: flex; - align-items: center; - gap: 5px; -} - - @media (max-width: 768px) { .navbarr .nav-links { - display: none; - flex-direction: column; - background-color: #222; - position: absolute; - top: 60px; - left: 0; - width: 100%; - z-index: 1000; + display: none; + flex-direction: column; + background-color: #222; + position: absolute; + top: 50px; /* Adjusted to reduce top space */ + right: 0; + width: 100%; + z-index: 1000; } + .navbarr .nav-links li { - text-align: center; - padding: 10px 0; - width: 100%; + text-align: center; + padding: 8px 0; /* Reduced padding in mobile view */ + width: 100%; } -.logo a { + + .logo a { text-decoration: none; color: #fff; - font-size: 2em; /* Increase this value to make the font size larger */ -} + font-size: 2em; + } .navbarr .hamburger { - display: block; + display: block; } .navbarr .nav-links.active { - display: flex; + display: flex; } } From f8a1eb6566d74ced5a4035d83e386d317c0ae34b Mon Sep 17 00:00:00 2001 From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com> Date: Sat, 10 Aug 2024 13:37:40 +0530 Subject: [PATCH 5/5] Update index.html --- index.html | 132 ++--------------------------------------------------- 1 file changed, 4 insertions(+), 128 deletions(-) diff --git a/index.html b/index.html index 2683415..6757350 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,6 @@ Dots & Boxes Game - @@ -38,9 +37,11 @@