Levshin95
/
HW


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="allTraficLight" style="display: flex; justify-content:space-around">
        <div class="carTraficLight">
            <div class="topTraficLight" style="background-color: black; height: 50px; width: 150px; margin: 20px 0 0 75px; border-radius: 50% 50% 0 0;">
            </div>
            <div id="color" style="width: 200px; height: 500px; background-color: #000; display: flex; flex-direction: column; justify-content: space-around; align-items:center;margin-left: 50px">
                <div id="red" style="background-color: red; width: 150px; height: 150px; border-radius: 50%; opacity: 0.3; display: flex; flex-direction: column; justify-content: space-around; align-items:center">
                    <h1 id="redTimer" style="color: #000; opacity: 0.7; text-align: center; font-size: 100px;"></h1>
                </div>
                <div id="yellow" style="background-color: yellow; width: 150px; height: 150px; border-radius: 50%;  opacity: 0.3;"></div>
                <div id="green" style="background-color: green; width: 150px; height: 150px; border-radius: 50%;  opacity: 0.3;display: flex; flex-direction: column; justify-content: space-around; align-items:center">
                    <h1 id="greenTimer" style="color: #000; opacity: 0.7; text-align: center; font-size: 100px;"></h1>
                </div>
            </div>
        </div>
        <div class="humanTraficLight">
            <div class="topTraficLight" style="background-color: black; height: 50px; width: 150px; margin: 20px 0 0 75px; border-radius: 50% 50% 0 0;">
            </div>
            <div id="humanColor" style="width: 200px; height: 350px; background-color: #000; display: flex; flex-direction: column; justify-content: space-around; align-items:center;margin-left: 50px">
                <div id="humanRed" style="background-color: red; width: 150px; height: 150px; border-radius: 50%; opacity: 0.3; display: flex; flex-direction: column; justify-content: space-around; align-items:center">
                    <h1 id="humanRedTimer" style="color: #000; opacity: 0.7; text-align: center; font-size: 100px;"></h1>
                </div>
                <div id="humanGreen" style="background-color: green; width: 150px; height: 150px; border-radius: 50%;  opacity: 0.3;display: flex; flex-direction: column; justify-content: space-around; align-items:center">
                    <h1 id="humanGreenTimer" style="color: #000; opacity: 0.7; text-align: center; font-size: 100px;"></h1>
                </div>
            </div>

            <button id="btn" style="margin: 20px 0 0 50px; width: 200px; height: 30px;">Переключить</button>
        </div>
    
    </div>

    
    <script src="index.js"></script>
</body>
</html>