├── README.md
├── css
    ├── bootstrap.css
    ├── pe-icon-7-stroke.css
    └── rotating-card.css
├── genezio.yaml
├── images
    ├── rotating_card_profile.png
    ├── rotating_card_profile2.png
    ├── rotating_card_profile3.png
    ├── rotating_card_thumb.jpg
    ├── rotating_card_thumb.png
    ├── rotating_card_thumb2.png
    ├── rotating_card_thumb3.png
    └── tim_logo.png
├── index.html
├── js
    ├── bootstrap.min.js
    └── jquery-1.10.2.js
└── rotating-card.html


/README.md:
--------------------------------------------------------------------------------
1 | # rotating-card
2 | 
3 | ## Deploy
4 | 
5 | :rocket: You can deploy your own version of the template to Genezio with one click:
6 | 
7 | [![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/rotating-css-card&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head)


--------------------------------------------------------------------------------
/css/pe-icon-7-stroke.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 | 	font-family: 'Pe-icon-7-stroke';
  3 | 	src:url('../fonts/Pe-icon-7-stroke.eot?-2irksn');
  4 | 	src:url('../fonts/Pe-icon-7-stroke.eot?#iefix-2irksn') format('embedded-opentype'),
  5 | 		url('../fonts/Pe-icon-7-stroke.woff?-2irksn') format('woff'),
  6 | 		url('../fonts/Pe-icon-7-stroke.ttf?-2irksn') format('truetype'),
  7 | 		url('../fonts/Pe-icon-7-stroke.svg?-2irksn#Pe-icon-7-stroke') format('svg');
  8 | 	font-weight: normal;
  9 | 	font-style: normal;
 10 | }
 11 | 
 12 | [class^="pe-7s-"], [class*=" pe-7s-"] {
 13 | 	display: inline-block;
 14 | 	font-family: 'Pe-icon-7-stroke';
 15 | 	speak: none;
 16 | 	font-style: normal;
 17 | 	font-weight: normal;
 18 | 	font-variant: normal;
 19 | 	text-transform: none;
 20 | 	line-height: 1;
 21 | 
 22 | 	/* Better Font Rendering =========== */
 23 | 	-webkit-font-smoothing: antialiased;
 24 | 	-moz-osx-font-smoothing: grayscale;
 25 | }
 26 | 
 27 | .pe-7s-cloud-upload:before {
 28 | 	content: "\e68a";
 29 | }
 30 | .pe-7s-cash:before {
 31 | 	content: "\e68c";
 32 | }
 33 | .pe-7s-close:before {
 34 | 	content: "\e680";
 35 | }
 36 | .pe-7s-bluetooth:before {
 37 | 	content: "\e68d";
 38 | }
 39 | .pe-7s-cloud-download:before {
 40 | 	content: "\e68b";
 41 | }
 42 | .pe-7s-way:before {
 43 | 	content: "\e68e";
 44 | }
 45 | .pe-7s-close-circle:before {
 46 | 	content: "\e681";
 47 | }
 48 | .pe-7s-id:before {
 49 | 	content: "\e68f";
 50 | }
 51 | .pe-7s-angle-up:before {
 52 | 	content: "\e682";
 53 | }
 54 | .pe-7s-wristwatch:before {
 55 | 	content: "\e690";
 56 | }
 57 | .pe-7s-angle-up-circle:before {
 58 | 	content: "\e683";
 59 | }
 60 | .pe-7s-world:before {
 61 | 	content: "\e691";
 62 | }
 63 | .pe-7s-angle-right:before {
 64 | 	content: "\e684";
 65 | }
 66 | .pe-7s-volume:before {
 67 | 	content: "\e692";
 68 | }
 69 | .pe-7s-angle-right-circle:before {
 70 | 	content: "\e685";
 71 | }
 72 | .pe-7s-users:before {
 73 | 	content: "\e693";
 74 | }
 75 | .pe-7s-angle-left:before {
 76 | 	content: "\e686";
 77 | }
 78 | .pe-7s-user-female:before {
 79 | 	content: "\e694";
 80 | }
 81 | .pe-7s-angle-left-circle:before {
 82 | 	content: "\e687";
 83 | }
 84 | .pe-7s-up-arrow:before {
 85 | 	content: "\e695";
 86 | }
 87 | .pe-7s-angle-down:before {
 88 | 	content: "\e688";
 89 | }
 90 | .pe-7s-switch:before {
 91 | 	content: "\e696";
 92 | }
 93 | .pe-7s-angle-down-circle:before {
 94 | 	content: "\e689";
 95 | }
 96 | .pe-7s-scissors:before {
 97 | 	content: "\e697";
 98 | }
 99 | .pe-7s-wallet:before {
100 | 	content: "\e600";
101 | }
102 | .pe-7s-safe:before {
103 | 	content: "\e698";
104 | }
105 | .pe-7s-volume2:before {
106 | 	content: "\e601";
107 | }
108 | .pe-7s-volume1:before {
109 | 	content: "\e602";
110 | }
111 | .pe-7s-voicemail:before {
112 | 	content: "\e603";
113 | }
114 | .pe-7s-video:before {
115 | 	content: "\e604";
116 | }
117 | .pe-7s-user:before {
118 | 	content: "\e605";
119 | }
120 | .pe-7s-upload:before {
121 | 	content: "\e606";
122 | }
123 | .pe-7s-unlock:before {
124 | 	content: "\e607";
125 | }
126 | .pe-7s-umbrella:before {
127 | 	content: "\e608";
128 | }
129 | .pe-7s-trash:before {
130 | 	content: "\e609";
131 | }
132 | .pe-7s-tools:before {
133 | 	content: "\e60a";
134 | }
135 | .pe-7s-timer:before {
136 | 	content: "\e60b";
137 | }
138 | .pe-7s-ticket:before {
139 | 	content: "\e60c";
140 | }
141 | .pe-7s-target:before {
142 | 	content: "\e60d";
143 | }
144 | .pe-7s-sun:before {
145 | 	content: "\e60e";
146 | }
147 | .pe-7s-study:before {
148 | 	content: "\e60f";
149 | }
150 | .pe-7s-stopwatch:before {
151 | 	content: "\e610";
152 | }
153 | .pe-7s-star:before {
154 | 	content: "\e611";
155 | }
156 | .pe-7s-speaker:before {
157 | 	content: "\e612";
158 | }
159 | .pe-7s-signal:before {
160 | 	content: "\e613";
161 | }
162 | .pe-7s-shuffle:before {
163 | 	content: "\e614";
164 | }
165 | .pe-7s-shopbag:before {
166 | 	content: "\e615";
167 | }
168 | .pe-7s-share:before {
169 | 	content: "\e616";
170 | }
171 | .pe-7s-server:before {
172 | 	content: "\e617";
173 | }
174 | .pe-7s-search:before {
175 | 	content: "\e618";
176 | }
177 | .pe-7s-film:before {
178 | 	content: "\e6a5";
179 | }
180 | .pe-7s-science:before {
181 | 	content: "\e619";
182 | }
183 | .pe-7s-disk:before {
184 | 	content: "\e6a6";
185 | }
186 | .pe-7s-ribbon:before {
187 | 	content: "\e61a";
188 | }
189 | .pe-7s-repeat:before {
190 | 	content: "\e61b";
191 | }
192 | .pe-7s-refresh:before {
193 | 	content: "\e61c";
194 | }
195 | .pe-7s-add-user:before {
196 | 	content: "\e6a9";
197 | }
198 | .pe-7s-refresh-cloud:before {
199 | 	content: "\e61d";
200 | }
201 | .pe-7s-paperclip:before {
202 | 	content: "\e69c";
203 | }
204 | .pe-7s-radio:before {
205 | 	content: "\e61e";
206 | }
207 | .pe-7s-note2:before {
208 | 	content: "\e69d";
209 | }
210 | .pe-7s-print:before {
211 | 	content: "\e61f";
212 | }
213 | .pe-7s-network:before {
214 | 	content: "\e69e";
215 | }
216 | .pe-7s-prev:before {
217 | 	content: "\e620";
218 | }
219 | .pe-7s-mute:before {
220 | 	content: "\e69f";
221 | }
222 | .pe-7s-power:before {
223 | 	content: "\e621";
224 | }
225 | .pe-7s-medal:before {
226 | 	content: "\e6a0";
227 | }
228 | .pe-7s-portfolio:before {
229 | 	content: "\e622";
230 | }
231 | .pe-7s-like2:before {
232 | 	content: "\e6a1";
233 | }
234 | .pe-7s-plus:before {
235 | 	content: "\e623";
236 | }
237 | .pe-7s-left-arrow:before {
238 | 	content: "\e6a2";
239 | }
240 | .pe-7s-play:before {
241 | 	content: "\e624";
242 | }
243 | .pe-7s-key:before {
244 | 	content: "\e6a3";
245 | }
246 | .pe-7s-plane:before {
247 | 	content: "\e625";
248 | }
249 | .pe-7s-joy:before {
250 | 	content: "\e6a4";
251 | }
252 | .pe-7s-photo-gallery:before {
253 | 	content: "\e626";
254 | }
255 | .pe-7s-pin:before {
256 | 	content: "\e69b";
257 | }
258 | .pe-7s-phone:before {
259 | 	content: "\e627";
260 | }
261 | .pe-7s-plug:before {
262 | 	content: "\e69a";
263 | }
264 | .pe-7s-pen:before {
265 | 	content: "\e628";
266 | }
267 | .pe-7s-right-arrow:before {
268 | 	content: "\e699";
269 | }
270 | .pe-7s-paper-plane:before {
271 | 	content: "\e629";
272 | }
273 | .pe-7s-delete-user:before {
274 | 	content: "\e6a7";
275 | }
276 | .pe-7s-paint:before {
277 | 	content: "\e62a";
278 | }
279 | .pe-7s-bottom-arrow:before {
280 | 	content: "\e6a8";
281 | }
282 | .pe-7s-notebook:before {
283 | 	content: "\e62b";
284 | }
285 | .pe-7s-note:before {
286 | 	content: "\e62c";
287 | }
288 | .pe-7s-next:before {
289 | 	content: "\e62d";
290 | }
291 | .pe-7s-news-paper:before {
292 | 	content: "\e62e";
293 | }
294 | .pe-7s-musiclist:before {
295 | 	content: "\e62f";
296 | }
297 | .pe-7s-music:before {
298 | 	content: "\e630";
299 | }
300 | .pe-7s-mouse:before {
301 | 	content: "\e631";
302 | }
303 | .pe-7s-more:before {
304 | 	content: "\e632";
305 | }
306 | .pe-7s-moon:before {
307 | 	content: "\e633";
308 | }
309 | .pe-7s-monitor:before {
310 | 	content: "\e634";
311 | }
312 | .pe-7s-micro:before {
313 | 	content: "\e635";
314 | }
315 | .pe-7s-menu:before {
316 | 	content: "\e636";
317 | }
318 | .pe-7s-map:before {
319 | 	content: "\e637";
320 | }
321 | .pe-7s-map-marker:before {
322 | 	content: "\e638";
323 | }
324 | .pe-7s-mail:before {
325 | 	content: "\e639";
326 | }
327 | .pe-7s-mail-open:before {
328 | 	content: "\e63a";
329 | }
330 | .pe-7s-mail-open-file:before {
331 | 	content: "\e63b";
332 | }
333 | .pe-7s-magnet:before {
334 | 	content: "\e63c";
335 | }
336 | .pe-7s-loop:before {
337 | 	content: "\e63d";
338 | }
339 | .pe-7s-look:before {
340 | 	content: "\e63e";
341 | }
342 | .pe-7s-lock:before {
343 | 	content: "\e63f";
344 | }
345 | .pe-7s-lintern:before {
346 | 	content: "\e640";
347 | }
348 | .pe-7s-link:before {
349 | 	content: "\e641";
350 | }
351 | .pe-7s-like:before {
352 | 	content: "\e642";
353 | }
354 | .pe-7s-light:before {
355 | 	content: "\e643";
356 | }
357 | .pe-7s-less:before {
358 | 	content: "\e644";
359 | }
360 | .pe-7s-keypad:before {
361 | 	content: "\e645";
362 | }
363 | .pe-7s-junk:before {
364 | 	content: "\e646";
365 | }
366 | .pe-7s-info:before {
367 | 	content: "\e647";
368 | }
369 | .pe-7s-home:before {
370 | 	content: "\e648";
371 | }
372 | .pe-7s-help2:before {
373 | 	content: "\e649";
374 | }
375 | .pe-7s-help1:before {
376 | 	content: "\e64a";
377 | }
378 | .pe-7s-graph3:before {
379 | 	content: "\e64b";
380 | }
381 | .pe-7s-graph2:before {
382 | 	content: "\e64c";
383 | }
384 | .pe-7s-graph1:before {
385 | 	content: "\e64d";
386 | }
387 | .pe-7s-graph:before {
388 | 	content: "\e64e";
389 | }
390 | .pe-7s-global:before {
391 | 	content: "\e64f";
392 | }
393 | .pe-7s-gleam:before {
394 | 	content: "\e650";
395 | }
396 | .pe-7s-glasses:before {
397 | 	content: "\e651";
398 | }
399 | .pe-7s-gift:before {
400 | 	content: "\e652";
401 | }
402 | .pe-7s-folder:before {
403 | 	content: "\e653";
404 | }
405 | .pe-7s-flag:before {
406 | 	content: "\e654";
407 | }
408 | .pe-7s-filter:before {
409 | 	content: "\e655";
410 | }
411 | .pe-7s-file:before {
412 | 	content: "\e656";
413 | }
414 | .pe-7s-expand1:before {
415 | 	content: "\e657";
416 | }
417 | .pe-7s-exapnd2:before {
418 | 	content: "\e658";
419 | }
420 | .pe-7s-edit:before {
421 | 	content: "\e659";
422 | }
423 | .pe-7s-drop:before {
424 | 	content: "\e65a";
425 | }
426 | .pe-7s-drawer:before {
427 | 	content: "\e65b";
428 | }
429 | .pe-7s-download:before {
430 | 	content: "\e65c";
431 | }
432 | .pe-7s-display2:before {
433 | 	content: "\e65d";
434 | }
435 | .pe-7s-display1:before {
436 | 	content: "\e65e";
437 | }
438 | .pe-7s-diskette:before {
439 | 	content: "\e65f";
440 | }
441 | .pe-7s-date:before {
442 | 	content: "\e660";
443 | }
444 | .pe-7s-cup:before {
445 | 	content: "\e661";
446 | }
447 | .pe-7s-culture:before {
448 | 	content: "\e662";
449 | }
450 | .pe-7s-crop:before {
451 | 	content: "\e663";
452 | }
453 | .pe-7s-credit:before {
454 | 	content: "\e664";
455 | }
456 | .pe-7s-copy-file:before {
457 | 	content: "\e665";
458 | }
459 | .pe-7s-config:before {
460 | 	content: "\e666";
461 | }
462 | .pe-7s-compass:before {
463 | 	content: "\e667";
464 | }
465 | .pe-7s-comment:before {
466 | 	content: "\e668";
467 | }
468 | .pe-7s-coffee:before {
469 | 	content: "\e669";
470 | }
471 | .pe-7s-cloud:before {
472 | 	content: "\e66a";
473 | }
474 | .pe-7s-clock:before {
475 | 	content: "\e66b";
476 | }
477 | .pe-7s-check:before {
478 | 	content: "\e66c";
479 | }
480 | .pe-7s-chat:before {
481 | 	content: "\e66d";
482 | }
483 | .pe-7s-cart:before {
484 | 	content: "\e66e";
485 | }
486 | .pe-7s-camera:before {
487 | 	content: "\e66f";
488 | }
489 | .pe-7s-call:before {
490 | 	content: "\e670";
491 | }
492 | .pe-7s-calculator:before {
493 | 	content: "\e671";
494 | }
495 | .pe-7s-browser:before {
496 | 	content: "\e672";
497 | }
498 | .pe-7s-box2:before {
499 | 	content: "\e673";
500 | }
501 | .pe-7s-box1:before {
502 | 	content: "\e674";
503 | }
504 | .pe-7s-bookmarks:before {
505 | 	content: "\e675";
506 | }
507 | .pe-7s-bicycle:before {
508 | 	content: "\e676";
509 | }
510 | .pe-7s-bell:before {
511 | 	content: "\e677";
512 | }
513 | .pe-7s-battery:before {
514 | 	content: "\e678";
515 | }
516 | .pe-7s-ball:before {
517 | 	content: "\e679";
518 | }
519 | .pe-7s-back:before {
520 | 	content: "\e67a";
521 | }
522 | .pe-7s-attention:before {
523 | 	content: "\e67b";
524 | }
525 | .pe-7s-anchor:before {
526 | 	content: "\e67c";
527 | }
528 | .pe-7s-albums:before {
529 | 	content: "\e67d";
530 | }
531 | .pe-7s-alarm:before {
532 | 	content: "\e67e";
533 | }
534 | .pe-7s-airplay:before {
535 | 	content: "\e67f";
536 | }
537 | 


