xxxxxxxxxx1
2
<h5>3
Testing before the card4
</h5> 5
<!-- Rotating card -->6
<div class="card-wrapper">7
<div id="card-1" class="card card-rotating text-center">8
9
<!-- Front Side -->10
<div class="face front">11
12
<!-- Image-->13
<div class="card-up">14
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo7.jpg" alt="Image with a photo of clouds.">15
</div>16
17
<!-- Avatar -->18
<div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle"19
alt="Sample avatar image.">20
</div>21
22
<!-- Content -->23
<div class="card-body">24
<h4 class="font-weight-bold mb-3">Marie Johnson</h4>25
<p class="font-weight-bold blue-text">Web developer</p>26
<!-- Triggering button -->27
<a class="rotate-btn" data-card="card-1"><i class="fas fa-redo-alt"></i> Click here to rotate</a>28
</div>29
</div>30
<!-- Front Side -->31
32
<!-- Back Side -->33
<div class="face back">34
<div class="card-body">35
36
<!-- Content -->37
<h4 class="font-weight-bold mb-0">About me</h4>38
<hr>39
<p>40
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel41
eius veniam maxime?42
<hr>43
<!-- Social Icons -->44
<ul class="list-inline py-2">45
<li class="list-inline-item"><a class="p-2 fa-lg fb-ic"><i class="fab fa-facebook-f"></i></a></li>46
<li class="list-inline-item"><a class="p-2 fa-lg tw-ic"><i class="fab fa-twitter"></i></a></li>47
<li class="list-inline-item"><a class="p-2 fa-lg gplus-ic"><i class="fab fa-google-plus-g"></i></a></li>48
<li class="list-inline-item"><a class="p-2 fa-lg li-ic"><i class="fab fa-linkedin-in"></i></a></li>49
</ul>50
<!-- Triggering button -->51
<a class="rotate-btn" data-card="card-1"><i class="fas fa-undo"></i> Click here to rotate</a>52
53
</div>54
</div>55
<!-- Back Side -->56
57
</div>58
</div>59
60
<h5>61
Testing after the card62
</h5> 63
64
<!-- Rotating card -->1
1
1
1
Console errors: 0