-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (77 loc) · 3.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<title>Frontend Mentor | Newsletter sign-up form with success message</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<link href="./index.css" rel="stylesheet" />
</head>
<body>
<!-- Sign-up form -->
<div class="sign-up">
<!-- Sign-up form start -->
<div class="sign-up__first-pane">
<h1 class="sign-up__title">Stay updated!</h1>
<p>Join 60,000+ product managers receiving monthly updates on:</p>
<ul class="sign-up__ul">
<li class="sign-up__li"><p class="sign-up__lip">Product discovery and building what matters</p></li>
<li class="sign-up__li"><p class="sign-up__lip">Measuring to ensure updates are a success</p></li>
<li class="sign-up__li"><p class="sign-up__lip">And much more!</p></li>
</ul>
<!-- Email address input -->
<form id="email-form" class="sign-up__form">
<div class="form-input">
<div class="form-input__label-container">
<label for="email" class="form-input__label">Email address</label>
<label for="email" class="form-input__label--error">Valid email required</label>
</div>
<input
type="email"
id="email"
name="email"
placeholder=""
class="form-input__input"
onkeydown="emailValidationInput(event)"
>
</div>
<!-- Button -->
<button type="submit" class="form-input__submit-btn">Subscribe to monthly newsletter</button>
</form>
</div>
<!-- Sign-up form end -->
<div class="sign-up__second-pane">
<img
class="sign-up__img"
srcset="assets/images/illustration-sign-up-mobile.svg 375w, assets/images/illustration-sign-up-desktop.svg"
sizes="(max-width: 600px) 375px, 100%"
src="assets/images/illustration-sign-up-desktop.svg"
>
</div>
<div>
</div>
</div>
<!-- Success message start -->
<div class="success-message">
<!-- Image -->
<img
class="success-message__img"
src="assets/images/icon-success.svg"
alt="Success illustration"
>
<h1 class="success-message__title">Thanks for subscribing!</h1>
<p class="success-message__p">
A confirmation email has been sent to <strong id="success-message__email"></strong>.
Please open it and click the button inside to confirm your subscription.
</p>
<button class="success-message__btn" onclick="dismissMessage()">Dismiss message</button>
</div>
<!-- Success message end -->
<!-- <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div> -->
<script src="./index.js" defer></script>
</body>
</html>