<div class="container-fluid px-5 py-5">
<div class="row justify-content-center">
<div class="col-12 text-center mb-5">
<h1 id="heading" class="mb-0">Our creative team</h1> <small id="heading0">Creative Thinking For Business PSD Template</small>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-3 col-md-6 col-12 mb-4">
<div class="card text-center rounded-0 border-0" id="card1">
<div class="hex-img mt-5 mb-4"> <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://i.imgur.com/RCwPA3O.jpg" x="-25" width="150" height="100" />
</pattern>
</defs>
<polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img1)" />
</svg> </div>
<h2 class="card-name">Alissa</h2>
<p class="position">Founder & CEO</p>
<div class="row mx-5 mb-5 mt-3 justify-content-center">
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-facebook"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-twitter"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-linkedin"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-pinterest"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12 mb-4">
<div class="card text-center rounded-0 border-0" id="card2">
<div class="hex-img mt-5 mb-4"> <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img2" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://i.imgur.com/m9llh5o.jpg" x="-25" width="150" height="100" />
</pattern>
</defs>
<polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img2)" />
</svg> </div>
<h2 class="card-name">Tom Harry</h2>
<p class="position">Founder & CEO</p>
<div class="row mx-5 mb-5 mt-3 justify-content-center">
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-facebook"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-twitter"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-linkedin"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-pinterest"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12 mb-4">
<div class="card text-center rounded-0 border-0" id="card3">
<div class="hex-img mt-5 mb-4"> <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img3" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://i.imgur.com/Mcd6HIg.jpg" x="-25" width="150" height="100" />
</pattern>
</defs>
<polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img3)" />
</svg> </div>
<h2 class="card-name">Rosey Clark</h2>
<p class="position">Founder & CEO</p>
<div class="row mx-5 mb-5 mt-3 justify-content-center">
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-facebook"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-twitter"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-linkedin"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-pinterest"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12 mb-4">
<div class="card text-center rounded-0 border-0" id="card4">
<div class="hex-img mt-5 mb-4"> <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img4" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://i.imgur.com/V3ICjlm.jpg" x="-25" width="150" height="100" />
</pattern>
</defs>
<polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img4)" />
</svg> </div>
<h2 class="card-name">John Hary</h2>
<p class="position">Founder & CEO</p>
<div class="row mx-5 mb-5 mt-3 justify-content-center">
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-facebook"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-twitter"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-linkedin"></div>
</div>
<div class="col-3 px-0 py-1">
<div class="py-3 fa fa-pinterest"></div>
</div>
</div>
</div>
</div>
</div>
</div>
* {
padding: 0;
margin: 0
}
.container-fluid {
background-color: #000000
}
#heading,
#heading0 {
color: #ffffff
}
.card {
background-color: #E8EAF6;
padding-top: 0px;
cursor: pointer
}
.card-name:hover {
color: #424242
}
#card1 {
border-top: 4px solid #3D5AFE !important;
transition: 0.5s
}
#card1:hover {
box-shadow: 0 0 2px 2px #3D5AFE;
transition: 0.5s
}
#card2 {
border-top: 4px solid #00E676 !important;
transition: 0.5s
}
#card2:hover {
box-shadow: 0 0 2px 2px #00E676;
transition: 0.5s
}
#card3 {
border-top: 4px solid #AB47BC !important;
transition: 0.5s
}
#card3:hover {
box-shadow: 0 0 2px 2px #AB47BC;
transition: 0.5s
}
#card4 {
border-top: 4px solid #FBC02D !important;
transition: 0.5s
}
#card4:hover {
box-shadow: 0 0 2px 2px #FBC02D;
transition: 0.5s
}
.hex-icon {
background-color: black;
width: 30%
}
.fa {
color: white;
background-color: black;
width: 40px;
transition: 0.2s
}
.fa:hover {
opacity: 1;
transition: 0.2s
}
.fa-facebook {
background-color: #4267B2;
opacity: 0.8
}
.fa-twitter {
background-color: #1DA1F2;
opacity: 0.8
}
.fa-linkedin {
background-color: #0077B5;
opacity: 0.8
}
.fa-pinterest {
background-color: #E60023;
opacity: 0.8
}
svg {
height: 200px;
width: 240px
}