diff --git a/pages/FAQs.html b/pages/FAQs.html
index c5eb7d7..6af8efe 100644
--- a/pages/FAQs.html
+++ b/pages/FAQs.html
@@ -38,6 +38,7 @@
About Us
FAQs
Contributors
+ Testimonials
diff --git a/pages/about.html b/pages/about.html
index 583730b..33c3f6f 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -47,6 +47,7 @@
About Us
FAQs
Contributors
+ Testimonials
@@ -65,6 +66,7 @@
About Us
FAQs
Contributors
+ Testimonials
diff --git a/pages/contributors.html b/pages/contributors.html
index 0f44f21..e13452d 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -28,6 +28,7 @@
About Us
FAQs
Contributors
+ Testimonials
diff --git a/pages/howtoplay.html b/pages/howtoplay.html
index 442552a..b9f4a7d 100644
--- a/pages/howtoplay.html
+++ b/pages/howtoplay.html
@@ -48,6 +48,9 @@
Contributors
+
+ Testimonials
+
@@ -66,6 +69,7 @@
About Us
FAQs
Contributors
+ Testimonials
diff --git a/pages/testimonials.html b/pages/testimonials.html
index 3f2a0fe..4c2de3b 100644
--- a/pages/testimonials.html
+++ b/pages/testimonials.html
@@ -23,15 +23,17 @@
AboutUs
FAQs
Contributors
+ Testimonials
diff --git a/styles/navbar.css b/styles/navbar.css
index af75542..d2d227e 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -1,92 +1,334 @@
-body {
- margin: 0;
- padding: 0;
- font-family: Arial, sans-serif;
- background: #000;
- color: #fff;
+
+.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;
- align-items: center;
- background-color: #222;
+ 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;
}
-
-.navbarr .logo a {
- text-decoration: none;
- color: #fff;
- font-size: 1.5em;
+.logo a {
+ text-decoration: none;
+ font-size: 35px;
+ font-weight: bolder;
}
-.navbarr .nav-links {
- display: flex;
+.nav-links {
list-style: none;
- justify-content: flex-end;
+ /* Removes default bullet points from list items */
+ margin: 0;
+ padding: 0;
}
.nav-links li {
- margin: 0 0px; /* Reduced spacing between nav items */
+ display: inline-flex;
+ margin-right: 20px;
+ font-size: 18px;
}
-.nav-links li a {
- padding: 2px 2px; /* Reduced padding inside each link */
+.nav-links a {
text-decoration: none;
- display: flex;
- align-items: center;
+ /* Removes underline from links */
+ color: black;
+ font-weight: bold;
+ transition: color 0.3s ease-in-out;
}
-.nav-links li a i {
- margin-right: 3px;
- /* Reduced spacing between icons and text */
+.nav-links a:hover {
+ color: #f39d2c;
}
-.navbarr .hamburger {
- display: none;
- cursor: pointer;
+.logo a:hover {
+ color: yellow;
}
-.sticky-button {
- position: fixed;
- bottom: 10px;
- right: 10px;
- padding: 10px 20px;
- background-color: #444;
- color: #fff;
- border: none;
- cursor: pointer;
- border-radius: 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;
}
-@media (max-width: 768px) {
- .navbarr .nav-links {
- display: none;
- flex-direction: column;
- background-color: #222;
+.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;
- top: 50px; /* Adjusted to reduce top space */
+ z-index: 1;
+ top: 0;
right: 0;
- width: 100%;
- z-index: 1000;
- }
+ 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;
+ }
- .navbarr .nav-links li {
+}
+
+.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;
- padding: 8px 0; /* Reduced padding in mobile view */
+ 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 {
- text-decoration: none;
- color: #fff;
- font-size: 2em;
+ font-size: 30px;
}
- .navbarr .hamburger {
- display: block;
+ .nav-links {
+ position: absolute;
+ right: 1rem;
+ top: 3rem;
+ background-color: #333;
+ flex-direction: column;
+ padding: 10px;
+ align-items: center;
}
- .navbarr .nav-links.active {
- display: flex;
+ .navbarr .nav-links {
+ display: none;
}
-}
+
+ .navbar-toggler {
+ display: inline !important;
+ }
+
+}
\ No newline at end of file