diff --git a/leaderboard.html b/leaderboard.html index c78822d..06d388b 100644 --- a/leaderboard.html +++ b/leaderboard.html @@ -1,13 +1,259 @@ - - Flappy Leader Board - - - - - -

-

This Page displays the leader board!

-

- + + Flappy Leader Board + + + + + + +
+

LeaderBoard

+
+
+
+
    +
  • Today
    • +
  • Month
    • +
  • Year
    • +
+
+
+ +
+ +
+
+
+ picture_2 +
+
+

1. Alex Mike

+
+
+
+
+
1195 points
+
+
+
+ picture_3 +
+
+

2.Johnson

+
+
+
+
+
1185 points
+
+
+
+ picture_1 +
+
+

3.Charles John

+
+
+
+
+
1160 points
+
+
+
+ picture_5 +
+
+

4.Scarlett Angela

+
+
+
+
+
1130 points
+
+
+
+ picture_4 +
+
+

5.Rosey

+
+
+
+
+
1110 points
+
+
+ +
+
+
+ diff --git a/style/leaderboard.css b/style/leaderboard.css new file mode 100644 index 0000000..b4c6cf6 --- /dev/null +++ b/style/leaderboard.css @@ -0,0 +1,114 @@ +.wrapper { + width: 100%; + height: 100%; +} + +#leaderheader { + padding-top: 10px; + text-align: center; +} + +.lboard_section { + width: 500px; + height: 400px; + margin: 100px auto 0; + background: #f94f62; + padding: 25px 40px; + position: relative; + border-radius: 5px; +} + +.lboard_section .lboard_tabs ul { + display: flex; +} + +.lboard_section .lboard_tabs ul li { + margin-right: 50px; + font-size: 18px; + font-weight: 600; + color: #3a3d51; + cursor: pointer; +} + +.lboard_section .lboard_tabs ul li:hover, +.lboard_section .lboard_tabs ul li.active { + color: #fff; +} + +.lboard_wrap { + position: absolute; + top: 70px; + left: 40px; + background: #ffd300; + width: 100%; + height: 100%; + border-radius: 5px; +} + +.lboard_wrap .lboard_item { + padding: 25px; +} + +.lboard_wrap .lboard_mem { + display: flex; + align-items: center; + padding: 15px 0; + border-bottom: 1px solid #ffe773; +} + +.lboard_wrap .lboard_mem:first-child { + padding-top: 0; +} + +.lboard_wrap .lboard_mem:last-child { + padding-bottom: 0; + border-bottom: 0; +} + +.lboard_wrap .lboard_mem .img { + width: 50px; +} + +.lboard_wrap .lboard_mem img { + display: block; + width: 100%; +} + +.lboard_wrap .lboard_mem .name_bar { + margin: 0 20px; + width: calc(100% - 150px); +} + +.lboard_wrap .lboard_mem .name_bar p { + color: #3a3d51; +} + +.lboard_wrap .lboard_mem .name_bar p span { + margin-right: 5px; +} + +.lboard_wrap .lboard_mem .points { + width: 100px; + color: #3a3d51; +} + +.lboard_wrap .lboard_mem .name_bar .bar_wrap { + width: 100%; + height: 5px; + background: #d5b000; + margin-top: 5px; + border-radius: 5px; + position: relative; + overflow: hidden; +} + +.lboard_wrap .lboard_mem .name_bar .bar_wrap .inner_bar { + position: absolute; + top: 0; + left: 0; + height: 5px; + background: #fff; + border-radius: 5px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +}