Changed background and font

assets/css/bg.css

@@ -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%;
+    }
+
+}

assets/css/stars.css

@@ -11,7 +11,7 @@ html, body {
     margin: 0; 
 }
 body {
-    background: rgb(89, 8, 36);
+    background: rgb(64, 106, 202);
 }
 
 .rating {

assets/css/style.css

@@ -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 {

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">