button hover

index.html

@@ -428,11 +428,17 @@
         <i class="fa-solid fa-bars"></i>
       </button>
       <div class="font-bold hidden lg:flex gap-x-8" style="text-transform: capitalize;">
-        <a href="">Marketplace</a>
-        <a href="" target="_blank">Discover</a>
-        <a href="possibilities.html">Possibilities</a>
-        <div class="px-10" style="padding-top: 4px; padding-bottom: 4px; border: 2px solid white; margin-top: -8px;">
-        <a href="https://discord.gg/38jktRtuY7" target="_blank">Join</a>
+        <a href="" class="nav-link">Marketplace
+          <div class="overlay">Coming Soon</div>
+      </a>
+      <a href="" target="_blank" class="nav-link">Discover
+          <div class="overlay">Coming Soon</div>
+      </a>
+      <a href="possibilities.html" class="nav-link">Possibilities
+          <div class="overlay">Coming Soon</div>
+      </a>
+      <div class="join-button">
+          <a href="https://discord.gg/38jktRtuY7" target="_blank">Join</a>
       </div>
       </div>
     </nav>

styles.css

@@ -28,6 +28,47 @@ body {
   height: 0;
 }
 
+
+.nav-link {
+  position: relative;
+  display: inline-block;
+  /* padding: 10px; */
+  text-decoration: none;
+  color: #C1ACF6;
+  font-weight: bold;
+  text-transform: capitalize;
+}
+
+.nav-link .overlay {
+  display: none;
+  position: absolute;
+  top: 100%; /* Position below the link */
+  left: 0;
+  width: 100%;
+  background: #2E0F65;
+  color: #C1ACF6;
+  text-align: center;
+  padding: 2px;
+  font-size: 14px;
+}
+
+.nav-link:hover .overlay {
+  display: block;
+}
+
+.join-button {
+  padding: 4px 40px; /* Adjusting padding for consistent look */
+  border: 2px solid #C1ACF6;
+  margin-top: -6px;
+  text-transform: capitalize;
+}
+
+.join-button a {
+  text-decoration: none;
+  color: #C1ACF6;
+  font-weight: bold;
+}
+
 .carousel-container {
   width: 80%;
   overflow: hidden;