diff --git a/README.md b/README.md index 29097cf..a305683 100644 --- a/README.md +++ b/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

(back to top)

## 👥 Authors diff --git a/src/images/retro-futurism-background-free-vector.jpeg b/src/images/retro-futurism-background-free-vector.jpeg new file mode 100644 index 0000000..140dbff Binary files /dev/null and b/src/images/retro-futurism-background-free-vector.jpeg differ diff --git a/src/style.css b/src/style.css index 2a7d95d..bfaa42d 100644 --- a/src/style.css +++ b/src/style.css @@ -4,16 +4,32 @@ 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 { @@ -21,6 +37,11 @@ h1 { 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; }