--------------------------------------------------------------------------------
/css/rotating-card.css:
--------------------------------------------------------------------------------
  1 | body {
  2 | 	margin-top: 60px;
  3 | 	font-size: 14px;
  4 | 	font-family: "Helvetica Nueue",Arial,Verdana,sans-serif;
  5 | 	background-color: #E5E9ED;
  6 | }
  7 | .btn:hover,
  8 | .btn:focus,
  9 | .btn:active{
 10 |     outline: 0 !important;
 11 | }
 12 | /* entire container, keeps perspective */
 13 | .card-container {
 14 | 	  -webkit-perspective: 800px;
 15 |    -moz-perspective: 800px;
 16 |      -o-perspective: 800px;
 17 |         perspective: 800px;
 18 |         margin-bottom: 30px;
 19 | }
 20 | /* flip the pane when hovered */
 21 | .card-container:not(.manual-flip):hover .card,
 22 | .card-container.hover.manual-flip .card{
 23 | 	-webkit-transform: rotateY( 180deg );
 24 | -moz-transform: rotateY( 180deg );
 25 |  -o-transform: rotateY( 180deg );
 26 |     transform: rotateY( 180deg );
 27 | }
 28 | 
 29 | 
 30 | .card-container.static:hover .card,
 31 | .card-container.static.hover .card {
 32 | 	-webkit-transform: none;
 33 | -moz-transform: none;
 34 |  -o-transform: none;
 35 |     transform: none;
 36 | }
 37 | /* flip speed goes here */
 38 | .card {
 39 | 	 -webkit-transition: -webkit-transform .5s;
 40 |    -moz-transition: -moz-transform .5s;
 41 |      -o-transition: -o-transform .5s;
 42 |         transition: transform .5s;
 43 | -webkit-transform-style: preserve-3d;
 44 |    -moz-transform-style: preserve-3d;
 45 |      -o-transform-style: preserve-3d;
 46 |         transform-style: preserve-3d;
 47 | 	position: relative;
 48 | }
 49 | 
 50 | /* hide back of pane during swap */
 51 | .front, .back {
 52 | 	-webkit-backface-visibility: hidden;
 53 |    -moz-backface-visibility: hidden;
 54 |      -o-backface-visibility: hidden;
 55 |         backface-visibility: hidden;
 56 | 	position: absolute;
 57 | 	top: 0;
 58 | 	left: 0;
 59 | 	background-color: #FFF;
 60 |     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
 61 | }
 62 | 
 63 | /* front pane, placed above back */
 64 | .front {
 65 | 	z-index: 2;
 66 | }
 67 | 
 68 | /* back, initially hidden pane */
 69 | .back {
 70 | 		-webkit-transform: rotateY( 180deg );
 71 |    -moz-transform: rotateY( 180deg );
 72 |      -o-transform: rotateY( 180deg );
 73 |         transform: rotateY( 180deg );
 74 |         z-index: 3;
 75 | }
 76 | 
 77 | .back .btn-simple{
 78 |     position: absolute;
 79 |     left: 0;
 80 |     bottom: 4px;
 81 | }
 82 | /*        Style       */
 83 | 
 84 | 
 85 | .card{
 86 |     background: none repeat scroll 0 0 #FFFFFF;
 87 |     border-radius: 4px;
 88 |     color: #444444;
 89 | }
 90 | .card-container, .front, .back {
 91 | 	width: 100%;
 92 | 	height: 420px;
 93 | 	border-radius: 4px;
 94 | }
 95 | .card .cover{
 96 |     height: 105px;
 97 |     overflow: hidden;
 98 |     border-radius: 4px 4px 0 0;
 99 | }
