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