<div class="container-fluid px-5 mx-auto">
<div class="row justify-content-center">
<div class="col-12 text-center mb-0">
<h5 id="heading" class="mb-0">Our Team</h5>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 text-center mb-5">
<div class="line mx-auto"></div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4">
<div class="row">
<div class="col-md-8">
<div class="image"><img src="https://i.imgur.com/RCwPA3O.jpg" class="fit-image"></div>
<p class="mt-2 text-center image-name">Alissa (Lead Designer)</p>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="gap"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8">
<div class="image bottom-image"><img src="https://i.imgur.com/Enygcf8.jpg" class="fit-image"></div>
<p class="mt-2 text-center image-name">Rob Joe (Designer)</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row justify-content-center">
<div class="col-md-8 vertical-center">
<div class="image"><img src="https://i.imgur.com/RjoisAK.jpg" class="fit-image"></div>
<p class="mt-2 text-center image-name">John Doe (CEO)</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8">
<div class="image"><img src="https://i.imgur.com/K1IiLJw.jpg" class="fit-image"></div>
<p class="mt-2 text-center image-name">Lina Jose (Architect)</p>
</div>
</div>
<div class="row">
<div class="gap"></div>
</div>
<div class="row">
<div class="col-md-8">
<div class="image bottom-image"><img src="https://i.imgur.com/6tPhTUn.jpg" class="fit-image"></div>
<p class="mt-2 text-center image-name">Stephanie (Designer)</p>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</div>
.container-fluid {
padding-top: 50px;
padding-bottom: 80px;
background-color: #000000;
color: #ffffff
}
#heading {
font-size: 40px;
margin-top: 40px;
font-weight: normal;
font-family: Century Gothic
}
.line {
background-color: #ffffff;
border-radius: 50px;
border: none;
padding: 2px;
height: 4px;
width: 100px;
margin-top: 5px
}
.vertical-center {
margin: 0;
position: absolute;
top: 45%;
-ms-transform: translateY(-45%);
transform: translateY(-45%)
}
@media (max-width: 768px) {
.vertical-center {
margin: 0;
position: relative;
top: 0;
-ms-transform: translateY(0);
transform: translateY(0)
}
}
.gap {
height: 130px
}
@media (max-width: 768px) {
.gap {
height: 0
}
}
.image {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto
}
img {
width: 150px;
height: 150px;
border-radius: 50%
}
.image-name {
font-weight: bold
}
.fit-image {
width: 100%;
object-fit: cover
}
