<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center sec-header">Our Team</h2>
</div>
</div>
</div>
<div class="container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Chief Executive Officer
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-lg-8 col-md-8">
<h2>Megan Fox</h2>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam doloremque dolorum exercitationem ipsum maxime minima perspiciatis soluta velit voluptate! Aspernatur corporis ex iusto nostrum pariatur recusandae reiciendis temporibus ullam. Ab architecto blanditiis, eveniet expedita, magnam non perferendis quod totam unde vel, veniam vero. Ab aperiam doloremque nam obcaecati repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam doloremque dolorum exercitationem ipsum maxime minima perspiciatis soluta velit voluptate! Aspernatur corporis ex iusto nostrum pariatur recusandae reiciendis temporibus ullam. Ab architecto blanditiis, eveniet expedita, magnam non perferendis quod totam unde vel, veniam vero. Ab aperiam doloremque nam obcaecati repellat.</p>
<div class="socials">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-4">
<img src="https://i.postimg.cc/Mpgp2ZmK/1.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
General Manager
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-lg-8 col-md-8">
<h2>Jessica Alba</h2>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam doloremque dolorum exercitationem ipsum maxime minima perspiciatis soluta velit voluptate! Aspernatur corporis ex iusto nostrum pariatur recusandae reiciendis temporibus ullam. Ab architecto blanditiis, eveniet expedita, magnam non perferendis quod totam unde vel, veniam vero. Ab aperiam doloremque nam obcaecati repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam doloremque dolorum exercitationem ipsum maxime minima perspiciatis soluta velit voluptate! Aspernatur corporis ex iusto nostrum pariatur recusandae reiciendis temporibus ullam. Ab architecto blanditiis, eveniet expedita, magnam non perferendis quod totam unde vel, veniam vero. Ab aperiam doloremque nam obcaecati repellat.</p>
<div class="socials">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-4">
<img src="https://i.postimg.cc/dt1shZWV/2.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Human Resource Manager
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-lg-8 col-md-8">
<h2>Mila Kunis</h2>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam doloremque dolorum exercitationem ipsum maxime minima perspiciatis soluta velit voluptate! Aspernatur corporis ex iusto nostrum pariatur recusandae reiciendis temporibus ullam. Ab architecto blanditiis, eveniet expedita, magnam non perferendis quod totam unde vel, veniam vero. Ab aperiam doloremque nam obcaecati repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam doloremque dolorum exercitationem ipsum maxime minima perspiciatis soluta velit voluptate! Aspernatur corporis ex iusto nostrum pariatur recusandae reiciendis temporibus ullam. Ab architecto blanditiis, eveniet expedita, magnam non perferendis quod totam unde vel, veniam vero. Ab aperiam doloremque nam obcaecati repellat.</p>
<div class="socials">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-4">
<img src="https://i.postimg.cc/Y9MkMvGk/3.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- ignore the code below-->
<div class="link-area">
<a href="https://www.youtube.com/channel/UCki4IDK86E6_pDtptmsslow" target="_blank">Click for More</a>
</div>
body{
background: #5b5b5b;
}
.sec-header{
color: #fff;
margin-top: 25px;
}
.socials a {
width: 40px;
height: 40px;
background: #000;
display: inline-block;
}
.socials i {
color: #fff;
padding: 12px;
}
.line {
height: 2px;
width: 200px;
background: #AE0F86;
margin: 20px 0;
}
.card-header {
background-color: #AE0F86;
}
.btn.btn-link {
color: #fff;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
}
/* ignore the code below */
.link-area
{
position:fixed;
bottom:20px;
left:20px;
padding:15px;
border-radius:40px;
background:tomato;
}
.link-area a
{
text-decoration:none;
color:#fff;
font-size:25px;
}