update

Kaszio · Nov 15, 2023 · 5586b80 · 5586b80
1 parent a9324f5
commit 5586b80
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 49 deletions.
diff --git a/img/Flux_white-blue.svg b/img/Flux_white-blue.svg
diff --git a/img/Flux_white-blue2.svg b/img/Flux_white-blue2.svg
diff --git a/img/logo.svg b/img/logo.svg
diff --git a/leaderboard.html b/leaderboard.html
@@ -25,23 +25,8 @@
                     </a>
                 </li>
 
-                <li name="dropdownCont">
-                    <div>
-                        <a href="">Ecosystem</a>
-                        <a href="">Discover</a>
-                        <a class="alignTextCenter" href="">Explore <svg xmlns="http://www.w3.org/2000/svg" width="21"
-                                height="20" viewBox="0 0 21 20" fill="none">
-                                <path
-                                    d="M15.4502 8.33203L11.0395 12.7428C10.714 13.0682 10.1864 13.0682 9.86094 12.7428L5.4502 8.33203"
-                                    stroke="white" stroke-width="1.67" stroke-linecap="round" />
-                            </svg>
-                        </a>
-                    </div>
-                </li>
-
                 <li name="buttons">
-                    <a href="">Sign Up</a>
-                    <a href="" class="gradientBtn">Log In</a>
+                    <a href="">Litepaper &#8594;</a>
                     <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                         <h2 class="fa fa-bars">&#9776;</h2>
                     </a>
@@ -61,8 +46,12 @@ <h2 class="fa fa-bars">&#9776;</h2>
                     </p>
                 </div>
                 <br></br>
-                <a class="btnBlue">Download Fluxcore</a>
-                <a class="btn">Learn More</a>
+                <a href="javascript:void(0);" onclick="dropdownFunction()" class="btnFluxcore btnBlue dropdown">Download Fluxcore &#709;</a>
+                <div id="myDropdown" class="dropdown-content">
+                    <a href="">Home</a>
+                    <a href="">About</a>
+                    <a href="">Contact</a>
+                  </div>
             </div>
         </div>
 
@@ -1531,6 +1520,7 @@ <h2>65536</h2>
             </div>
         </div>
     </section>
+    <script src="script.js"></script>
 </body>
 
 </html>
diff --git a/script.js b/script.js
@@ -5,4 +5,8 @@ function myFunction() {
     } else {
       x.className = "myNav";
     }
-  }
+  }
+
+function dropdownFunction() {
+  document.getElementById("myDropdown").classList.toggle("show");
+}
diff --git a/style.css b/style.css
@@ -43,20 +43,68 @@ nav ul {
 }
 
 nav {
-    height: 115px;
+    height: 90px;
 }
 
 .center {
     display: inline;
 }
 
+.btnFluxcore{
+    border-radius: 8px !important;
+    background: linear-gradient(92deg, rgba(210, 238, 255, 0.25) -19.31%, rgba(92, 189, 255, 0.25) 8.35%, rgba(82, 142, 252, 0.25) 40.93%, rgba(139, 148, 243, 0.25) 66.13%, rgba(160, 143, 206, 0.25) 98.71%) !important;
+    backdrop-filter: blur(2px) !important;
+    padding: 15px 30px !important;
+    border: none !important;
+}
+
 .alignTextCenter {
     display: flex;
     align-items: center;
     align-self: stretch;
     gap: 5px;
 }
 
+.dropdown-content {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    width: 209px;
+    padding: 4px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.00);
+    background: rgba(217, 217, 217, 0.01);
+    backdrop-filter: blur(15px);
+  }
+
+  .dropdown-content a {
+    display: flex;
+    padding: 12px 18px;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    text-align: center;
+    font-family: Montserrat;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 150%; /* 21px */
+    background: var(--Linear-Nice, linear-gradient(92deg, #D2EEFF -19.31%, #5CBDFF 8.35%, #528EFC 40.93%, #8B94F3 66.13%, #A08FCE 98.71%));
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .show {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+}
+
 li {
     height: 80%;
 }
@@ -91,6 +139,9 @@ li[name="buttons"] a {
     gap: 2px;
 }
 
+
+
+
 .gradientBtn {
     border-radius: 100px;
     background: var(--linear-nice, linear-gradient(90deg, #D2EEFF 0%, #5CBDFF 23.44%, #528EFC 51.04%, #8B94F3 72.40%, #A08FCE 100%));