finished leaderboard git pull origin agent_bryte!

ago%!(EXTRA string=2 years) · e88a21430e
parent 3db46f2d25
commit e88a21430e
3 changed files with 59 additions and 39 deletions
--- a/css/style.css
+++ b/css/style.css
@ -6,37 +6,44 @@
    font-family: M42;
    font-size: 10px;
 }
+
+.container {
+    margin: auto;
+    width: 70%;
+}
+
 .head-board {
    display: flex;
-    margin:auto;
+    margin: auto;
    justify-content: space-between;
-    flex-direction: row;
-    width: 70%;
+    width: 100%;
    border: 2px solid black;
    border-bottom-color: white;
    border-bottom-width: 1px;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: black;

 }

+.btn-cont {
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    width: 100.3%;
+}
+
 .leaderboard {
    display: flex;
    margin: auto;
    align-items: center;
    flex-direction: column;
-    width: 70%;
+    width: 100%;
    height: 50vh;
    overflow-y: scroll;
    overflow-x:visible;
    border: 2px solid black;
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
+
    background-color: black;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none; 
@ -74,29 +81,37 @@ p{
 .ships{
    color: rgb(146, 146, 146);
 }
-.buttons button{
-    position: absolute; /* Position them relative to the browser window */
-    left: 200px; /* Position them outside of the screen */
+button{
+    margin: auto;
+    border: 3px none none 3px;
    transition: 0.3s; /* Add transition on hover */
    padding: 15px; /* 15px padding */
-    width: 300px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
-    font-size: 20px; /* Increase font size */
+    font-size: 11px; /* Increase font size */
    color: white; /* White text color */
-    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
-}
-  
-.buttons button:hover{
-    left: 400px; /* On mouse-over, make the elements appear as they should */
 }
  
-  /* The about link: 20px from the top with a green background */
+button:hover{
+    transition: ease-in-out;
+    color: black;
+    transition-duration: 0.3s;
+    background-color: white;
+}  
 .btn-test{
-    top: 80px;
-    background-color: #04AA6D;
+    background-color: black;
+    color: rgb(250, 204, 88);
+    width: 50%;
+    border-left: none;
+    border-bottom: none;
+    border-radius: 0px 0px 0px 10px;
 }
  
 .btn-test2{
-    top: 180px;
-    background-color: #2196F3; /* Blue */
+    background-color: black;
+    color: rgb(86, 187, 255);
+    border-bottom: none;
+    border-right: none;
+    border-left: none;
+    border-radius: 0px 0px 10px 0px;
+    width: 50%;
 }
--- a/index.html
+++ b/index.html
@ -1,26 +1,27 @@
 <!-- © 2023 Entreprise SpaceTarders -->
 <!DOCTYPE html>
-<header>
+<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/style.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script type="module" src="js/main.js" defer></script>
-</header>
+</head>
 <body>
+    <div class="container">
+        <div class="head-board">
+            <p class="num">rank</p>
+            <p class="symbol">name</p>
+            <p class="credits">credits</p>
+            <p class="headquarters">headquaters</p>
+            <p class="faction">faction</p>
+            <p class="ships">ships</p>
+        </div>
+        <div class="leaderboard">
    
-    
-    <div class="head-board">
-        <p class="num">rank</p>
-        <p class="symbol">name</p>
-        <p class="credits">credits</p>
-        <p class="headquarters">headquaters</p>
-        <p class="faction">faction</p>
-        <p class="ships">ships</p>
-    </div>
-    <div class="leaderboard">
-        <div class="buttons">
+        </div>
+        <div class="btn-cont">
            <button class="btn-test">Sort by credits</button>
            <button class="btn-test2">Sort by ships</button>
        </div>
--- a/js/main.js
+++ b/js/main.js
@ -60,4 +60,8 @@ $(document).ready(function() {
  });
  state = true
  })
-});
+});
+
+$('button').on('click', () => {
+  $('btn-test').css('width', '75%');
+})