Create contact card using HTML CSS
1.assets/image/logo.png
2.assets/css/styles.css
------------------------//----------------------------
Step1: index.html
Now in this step, you need to add two routes to your index.html file the same as below.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bs4 Contacts cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- add style css -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container page-container">
<div class="row gutters">
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card green">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>Soeng Souy</h5>
<h6>@movies</h6>
<p>On the 28th of October 2020 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card blue">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>Cong Ly</h5>
<h6>@hollywood</h6>
<p>On the 28th of October 2019 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card pink">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>Star Game</h5>
<h6>@gamestar</h6>
<p>On the 28th of October 2018 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card brown">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>To Ly</h5>
<h6>@business</h6>
<p>On the 28th of October 2017 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card fb">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>Harry</h5>
<h6>@writer</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card green">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>George</h5>
<h6>@tester</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card red">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>Emily</h5>
<h6>@designer</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card orange">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>Julie</h5>
<h6>@fashion</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card teal">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>Taylor</h5>
<h6>@marketing</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card gp">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>Roberts</h5>
<h6>@actress</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card blue">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>O'Sullivan</h5>
<h6>@smart</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-12">
<figure class="user-card orange">
<figcaption>
<img src="image/logo.png" alt="Soeng Souy" class="profile">
<h5>O'Brien</h5>
<h6>@football</h6>
<p>On the 28th of October 2016 we completed a 3-part transaction with the contractor.</p>
<ul class="contacts">
<li>
<a href="#">
user@soengsouy.com
</a>
</li>
<li>
<a href="#">
www.soengsouy.com
</a>
</li>
</ul>
<div class="clearfix">
<span class="badge badge-pill badge-info">#HTML5</span>
<span class="badge badge-pill badge-success">#CSS3</span>
<span class="badge badge-pill badge-orange">#Angular JS</span>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
Step 2: assets/css/style.css
Now in this step, you need to add two routes in your style.css file same as below.
style.css
body {
background: #eee;
}
.page-container {
margin-top: 40px;
}
figure.user-card {
background: #ffffff;
padding: 20px;
border-top: 3px solid #f2f2f2;
border: 1px solid #e1e5f1;
text-align: center;
}
figure.user-card.red {
border-top: 3px solid #fc6d4c;
}
figure.user-card.green {
border-top: 3px solid #3ecfac;
}
figure.user-card.blue {
border-top: 3px solid #5a99ee;
}
figure.user-card.yellow {
border-top: 3px solid #ffc139;
}
figure.user-card.orange {
border-top: 3px solid #ff5000;
}
figure.user-card.teal {
border-top: 3px solid #47BCC7;
}
figure.user-card.pink {
border-top: 3px solid #ff9fd0;
}
figure.user-card.brown {
border-top: 3px solid #79574b;
}
figure.user-card.purple {
border-top: 3px solid #904e95;
}
figure.user-card.fb {
border-top: 3px solid #3B5998;
}
figure.user-card.gp {
border-top: 3px solid #E02F2F;
}
figure.user-card .profile {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
max-width: 72px;
margin-bottom: 20px;
}
figure.user-card h5 {
margin: 0 0 5px 0;
}
figure.user-card h6 {
margin: 0 0 15px 0;
color: #8796af;
font-size: 14px;
}
figure.user-card p {
margin: 0;
padding: 0 0 15px 0;
color: #8796af;
line-height: 150%;
font-size: 0.85rem;
}
figure.user-card ul.contacts {
margin: 0;
padding: 0 0 15px 0;
line-height: 150%;
font-size: 0.85rem;
}
figure.user-card ul.contacts li {
padding: 0.2rem 0;
}
figure.user-card ul.contacts li a {
color: #5a99ee;
}
figure.user-card ul.contacts li a i {
min-width: 36px;
float: left;
font-size: 1rem;
}
figure.user-card ul.contacts li:last-child a {
color: #ff5000;
}
ul li {
list-style-type: none;
}
