<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Light</title>
<style>
#main{
margin-top: 100px;
display: flex;
}
.nav{
width: 300px;
margin-bottom: 20px;
}
#up{
display: flex;
justify-content: center;
}
#red{
background-color: red;
}
#yellow{
background-color: yellow;
}
#green{
background-color: green;
}
.light{
width: 100px;
height: 100px;
margin-bottom: 10px;
border-radius: 50%;
}
#board{
border: 5px solid black;
padding: 10px 10px;
border-radius: 20px;
}
#down{
display: flex;
justify-content: center;
}
#stand{
background-color: black;
height: 200px;
width: 50px;
}
#foot{
display: flex;
justify-content: center;
}
#feet{
background-color: black;
height: 30px;
width: 100px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>
</head>
<body>
<div id="main">
<div class="nav">
<div id="up">
<div id="board">
<div class="light" id="red"></div>
<div class="light" id="yellow"></div>
<div class="light" id="green"></div>
</div>
</div>
<div id="down">
<div id="stand">Stand</div>
</div>
<div id="foot">
<div id="feet">
Feet
</div>
</div>
</div>
<div class="nav">
<div id="up">
<div id="board">
<div class="light" id="red"></div>
<div class="light" id="yellow"></div>
<div class="light" id="green"></div>
</div>
</div>
<div id="down">
<div id="stand">Stand</div>
</div>
<div id="foot">
<div id="feet">
Feet
</div>
</div>
</div>
<div class="nav">
<div id="up">
<div id="board">
<div class="light" id="red"></div>
<div class="light" id="yellow"></div>
<div class="light" id="green"></div>
</div>
</div>
<div id="down">
<div id="stand">Stand</div>
</div>
<div id="foot">
<div id="feet">
Feet
</div>
</div>
</div>
<div class="nav">
<div id="up">
<div id="board">
<div class="light" id="red"></div>
<div class="light" id="yellow"></div>
<div class="light" id="green"></div>
</div>
</div>
<div id="down">
<div id="stand">Stand</div>
</div>
<div id="foot">
<div id="feet">
Feet
</div>
</div>
</div>
<div class="nav">
<div id="up">
<div id="board">
<div class="light" id="red"></div>
<div class="light" id="yellow"></div>
<div class="light" id="green"></div>
</div>
</div>
<div id="down">
<div id="stand">Stand</div>
</div>
<div id="foot">
<div id="feet">
Feet
</div>
</div>
</div>
</div>
</body>
</html>