<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.flex{
margin: auto;
margin-top: 10%;
width: 50%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.circle{
border:#e6e6e6 3px solid;
border-radius: 50%;
padding: 50px;
}
.sub-flex:hover .circle{
background-color: #ffb200;
}
.sub-flex:hover img{
filter: brightness(0%);
}
/* sub title flex */
.sub-flex{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position:relative;
}
.font{
font-size:20px;
font-weight: bold;
font-family:"Helvetica Neue", Helvetica, Arial,sans-serif;
margin-top: 5%;
}
.font:hover{
cursor: pointer;
color: #ffb200;
text-decoration: underline;
}
p{
width:50%;
line-height: 1.5em;
text-align:center;
}
.number{
border:#333333 3px solid;
border-radius: 50%;
/* padding: 10px; */
position: absolute;
top:0%;
left:60%;
background-color: white;
/* center and cirlce object */
padding: 0px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
.sub-flex:hover .number{
color:white;
background-color:#333333;
}
</style>
</head>
<body>
<div class="flex">
<div class="discover">
<div class="sub-flex">
<div class="circle"><img src="images/discorver-dot.png" alt=""><div class="number">1</div></div>
<div class="font">Discover</div>
<p>People with ideas and experience to develop a vision for the future</p>
</div>
</div>
<div class="arrow"><img src="images/arrow-dot.png" alt=""></div>
<div class="build">
<div class="sub-flex">
<div class="circle"><img src="images/build-dot.png" alt=""><div class="number">2</div></div>
<div class="font">Build</div>
<p>The right tools at the right time enhances the shard economy</p>
</div>
</div>
<div class="arrow"><img src="images/arrow-dot.png" alt=""></div>
<div class="launch">
<div class="sub-flex">
<div class="circle"><img src="images/launch-dot.png" alt=""><div class="number">3</div></div>
<div class="font">Launch</div>
<p>People with ideas and experience to develop a vision for the future</p>
</div>
</div>
</div>
</body>
</html>