mirror of
https://github.com/codeninjasuk/leaderboard.git
synced 2024-11-22 15:27:54 -05:00
Changed background and font
This commit is contained in:
elvistony
parent
47e9b12ba1
commit
ec0b206c5e
4 changed files with 252 additions and 5 deletions
232
assets/css/bg.css
Normal file
232
assets/css/bg.css
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
/* body{
|
||||
background: #3399ff;
|
||||
}
|
||||
|
||||
|
||||
.circle{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
animation: ripple 15s infinite;
|
||||
box-shadow: 0px 0px 1px 0px #508fb9;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.small{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
left: -100px;
|
||||
bottom: -100px;
|
||||
}
|
||||
|
||||
.medium{
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
left: -200px;
|
||||
bottom: -200px;
|
||||
}
|
||||
|
||||
.large{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
left: -300px;
|
||||
bottom: -300px;
|
||||
}
|
||||
|
||||
.xlarge{
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
left: -400px;
|
||||
bottom: -400px;
|
||||
}
|
||||
|
||||
.xxlarge{
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
left: -500px;
|
||||
bottom: -500px;
|
||||
}
|
||||
|
||||
.shade1{
|
||||
opacity: 0.2;
|
||||
}
|
||||
.shade2{
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.shade3{
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.shade4{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.shade5{
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@keyframes ripple{
|
||||
0%{
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
50%{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
|
||||
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: 'Exo', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.context {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top:50vh;
|
||||
|
||||
}
|
||||
|
||||
.context h1{
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
|
||||
.area{
|
||||
background: #4e54c8;
|
||||
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
|
||||
width: 100%;
|
||||
height:100vh;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.circles{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.circles li{
|
||||
position: absolute;
|
||||
display: block;
|
||||
list-style: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
animation: animate 25s linear infinite;
|
||||
bottom: -150px;
|
||||
|
||||
}
|
||||
|
||||
.circles li:nth-child(1){
|
||||
left: 25%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
|
||||
.circles li:nth-child(2){
|
||||
left: 10%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 12s;
|
||||
}
|
||||
|
||||
.circles li:nth-child(3){
|
||||
left: 70%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.circles li:nth-child(4){
|
||||
left: 40%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 18s;
|
||||
}
|
||||
|
||||
.circles li:nth-child(5){
|
||||
left: 65%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circles li:nth-child(6){
|
||||
left: 75%;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.circles li:nth-child(7){
|
||||
left: 35%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
.circles li:nth-child(8){
|
||||
left: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
animation-delay: 15s;
|
||||
animation-duration: 45s;
|
||||
}
|
||||
|
||||
.circles li:nth-child(9){
|
||||
left: 20%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 35s;
|
||||
}
|
||||
|
||||
.circles li:nth-child(10){
|
||||
left: 85%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 11s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes animate {
|
||||
|
||||
0%{
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(-1000px) rotate(720deg);
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ html, body {
|
|||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background: rgb(89, 8, 36);
|
||||
background: rgb(64, 106, 202);
|
||||
}
|
||||
|
||||
.rating {
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ body {
|
|||
margin: 3rem auto 3rem;
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.1), 0px 5px 12px rgba(0, 0, 0, 0.07);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
|
@ -84,7 +85,7 @@ body {
|
|||
}
|
||||
|
||||
.list__footer {
|
||||
padding: 1rem 1rem;
|
||||
padding: 0.1rem 1rem;
|
||||
background: white;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: 0.4rem;
|
||||
|
|
@ -102,7 +103,7 @@ body {
|
|||
|
||||
.list__label {
|
||||
font-size: 10px;
|
||||
opacity: 0.6;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.list__row {
|
||||
|
|
|
|||
18
index.html
18
index.html
|
|
@ -5,20 +5,34 @@
|
|||
<meta charset="UTF-8">
|
||||
<!-- <meta http-equiv="refresh" content="10"> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="white" />
|
||||
<title>Code Ninjas Langley | Leaderboard</title>
|
||||
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon">
|
||||
<meta name="description" content="Check out the leaderboard to see where you rank amongst our leading ninjas!">
|
||||
<meta name="keywords" content="Leaderboard , Code Ninjas, Langley, Showcase, Games, Coding, Slough, Langley, Code Ninjas Langley">
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<link rel="stylesheet" href="/assets/css/stars.css">
|
||||
<link rel="stylesheet" href="/assets/css/bg.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<!-- background starts -->
|
||||
|
||||
<!-- <div class='ripple-background'>
|
||||
<div class='circle xxlarge shade1'></div>
|
||||
<div class='circle xlarge shade2'></div>
|
||||
<div class='circle large shade3'></div>
|
||||
<div class='circle mediun shade4'></div>
|
||||
<div class='circle small shade5'></div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- background ends -->
|
||||
<div class="wrapper">
|
||||
<div class="list">
|
||||
<div class="list__header" style="text-align: center;">
|
||||
<h5 style="color: brown;" class="caps"><a href="https://codeninjaslangley.co.uk" class="a-no-link" target="_blank">Code Ninjas Langley</a></h5>
|
||||
<img src="/assets/img/impact.png" style="width: 400;height: 90px;" alt="">
|
||||
<img src="/assets/img/impact.png" style="width: 300;height: 70px;" alt="">
|
||||
<h2 style="font-variant-caps:small-caps; margin: 0px;">leaderboard</h2>
|
||||
</div>
|
||||
<div class="list__body">
|
||||
|
|
|
|||
Loading…
Reference in a new issue