trafficLight.html 799 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .traffic-light {
  8. width: 50px;
  9. display: flex;
  10. flex-direction: column;
  11. }
  12. .traffic-light__element {
  13. width: 100%;
  14. height: 50px;
  15. border: 4px solid black;
  16. border-radius: 50%;
  17. }
  18. .red.on {
  19. background-color: red;
  20. }
  21. .yellow.on {
  22. background-color: yellow;
  23. }
  24. .green.on {
  25. background-color: green;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="traffic-light">
  31. <div class="traffic-light__element green"></div>
  32. <div class="traffic-light__element yellow"></div>
  33. <div class="traffic-light__element red"></div>
  34. </div>
  35. <script src="trafficLight.js"></script>
  36. </body>
  37. </html>