-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththankyou.html
86 lines (74 loc) · 3.12 KB
/
thankyou.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Thank you! page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css'>
<style>
body,
html {
background: #fff;
}
#wrapper {
width: 600px;
margin: 0 auto;
margin-top: 15%;
}
h1 {
color: #2184be;
text-shadow: -1px -2px 3px rgba(17, 17, 17, 0.3);
text-align: center;
font-family: "Monsterrat", sans-serif;
font-weight: 900;
text-transform: uppercase;
font-size: 80px;
margin-bottom: -5px;
}
h1 underline {
border-top: 5px solid #105d8a;
border-bottom: 5px solid #105d8a;
}
h3 {
width: 570px;
margin-left: 16px;
font-family: "Lato", sans-serif;
font-weight: 600;
color: #000000;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="wrapper" class="animated zoomIn">
<!-- We make a wrap around all of the content so that we can simply animate all of the content at the same time. I wanted a zoomIn effect and instead of placing the same class on all tags, I wrapped them into one div! -->
<h1>
<!-- The <h1> tag is the reason why the text is big! -->
Thank you!
<!-- The underline makes a border on the top and on the bottom of the text -->
</h1>
<h3>
<center>Thank you for registering with the DSRI! You will receive an email with your DSRI account information shortly!</center>
<!-- The <h3> take is the description text which appear under the <h1> tag. It's there so you can display some nice message to your visitors! -->
</h3>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#2184be" fill-opacity="1" d="M0,256L26.7,224C53.3,192,107,128,160,133.3C213.3,139,267,213,320,245.3C373.3,277,427,267,480,229.3C533.3,192,587,128,640,122.7C693.3,117,747,171,800,165.3C853.3,160,907,96,960,80C1013.3,64,1067,96,1120,138.7C1173.3,181,1227,235,1280,213.3C1333.3,192,1387,96,1413,48L1440,0L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z"></path></svg>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(document).ready(function () {
// perform some jQuery when page is loaded
$("h1").hover(function () {
// when user is hovering the h1
$(this).addClass("animated infinite pulse");
// we add pulse animation and to infinite
}, function () {
// when user no longer hover on the h1
$(this).removeClass("animated infinite pulse");
// we remove the pulse
});
});
</script>
</body>
</html>