"Make ID Card Using HTML & CSS"
Bootstrap 4.0.0 Snippet by tieusuquay79

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="id-card-tag"></div>
<div class="id-card-tag-strip"></div>
<div class="id-card-hook"></div>
<div class="id-card-holder">
<div class="id-card">
<div class="header">
<img src="https://lh3.googleusercontent.com/-ebxWAGWvWg0/WTABBfdBv2I/AAAAAAAAAqw/qef78bVeIngorIsmAUD4tWVUd8WDvZyuQCEw/w140-h74-p/Untitled-2.png">
</div>
<div class="photo">
<img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAuXAAAAJDE2YjQzOGZkLTU5YzAtNGRkNC04NTUzLTM3Zjg0ZWVlMGQxZA.jpg">
</div>
<h2>Kiran Das DA</h2>
<div class="qr-code">
<img src="https://www.shopify.com/growth-tools-assets/qr-code/shopify-faae7065b7b351d28495b345ed76096c03de28bac346deb1e85db632862fd0e4.png">
</div>
<h3>www.onetikk.info</h3>
<hr>
<p><strong>"PENGG"</strong>HOUSE,4th Floor, TC 11/729(4), Division Office Road <p>
<p>Near PMG Junction, Thiruvananthapuram Kerala, India <strong>695033</strong></p>
<p>Ph: 9446062493 | E-ail: info@onetikk.info</p>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
background-color: #d7d6d3;
font-family:'verdana';
}
.id-card-holder {
width: 225px;
padding: 4px;
margin: 0 auto;
background-color: #1f1f1f;
border-radius: 5px;
position: relative;
}
.id-card-holder:after {
content: '';
width: 7px;
display: block;
background-color: #0a0a0a;
height: 100px;
position: absolute;
top: 105px;
border-radius: 0 5px 5px 0;
}
.id-card-holder:before {
content: '';
width: 7px;
display: block;
background-color: #0a0a0a;
height: 100px;
position: absolute;
top: 105px;
left: 222px;
border-radius: 5px 0 0 5px;
}
.id-card {
background-color: #fff;
padding: 10px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit PRO
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: