-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
188 lines (178 loc) · 8.17 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- -->
<meta
property="og:title"
content="Ping coming soon | Frontend Mentor | Alamin"
/>
<meta
name="description"
content="Solution for the Ping coming soon page challenge on Frontend Mentor. With email validation and a sleek design, this project allowed me to hone my web development skills and create a beautiful coming soon page."
/>
<meta
property="og:description"
content="Solution for the Ping coming soon page challenge on Frontend Mentor. With email validation and a sleek design, this project allowed me to hone my web development skills and create a beautiful coming soon page."
/>
<meta
property="og:image"
content="https://raw.githubusercontent.com/CodeWithAlamin/Ping-coming-soon-page/main/screenshots/Compared%20-%20Ping%20coming%20soon%20page%20-%20Alamin.png"
/>
<meta property="og:url" content="https://ping-alamin.netlify.app/" />
<meta name="author" content="Alamin | codpapa360" />
<meta
name="keywords"
content="Ping coming soon, FrontendMentor, Email validation, Responsive web design, HTML, CSS, JavaScript, Sass, Front-end development, User experience, Accessibility"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Ping coming soon | Frontend Mentor | Alamin"
/>
<meta name="twitter:site" content="@https://ping-alamin.netlify.app/" />
<meta
name="twitter:description"
content="Solution for the Ping coming soon page challenge on Frontend Mentor. With email validation and a sleek design, this project allowed me to hone my web development skills and create a beautiful coming soon page."
/>
<meta
name="twitter:image"
content="https://raw.githubusercontent.com/CodeWithAlamin/Ping-coming-soon-page/main/screenshots/Compared%20-%20Ping%20coming%20soon%20page%20-%20Alamin.png"
/>
<meta
name="twitter:image:alt"
content="Ping coming soon | Frontend Mentor | Alamin"
/>
<!-- -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./src/images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./src/sass/main.scss" />
<script defer src="./src/js/script.js"></script>
<title>Ping coming soon page | Frontend Mentor | Alamin</title>
</head>
<body>
<div class="top-container">
<main class="main-contents">
<div class="dark-mode-container">
<input
type="checkbox"
class="dark-mode-checkbox"
id="dark-mode-checkbox"
/>
<label for="dark-mode-checkbox" class="dark-mode-lebel">
<img
class="icon-dark"
src="./src/images/icon-dark.svg"
alt="Dark icon"
/>
<img
class="icon-light"
src="./src/images/icon-light.svg"
alt="Light icon"
/>
</label>
</div>
<div class="top-contents">
<div class="logo">
<img src="./src/images/logo.svg" alt="Ping logo" />
</div>
<h1 class="main-contents__heading">
We are launching <span>soon!</span>
</h1>
<p class="main-contents__description">Subscribe and get notified</p>
<form action="" class="form-container">
<div class="input-wrapper">
<input
class="input-email"
type="email"
placeholder="Your email address..."
/>
<p class="output-message"></p>
</div>
<button class="btn-submit" type="submit">Notify Me</button>
</form>
</div>
<div class="dashboard-img-wrapper">
<img
src="./src/images/illustration-dashboard.png"
alt="Dashboard image"
/>
</div>
</main>
</div>
<footer class="footer">
<ul class="social-links">
<li>
<a
class="social-link"
href="https://mobile.twitter.com/CodeWithAlamin"
target="_blank"
aria-label="Facebook"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
/>
</svg>
</a>
</li>
<li>
<a
class="social-link"
href="https://mobile.twitter.com/CodeWithAlamin"
target="_blank"
aria-label="Twitter"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
/>
</svg>
</a>
</li>
<li>
<a
class="social-link"
href="https://mobile.twitter.com/CodeWithAlamin"
target="_blank"
aria-label="Instagram"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
/>
</svg>
</a>
</li>
</ul>
<p class="copyright">© Copyright Ping. All rights reserved.</p>
<div class="attribution-wrapper">
<p class="attribution">
Coded by
<a
class="attb-link"
href="https://twitter.com/CodeWithAlamin"
target="_blank"
>Alamin</a
>
<br />
Challenge by
<a
class="attb-link attb-fem"
href="https://www.frontendmentor.io/profile/CodeWithAlamin"
target="_blank"
>Frontend Mentor</a
>
</p>
</div>
</footer>
</body>
</html>