100 | .card .cover img{
101 |     width: 100%;
102 | }
103 | .card .user{
104 |     border-radius: 50%;
105 |     display: block;
106 |     height: 120px;
107 |     margin: -55px auto 0;
108 |     overflow: hidden;
109 |     width: 120px;
110 | }
111 | .card .user img{
112 |     background: none repeat scroll 0 0 #FFFFFF;
113 |     border: 4px solid #FFFFFF;
114 |     width: 100%;
115 | }
116 | 
117 | .card .content{
118 |     background-color: rgba(0, 0, 0, 0);
119 |     box-shadow: none;
120 |     padding: 10px 20px 20px;
121 | }
122 | .card .content .main {
123 |     min-height: 160px;
124 | }
125 | .card .back .content .main {
126 |     height: 215px;
127 | }
128 | .card .name {
129 |     font-size: 22px;
130 |     line-height: 28px;
131 |     margin: 10px 0 0;
132 |     text-align: center;
133 |     text-transform: capitalize;
134 | }
135 | .card h5{
136 |     margin: 5px 0;
137 |     font-weight: 400;
138 |     line-height: 20px;
139 | }
140 | .card .profession{
141 |     color: #999999;
142 |     text-align: center;
143 |     margin-bottom: 20px;
144 | }
145 | .card .footer {
146 |     border-top: 1px solid #EEEEEE;
147 |     color: #999999;
148 |     margin: 30px 0 0;
149 |     padding: 10px 0 0;
150 |     text-align: center;
151 | }
152 | .card .footer .social-links{
153 |     font-size: 18px;
154 | }
155 | .card .footer .social-links a{
156 |     margin: 0 7px;
157 | }
158 | .card .footer .btn-simple{
159 |     margin-top: -6px;
160 | }
161 | .card .header {
162 |     padding: 15px 20px;
163 |     height: 90px;
164 | }
165 | .card .motto{
166 |     border-bottom: 1px solid #EEEEEE;
167 |     color: #999999;
168 |     font-size: 14px;
169 |     font-weight: 400;
170 |     padding-bottom: 10px;
171 |     text-align: center;
172 | }
173 | 
174 | .card .stats-container{
175 | 	width: 100%;
176 | 	margin-top: 50px;
177 | }
178 | .card .stats{
179 | 	display: block;
180 | 	float: left;
181 | 	width: 33.333333%;
182 | 	text-align: center;
183 | }
184 | 
185 | .card .stats:first-child{
186 | 	border-right: 1px solid #EEEEEE;
187 | }
188 | .card .stats:last-child{
189 | 	border-left: 1px solid #EEEEEE;
190 | }
191 | .card .stats h4{
192 | 	font-weight: 300;
193 | 	margin-bottom: 5px;
194 | }
195 | .card .stats p{
196 | 	color: #777777;
197 | }
198 | /*      Just for presentation        */
199 | 
200 | .title{
201 |     color: #506A85;
202 |     text-align: center;
203 |     font-weight: 300;
204 |     font-size: 44px;
205 |     margin-bottom: 90px;
206 |     line-height: 90%;
207 | }
208 | .title small{
209 |     font-size: 17px;
210 |     color: #999;
211 |     text-transform: uppercase;
212 |     margin: 0;
213 | }
214 | .space-30{
215 | 	height: 30px;
216 | 	display: block;
217 | }
218 | .space-50{
219 |     height: 50px;
220 |     display: block;
221 | }
222 | .space-200{
223 |     height: 200px;
224 |     display: block;
225 | }
226 | .white-board{
227 |     background-color: #FFFFFF;
228 |     min-height: 200px;
229 |     padding: 60px 60px 20px;
230 | }
231 | .ct-heart{
232 |     color: #F74933;
233 | }
234 | 
235 |  pre.prettyprint{
236 |     background-color: #ffffff;
237 |     border: 1px solid #999;
238 |     margin-top: 20px;
239 |     padding: 20px;
240 |     text-align: left;
241 | }
242 | .atv, .str{
243 |     color: #05AE0E;
244 | }
245 | .tag, .pln, .kwd{
246 |      color: #3472F7;
247 | }
248 | .atn{
249 |   color: #2C93FF;
250 | }
251 | .pln{
252 |    color: #333;
253 | }
254 | .com{
255 |     color: #999;
256 | }
257 | 
258 | .btn-simple{
259 |     opacity: .8;
260 |     color: #666666;
261 |     background-color: transparent;
262 | }
263 | 
264 | .btn-simple:hover,
265 | .btn-simple:focus{
266 |     background-color: transparent;
267 |     box-shadow: none;
268 |     opacity: 1;
269 | }
270 | .btn-simple i{
271 |     font-size: 16px;
272 | }
273 | 
274 | .navbar-brand-logo{
275 |     padding: 0;
276 | }
277 | .navbar-brand-logo .logo{
278 |     border: 1px solid #333333;
279 |     border-radius: 50%;
280 |     float: left;
281 |     overflow: hidden;
282 |     width: 60px;
283 | }
284 | .navbar .navbar-brand-logo .brand{
285 |     color: #FFFFFF;
286 |     float: left;
287 |     font-size: 18px;
288 |     font-weight: 400;
289 |     line-height: 20px;
290 |     margin-left: 10px;
291 |     margin-top: 10px;
292 |     width: 60px;
293 | }
294 | .navbar-default .navbar-brand-logo .brand{
295 |     color: #555;
296 | }
297 | 
298 | 
299 | /*       Fix bug for IE      */
300 | 
301 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
302 |     .front, .back{
303 |         -ms-backface-visibility: visible;
304 |         backface-visibility: visible;
305 |     }
306 | 
307 |     .back {
308 |         visibility: hidden;
309 |         -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
310 |     }
311 |     .front{
312 |         z-index: 4;
313 |     }
314 |     .card-container:not(.manual-flip):hover .back,
315 |     .card-container.manual-flip.hover .back{
316 |         z-index: 5;
317 |         visibility: visible;
318 |     }
319 | }
320 | 


--------------------------------------------------------------------------------
/genezio.yaml:
--------------------------------------------------------------------------------
1 | name: rotating-css-card
2 | region: us-east-1
3 | frontend:
4 |   # Specifies the path of your code.
5 |   path: .
6 |   # Specifies the folder where the build is located.
7 |   # This is the folder that will be deployed.
8 |   publish: .
9 | yamlVersion: 2


--------------------------------------------------------------------------------
/images/rotating_card_profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/rotating-css-card/7c22b3c624feae2f31114a8c30fb0765e685dca9/images/rotating_card_profile.png


--------------------------------------------------------------------------------
/images/rotating_card_profile2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/rotating-css-card/7c22b3c624feae2f31114a8c30fb0765e685dca9/images/rotating_card_profile2.png


--------------------------------------------------------------------------------
/images/rotating_card_profile3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/rotating-css-card/7c22b3c624feae2f31114a8c30fb0765e685dca9/images/rotating_card_profile3.png


--------------------------------------------------------------------------------
/images/rotating_card_thumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/rotating-css-card/7c22b3c624feae2f31114a8c30fb0765e685dca9/images/rotating_card_thumb.jpg


--------------------------------------------------------------------------------
/images/rotating_card_thumb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/rotating-css-card/7c22b3c624feae2f31114a8c30fb0765e685dca9/images/rotating_card_thumb.png


--------------------------------------------------------------------------------
/images/rotating_card_thumb2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/rotating-css-card/7c22b3c624feae2f31114a8c30fb0765e685dca9/images/rotating_card_thumb2.png


--------------------------------------------------------------------------------
/images/rotating_card_thumb3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/rotating-css-card/7c22b3c624feae2f31114a8c30fb0765e685dca9/images/rotating_card_thumb3.png


--------------------------------------------------------------------------------
/images/tim_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/creativetimofficial/rotating-css-card/7c22b3c624feae2f31114a8c30fb0765e685dca9/images/tim_logo.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Rotating CSS Cards by Creative Tim </title>
  5 | 
  6 | 	<meta charset="utf-8" />
  7 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  8 | 
  9 |     <link href='css/bootstrap.css' rel='stylesheet' />
 10 | 
 11 |     <link href="css/pe-icon-7-stroke.css" rel="stylesheet" />
 12 | 
 13 | <!--     <link href='css/ct-navbar.css' rel='stylesheet' /> -->
 14 |     <link href='css/rotating-card.css' rel='stylesheet' />
 15 | 
 16 |     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 17 | 
 18 |     <link href="https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
 19 | 
 20 |     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 21 |     <style>
 22 |         body{
 23 |             margin-top: 100px;
 24 |         }
 25 |         .navbar-default .navbar-nav > li > a{
 26 |             padding: 15px 15px;
 27 |             margin: 5px 0;
 28 |         }
 29 | 
 30 |         .navbar-default{
 31 |             padding: 10px 0;
 32 |             background-color: rgba(255, 255, 255, 0.95);
 33 |             border-color: transparent;
 34 |             box-shadow: 0 0px 13px rgba(0,0,0,.2);
 35 |         }
 36 |         .btn-info,
 37 |         .btn-info:hover,
 38 |         .btn-info:focus{
 39 |             color: #FFF !important;
 40 |             background-color: #00bbff !important;
 41 |             border-color: #00bbff !important;
 42 |         }
 43 | 
 44 |         .btn-info{
 45 |             opacity: .8;
 46 |             transition: all 0.1s;
 47 |             -webkit-transition: all 0.1s;
 48 |         }
 49 |         .btn-info:hover,
 50 |         .btn-info:focus{
 51 |             opacity: 1;
 52 |         }
 53 |     </style>
 54 | </head>
 55 | <div class="container">
 56 |     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 57 | 
 58 |       <div class="container">
 59 |         <!-- Brand and toggle get grouped for better mobile display -->
 60 |         <div class="navbar-header">
 61 |           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 62 |             <span class="sr-only">Toggle navigation</span>
 63 |             <span class="icon-bar"></span>
 64 |             <span class="icon-bar"></span>
 65 |             <span class="icon-bar"></span>
 66 |           </button>
 67 |           <a class="navbar-brand navbar-brand-logo" href="https://www.creative-tim.com">
 68 |                 <div class="logo">
 69 |                 <img src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png">
 70 |                 </div>
 71 |                 <div class="brand"> Creative Tim </div>
 72 |           </a>
 73 |         </div>
 74 |         <!-- Collect the nav links, forms, and other content for toggling -->
 75 |         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 76 |           <ul class="nav navbar-nav navbar-right">
 77 |                 <li>
 78 |                     <a href="javascript:void(0)" data-href="#howToUse" class="scroll-down">
 79 |                        How to Use
 80 |                     </a>
 81 |                 </li>
 82 |                 <li>
 83 |                     <a class="btn btn-info" href="https://www.creative-tim.com/product/rotating-css-card" target="_blank">
 84 |                         Download, it's free!
 85 |                     </a>
 86 |                 </li>
 87 |            </ul>
 88 |         </div><!-- /.navbar-collapse -->
 89 |       </div><!-- /.container-fluid -->
 90 |     </nav>
 91 | 
 92 |     <div class="row">
 93 |         <h1 class="title">
 94 |             This is our awesome team
 95 |             <br>
 96 |             <small>Present your team in an interesting way</small>
 97 |         </h1>
 98 |         <div class="col-sm-10 col-sm-offset-1">
 99 |          <div class="col-md-4 col-sm-6">
