1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>MaterialDesignCard</title>
6 <style>
7 body {
8 background: #e2e1e0;
9 text-align: center;
10 }
11
12 .card {
13 background: #fff;
14 border-radius: 10px;
15 display: inline-block;
16 height: 300px;
17 margin: 1rem;
18 position: relative;
19 width: 300px;
20 }
21
22 .card-1 {
23 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
24 transition: all 0.3s cubic-bezier(.25,.8,.25,1);
25 }
26
27 .card-1:hover {
28 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
29 }
30
31 .card-2 {
32 box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
33 }
34
35 .card-3 {
36 box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
37 }
38
39 .card-4 {
40 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
41 }
42
43 .card-5 {
44 box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
45 }
46
47 </style>
48 </head>
49 <body>
50 <div class="card">card</div>
51 <div class="card card-1">card1</div>
52 <div class="card card-2">card2</div>
53 <div class="card card-3">card3</div>
54 <div class="card card-4">card4</div>
55 <div class="card card-5">card5</div>
56 </body>
57 </html>
