- One account for five websites!
- Free access to Premium Codes
- Acess to cool web tools
- Ask and answer questions
- Stay ahead of other web developers
- and MUCH MORE!
Sign up
Sign in
Home
How to use
Sitemap
About Us
Suggested
Privacy Policy
Previous Code
If you are a member of a team and want to introduce yourself to other people, this post can help you functionally. Here, we have prepared the Team Profile Cards with Bootstrap with functional performance. This post is so useful and you can introduce your team beautifully. The following HTML Card Code includes several sections that each one has its specific color. You should use each part to introduce a person. By using this Bootstrap Profile Card, your audiences know you better and they can contact you easily. Many websites use this code to attract people’s attention.
As we mentioned before, this Bootstrap Card with Button has different colors in blue, green, yellow, pink, and other colors. At the top of these pages, there are the profiles and pictures of your team members. Under the profile, you can see the person’s name and family. Then, you can mention a small description in the middle of the page with a suitable font. At the end of the page, you can see different icons for social media, like Twitter, Facebook, Instagram, and other apps. The Social Button on Bootstrap Card helps the audiences to contact the team member easily in their way.
#
Bootstrap Profile Card
#
HTML Card Code
#
Bootstrap Card with Button
#
Social Button on Bootstrap Card
<!-- This script got from frontendfreecode.com -->
<div class="container">
<div class="row mt-5">
<!-- =================First card Col starts here============= -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader FirstCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol FirstCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =================First card Col ends here============= -->
<!-- =================Second card Col starts here============= -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader SecondCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol SecondCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =================Second card Col ends here============= -->
<!-- =================Third card Col starts here============= -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader ThirdCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol ThirdCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =================Third card Col ends here============= -->
<!-- =================Fourth card Col starts here============= -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader FourthCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol FourthCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =================Fourth card Col ends here============= -->
</div>
<div class="row mt-5">
<!-- ==============Fifth card col starts here============ -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader FifthCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol FifthCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ==============Fifth card col ends here============== -->
<!-- =====sixth card starts here==================== -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader SixthCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol SixthCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =====sixth card ends here==================== -->
<!--============ Seventh card starts here ==========-->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader SeventhCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol SeventhCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--============ Seventh card ends here =============-->
<!-- ===========Eigth card starts here================ -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader EigthCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol EigthCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ===========Eigth card ends here================ -->
</div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");
body {
font-family: "Satisfy", cursive;
background-color: #8484b3;
margin-bottom: 5rem;
}
.card {
border: none;
box-shadow: 1px 1px 10px #444141;
border-radius: 12px;
}
/* ==========card header====== */
.FirstCardHeaderBgColor {
background-color: #73ffd6;
}
.cardHeader {
height: 6rem;
position: relative;
border-top-left-radius: 12px;
}
.socialMediaIcon {
padding: 12px 12px;
}
.addSymbol {
/* background-color: #73ffd6; */
/* color: #ffffff; */
position: absolute;
right: -12px;
top: -10px;
border-radius: 18px;
box-shadow: 1px 2px 5px #434947;
height: 28px;
width: 28px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 12px;
}
.iconColor {
color: #ffffff;
}
/* ==========card header====== */
/* ======card body======== */
/* ======card body======== */
/* .cardBody {
background-color: #ffffff;
} */
/* ======img css======== */
.imageDiv {
height: 6rem;
width: 6rem;
margin: -61px auto auto;
position: relative;
border: 5px solid #ffffff;
border-radius: 51px;
}
.image {
border-radius: 900px;
height: 100%;
object-fit: cover;
width: 100%;
}
/* ======img css======== */
/* ==================footer===== */
.listItem {
list-style-type: none;
}
.footerIcons {
text-decoration: none;
text-decoration: none;
height: 24px;
width: 24px;
/* border: 1px solid black; */
display: inline-flex;
align-items: center;
justify-content: center;
}
/*==============footer===== */
/* .ulElement {
border: 1px solid red;
} */
.SecondCardHeaderBgColor {
background-color: #9fc1ff !important;
}
.ThirdCardHeaderBgColor {
background-color: #91a6d1;
}
.FourthCardHeaderBgColor {
background-color: #9ad9ff;
}
.FifthCardHeaderBgColor {
background-color: #a4d0e7;
}
.SixthCardHeaderBgColor {
background-color: #ffc6e3;
}
.SeventhCardHeaderBgColor {
background-color: #ffd7ae;
}
.EigthCardHeaderBgColor {
background-color: #ff97a3;
}<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js'></script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js'></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");
body {
font-family: "Satisfy", cursive;
background-color: #8484b3;
margin-bottom: 5rem;
}
.card {
border: none;
box-shadow: 1px 1px 10px #444141;
border-radius: 12px;
}
/* ==========card header====== */
.FirstCardHeaderBgColor {
background-color: #73ffd6;
}
.cardHeader {
height: 6rem;
position: relative;
border-top-left-radius: 12px;
}
.socialMediaIcon {
padding: 12px 12px;
}
.addSymbol {
/* background-color: #73ffd6; */
/* color: #ffffff; */
position: absolute;
right: -12px;
top: -10px;
border-radius: 18px;
box-shadow: 1px 2px 5px #434947;
height: 28px;
width: 28px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 12px;
}
.iconColor {
color: #ffffff;
}
/* ==========card header====== */
/* ======card body======== */
/* ======card body======== */
/* .cardBody {
background-color: #ffffff;
} */
/* ======img css======== */
.imageDiv {
height: 6rem;
width: 6rem;
margin: -61px auto auto;
position: relative;
border: 5px solid #ffffff;
border-radius: 51px;
}
.image {
border-radius: 900px;
height: 100%;
object-fit: cover;
width: 100%;
}
/* ======img css======== */
/* ==================footer===== */
.listItem {
list-style-type: none;
}
.footerIcons {
text-decoration: none;
text-decoration: none;
height: 24px;
width: 24px;
/* border: 1px solid black; */
display: inline-flex;
align-items: center;
justify-content: center;
}
/*==============footer===== */
/* .ulElement {
border: 1px solid red;
} */
.SecondCardHeaderBgColor {
background-color: #9fc1ff !important;
}
.ThirdCardHeaderBgColor {
background-color: #91a6d1;
}
.FourthCardHeaderBgColor {
background-color: #9ad9ff;
}
.FifthCardHeaderBgColor {
background-color: #a4d0e7;
}
.SixthCardHeaderBgColor {
background-color: #ffc6e3;
}
.SeventhCardHeaderBgColor {
background-color: #ffd7ae;
}
.EigthCardHeaderBgColor {
background-color: #ff97a3;
}
</style>
</head>
<body>
<div class="container">
<div class="row mt-5">
<!-- =================First card Col starts here============= -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader FirstCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol FirstCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =================First card Col ends here============= -->
<!-- =================Second card Col starts here============= -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader SecondCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol SecondCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =================Second card Col ends here============= -->
<!-- =================Third card Col starts here============= -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader ThirdCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol ThirdCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =================Third card Col ends here============= -->
<!-- =================Fourth card Col starts here============= -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader FourthCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol FourthCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =================Fourth card Col ends here============= -->
</div>
<div class="row mt-5">
<!-- ==============Fifth card col starts here============ -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader FifthCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol FifthCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ==============Fifth card col ends here============== -->
<!-- =====sixth card starts here==================== -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader SixthCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol SixthCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =====sixth card ends here==================== -->
<!--============ Seventh card starts here ==========-->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader SeventhCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol SeventhCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--============ Seventh card ends here =============-->
<!-- ===========Eigth card starts here================ -->
<div class="col-md-6 col-lg-3 mt-4">
<div class="card">
<div class="card-body p-0">
<div class="cardHeader EigthCardHeaderBgColor">
<div>
<i class="fab fa-facebook-f iconColor socialMediaIcon"></i>
</div>
<div class="ms-auto addSymbol EigthCardHeaderBgColor">
<i class="fas fa-plus iconColor fa-1x"></i>
</div>
</div>
<div class="imageDiv">
<img src="http://frontendfreecode.com/img/black-man.jpg"
alt=""
class="img-fluid image" />
</div>
<div class="text-center p-3 fs-4">Name and Family</div>
<div class="text-center p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
doloremque soluta voluptatibus necessitatibus autem ea facere
</div>
<div class="p-4">
<ul class="
d-flex
justify-content-center
align-items-center
m-0
p-0
">
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="listItem">
<a href="http://frontendfreecode.com/" class="footerIcons mx-2">
<i class="fab fa-behance"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ===========Eigth card ends here================ -->
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
</body>
</html>
Preview
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
WHAT IS NEW IN KERIXA?
RECENT CODES
CATEGORIES
Frontend Free Code
© 2024 Kerixa Inc