100 |              <div class="card-container">
101 |                 <div class="card">
102 |                     <div class="front">
103 |                         <div class="cover">
104 |                             <img src="images/rotating_card_thumb2.png"/>
105 |                         </div>
106 |                         <div class="user">
107 |                             <img class="img-circle" src="images/rotating_card_profile3.png"/>
108 |                         </div>
109 |                         <div class="content">
110 |                             <div class="main">
111 |                                 <h3 class="name">John Marvel</h3>
112 |                                 <p class="profession">CEO</p>
113 |                                 <p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p>
114 |                             </div>
115 |                             <div class="footer">
116 |                                 <i class="fa fa-mail-forward"></i> Auto Rotation
117 |                             </div>
118 |                         </div>
119 |                     </div> <!-- end front panel -->
120 |                     <div class="back">
121 |                         <div class="header">
122 |                             <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
123 |                         </div>
124 |                         <div class="content">
125 |                             <div class="main">
126 |                                 <h4 class="text-center">Job Description</h4>
127 |                                 <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
128 | 
129 |                                 <div class="stats-container">
130 |                                     <div class="stats">
131 |                                         <h4>235</h4>
132 |                                         <p>
133 |                                             Followers
134 |                                         </p>
135 |                                     </div>
136 |                                     <div class="stats">
137 |                                         <h4>114</h4>
138 |                                         <p>
139 |                                             Following
140 |                                         </p>
141 |                                     </div>
142 |                                     <div class="stats">
143 |                                         <h4>35</h4>
144 |                                         <p>
145 |                                             Projects
146 |                                         </p>
147 |                                     </div>
148 |                                 </div>
149 | 
150 |                             </div>
151 |                         </div>
152 |                         <div class="footer">
153 |                             <div class="social-links text-center">
154 |                                 <a href="https://creative-tim.com" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
155 |                                 <a href="https://creative-tim.com" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
156 |                                 <a href="https://creative-tim.com" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
157 |                             </div>
158 |                         </div>
159 |                     </div> <!-- end back panel -->
160 |                 </div> <!-- end card -->
161 |             </div> <!-- end card-container -->
162 |         </div> <!-- end col sm 3 -->
163 | <!--         <div class="col-sm-1"></div> -->
164 |         <div class="col-md-4 col-sm-6">
165 |              <div class="card-container manual-flip">
166 |                 <div class="card">
167 |                     <div class="front">
168 |                         <div class="cover">
169 |                             <img src="images/rotating_card_thumb.png"/>
170 |                         </div>
171 |                         <div class="user">
172 |                             <img class="img-circle" src="images/rotating_card_profile2.png"/>
173 |                         </div>
174 |                         <div class="content">
175 |                             <div class="main">
176 |                                 <h3 class="name">Andrew Mike</h3>
177 |                                 <p class="profession">Web Developer</p>
178 |                                 <p class="text-center">"Lamborghini Mercy <br>Your chick she so thirsty <br>I'm in that two seat Lambo"</p>
179 |                             </div>
180 |                             <div class="footer">
181 |                                 <button class="btn btn-simple" onclick="rotateCard(this)">
182 |                                     <i class="fa fa-mail-forward"></i> Manual Rotation
183 |                                 </button>
184 |                             </div>
185 |                         </div>
186 |                     </div> <!-- end front panel -->
187 |                     <div class="back">
188 |                         <div class="header">
189 |                             <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
190 |                         </div>
191 |                         <div class="content">
192 |                             <div class="main">
193 |                                 <h4 class="text-center">Job Description</h4>
194 |                                 <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
195 | 
196 |                                 <div class="stats-container">
197 |                                     <div class="stats">
198 |                                         <h4>235</h4>
199 |                                         <p>
200 |                                             Followers
201 |                                         </p>
202 |                                     </div>
203 |                                     <div class="stats">
204 |                                         <h4>114</h4>
205 |                                         <p>
206 |                                             Following
207 |                                         </p>
208 |                                     </div>
209 |                                     <div class="stats">
210 |                                         <h4>35</h4>
211 |                                         <p>
212 |                                             Projects
213 |                                         </p>
214 |                                     </div>
215 |                                 </div>
216 | 
217 |                             </div>
218 |                         </div>
219 |                         <div class="footer">
220 |                             <button class="btn btn-simple" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">
221 |                                 <i class="fa fa-reply"></i> Back
222 |                             </button>
223 |                             <div class="social-links text-center">
224 |                                 <a href="https://creative-tim.com" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
225 |                                 <a href="https://creative-tim.com" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
226 |                                 <a href="https://creative-tim.com" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
227 |                             </div>
228 |                         </div>
229 |                     </div> <!-- end back panel -->
230 |                 </div> <!-- end card -->
231 |             </div> <!-- end card-container -->
232 |         </div> <!-- end col sm 3 -->
233 | <!--         <div class="col-sm-1"></div> -->
234 |         <div class="col-md-4 col-sm-6">
235 |             <div class="card-container">
236 |                 <div class="card">
237 |                     <div class="front">
238 |                         <div class="cover">
239 |                             <img src="images/rotating_card_thumb3.png"/>
240 |                         </div>
241 |                         <div class="user">
242 |                             <img class="img-circle" src="images/rotating_card_profile.png"/>
243 |                         </div>
244 |                         <div class="content">
245 |                             <div class="main">
246 |                                 <h3 class="name">Inna Corman</h3>
247 |                                 <p class="profession">Product Manager</p>
248 | 
249 |                                 <p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p>
250 |                             </div>
251 |                             <div class="footer">
252 |                                 <div class="rating">
253 |                                     <i class="fa fa-mail-forward"></i> Auto Rotation
254 |                                 </div>
255 |                             </div>
256 |                         </div>
257 |                     </div> <!-- end front panel -->
258 |                     <div class="back">
259 |                         <div class="header">
260 |                             <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
261 |                         </div>
262 |                         <div class="content">
263 |                             <div class="main">
264 |                                 <h4 class="text-center">Job Description</h4>
265 |                                 <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
266 | 
267 |                                 <div class="stats-container">
268 |                                     <div class="stats">
269 |                                         <h4>235</h4>
270 |                                         <p>
271 |                                             Followers
272 |                                         </p>
273 |                                     </div>
274 |                                     <div class="stats">
275 |                                         <h4>114</h4>
276 |                                         <p>
277 |                                             Following
278 |                                         </p>
279 |                                     </div>
280 |                                     <div class="stats">
281 |                                         <h4>35</h4>
282 |                                         <p>
283 |                                             Projects
284 |                                         </p>
285 |                                     </div>
286 |                                 </div>
287 | 
288 |                             </div>
289 |                         </div>
290 |                         <div class="footer">
291 |                             <div class="social-links text-center">
292 |                                 <a href="https://creative-tim.com" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
293 |                                 <a href="https://creative-tim.com" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
294 |                                 <a href="https://creative-tim.com" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
295 |                             </div>
296 |                         </div>
297 |                     </div> <!-- end back panel -->
298 |                 </div> <!-- end card -->
299 |             </div> <!-- end card-container -->
300 |         </div> <!-- end col-sm-3 -->
301 |         </div> <!-- end col-sm-10 -->
302 |     </div> <!-- end row -->
303 |     <div class="space-200"></div>
304 | </div>
305 | <div class="white-board">
306 |    <div class="container">
307 |         <br>
308 |         <h4>
309 |             If you want to use the rotating presentation cards you have to add to your project these files:
310 |         </h4>
311 |         <pre class="prettyprint">
312 |         <br>
313 |               &lt;link href=&quot;css/bootstrap.css&quot; rel=&quot;stylesheet&quot; /&gt;
314 |               &lt;link href=&quot;css/rotating-card.css&quot; rel=&quot;stylesheet&quot; /&gt;
315 |               &lt;link href=&quot;https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
316 |         </pre>
317 |         <br>
318 |         <h4>
319 |             Here is the html code for one card:
320 |         </h4>
321 |         <pre class="prettyprint">
322 |         <br>
323 |         &lt;div class=&quot;card-container&quot;&gt;
324 |          &lt;div class=&quot;card&quot;&gt;
325 |              &lt;div class=&quot;front&quot;&gt;
326 |                  &lt;div class=&quot;cover&quot;&gt;
327 |                      &lt;img src=&quot;images/rotating_card_thumb3.png&quot;/&gt;
328 |                  &lt;/div&gt;
329 |                  &lt;div class=&quot;user&quot;&gt;
330 |                      &lt;img class=&quot;img-circle&quot; src=&quot;images/rotating_card_profile.png&quot;/&gt;
331 |                  &lt;/div&gt;
332 |                  &lt;div class=&quot;content&quot;&gt;
333 |                      &lt;div class=&quot;main&quot;&gt;
334 |                          &lt;h3 class=&quot;name&quot;&gt;Inna Corman&lt;/h3&gt;
335 |                          &lt;p class=&quot;profession&quot;&gt;Product Manager&lt;/p&gt;
336 | 
337 |                          &lt;p class=&quot;text-center&quot;&gt;&quot;I&#39;m the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere&quot;&lt;/p&gt;
338 |                      &lt;/div&gt;
339 |                      &lt;div class=&quot;footer&quot;&gt;
340 |                          &lt;div class=&quot;rating&quot;&gt;
341 |                              &lt;i class=&quot;fa fa-mail-forward&quot;&gt;&lt;/i&gt; Auto Rotation
342 |                          &lt;/div&gt;
343 |                      &lt;/div&gt;
344 |                  &lt;/div&gt;
345 |              &lt;/div&gt; &lt;!-- end front panel --&gt;
346 |              &lt;div class=&quot;back&quot;&gt;
347 |                  &lt;div class=&quot;header&quot;&gt;
348 |                      &lt;h5 class=&quot;motto&quot;&gt;&quot;To be or not to be, this is my awesome motto!&quot;&lt;/h5&gt;
349 |                  &lt;/div&gt;
350 |                  &lt;div class=&quot;content&quot;&gt;
351 |                      &lt;div class=&quot;main&quot;&gt;
352 |                          &lt;h4 class=&quot;text-center&quot;&gt;Job Description&lt;/h4&gt;
353 |                          &lt;p class=&quot;text-center&quot;&gt;Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...&lt;/p&gt;
354 | 
355 |                          &lt;div class=&quot;stats-container&quot;&gt;
356 |                              &lt;div class=&quot;stats&quot;&gt;
357 |                                  &lt;h4&gt;235&lt;/h4&gt;
358 |                                  &lt;p&gt;
359 |                                      Followers
360 |                                  &lt;/p&gt;
361 |                              &lt;/div&gt;
362 |                              &lt;div class=&quot;stats&quot;&gt;
363 |                                  &lt;h4&gt;114&lt;/h4&gt;
364 |                                  &lt;p&gt;
365 |                                      Following
366 |                                  &lt;/p&gt;
367 |                              &lt;/div&gt;
368 |                              &lt;div class=&quot;stats&quot;&gt;
369 |                                  &lt;h4&gt;35&lt;/h4&gt;
370 |                                  &lt;p&gt;
371 |                                      Projects
372 |                                  &lt;/p&gt;
373 |                              &lt;/div&gt;
374 |                          &lt;/div&gt;
375 | 
376 |                      &lt;/div&gt;
377 |                  &lt;/div&gt;
378 |                  &lt;div class=&quot;footer&quot;&gt;
379 |                      &lt;div class=&quot;social-links text-center&quot;&gt;
380 |                          &lt;a href=&quot;https://creative-tim.com&quot; class=&quot;facebook&quot;&gt;&lt;i class=&quot;fa fa-facebook fa-fw&quot;&gt;&lt;/i&gt;&lt;/a&gt;
381 |                          &lt;a href=&quot;https://creative-tim.com&quot; class=&quot;google&quot;&gt;&lt;i class=&quot;fa fa-google-plus fa-fw&quot;&gt;&lt;/i&gt;&lt;/a&gt;
382 |                          &lt;a href=&quot;https://creative-tim.com&quot; class=&quot;twitter&quot;&gt;&lt;i class=&quot;fa fa-twitter fa-fw&quot;&gt;&lt;/i&gt;&lt;/a&gt;
383 |                      &lt;/div&gt;
384 |                  &lt;/div&gt;
385 |              &lt;/div&gt; &lt;!-- end back panel --&gt;
386 |          &lt;/div&gt; &lt;!-- end card --&gt;
387 |      &lt;/div&gt; &lt;!-- end card-container --&gt;
388 | 
389 |         </pre>
390 |         <div class="space-50"></div>
391 |     <div class="row">
392 |         <div class="col-sm-4"></div>
393 |         <div class="col-sm-4">
394 |             <a href="https://creative-tim.com/product/rotating-css-card" class="btn btn-info btn-lg btn-block">Download</a>
395 |         </div>
396 |         <div class="col-sm-4"></div>
397 |     </div>
398 |     <div class="space-50"></div>
399 |     <p class="text-center">Copyright &copy; 2015 <a href="https://creative-tim.com">Creative Tim</a>, made with <i class="fa fa-heart ct-heart"></i> for a better web.</p>
400 |    </div>
401 | </div>
402 | 
403 | 
404 | <script src="js/jquery-1.10.2.js" type="text/javascript"></script>
405 | <script src="js/bootstrap.min.js" type="text/javascript"></script>
406 | 
407 | <script type="text/javascript">
408 |     $().ready(function(){
409 |         $('[rel="tooltip"]').tooltip();
410 | 
411 |         $('a.scroll-down').click(function(e){
412 |             e.preventDefault();
413 |             scroll_target = $(this).data('href');
414 |              $('html, body').animate({
415 |                  scrollTop: $(scroll_target).offset().top - 60
416 |              }, 1000);
417 |         });
418 | 
419 |     });
420 | 
421 |     function rotateCard(btn){
422 |         var $card = $(btn).closest('.card-container');
423 |         console.log($card);
424 |         if($card.hasClass('hover')){
425 |             $card.removeClass('hover');
426 |         } else {
427 |             $card.addClass('hover');
428 |         }
429 |     }
430 | 
431 | 
432 | </script>
433 | 
434 | </body>
435 | </html>
436 | 


