v3.1

Author: CodeTBArchive

index.html

@@ -20,6 +20,9 @@
  <span class='green'></span> 
  </div>
  </div>
+ <div class="car">
+ <img src="./images/car.png" alt="car">
+ </div>
  <!--- End --->
 </body>
 </html>

style.css

@@ -39,8 +39,62 @@
  width: 60px;
  height: 60px;
  border-radius: 50%;
- border: 2px solid green;
+ z-index: 3;
  margin-bottom: 5px;
+ position: relative;
+ background: #555;
+ border: 5px solid #3b3b3b;
+ }
+ .red {
+ animation-name: red;
+ animation-duration: 4s;
+ animation-delay: 2s;
+ }
+ .yellow {
+ animation-name: yellow;
+ animation-duration: 4s;
+ animation-delay: 6s;
+ }
+ .green {
+ animation-name: green; 
+ animation-duration: 4s;
+ animation-delay: 10s;
  }
  }
 } 
+
+@keyframes red {
+ 0% {
+ background: #3b3b3b;
+ }
+ 100% {
+ background: #ec1527;
+ box-shadow: 0 0 15px #ec1527;
+ }
+}
+@keyframes yellow {
+ from {
+ background: #FFC234;
+ }
+ to {
+ background: #FFC234;
+ box-shadow: 0 0 15px #FFC234;
+ }
+}
+
+@keyframes green {
+ from {
+ background: #4FB954;
+ }
+ to {
+ background: #4FB954;
+ box-shadow: 0 0 15px #4FB954;
+ }
+}
+
+.car {
+ 
+ img {
+ width: 200px;
+ }
+}