" Personal Flip Card "
Bootstrap 3.0.0 Snippet by harunpehlivan

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
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="father">
<!--Start Front Side-->
<div class="front">
<header>
<img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1505286021" alt="Eslam"> <!--or https://goo.gl/YMvdyN-->
</header>
<span class="hover1">HARUN PEHLİVAN</span>
<p> FOUNDER,CEO BLOGGER</p>
<span class="hover2">Hover To See Details</span>
</div>
<!--End Front Side-->
<!--Start Back Side-->
<div class="back">
Contact me at:
<ul>
<li>
HARUN PEHLİVAN<a href="https://www.facebook.com/profile.php?id=100008152065270" target="_blanck">
<i class="fa fa-facebook-square fa-4x"></i></a>
</li>
<hr>
<li>
<a href="https://twitter.com/HTERCUMANP" target="_blanck">
<i class="fa fa-twitter-square fa-4x"></i></a>HARUN PEHLİVAN
</li>
<hr>
<li>HARUN PEHLİVANy<a href="https://www.youtube.com/user/harunpehlivan1" target="_blanck">
<i class="fa fa-youtube-square fa-4x"></i></a>
</li>
<hr>
<li>
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252/" target="_blanck">
<i class="fa fa-linkedin-square fa-4x"></i></a>HARUN PEHLİVAN
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: #64b5f6;
margin: 0;
padding: 10px;
perspective: 1000px
}
.father {
font-family: 'Frijole', cursive;
height: 500px;
margin: auto;
position: relative;
text-align: center;
transform-style: preserve-3d;
transition: all 1.5s ease-in-out;
width: 400px
}
.father:hover {transform:rotateX(180deg) rotateY(360deg)}
.father > div {
backface-visibility: hidden;
height: 100%;
position: absolute;
width: 100%
}
.front {
background: #222930;
border-radius: 20px 20px 10px 10px;
color: #000;
z-index: 2
}
.back {
background: #222930;
border-radius: 20px;
color: #FFF;
transform: rotateX(180deg);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Datepicker
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: