-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (138 loc) · 4.43 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/assets/images/favicon-32x32.png"
/>
<link href="./output.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preload"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
as="style"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
media="print"
onload="this.media='all'"
/>
<title>Newsletter Sign-up Form</title>
</head>
<body
class="font-roboto lg:bg-charcoal-grey lg:min-h-[100vh] lg:flex lg:items-center lg:justify-center"
>
<main class="">
<div
id="homepage"
class="lg:bg-white lg:rounded-big lg:p-[30px] lg:flex lg:gap-8"
>
<div
class="w-full aspect-[375/284] lg:w-[350px] lg:aspect-[3/4] lg:order-last order-first"
>
<img
src="/assets/images/illustration-sign-up-mobile.svg"
srcset="/assets/images/illustration-sign-up-desktop.svg 1024w"
sizes="(min-width: 1024px) 350px, 375px"
alt=""
class="w-full h-full object-cover rounded-b-medium lg:rounded-medium"
loading="lazy"
/>
</div>
<div class="p-5 lg:p-5 lg:pr-0 lg:mr-5">
<h1 class="font-bold text-big mb-little text-neutral-dark-slate-grey">
Stay updated!
</h1>
<p class="text-dark-slate-grey mb-medium">
Join 60,000+ product managers receiving monthly updates on:
</p>
<ol class="space-y-2.5">
<li class="flex items-start gap-4">
<img
src="/assets/images/icon-list.svg"
alt=""
class="w-medium h-medium mt-0.5"
/>
<span>Product discovery and building what matters</span>
</li>
<li class="flex items-start gap-4">
<img
src="/assets/images/icon-list.svg"
alt=""
class="w-medium h-medium mt-0.5"
/>
<span>Measuring to ensure updates are a success</span>
</li>
<li class="flex items-start gap-4 mb-medium">
<img
src="/assets/images/icon-list.svg"
alt=""
class="w-medium h-medium mt-0.5"
/>
<span>And much more!</span>
</li>
</ol>
<form id="form" class="lg:max-w-width-huge">
<label
for="email"
class="text-dark-slate-grey font-bold flex justify-between"
>
<span>Email address</span>
<span id="email-error" class="text-red-500 text-sm hidden"
>Valid email required</span
>
</label>
<input
type="text"
name="email"
id="email"
placeholder="email@company.com"
class="border-grey border-[1px] rounded-small w-full p-little mb-medium focus:ring-dark-slate-grey hover:cursor-pointer"
required
/>
<button
type="submit"
class="font-bold text-white bg-dark-slate-grey p-small w-full rounded-small hover:bg-gradient-to-r hover:from-hover-gradient-start hover:to-hover-gradient-end transition-all duration-300 hover:shadow-lg hover:cursor-pointer"
>
Subscribe to monthly newsletter
</button>
</form>
</div>
</div>
<div
id="success-message-page"
class="hidden flex flex-col justify-between h-screen p-5 lg:p-10 lg:bg-white lg:rounded-big lg:max-w-width-huge lg:h-auto"
>
<div class="mt-20 lg:mt-0">
<img src="/assets/images/icon-success.svg" alt="" class="mb-5" />
<h2 class="font-bold text-big text-dark-slate-grey mb-medium">
Thanks for subscribing!
</h2>
<p class="text-neutral-dark-slate-grey">
A confirmation email has been sent to
<span id="email-address" class="font-bold"></span>. Please open it
and click the button inside to confirm your subscription.
</p>
</div>
<div
id="button-container"
class="hidden mb-8 w-full max-w-md mx-auto lg:mt-10"
>
<button
class="font-bold text-white bg-dark-slate-grey rounded-small p-small w-full shadow-xl hover:bg-gradient-to-r hover:from-hover-gradient-start hover:to-hover-gradient-end transition-all duration-300 hover:shadow-lg hover:cursor-pointer"
id="dismiss-button"
>
Dismiss message
</button>
</div>
</div>
</main>
</body>
<script src="/src/script.js" defer></script>
</html>