-
Notifications
You must be signed in to change notification settings - Fork 4
/
card.html
39 lines (36 loc) · 1.49 KB
/
card.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Animated card / flip on hover /CSS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<h1 class="page-title">
Animated card
</h1>
<h2 class="page-sub-title">Animate on page load, Flip on hover</h2>
</div>
<div class="card-container">
<div class="card">
<div class="front">
<h2 class="sub-title">Season 1</h2>
<h1 class="title">
Rick and Morty
</h1>
<img class="image" src="http://pre14.deviantart.net/0aef/th/pre/f/2014/015/2/f/look_at_that_thing_morty____rick_and_morty_by_kory226-d72a6ub.png" alt="" />
</div>
<div class="back">
<h3 class="synopsis">Synopsis</h3>
<p>Rick and Morty is an American adult animated television series created by Justin Roiland and Dan Harmon for Adult Swim. The series follows the misadventures of alcoholic scientist Rick and his easily influenced grandson Morty, who split their time
between domestic family life and interdimensional travel.</p>
<div class="btn"><i class="fa fa-play"></i>Watch now</div>
<div class="btn secondary"><i class="fa fa-heart "></i>Add to list</div>
</div>
</div>
<!-- partial -->
</body>
</html>