index.html 861 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HW14</title>
  6. <style>
  7. .trafficLight {
  8. width: 150px;
  9. height: 350px;
  10. display: flex;
  11. flex-direction: column;
  12. justify-content: space-around;
  13. align-items: center;
  14. background-color: black;
  15. }
  16. .trafficLight div {
  17. width: 100px;
  18. height: 100px;
  19. border-radius: 50%;
  20. }
  21. .red {
  22. background-color: red;
  23. opacity: .2;
  24. }
  25. .yellow {
  26. background-color: yellow;
  27. opacity: .2;
  28. }
  29. .green {
  30. background-color: green;
  31. opacity: .2;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="trafficLight">
  37. <div class="red"></div>
  38. <div class="yellow"></div>
  39. <div class="green"></div>
  40. </div>
  41. <button class="btn">Button</button>
  42. <script src="main.js"></script>
  43. </body>
  44. </html>