Merge pull request #3 from zhorabay/styling-branch

Leaderboard: Give style

README.md

@@ -52,7 +52,7 @@ To get a local copy up and running follow these simple example steps.
 - write: git clone git@github.com:zhorabay/Leaderboard.git
 - get into to directory "Leaderboard"
 - write: npm install
-- then: npm start
+- then write: npm start
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## 👥 Authors <a name="authors"></a>

src/style.css

@@ -4,23 +4,44 @@
   box-sizing: border-box;
 }
 
+body {
+  background-image: url(./images/retro-futurism-background-free-vector.jpeg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
 h1 {
   font-size: 80px;
-  margin: 100px;
+  margin: 100px 0;
+  color: yellow;
+  border: 3px solid #fff;
+  background-color: #cacacab6;
+  border-radius: 15px;
+  padding: 10px;
+  text-align: center;
+  width: 60%;
 }
 
 .scores-container {
   display: flex;
   gap: 120px;
-  margin-left: 30%;
-  margin-right: 10%;
 }
 
 .column-1 {
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-content: start;
+  border: 3px solid #fff;
+  background-color: #cacacab6;
+  border-radius: 15px;
+  padding: 30px;
+  margin-bottom: 70px;
 }
 
 .scores-title {
@@ -33,39 +54,49 @@ h1 {
 .scores-title h2,
 .column-2 h2 {
   font-size: 40px;
+  color: yellow;
 }
 
 #refresh {
   padding: 7px 14px;
-  background-color: #fff;
+  background-color: rgba(255, 0, 217);
+  color: #fff;
   border: 2px solid;
-  font-size: 14px;
+  border-color: rgba(255, 0, 217);
+  font-size: 18px;
   cursor: pointer;
+  border-radius: 5px;
 }
 
 .table {
-  border: 2px solid;
+  border: 2px solid rgb(25, 25, 121);
   width: 100%;
+  color: rgb(25, 25, 121);
+  overflow: hidden;
+  overflow-y: scroll;
+  height: 200px;
 }
 
 .table ul li {
   list-style: none;
   font-weight: 400;
-  padding: 6px;
-}
-
-#list-container:nth-child(odd) {
-  background-color: rgb(107, 107, 107);
+  padding: 10px;
+  padding-left: 20px;
 }
 
-.bg {
-  background-color: rgba(147, 147, 147, 0.916);
+.table ul li:nth-child(odd) {
+  background-color: rgba(255, 0, 217, 0.5);
 }
 
 .column-2 {
   display: flex;
   flex-direction: column;
   gap: 20px;
+  border: 3px solid #fff;
+  background-color: #cacacab6;
+  border-radius: 15px;
+  padding: 30px;
+  margin-bottom: 70px;
 }
 
 #add {
@@ -76,13 +107,16 @@ h1 {
 
 #add input {
   padding: 10px;
-  border: 1px solid;
+  border: 2px solid rgb(25, 25, 121);
   font-size: 12px;
 }
 
 #submit {
-  font-size: 14px;
+  font-size: 18px;
   padding: 7px 14px;
   align-self: flex-end;
   cursor: pointer;
+  background-color: rgba(255, 0, 217);
+  color: #fff;
+  border-radius: 8px;
 }