--------------------------------------------------------------------------------
/js/bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Bootstrap v3.0.2 by @fat and @mdo
3 |  * Copyright 2013 Twitter, Inc.
4 |  * Licensed under https://www.apache.org/licenses/LICENSE-2.0
5 |  *
6 |  * Designed and built with all the love in the world by @mdo and @fat.
7 |  */
8 | 
9 | if("undefined"==typeof jQuery)throw new Error("Bootstrap requires jQuery");+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]}}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one(a.support.transition.end,function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b()})}(jQuery),+function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function c(){f.trigger("closed.bs.alert").remove()}var d=a(this),e=d.attr("data-target");e||(e=d.attr("href"),e=e&&e.replace(/.*(?=#[^\s]*$)/,""));var f=a(e);b&&b.preventDefault(),f.length||(f=d.hasClass("alert")?d:d.parent()),f.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one(a.support.transition.end,c).emulateTransitionEnd(150):c())};var d=a.fn.alert;a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("bs.alert");e||d.data("bs.alert",e=new c(this)),"string"==typeof b&&e[b].call(d)})},a.fn.alert.Constructor=c,a.fn.alert.noConflict=function(){return a.fn.alert=d,this},a(document).on("click.bs.alert.data-api",b,c.prototype.close)}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d)};b.DEFAULTS={loadingText:"loading..."},b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.is("input")?"val":"html",e=c.data();a+="Text",e.resetText||c.data("resetText",c[d]()),c[d](e[a]||this.options[a]),setTimeout(function(){"loadingText"==a?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.closest('[data-toggle="buttons"]');if(a.length){var b=this.$element.find("input").prop("checked",!this.$element.hasClass("active")).trigger("change");"radio"===b.prop("type")&&a.find(".active").removeClass("active")}this.$element.toggleClass("active")};var c=a.fn.button;a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof c&&c;e||d.data("bs.button",e=new b(this,f)),"toggle"==c?e.toggle():c&&e.setState(c)})},a.fn.button.Constructor=b,a.fn.button.noConflict=function(){return a.fn.button=c,this},a(document).on("click.bs.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle"),b.preventDefault()})}(jQuery),+function(a){"use strict";var b=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.DEFAULTS={interval:5e3,pause:"hover",wrap:!0},b.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},b.prototype.getActiveIndex=function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},b.prototype.to=function(b){var c=this,d=this.getActiveIndex();return b>this.$items.length-1||0>b?void 0:this.sliding?this.$element.one("slid",function(){c.to(b)}):d==b?this.pause().cycle():this.slide(b>d?"next":"prev",a(this.$items[b]))},b.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},b.prototype.next=function(){return this.sliding?void 0:this.slide("next")},b.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},b.prototype.slide=function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g="next"==b?"left":"right",h="next"==b?"first":"last",i=this;if(!e.length){if(!this.options.wrap)return;e=this.$element.find(".item")[h]()}this.sliding=!0,f&&this.pause();var j=a.Event("slide.bs.carousel",{relatedTarget:e[0],direction:g});if(!e.hasClass("active")){if(this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var b=a(i.$indicators.children()[i.getActiveIndex()]);b&&b.addClass("active")})),a.support.transition&&this.$element.hasClass("slide")){if(this.$element.trigger(j),j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),d.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)}).emulateTransitionEnd(1200)}else{if(this.$element.trigger(j),j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}};var c=a.fn.carousel;a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c),g="string"==typeof c?c:f.slide;e||d.data("bs.carousel",e=new b(this,f)),"number"==typeof c?e.to(c):g?e[g]():f.interval&&e.pause().cycle()})},a.fn.carousel.Constructor=b,a.fn.carousel.noConflict=function(){return a.fn.carousel=c,this},a(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(b){var c,d=a(this),e=a(d.attr("data-target")||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"")),f=a.extend({},e.data(),d.data()),g=d.attr("data-slide-to");g&&(f.interval=!1),e.carousel(f),(g=d.attr("data-slide-to"))&&e.data("bs.carousel").to(g),b.preventDefault()}),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var b=a(this);b.carousel(b.data())})})}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d),this.transitioning=null,this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.DEFAULTS={toggle:!0},b.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},b.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b=a.Event("show.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.$parent&&this.$parent.find("> .panel > .in");if(c&&c.length){var d=c.data("bs.collapse");if(d&&d.transitioning)return;c.collapse("hide"),d||c.data("bs.collapse",null)}var e=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[e](0),this.transitioning=1;var f=function(){this.$element.removeClass("collapsing").addClass("in")[e]("auto"),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return f.call(this);var g=a.camelCase(["scroll",e].join("-"));this.$element.one(a.support.transition.end,a.proxy(f,this)).emulateTransitionEnd(350)[e](this.$element[0][g])}}},b.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var d=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return a.support.transition?(this.$element[c](0).one(a.support.transition.end,a.proxy(d,this)).emulateTransitionEnd(350),void 0):d.call(this)}}},b.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var c=a.fn.collapse;a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("bs.collapse"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c);e||d.data("bs.collapse",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.collapse.Constructor=b,a.fn.collapse.noConflict=function(){return a.fn.collapse=c,this},a(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(b){var c,d=a(this),e=d.attr("data-target")||b.preventDefault()||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,""),f=a(e),g=f.data("bs.collapse"),h=g?"toggle":d.data(),i=d.attr("data-parent"),j=i&&a(i);g&&g.transitioning||(j&&j.find('[data-toggle=collapse][data-parent="'+i+'"]').not(d).addClass("collapsed"),d[f.hasClass("in")?"addClass":"removeClass"]("collapsed")),f.collapse(h)})}(jQuery),+function(a){"use strict";function b(){a(d).remove(),a(e).each(function(b){var d=c(a(this));d.hasClass("open")&&(d.trigger(b=a.Event("hide.bs.dropdown")),b.isDefaultPrevented()||d.removeClass("open").trigger("hidden.bs.dropdown"))})}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}var d=".dropdown-backdrop",e="[data-toggle=dropdown]",f=function(b){a(b).on("click.bs.dropdown",this.toggle)};f.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){if("ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a('<div class="dropdown-backdrop"/>').insertAfter(a(this)).on("click",b),f.trigger(d=a.Event("show.bs.dropdown")),d.isDefaultPrevented())return;f.toggleClass("open").trigger("shown.bs.dropdown"),e.focus()}return!1}},f.prototype.keydown=function(b){if(/(38|40|27)/.test(b.keyCode)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var f=c(d),g=f.hasClass("open");if(!g||g&&27==b.keyCode)return 27==b.which&&f.find(e).focus(),d.click();var h=a("[role=menu] li:not(.divider):visible a",f);if(h.length){var i=h.index(h.filter(":focus"));38==b.keyCode&&i>0&&i--,40==b.keyCode&&i<h.length-1&&i++,~i||(i=0),h.eq(i).focus()}}}};var g=a.fn.dropdown;a.fn.dropdown=function(b){return this.each(function(){var c=a(this),d=c.data("dropdown");d||c.data("dropdown",d=new f(this)),"string"==typeof b&&d[b].call(c)})},a.fn.dropdown.Constructor=f,a.fn.dropdown.noConflict=function(){return a.fn.dropdown=g,this},a(document).on("click.bs.dropdown.data-api",b).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",e,f.prototype.toggle).on("keydown.bs.dropdown.data-api",e+", [role=menu]",f.prototype.keydown)}(jQuery),+function(a){"use strict";var b=function(b,c){this.options=c,this.$element=a(b),this.$backdrop=this.isShown=null,this.options.remote&&this.$element.load(this.options.remote)};b.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},b.prototype.toggle=function(a){return this[this.isShown?"hide":"show"](a)},b.prototype.show=function(b){var c=this,d=a.Event("show.bs.modal",{relatedTarget:b});this.$element.trigger(d),this.isShown||d.isDefaultPrevented()||(this.isShown=!0,this.escape(),this.$element.on("click.dismiss.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this)),this.backdrop(function(){var d=a.support.transition&&c.$element.hasClass("fade");c.$element.parent().length||c.$element.appendTo(document.body),c.$element.show(),d&&c.$element[0].offsetWidth,c.$element.addClass("in").attr("aria-hidden",!1),c.enforceFocus();var e=a.Event("shown.bs.modal",{relatedTarget:b});d?c.$element.find(".modal-dialog").one(a.support.transition.end,function(){c.$element.focus().trigger(e)}).emulateTransitionEnd(300):c.$element.focus().trigger(e)}))},b.prototype.hide=function(b){b&&b.preventDefault(),b=a.Event("hide.bs.modal"),this.$element.trigger(b),this.isShown&&!b.isDefaultPrevented()&&(this.isShown=!1,this.escape(),a(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0).off("click.dismiss.modal"),a.support.transition&&this.$element.hasClass("fade")?this.$element.one(a.support.transition.end,a.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal())},b.prototype.enforceFocus=function(){a(document).off("focusin.bs.modal").on("focusin.bs.modal",a.proxy(function(a){this.$element[0]===a.target||this.$element.has(a.target).length||this.$element.focus()},this))},b.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",a.proxy(function(a){27==a.which&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},b.prototype.hideModal=function(){var a=this;this.$element.hide(),this.backdrop(function(){a.removeBackdrop(),a.$element.trigger("hidden.bs.modal")})},b.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},b.prototype.backdrop=function(b){var c=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var d=a.support.transition&&c;if(this.$backdrop=a('<div class="modal-backdrop '+c+'" />').appendTo(document.body),this.$element.on("click.dismiss.modal",a.proxy(function(a){a.target===a.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),d&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!b)return;d?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()):b&&b()};var c=a.fn.modal;a.fn.modal=function(c,d){return this.each(function(){var e=a(this),f=e.data("bs.modal"),g=a.extend({},b.DEFAULTS,e.data(),"object"==typeof c&&c);f||e.data("bs.modal",f=new b(this,g)),"string"==typeof c?f[c](d):g.show&&f.show(d)})},a.fn.modal.Constructor=b,a.fn.modal.noConflict=function(){return a.fn.modal=c,this},a(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f,this).one("hide",function(){c.is(":visible")&&c.focus()})}),a(document).on("show.bs.modal",".modal",function(){a(document.body).addClass("modal-open")}).on("hidden.bs.modal",".modal",function(){a(document.body).removeClass("modal-open")})}(jQuery),+function(a){"use strict";var b=function(a,b){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",a,b)};b.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},b.prototype.init=function(b,c,d){this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d);for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focus",i="hover"==g?"mouseleave":"blur";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},b.prototype.getDelegateOptions=function(){var b={},c=this.getDefaults();return this._options&&a.each(this._options,function(a,d){c[a]!=d&&(b[a]=d)}),b},b.prototype.enter=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type);return clearTimeout(c.timeout),c.hoverState="in",c.options.delay&&c.options.delay.show?(c.timeout=setTimeout(function(){"in"==c.hoverState&&c.show()},c.options.delay.show),void 0):c.show()},b.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type);return clearTimeout(c.timeout),c.hoverState="out",c.options.delay&&c.options.delay.hide?(c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide),void 0):c.hide()},b.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){if(this.$element.trigger(b),b.isDefaultPrevented())return;var c=this.tip();this.setContent(),this.options.animation&&c.addClass("fade");var d="function"==typeof this.options.placement?this.options.placement.call(this,c[0],this.$element[0]):this.options.placement,e=/\s?auto?\s?/i,f=e.test(d);f&&(d=d.replace(e,"")||"top"),c.detach().css({top:0,left:0,display:"block"}).addClass(d),this.options.container?c.appendTo(this.options.container):c.insertAfter(this.$element);var g=this.getPosition(),h=c[0].offsetWidth,i=c[0].offsetHeight;if(f){var j=this.$element.parent(),k=d,l=document.documentElement.scrollTop||document.body.scrollTop,m="body"==this.options.container?window.innerWidth:j.outerWidth(),n="body"==this.options.container?window.innerHeight:j.outerHeight(),o="body"==this.options.container?0:j.offset().left;d="bottom"==d&&g.top+g.height+i-l>n?"top":"top"==d&&g.top-l-i<0?"bottom":"right"==d&&g.right+h>m?"left":"left"==d&&g.left-h<o?"right":d,c.removeClass(k).addClass(d)}var p=this.getCalculatedOffset(d,g,h,i);this.applyPlacement(p,d),this.$element.trigger("shown.bs."+this.type)}},b.prototype.applyPlacement=function(a,b){var c,d=this.tip(),e=d[0].offsetWidth,f=d[0].offsetHeight,g=parseInt(d.css("margin-top"),10),h=parseInt(d.css("margin-left"),10);isNaN(g)&&(g=0),isNaN(h)&&(h=0),a.top=a.top+g,a.left=a.left+h,d.offset(a).addClass("in");var i=d[0].offsetWidth,j=d[0].offsetHeight;if("top"==b&&j!=f&&(c=!0,a.top=a.top+f-j),/bottom|top/.test(b)){var k=0;a.left<0&&(k=-2*a.left,a.left=0,d.offset(a),i=d[0].offsetWidth,j=d[0].offsetHeight),this.replaceArrow(k-e+i,i,"left")}else this.replaceArrow(j-f,j,"top");c&&d.offset(a)},b.prototype.replaceArrow=function(a,b,c){this.arrow().css(c,a?50*(1-a/b)+"%":"")},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},b.prototype.hide=function(){function b(){"in"!=c.hoverState&&d.detach()}var c=this,d=this.tip(),e=a.Event("hide.bs."+this.type);return this.$element.trigger(e),e.isDefaultPrevented()?void 0:(d.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d.one(a.support.transition.end,b).emulateTransitionEnd(150):b(),this.$element.trigger("hidden.bs."+this.type),this)},b.prototype.fixTitle=function(){var a=this.$element;(a.attr("title")||"string"!=typeof a.attr("data-original-title"))&&a.attr("data-original-title",a.attr("title")||"").attr("title","")},b.prototype.hasContent=function(){return this.getTitle()},b.prototype.getPosition=function(){var b=this.$element[0];return a.extend({},"function"==typeof b.getBoundingClientRect?b.getBoundingClientRect():{width:b.offsetWidth,height:b.offsetHeight},this.$element.offset())},b.prototype.getCalculatedOffset=function(a,b,c,d){return"bottom"==a?{top:b.top+b.height,left:b.left+b.width/2-c/2}:"top"==a?{top:b.top-d,left:b.left+b.width/2-c/2}:"left"==a?{top:b.top+b.height/2-d/2,left:b.left-c}:{top:b.top+b.height/2-d/2,left:b.left+b.width}},b.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},b.prototype.tip=function(){return this.$tip=this.$tip||a(this.options.template)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},b.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},b.prototype.enable=function(){this.enabled=!0},b.prototype.disable=function(){this.enabled=!1},b.prototype.toggleEnabled=function(){this.enabled=!this.enabled},b.prototype.toggle=function(b){var c=b?a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type):this;c.tip().hasClass("in")?c.leave(c):c.enter(c)},b.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var c=a.fn.tooltip;a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tooltip"),f="object"==typeof c&&c;e||d.data("bs.tooltip",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=c,this}}(jQuery),+function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");b.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),b.prototype.constructor=b,b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},b.prototype.hasContent=function(){return this.getTitle()||this.getContent()},b.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")},b.prototype.tip=function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip};var c=a.fn.popover;a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof c&&c;e||d.data("bs.popover",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.noConflict=function(){return a.fn.popover=c,this}}(jQuery),+function(a){"use strict";function b(c,d){var e,f=a.proxy(this.process,this);this.$element=a(c).is("body")?a(window):a(c),this.$body=a("body"),this.$scrollElement=this.$element.on("scroll.bs.scroll-spy.data-api",f),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||(e=a(c).attr("href"))&&e.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.offsets=a([]),this.targets=a([]),this.activeTarget=null,this.refresh(),this.process()}b.DEFAULTS={offset:10},b.prototype.refresh=function(){var b=this.$element[0]==window?"offset":"position";this.offsets=a([]),this.targets=a([]);var c=this;this.$body.find(this.selector).map(function(){var d=a(this),e=d.data("target")||d.attr("href"),f=/^#\w/.test(e)&&a(e);return f&&f.length&&[[f[b]().top+(!a.isWindow(c.$scrollElement.get(0))&&c.$scrollElement.scrollTop()),e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){c.offsets.push(this[0]),c.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,d=c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(b>=d)return g!=(a=f.last()[0])&&this.activate(a);for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(!e[a+1]||b<=e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){this.activeTarget=b,a(this.selector).parents(".active").removeClass("active");var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate")};var c=a.fn.scrollspy;a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=c,this},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(jQuery),+function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype.show=function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.data("target");if(d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),!b.parent("li").hasClass("active")){var e=c.find(".active:last a")[0],f=a.Event("show.bs.tab",{relatedTarget:e});if(b.trigger(f),!f.isDefaultPrevented()){var g=a(d);this.activate(b.parent("li"),c),this.activate(g,g.parent(),function(){b.trigger({type:"shown.bs.tab",relatedTarget:e})})}}},b.prototype.activate=function(b,c,d){function e(){f.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),g?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var f=c.find("> .active"),g=d&&a.support.transition&&f.hasClass("fade");g?f.one(a.support.transition.end,e).emulateTransitionEnd(150):e(),f.removeClass("in")};var c=a.fn.tab;a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tab");e||d.data("bs.tab",e=new b(this)),"string"==typeof c&&e[c]()})},a.fn.tab.Constructor=b,a.fn.tab.noConflict=function(){return a.fn.tab=c,this},a(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})}(jQuery),+function(a){"use strict";var b=function(c,d){this.options=a.extend({},b.DEFAULTS,d),this.$window=a(window).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(c),this.affixed=this.unpin=null,this.checkPosition()};b.RESET="affix affix-top affix-bottom",b.DEFAULTS={offset:0},b.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},b.prototype.checkPosition=function(){if(this.$element.is(":visible")){var c=a(document).height(),d=this.$window.scrollTop(),e=this.$element.offset(),f=this.options.offset,g=f.top,h=f.bottom;"object"!=typeof f&&(h=g=f),"function"==typeof g&&(g=f.top()),"function"==typeof h&&(h=f.bottom());var i=null!=this.unpin&&d+this.unpin<=e.top?!1:null!=h&&e.top+this.$element.height()>=c-h?"bottom":null!=g&&g>=d?"top":!1;this.affixed!==i&&(this.unpin&&this.$element.css("top",""),this.affixed=i,this.unpin="bottom"==i?e.top-d:null,this.$element.removeClass(b.RESET).addClass("affix"+(i?"-"+i:"")),"bottom"==i&&this.$element.offset({top:document.body.offsetHeight-h-this.$element.height()}))}};var c=a.fn.affix;a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof c&&c;e||d.data("bs.affix",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.noConflict=function(){return a.fn.affix=c,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(jQuery);


--------------------------------------------------------------------------------
/rotating-card.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Rotating CSS Cards by Creative Tim </title>
  5 | 
  6 | 	<meta charset="utf-8" />
  7 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  8 | 
  9 |     <link href='css/bootstrap.css' rel='stylesheet' />
 10 | 
 11 |     <link href="css/pe-icon-7-stroke.css" rel="stylesheet" />
 12 | 
 13 | <!--     <link href='css/ct-navbar.css' rel='stylesheet' /> -->
 14 |     <link href='css/rotating-card.css' rel='stylesheet' />
 15 | 
 16 |     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 17 | 
 18 |     <link href="https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
 19 | 
 20 |     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 21 |     <style>
 22 |         body{
 23 |             margin-top: 100px;
 24 |         }
 25 |         .navbar-default .navbar-nav > li > a{
 26 |             padding: 15px 15px;
 27 |             margin: 5px 0;
 28 |         }
 29 | 
 30 |         .navbar-default{
 31 |             padding: 10px 0;
 32 |             background-color: rgba(255, 255, 255, 0.95);
 33 |             border-color: transparent;
 34 |             box-shadow: 0 0px 13px rgba(0,0,0,.2);
 35 |         }
 36 |         .btn-info,
 37 |         .btn-info:hover,
 38 |         .btn-info:focus{
 39 |             color: #FFF !important;
 40 |             background-color: #00bbff !important;
 41 |             border-color: #00bbff !important;
 42 |         }
 43 | 
 44 |         .btn-info{
 45 |             opacity: .8;
 46 |             transition: all 0.1s;
 47 |             -webkit-transition: all 0.1s;
 48 |         }
 49 |         .btn-info:hover,
 50 |         .btn-info:focus{
 51 |             opacity: 1;
 52 |         }
 53 |     </style>
 54 | </head>
 55 | <div class="container">
 56 |     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 57 | 
 58 |       <div class="container">
 59 |         <!-- Brand and toggle get grouped for better mobile display -->
 60 |         <div class="navbar-header">
 61 |           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 62 |             <span class="sr-only">Toggle navigation</span>
 63 |             <span class="icon-bar"></span>
 64 |             <span class="icon-bar"></span>
 65 |             <span class="icon-bar"></span>
 66 |           </button>
 67 |           <a class="navbar-brand navbar-brand-logo" href="https://www.creative-tim.com">
 68 |                 <div class="logo">
 69 |                 <img src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png">
 70 |                 </div>
 71 |                 <div class="brand"> Creative Tim </div>
 72 |           </a>
 73 |         </div>
 74 |         <!-- Collect the nav links, forms, and other content for toggling -->
 75 |         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 76 |           <ul class="nav navbar-nav navbar-right">
 77 |                 <li>
 78 |                     <a href="javascript:void(0)" data-href="#howToUse" class="scroll-down">
 79 |                        How to Use
 80 |                     </a>
 81 |                 </li>
 82 |                 <li>
 83 |                     <a class="btn btn-info" href="https://www.creative-tim.com/product/rotating-css-card" target="_blank">
 84 |                         Download, it's free!
 85 |                     </a>
 86 |                 </li>
 87 |            </ul>
 88 |         </div><!-- /.navbar-collapse -->
 89 |       </div><!-- /.container-fluid -->
 90 |     </nav>
 91 | 
 92 |     <div class="row">
 93 |         <h1 class="title">
 94 |             This is our awesome team
 95 |             <br>
 96 |             <small>Present your team in an interesting way</small>
 97 |         </h1>
 98 |         <div class="col-sm-10 col-sm-offset-1">
 99 |          <div class="col-md-4 col-sm-6">
100 |              <div class="card-container">
101 |                 <div class="card">
102 |                     <div class="front">
103 |                         <div class="cover">
104 |                             <img src="images/rotating_card_thumb2.png"/>
105 |                         </div>
106 |                         <div class="user">
107 |                             <img class="img-circle" src="images/rotating_card_profile3.png"/>
108 |                         </div>
109 |                         <div class="content">
110 |                             <div class="main">
111 |                                 <h3 class="name">John Marvel</h3>
112 |                                 <p class="profession">CEO</p>
113 |                                 <p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p>
114 |                             </div>
115 |                             <div class="footer">
116 |                                 <i class="fa fa-mail-forward"></i> Auto Rotation
117 |                             </div>
118 |                         </div>
119 |                     </div> <!-- end front panel -->
120 |                     <div class="back">
121 |                         <div class="header">
122 |                             <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
123 |                         </div>
124 |                         <div class="content">
125 |                             <div class="main">
126 |                                 <h4 class="text-center">Job Description</h4>
127 |                                 <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
128 | 
129 |                                 <div class="stats-container">
130 |                                     <div class="stats">
131 |                                         <h4>235</h4>
132 |                                         <p>
133 |                                             Followers
134 |                                         </p>
135 |                                     </div>
136 |                                     <div class="stats">
137 |                                         <h4>114</h4>
138 |                                         <p>
139 |                                             Following
140 |                                         </p>
141 |                                     </div>
142 |                                     <div class="stats">
143 |                                         <h4>35</h4>
144 |                                         <p>
145 |                                             Projects
146 |                                         </p>
147 |                                     </div>
148 |                                 </div>
149 | 
150 |                             </div>
151 |                         </div>
152 |                         <div class="footer">
153 |                             <div class="social-links text-center">
154 |                                 <a href="https://creative-tim.com" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
155 |                                 <a href="https://creative-tim.com" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
156 |                                 <a href="https://creative-tim.com" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
157 |                             </div>
158 |                         </div>
159 |                     </div> <!-- end back panel -->
160 |                 </div> <!-- end card -->
161 |             </div> <!-- end card-container -->
162 |         </div> <!-- end col sm 3 -->
163 | <!--         <div class="col-sm-1"></div> -->
164 |         <div class="col-md-4 col-sm-6">
165 |              <div class="card-container manual-flip">
166 |                 <div class="card">
167 |                     <div class="front">
168 |                         <div class="cover">
169 |                             <img src="images/rotating_card_thumb.png"/>
170 |                         </div>
171 |                         <div class="user">
172 |                             <img class="img-circle" src="images/rotating_card_profile2.png"/>
173 |                         </div>
174 |                         <div class="content">
175 |                             <div class="main">
176 |                                 <h3 class="name">Andrew Mike</h3>
177 |                                 <p class="profession">Web Developer</p>
178 |                                 <p class="text-center">"Lamborghini Mercy <br>Your chick she so thirsty <br>I'm in that two seat Lambo"</p>
179 |                             </div>
180 |                             <div class="footer">
181 |                                 <button class="btn btn-simple" onclick="rotateCard(this)">
182 |                                     <i class="fa fa-mail-forward"></i> Manual Rotation
183 |                                 </button>
184 |                             </div>
185 |                         </div>
186 |                     </div> <!-- end front panel -->
187 |                     <div class="back">
188 |                         <div class="header">
189 |                             <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
190 |                         </div>
191 |                         <div class="content">
192 |                             <div class="main">
193 |                                 <h4 class="text-center">Job Description</h4>
194 |                                 <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
195 | 
196 |                                 <div class="stats-container">
197 |                                     <div class="stats">
198 |                                         <h4>235</h4>
199 |                                         <p>
200 |                                             Followers
201 |                                         </p>
202 |                                     </div>
203 |                                     <div class="stats">
204 |                                         <h4>114</h4>
205 |                                         <p>
206 |                                             Following
207 |                                         </p>
208 |                                     </div>
209 |                                     <div class="stats">
210 |                                         <h4>35</h4>
211 |                                         <p>
212 |                                             Projects
213 |                                         </p>
214 |                                     </div>
215 |                                 </div>
216 | 
217 |                             </div>
218 |                         </div>
219 |                         <div class="footer">
220 |                             <button class="btn btn-simple" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">
221 |                                 <i class="fa fa-reply"></i> Back
222 |                             </button>
223 |                             <div class="social-links text-center">
224 |                                 <a href="https://creative-tim.com" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
225 |                                 <a href="https://creative-tim.com" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
226 |                                 <a href="https://creative-tim.com" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
227 |                             </div>
228 |                         </div>
229 |                     </div> <!-- end back panel -->
230 |                 </div> <!-- end card -->
231 |             </div> <!-- end card-container -->
232 |         </div> <!-- end col sm 3 -->
233 | <!--         <div class="col-sm-1"></div> -->
234 |         <div class="col-md-4 col-sm-6">
235 |             <div class="card-container">
236 |                 <div class="card">
237 |                     <div class="front">
238 |                         <div class="cover">
239 |                             <img src="images/rotating_card_thumb3.png"/>
240 |                         </div>
241 |                         <div class="user">
242 |                             <img class="img-circle" src="images/rotating_card_profile.png"/>
243 |                         </div>
244 |                         <div class="content">
245 |                             <div class="main">
246 |                                 <h3 class="name">Inna Corman</h3>
247 |                                 <p class="profession">Product Manager</p>
248 | 
249 |                                 <p class="text-center">"I'm the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere"</p>
250 |                             </div>
251 |                             <div class="footer">
252 |                                 <div class="rating">
253 |                                     <i class="fa fa-mail-forward"></i> Auto Rotation
254 |                                 </div>
255 |                             </div>
256 |                         </div>
257 |                     </div> <!-- end front panel -->
258 |                     <div class="back">
259 |                         <div class="header">
260 |                             <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
261 |                         </div>
262 |                         <div class="content">
263 |                             <div class="main">
264 |                                 <h4 class="text-center">Job Description</h4>
265 |                                 <p class="text-center">Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
266 | 
267 |                                 <div class="stats-container">
268 |                                     <div class="stats">
269 |                                         <h4>235</h4>
270 |                                         <p>
271 |                                             Followers
272 |                                         </p>
273 |                                     </div>
274 |                                     <div class="stats">
275 |                                         <h4>114</h4>
276 |                                         <p>
277 |                                             Following
278 |                                         </p>
279 |                                     </div>
280 |                                     <div class="stats">
281 |                                         <h4>35</h4>
282 |                                         <p>
283 |                                             Projects
284 |                                         </p>
285 |                                     </div>
286 |                                 </div>
287 | 
288 |                             </div>
289 |                         </div>
290 |                         <div class="footer">
291 |                             <div class="social-links text-center">
292 |                                 <a href="https://creative-tim.com" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
293 |                                 <a href="https://creative-tim.com" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
294 |                                 <a href="https://creative-tim.com" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
295 |                             </div>
296 |                         </div>
297 |                     </div> <!-- end back panel -->
298 |                 </div> <!-- end card -->
299 |             </div> <!-- end card-container -->
300 |         </div> <!-- end col-sm-3 -->
301 |         </div> <!-- end col-sm-10 -->
302 |     </div> <!-- end row -->
303 |     <div class="space-200"></div>
304 | </div>
305 | <div class="white-board">
306 |    <div class="container">
307 |         <br>
308 |         <h4>
309 |             If you want to use the rotating presentation cards you have to add to your project these files:
310 |         </h4>
311 |         <pre class="prettyprint">
312 |         <br>
313 |               &lt;link href=&quot;css/bootstrap.css&quot; rel=&quot;stylesheet&quot; /&gt;
314 |               &lt;link href=&quot;css/rotating-card.css&quot; rel=&quot;stylesheet&quot; /&gt;
315 |               &lt;link href=&quot;https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
316 |         </pre>
317 |         <br>
318 |         <h4>
319 |             Here is the html code for one card:
320 |         </h4>
321 |         <pre class="prettyprint">
322 |         <br>
323 |         &lt;div class=&quot;card-container&quot;&gt;
324 |          &lt;div class=&quot;card&quot;&gt;
325 |              &lt;div class=&quot;front&quot;&gt;
326 |                  &lt;div class=&quot;cover&quot;&gt;
327 |                      &lt;img src=&quot;images/rotating_card_thumb3.png&quot;/&gt;
328 |                  &lt;/div&gt;
329 |                  &lt;div class=&quot;user&quot;&gt;
330 |                      &lt;img class=&quot;img-circle&quot; src=&quot;images/rotating_card_profile.png&quot;/&gt;
331 |                  &lt;/div&gt;
332 |                  &lt;div class=&quot;content&quot;&gt;
333 |                      &lt;div class=&quot;main&quot;&gt;
334 |                          &lt;h3 class=&quot;name&quot;&gt;Inna Corman&lt;/h3&gt;
335 |                          &lt;p class=&quot;profession&quot;&gt;Product Manager&lt;/p&gt;
336 | 
337 |                          &lt;p class=&quot;text-center&quot;&gt;&quot;I&#39;m the new Sinatra, and since I made it here I can make it anywhere, yeah, they love me everywhere&quot;&lt;/p&gt;
338 |                      &lt;/div&gt;
339 |                      &lt;div class=&quot;footer&quot;&gt;
340 |                          &lt;div class=&quot;rating&quot;&gt;
341 |                              &lt;i class=&quot;fa fa-mail-forward&quot;&gt;&lt;/i&gt; Auto Rotation
342 |                          &lt;/div&gt;
343 |                      &lt;/div&gt;
344 |                  &lt;/div&gt;
345 |              &lt;/div&gt; &lt;!-- end front panel --&gt;
346 |              &lt;div class=&quot;back&quot;&gt;
347 |                  &lt;div class=&quot;header&quot;&gt;
348 |                      &lt;h5 class=&quot;motto&quot;&gt;&quot;To be or not to be, this is my awesome motto!&quot;&lt;/h5&gt;
349 |                  &lt;/div&gt;
350 |                  &lt;div class=&quot;content&quot;&gt;
351 |                      &lt;div class=&quot;main&quot;&gt;
352 |                          &lt;h4 class=&quot;text-center&quot;&gt;Job Description&lt;/h4&gt;
353 |                          &lt;p class=&quot;text-center&quot;&gt;Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...&lt;/p&gt;
354 | 
355 |                          &lt;div class=&quot;stats-container&quot;&gt;
356 |                              &lt;div class=&quot;stats&quot;&gt;
357 |                                  &lt;h4&gt;235&lt;/h4&gt;
358 |                                  &lt;p&gt;
359 |                                      Followers
360 |                                  &lt;/p&gt;
361 |                              &lt;/div&gt;
362 |                              &lt;div class=&quot;stats&quot;&gt;
363 |                                  &lt;h4&gt;114&lt;/h4&gt;
364 |                                  &lt;p&gt;
365 |                                      Following
366 |                                  &lt;/p&gt;
367 |                              &lt;/div&gt;
368 |                              &lt;div class=&quot;stats&quot;&gt;
369 |                                  &lt;h4&gt;35&lt;/h4&gt;
370 |                                  &lt;p&gt;
371 |                                      Projects
372 |                                  &lt;/p&gt;
373 |                              &lt;/div&gt;
374 |                          &lt;/div&gt;
375 | 
376 |                      &lt;/div&gt;
377 |                  &lt;/div&gt;
378 |                  &lt;div class=&quot;footer&quot;&gt;
379 |                      &lt;div class=&quot;social-links text-center&quot;&gt;
380 |                          &lt;a href=&quot;https://creative-tim.com&quot; class=&quot;facebook&quot;&gt;&lt;i class=&quot;fa fa-facebook fa-fw&quot;&gt;&lt;/i&gt;&lt;/a&gt;
381 |                          &lt;a href=&quot;https://creative-tim.com&quot; class=&quot;google&quot;&gt;&lt;i class=&quot;fa fa-google-plus fa-fw&quot;&gt;&lt;/i&gt;&lt;/a&gt;
382 |                          &lt;a href=&quot;https://creative-tim.com&quot; class=&quot;twitter&quot;&gt;&lt;i class=&quot;fa fa-twitter fa-fw&quot;&gt;&lt;/i&gt;&lt;/a&gt;
383 |                      &lt;/div&gt;
384 |                  &lt;/div&gt;
385 |              &lt;/div&gt; &lt;!-- end back panel --&gt;
386 |          &lt;/div&gt; &lt;!-- end card --&gt;
387 |      &lt;/div&gt; &lt;!-- end card-container --&gt;
388 | 
389 |         </pre>
390 |         <div class="space-50"></div>
391 |     <div class="row">
392 |         <div class="col-sm-4"></div>
393 |         <div class="col-sm-4">
394 |             <a href="https://creative-tim.com/product/rotating-css-card" class="btn btn-info btn-lg btn-block">Download</a>
395 |         </div>
396 |         <div class="col-sm-4"></div>
397 |     </div>
398 |     <div class="space-50"></div>
399 |     <p class="text-center">Copyright &copy; 2015 <a href="https://creative-tim.com">Creative Tim</a>, made with <i class="fa fa-heart ct-heart"></i> for a better web.</p>
400 |    </div>
401 | </div>
402 | 
403 | 
404 | <script src="js/jquery-1.10.2.js" type="text/javascript"></script>
405 | <script src="js/bootstrap.min.js" type="text/javascript"></script>
406 | 
407 | <script type="text/javascript">
408 |     $().ready(function(){
409 |         $('[rel="tooltip"]').tooltip();
410 | 
411 |         $('a.scroll-down').click(function(e){
412 |             e.preventDefault();
413 |             scroll_target = $(this).data('href');
414 |              $('html, body').animate({
415 |                  scrollTop: $(scroll_target).offset().top - 60
416 |              }, 1000);
417 |         });
418 | 
419 |     });
420 | 
421 |     function rotateCard(btn){
422 |         var $card = $(btn).closest('.card-container');
423 |         console.log($card);
424 |         if($card.hasClass('hover')){
425 |             $card.removeClass('hover');
426 |         } else {
427 |             $card.addClass('hover');
428 |         }
429 |     }
430 | 
431 | 
432 | </script>
433 | 
434 | </body>
435 | </html>
436 | 


--------------------------------------------------------------------------------