HTML
xxxxxxxxxx1
<div class="container my-5">2
3
4
<!--Section: Content-->5
<section class="text-center dark-grey-text">6
7
<!-- Section heading -->8
<h3 class="font-weight-bold pb-2 mb-4">Our amazing team</h3>9
<!-- Section description -->10
<p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.11
Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam12
eum porro a pariatur veniam.</p>13
14
<!-- Grid row -->15
<div class="row">16
17
<!-- Grid column -->18
<div class="col-lg-4 col-md-12 mb-4">19
20
<!-- Rotating card -->21
<div class="card-wrapper">22
<div id="card-1" class="card card-rotating text-center">23
<!-- Front Side -->24
<div class="face front">25
<!-- Image -->26
<div class="card-up">27
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/19.jpg" alt="Team member card image">28
</div>29
<!-- Avatar -->30
<div class="avatar mx-auto white">31
<img src="https://mdbootstrap.com/img/Photos/Avatars/img(10).jpg" class="rounded-circle img-fluid"32
alt="First sample avatar image">33
</div>34
<!-- Content -->35
<div class="card-body">36
<h4 class="font-weight-bold mt-1 mb-3">Maria Kate</h4>37
<p class="font-weight-bold dark-grey-text">Photographer</p>38
<!-- Triggering button -->39
<a class="rotate-btn grey-text" data-card="card-1">40
<i class="fas fa-redo-alt grey-text"></i> Click here to rotate</a>41
</div>42
</div>43
<!-- Front Side -->44
<!-- Back Side -->45
<div class="face back">46
<!-- Content -->47
<div class="card-body">48
<!-- Content -->49
<h4 class="font-weight-bold mt-4 mb-2">50
<strong>About me</strong>51
</h4>52
<hr>53
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.54
Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus,55
voluptatum eum, officia laudantium quaerat?56
</p>57
<hr>58
<!-- Social Icons -->59
<ul class="list-inline list-unstyled">60
<li class="list-inline-item">61
<a class="p-2 fa-lg fb-ic">62
<i class="fab fa-facebook-f"></i>63
</a>64
</li>65
<li class="list-inline-item">66
<a class="p-2 fa-lg pin-ic">67
<i class="fab fa-pinterest"> </i>68
</a>69
</li>70
<li class="list-inline-item">71
<a class="p-2 fa-lg ins-ic">72
<i class="fab fa-instagram"> </i>73
</a>74
</li>75
<li class="list-inline-item">76
<a class="p-2 fa-lg tw-ic">77
<i class="fab fa-twitter"> </i>78
</a>79
</li>80
</ul>81
<!-- Triggering button -->82
<a class="rotate-btn grey-text" data-card="card-1">83
<i class="fas fa-redo-alt grey-text"></i> Click here to rotate back</a>84
</div>85
</div>86
<!-- Back Side -->87
</div>88
</div>89
<!-- Rotating card -->90
91
</div>92
<!-- Grid column -->93
94
<!-- Grid column -->95
<div class="col-lg-4 col-md-12 mb-4">96
<!-- Rotating card -->97
<div class="card-wrapper">98
<div id="card-2" class="card card-rotating text-center">99
<!-- Front Side -->100
<div class="face front">101
<!-- Image -->102
<div class="card-up">103
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/82.jpg" alt="Team member card image">104
</div>105
<!-- Avatar -->106
<div class="avatar mx-auto white">107
<img src="https://mdbootstrap.com/img/Photos/Avatars/img(20).jpg" class="rounded-circle" alt="Second sample avatar image">108
</div>109
<!-- Content -->110
<div class="card-body">111
<h4 class="font-weight-bold mt-1 mb-3">Anna Deynah</h4>112
<p class="font-weight-bold dark-grey-text">Web Designer</p>113
<!-- Triggering button -->114
<a class="rotate-btn grey-text" data-card="card-2">115
<i class="fas fa-redo-alt grey-text"></i> Click here to rotate</a>116
</div>117
</div>118
<!-- Front Side -->119
<!-- Back Side -->120
<div class="face back">121
<!-- Content -->122
<div class="card-body">123
<!-- Content -->124
<h4 class="font-weight-bold mt-4 mb-2">125
<strong>About me</strong>126
</h4>127
<hr>128
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.129
Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus,130
voluptatum eum, officia laudantium quaerat?131
</p>132
<hr>133
<!-- Social Icons -->134
<ul class="list-inline list-unstyled">135
<li class="list-inline-item">136
<a class="p-2 fa-lg fb-ic">137
<i class="fab fa-facebook-f"></i>138
</a>139
</li>140
<li class="list-inline-item">141
<a class="p-2 fa-lg pin-ic">142
<i class="fab fa-pinterest"> </i>143
</a>144
</li>145
<li class="list-inline-item">146
<a class="p-2 fa-lg ins-ic">147
<i class="fab fa-instagram"> </i>148
</a>149
</li>150
<li class="list-inline-item">151
<a class="p-2 fa-lg tw-ic">152
<i class="fab fa-twitter"> </i>153
</a>154
</li>155
</ul>156
<!-- Triggering button -->157
<a class="rotate-btn grey-text" data-card="card-2">158
<i class="fas fa-redo-alt grey-text"></i> Click here to rotate back</a>159
</div>160
</div>161
<!-- Back Side -->162
</div>163
</div>164
<!-- Rotating card -->165
</div>166
<!-- Grid column -->167
168
<!-- Grid column -->169
<div class="col-lg-4 col-md-12 mb-4">170
<!-- Rotating card -->171
<div class="card-wrapper">172
<div id="card-3" class="card card-rotating text-center">173
<!-- Front Side -->174
<div class="face front">175
<!-- Image -->176
<div class="card-up">177
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg"178
alt="Team member card image">179
</div>180
<!-- Avatar -->181
<div class="avatar mx-auto white">182
<img src="https://mdbootstrap.com/img/Photos/Avatars/img(8).jpg" class="rounded-circle img-fluid"183
alt="Third sample avatar image">184
</div>185
<!-- Content -->186
<div class="card-body">187
<h4 class="font-weight-bold mt-1 mb-3">John Doe</h4>188
<p class="font-weight-bold dark-grey-text">Front-end Developer</p>189
<!-- Triggering button -->190
<a class="rotate-btn grey-text" data-card="card-3">191
<i class="fas fa-redo-alt grey-text"></i> Click here to rotate</a>192
</div>193
</div>194
<!-- Front Side -->195
<!-- Back Side -->196
<div class="face back">197
<!-- Content -->198
<div class="card-body">199
<!-- Content -->200
<h4 class="font-weight-bold mt-4 mb-2">201
<strong>About me</strong>202
</h4>203
<hr>204
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.205
Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus,206
voluptatum eum, officia laudantium quaerat?207
</p>208
<hr>209
<!-- Social Icons -->210
<ul class="list-inline list-unstyled">211
<li class="list-inline-item">212
<a class="p-2 fa-lg fb-ic">213
<i class="fab fa-facebook-f"></i>214
</a>215
</li>216
<li class="list-inline-item">217
<a class="p-2 fa-lg pin-ic">218
<i class="fab fa-pinterest"> </i>219
</a>220
</li>221
<li class="list-inline-item">222
<a class="p-2 fa-lg ins-ic">223
<i class="fab fa-instagram"> </i>224
</a>225
</li>226
<li class="list-inline-item">227
<a class="p-2 fa-lg tw-ic">228
<i class="fab fa-twitter"> </i>229
</a>230
</li>231
</ul>232
<!-- Triggering button -->233
<a class="rotate-btn grey-text" data-card="card-3">234
<i class="fas fa-redo-alt grey-text"></i> Click here to rotate back</a>235
</div>236
</div>237
<!-- Back Side -->238
</div>239
</div>240
<!-- Rotating card -->241
</div>242
<!-- Grid column -->243
244
</div>245
<!-- Grid row -->246
247
</section>248
<!--Section: Content-->249
250
251
</div>CSS
1
1
JS
1
1
Console errors: 0