From e88a21430edd1436c02ec15d9f7abbb0674cf581 Mon Sep 17 00:00:00 2001 From: AmorimDSJM Date: Thu, 11 Jan 2024 16:23:07 +0100 Subject: [PATCH] finished leaderboard git pull origin agent_bryte! --- css/style.css | 65 +++++++++++++++++++++++++++++++-------------------- index.html | 27 ++++++++++----------- js/main.js | 6 ++++- 3 files changed, 59 insertions(+), 39 deletions(-) diff --git a/css/style.css b/css/style.css index e4272aa..93600b8 100644 --- 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%; } \ No newline at end of file diff --git a/index.html b/index.html index f5389ba..ca8a275 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,27 @@ -
+ -
+ +
+
+

rank

+

name

+

credits

+

headquaters

+

faction

+

ships

+
+
- -
-

rank

-

name

-

credits

-

headquaters

-

faction

-

ships

-
-
-
+
+
diff --git a/js/main.js b/js/main.js index d1c899b..6baeb42 100644 --- a/js/main.js +++ b/js/main.js @@ -60,4 +60,8 @@ $(document).ready(function() { }); state = true }) -}); \ No newline at end of file +}); + +$('button').on('click', () => { + $('btn-test').css('width', '75%'); +}) \ No newline at end of file