-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (86 loc) · 3.76 KB
/
index.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0; }
body, html {
background: #2a2a2a;
height: 100%;
width: 100%; }
.heart {
background: none repeat scroll 0 0 #ffffff;
height: 250px;
margin: 0 auto;
position: relative;
transform: skewY(0deg);
-webkit-transform: skewY(0deg);
-moz-transform: skewY(0deg);
width: 200px;
z-index: 30; }
.heart:after {
background: none repeat scroll 0 0 #E600E6;
content: "";
display: block;
height: 250px;
left: 0;
position: relative;
top: -11px;
transform: skewY(-6deg);
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
width: 190px;
z-index: -30; }
.center {
margin: 0 auto;
position: relative;
top: 70px;
transition: all 2s ease-in-out 0s;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
width: 200px; }
.center:after {
font-family: arial;
font-size: 20px;
font-weight: bold;
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
content: "Happy Birthday \A Eve! <3";
height: 103px;
line-height: 23px;
padding: 70px 10px 10px 10px;
position: absolute;
text-align: center;
top: 20px;
width: 164px;
transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out; }
.center:hover:after {
transform: translate(350px, 0) rotate(30deg);
-webkit-transform: translate(250px, 0) rotate(30deg);
-o-transform: translate(250px, 0) rotate(30deg);
-moz-transform: translate(250px, 0) rotate(30deg); }
.heart::before {
content: "";
transform: skewY(-6deg);
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
display: block;
width: 8px;
height: 8px;
margin: 44px 33px;
position: absolute; }
.heart::before {
box-shadow: 24px 8px black, 32px 8px black, 40px 8px black, 72px 8px black, 80px 8px black, 88px 8px black, 16px 16px black, 48px 16px black, 64px 16px black, 96px 16px black, 8px 24px black, 56px 24px black, 104px 24px black, 8px 32px black, 104px 32px black, 8px 40px black, 104px 40px black, 16px 48px black, 96px 48px black, 16px 56px black, 96px 56px black, 24px 64px black, 32px 72px black, 40px 80px black, 48px 88px black, 64px 88px black, 72px 80px black, 80px 72px black, 88px 64px black, 56px 96px black, 24px 16px white, 32px 16px #e74c3c, 40px 16px #e74c3c, 72px 16px #e74c3c, 80px 16px #e74c3c, 88px 16px #e74c3c, 16px 24px white, 24px 24px #e74c3c, 32px 24px #e74c3c, 40px 24px #e74c3c, 48px 24px #e74c3c, 64px 24px #e74c3c, 72px 24px #e74c3c, 80px 24px #e74c3c, 88px 24px #e74c3c, 96px 24px #e74c3c, 16px 32px #e74c3c, 24px 32px #e74c3c, 32px 32px #e74c3c, 40px 32px #e74c3c, 48px 32px #e74c3c, 56px 32px #e74c3c, 64px 32px #e74c3c, 72px 32px #e74c3c, 80px 32px #e74c3c, 88px 32px #e74c3c, 96px 32px #e74c3c, 16px 40px #e74c3c, 24px 40px #e74c3c, 32px 40px #e74c3c, 40px 40px #e74c3c, 48px 40px #e74c3c, 56px 40px #e74c3c, 64px 40px #e74c3c, 72px 40px #e74c3c, 80px 40px #e74c3c, 88px 40px #e74c3c, 96px 40px #e74c3c, 24px 48px #e74c3c, 32px 48px #e74c3c, 40px 48px #e74c3c, 48px 48px #e74c3c, 56px 48px #e74c3c, 64px 48px #e74c3c, 72px 48px #e74c3c, 80px 48px #e74c3c, 88px 48px #e74c3c, 24px 56px #e74c3c, 32px 56px #e74c3c, 40px 56px #e74c3c, 48px 56px #e74c3c, 56px 56px #e74c3c, 64px 56px #e74c3c, 72px 56px #e74c3c, 80px 56px #e74c3c, 88px 56px #e74c3c, 32px 64px #e74c3c, 40px 64px #e74c3c, 48px 64px #e74c3c, 56px 64px #e74c3c, 64px 64px #e74c3c, 72px 64px #e74c3c, 80px 64px #e74c3c, 40px 72px #e74c3c, 48px 72px #e74c3c, 56px 72px #e74c3c, 64px 72px #e74c3c, 72px 72px #e74c3c, 48px 80px #e74c3c, 56px 80px #e74c3c, 64px 80px #e74c3c, 56px 88px #e74c3c; }
</style>
</head>
<body>
<div class="center vrumm">
<div class="heart"></div>
</div>
</body>
</html>