eugeniy.ho
/
javascript_practice


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.traffic-light {
			width: 50px;
			display: flex;
			flex-direction: column;
		}

		.traffic-light__element {
			width: 100%;
			height: 50px;
			border: 4px solid black;
			border-radius: 50%;
		}

        .red.on {
	        background-color: red;
        }

        .yellow.on {
            background-color: yellow;
        }

        .green.on {
            background-color: green;
        }
	</style>
</head>
<body>
<div class="traffic-light">
	<div class="traffic-light__element green"></div>
	<div class="traffic-light__element yellow"></div>
	<div class="traffic-light__element red"></div>
</div>
<script src="trafficLight.js"></script>
</body>
</html>