finished leaderboard git pull origin agent_bryte!

agent_bryte
AmorimDSJM ago%!(EXTRA string=2 years)
parent 3db46f2d25
commit e88a21430e
  1. 65
      css/style.css
  2. 27
      index.html
  3. 6
      js/main.js

@ -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%;
}

@ -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>

@ -60,4 +60,8 @@ $(document).ready(function() {
});
state = true
})
});
});
$('button').on('click', () => {
$('btn-test').css('width', '75%');
})
Loading…
Cancel
Save