-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathActivate-Account.html
478 lines (449 loc) · 20.3 KB
/
Activate-Account.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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Activate Your Account</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Inter;
}
body {
min-height: 100svh;
}
header {
display: flex;
width: 100%;
height: 7.625rem;
justify-content: center;
align-items: center;
background: rgba(225, 214, 214, 0.4);
}
h2 {
color: #121a26;
font-feature-settings: "liga" off, "clig" off;
font-size: 1.5rem;
font-weight: 600;
}
.template-main {
display: flex;
padding: 3.5rem;
flex-direction: column;
align-items: center;
gap: 3.5rem;
max-width: 790px;
margin: 0 auto;
}
.heading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.75rem;
}
.content {
display: flex;
flex-direction: column;
/* justify-content: center;
align-items: center; */
gap: 2rem;
}
.template-header {
color: var(--Neutral-Colors-Dark-2, #0a0a0a);
text-align: center;
font-size: 1.5rem;
font-weight: 600;
}
.template-subheader {
color: rgba(0, 0, 0, 0.8);
text-align: center;
font-size: 1.125rem;
font-weight: 500;
}
.template-receiver-name {
color: #111;
/* H6/SemiBold */
font-size: 1.125rem;
font-weight: 600;
}
.template-welcome-message {
color: rgba(17, 17, 17, 0.9);
font-size: 1rem;
font-weight: 400;
}
.editable-content-title {
color: var(--Neutral-Colors-Dark-2, #0a0a0a);
font-size: 1rem;
font-weight: 600;
opacity: 0.9;
margin-bottom: 1.25rem;
}
.editable-content {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.editable-content-list p {
opacity: 0.9;
color: var(--Neutral-Colors-Dark-2, rgba(17, 17, 17, 0.9));
font-size: 1rem;
font-weight: 400;
margin-bottom: 1rem;
}
.editable-content-list span {
color: var(--Neutral-Colors-Dark-2, #0a0a0a);
font-size: 1rem;
font-weight: 600;
}
.template-btn {
display: flex;
height: 2.75rem;
padding: 0.5rem 2.5rem;
justify-content: center;
align-items: center;
gap: 0.625rem;
border: none;
color: White;
border-radius: 0.5rem;
align-self: center;
background: var(--Primary-Color-Primary-Full-500, #f97316);
}
.template-farewell p {
color: #111;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
footer {
background: #f3efef;
display: flex;
width: 100%;
padding: 2rem 0;
justify-content: center;
}
.footer-container {
max-width: 790px;
width: 100%;
padding: 0 3rem;
}
footer .heading {
display: flex;
flex-direction: row;
align-items: center;
gap: 2.0625rem;
margin-bottom: 1rem;
}
footer .content {
display: flex;
flex-direction: column;
gap: 1.875rem;
color: #5b5b5d;
font-size: 0.875rem;
font-weight: 400;
}
footer .content > span {
margin-block-start: 1.3em;
}
footer .contact-support {
color: #111;
font-size: 0.875rem;
font-weight: 600;
text-decoration: underline;
}
footer hr {
border-style: dashed;
width: 100%;
border-color: #969696;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<h2>
<svg
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="4.5" cy="4.5" r="4" fill="#F97316" />
<circle cx="14.5" cy="4.5" r="4" fill="#F97316" />
<circle cx="4.5" cy="14.5" r="4" fill="#F97316" />
<circle cx="14.5" cy="14.5" r="4" fill="#F97316" />
</svg>
<span>Boilerplate.</span>
</h2>
</header>
<!-- Main Content -->
<div class="template-main">
<div class="heading">
<div class="svg-container" style="margin-bottom: 40px">
<svg
xmlns="http://www.w3.org/2000/svg"
width="190"
height="178"
viewBox="0 0 190 178"
fill="none"
>
<path
d="M178.792 64.2961H11.3906V158.228H178.792V64.2961Z"
fill="#F1F3F3"
/>
<path
d="M178.797 58.6135H11.207V152.545H178.797V58.6135Z"
fill="#E6E6E6"
/>
<path
d="M138.675 75.1531L88.1133 75.2148L88.1241 84.1084L138.686 84.0467L138.675 75.1531Z"
fill="#F1F3F3"
/>
<g opacity="0.5">
<path
d="M138.695 92.4346L88.1328 92.4963L88.1437 101.39L138.705 101.328L138.695 92.4346Z"
fill="#F1F3F3"
/>
</g>
<g opacity="0.36">
<path
d="M163.278 109.682L88.1562 109.774L88.185 133.323L163.307 133.231L163.278 109.682Z"
fill="white"
/>
</g>
<path
d="M11.207 39.1472V58.6173H178.797V39.1472H11.207ZM118.583 48.5578C118.583 51.184 116.455 53.3121 113.829 53.3121H75.8017C73.1755 53.3121 71.0473 51.184 71.0473 48.5578C71.0473 45.9316 73.1755 43.8034 75.8017 43.8034H113.829C116.455 43.8034 118.583 45.9316 118.583 48.5578Z"
fill="#F1F3F3"
/>
<path
d="M104.814 9.11206H85.8613V27.0804H104.814V9.11206Z"
fill="#F97316"
/>
<path
d="M86.6949 25.0391L78.0466 44.2941C77.3033 45.9505 78.5145 47.8221 80.3294 47.8221H109.867C111.659 47.8221 112.87 45.9958 112.172 44.3431L104.01 25.0391H86.6949Z"
fill="#F97316"
/>
<g opacity="0.35">
<path
d="M100.249 14.2964H89.6914V24.854H100.249V14.2964Z"
fill="white"
/>
</g>
<path
d="M100.214 127.883C104.051 127.883 107.161 124.773 107.161 120.937C107.161 117.1 104.051 113.99 100.214 113.99C96.3777 113.99 93.2676 117.1 93.2676 120.937C93.2676 124.773 96.3777 127.883 100.214 127.883Z"
fill="#F1F3F3"
/>
<path
d="M76.3875 73.4444L24.6484 73.5076L24.7216 133.401L76.4607 133.337L76.3875 73.4444Z"
fill="white"
/>
<path
d="M24.7109 122.952C24.7109 122.952 27.7522 110.206 40.238 106.621C52.7237 103.036 69.7978 104.036 76.45 122.888L76.4614 133.336L24.7223 133.4L24.7109 122.952Z"
fill="#24285B"
/>
<path
d="M48.6979 88.8867L45.668 105.357L55.4558 111.323L53.3768 93.9806L48.6979 88.8867Z"
fill="#F4A28C"
/>
<g opacity="0.31">
<path
d="M53.818 96.6821C53.818 96.6821 52.12 96.2935 50.8711 94.8257C50.8711 94.8257 50.9277 97.8896 54.218 100.995L53.818 96.6784V96.6821Z"
fill="#CE8172"
/>
</g>
<path
d="M56.1726 87.7056C56.1726 87.7056 57.1877 92.7165 56.716 96.1766C56.5236 97.5802 55.2105 98.5801 53.8106 98.3688C52.0711 98.1085 49.7958 97.2482 48.9242 94.6295L46.9055 90.3657C46.9055 90.3657 45.732 87.649 48.362 85.268C50.9919 82.8833 55.7085 84.6266 56.1726 87.7093V87.7056Z"
fill="#F4A28C"
/>
<path
d="M56.6478 90.8978L58.2854 92.6939C58.6892 93.1391 58.4968 93.8523 57.9232 94.0259L56.0215 94.6107L56.6478 90.894V90.8978Z"
fill="#F4A28C"
/>
<path
d="M47.0644 95.6559L45.3136 88.9282C45.3136 88.9282 41.4385 88.2528 42.612 85.7247C43.7854 83.1928 45.3287 84.8833 45.3966 81.9778C45.4645 79.0724 47.8228 78.4876 49.4944 80.1252C51.166 81.7628 50.3924 79.4799 52.4791 79.1743C54.5657 78.8687 55.1166 79.8044 55.1619 81.3892C55.2071 82.9778 58.222 81.2911 58.9917 83.2985C59.7615 85.3059 59.8671 87.2566 54.6713 87.566C49.4755 87.8792 53.1884 92.1657 47.0606 95.6522L47.0644 95.6559Z"
fill="#CC8553"
/>
<path
d="M45.668 105.357L48.6753 133.4H62.625C62.625 133.4 58.2443 111.115 54.6974 104.98C54.6974 104.98 50.5015 104.259 45.668 105.357Z"
fill="white"
/>
<path
d="M51.2683 92.6635C51.2683 92.6635 51.008 90.7127 49.5552 91.0297C48.1025 91.3467 48.461 94.1691 50.4872 94.2068L51.2645 92.6635H51.2683Z"
fill="#F4A28C"
/>
<path
d="M45.668 105.357L46.2189 102.365L50.8902 104.749L54.3842 102.365L55.4596 105.357C55.4596 105.357 50.9317 108.459 45.668 105.357Z"
fill="white"
/>
<path
d="M50.7539 108.455L51.4595 133.37L59.3683 133.106L52.599 108.455H50.7539Z"
fill="#F97316"
/>
<path
d="M50.8912 104.746L50.1365 107.828C50.0195 108.308 50.4006 108.76 50.8912 108.726L52.3137 108.632C52.8835 108.594 53.1891 107.945 52.857 107.481L50.8912 104.746Z"
fill="#F97316"
/>
<g opacity="0.08">
<path
d="M24.7109 122.952C24.7109 122.952 29.469 132.887 42.4453 127.646C55.4216 122.405 69.4393 120.454 76.4576 129.121V133.336L24.726 133.4L24.7147 122.952H24.7109Z"
fill="#000001"
/>
</g>
</svg>
</div>
<p class="template-header">Activate Your Account</p>
</div>
<div class="content">
<p class="template-receiver-name">Hi {{name}},</p>
<p class="template-message">
We recently detected a login attempt to your account from an
unfamiliar device. To ensure the security of your account, we haven't
granted access.
</p>
<p class="template-message">
To activate your account and secure it, please click the button below:
</p>
<div class="editable-content">
<a
href="{{link}}"
style="text-decoration: none; cursor: pointer"
class="template-btn"
>Activate Account</a
>
<div class="template-farewell">
<p>Regards,</p>
<p>Boilerplate</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="footer-container">
<div class="heading">
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.8263 1.90393H22.1998L14.8297 10.3274L23.5 21.7899H16.7112L11.394 14.838L5.30995 21.7899H1.93443L9.81743 12.78L1.5 1.90393H8.46111L13.2674 8.25826L18.8263 1.90393ZM17.6423 19.7707H19.5116L7.44539 3.81706H5.43946L17.6423 19.7707Z"
fill="#5B5B5D"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
>
<g clip-path="url(#clip0_23775_3072)">
<path
d="M12.5 2.16094C15.7063 2.16094 16.0859 2.175 17.3469 2.23125C18.5188 2.28281 19.1516 2.47969 19.5734 2.64375C20.1313 2.85938 20.5344 3.12188 20.9516 3.53906C21.3734 3.96094 21.6313 4.35938 21.8469 4.91719C22.0109 5.33906 22.2078 5.97656 22.2594 7.14375C22.3156 8.40937 22.3297 8.78906 22.3297 11.9906C22.3297 15.1969 22.3156 15.5766 22.2594 16.8375C22.2078 18.0094 22.0109 18.6422 21.8469 19.0641C21.6313 19.6219 21.3687 20.025 20.9516 20.4422C20.5297 20.8641 20.1313 21.1219 19.5734 21.3375C19.1516 21.5016 18.5141 21.6984 17.3469 21.75C16.0813 21.8062 15.7016 21.8203 12.5 21.8203C9.29375 21.8203 8.91406 21.8062 7.65313 21.75C6.48125 21.6984 5.84844 21.5016 5.42656 21.3375C4.86875 21.1219 4.46563 20.8594 4.04844 20.4422C3.62656 20.0203 3.36875 19.6219 3.15313 19.0641C2.98906 18.6422 2.79219 18.0047 2.74063 16.8375C2.68438 15.5719 2.67031 15.1922 2.67031 11.9906C2.67031 8.78438 2.68438 8.40469 2.74063 7.14375C2.79219 5.97187 2.98906 5.33906 3.15313 4.91719C3.36875 4.35938 3.63125 3.95625 4.04844 3.53906C4.47031 3.11719 4.86875 2.85938 5.42656 2.64375C5.84844 2.47969 6.48594 2.28281 7.65313 2.23125C8.91406 2.175 9.29375 2.16094 12.5 2.16094ZM12.5 0C9.24219 0 8.83438 0.0140625 7.55469 0.0703125C6.27969 0.126563 5.40313 0.332812 4.64375 0.628125C3.85156 0.9375 3.18125 1.34531 2.51563 2.01562C1.84531 2.68125 1.4375 3.35156 1.12813 4.13906C0.832812 4.90313 0.626563 5.775 0.570313 7.05C0.514063 8.33437 0.5 8.74219 0.5 12C0.5 15.2578 0.514063 15.6656 0.570313 16.9453C0.626563 18.2203 0.832812 19.0969 1.12813 19.8563C1.4375 20.6484 1.84531 21.3188 2.51563 21.9844C3.18125 22.65 3.85156 23.0625 4.63906 23.3672C5.40313 23.6625 6.275 23.8687 7.55 23.925C8.82969 23.9812 9.2375 23.9953 12.4953 23.9953C15.7531 23.9953 16.1609 23.9812 17.4406 23.925C18.7156 23.8687 19.5922 23.6625 20.3516 23.3672C21.1391 23.0625 21.8094 22.65 22.475 21.9844C23.1406 21.3188 23.5531 20.6484 23.8578 19.8609C24.1531 19.0969 24.3594 18.225 24.4156 16.95C24.4719 15.6703 24.4859 15.2625 24.4859 12.0047C24.4859 8.74688 24.4719 8.33906 24.4156 7.05938C24.3594 5.78438 24.1531 4.90781 23.8578 4.14844C23.5625 3.35156 23.1547 2.68125 22.4844 2.01562C21.8188 1.35 21.1484 0.9375 20.3609 0.632812C19.5969 0.3375 18.725 0.13125 17.45 0.075C16.1656 0.0140625 15.7578 0 12.5 0Z"
fill="#5B5B5D"
/>
<path
d="M12.5 5.83594C9.09688 5.83594 6.33594 8.59688 6.33594 12C6.33594 15.4031 9.09688 18.1641 12.5 18.1641C15.9031 18.1641 18.6641 15.4031 18.6641 12C18.6641 8.59688 15.9031 5.83594 12.5 5.83594ZM12.5 15.9984C10.2922 15.9984 8.50156 14.2078 8.50156 12C8.50156 9.79219 10.2922 8.00156 12.5 8.00156C14.7078 8.00156 16.4984 9.79219 16.4984 12C16.4984 14.2078 14.7078 15.9984 12.5 15.9984Z"
fill="#5B5B5D"
/>
<path
d="M20.3469 5.59214C20.3469 6.38902 19.7 7.0312 18.9078 7.0312C18.1109 7.0312 17.4688 6.38433 17.4688 5.59214C17.4688 4.79526 18.1156 4.15308 18.9078 4.15308C19.7 4.15308 20.3469 4.79995 20.3469 5.59214Z"
fill="#5B5B5D"
/>
</g>
<defs>
<clipPath id="clip0_23775_3072">
<rect
width="24"
height="24"
fill="white"
transform="translate(0.5)"
/>
</clipPath>
</defs>
</svg>
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.5725 0H13.5278V16.3478C13.5278 18.2957 11.9722 19.8957 10.0363 19.8957C8.10034 19.8957 6.54469 18.2957 6.54469 16.3478C6.54469 14.4348 8.06577 12.8695 9.93257 12.8V8.69567C5.81872 8.7652 2.5 12.1391 2.5 16.3478C2.5 20.5913 5.88786 24 10.0708 24C14.2538 24 17.6416 20.5565 17.6416 16.3478V7.9652C19.1627 9.07827 21.0295 9.73913 23 9.77393V5.66957C19.9579 5.56522 17.5725 3.06087 17.5725 0Z"
fill="#5B5B5D"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
>
<path
d="M14.9414 5.65873C15.1495 6.54092 15.9417 7.19811 16.8877 7.19811C17.992 7.19811 18.8873 6.30279 18.8873 5.19842C18.8873 4.09404 17.992 3.19873 16.8877 3.19873C15.922 3.19873 15.1167 3.88311 14.9292 4.79342C13.312 4.96686 12.0492 6.33842 12.0492 8.00061C12.0492 8.00436 12.0492 8.00717 12.0492 8.01092C10.2905 8.08498 8.68453 8.58561 7.40953 9.37592C6.93609 9.00936 6.34172 8.79092 5.69672 8.79092C4.14891 8.79092 2.89453 10.0453 2.89453 11.5931C2.89453 12.7162 3.55453 13.6837 4.50797 14.1309C4.60078 17.384 8.14547 20.0006 12.5058 20.0006C16.8661 20.0006 20.4155 17.3812 20.5036 14.1253C21.4495 13.6753 22.1039 12.7106 22.1039 11.594C22.1039 10.0462 20.8495 8.79186 19.3017 8.79186C18.6595 8.79186 18.068 9.00842 17.5955 9.37217C16.3092 8.57623 14.6855 8.07561 12.9089 8.00904C12.9089 8.00623 12.9089 8.00436 12.9089 8.00154C12.9089 6.81092 13.7939 5.82279 14.9414 5.66061V5.65873ZM7.29703 13.3715C7.34391 12.3553 8.01891 11.5753 8.80359 11.5753C9.58828 11.5753 10.1883 12.3994 10.1414 13.4156C10.0945 14.4319 9.50859 14.8012 8.72297 14.8012C7.93734 14.8012 7.25016 14.3878 7.29703 13.3715ZM16.2089 11.5753C16.9945 11.5753 17.6695 12.3553 17.7155 13.3715C17.7623 14.3878 17.0742 14.8012 16.2895 14.8012C15.5048 14.8012 14.918 14.4328 14.8711 13.4156C14.8242 12.3994 15.4233 11.5753 16.2089 11.5753ZM15.2752 15.7228C15.4223 15.7378 15.5161 15.8906 15.4589 16.0275C14.9761 17.1815 13.8361 17.9925 12.5058 17.9925C11.1755 17.9925 10.0364 17.1815 9.55266 16.0275C9.49547 15.8906 9.58922 15.7378 9.73641 15.7228C10.5989 15.6356 11.5317 15.5878 12.5058 15.5878C13.4798 15.5878 14.4117 15.6356 15.2752 15.7228Z"
fill="#5B5B5D"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
>
<g clip-path="url(#clip0_23775_3080)">
<path
d="M22.7234 0H2.27187C1.29219 0 0.5 0.773438 0.5 1.72969V22.2656C0.5 23.2219 1.29219 24 2.27187 24H22.7234C23.7031 24 24.5 23.2219 24.5 22.2703V1.72969C24.5 0.773438 23.7031 0 22.7234 0ZM7.62031 20.4516H4.05781V8.99531H7.62031V20.4516ZM5.83906 7.43438C4.69531 7.43438 3.77188 6.51094 3.77188 5.37187C3.77188 4.23281 4.69531 3.30937 5.83906 3.30937C6.97813 3.30937 7.90156 4.23281 7.90156 5.37187C7.90156 6.50625 6.97813 7.43438 5.83906 7.43438ZM20.9516 20.4516H17.3937V14.8828C17.3937 13.5562 17.3703 11.8453 15.5422 11.8453C13.6906 11.8453 13.4094 13.2937 13.4094 14.7891V20.4516H9.85625V8.99531H13.2687V10.5609H13.3156C13.7891 9.66094 14.9516 8.70938 16.6813 8.70938C20.2859 8.70938 20.9516 11.0813 20.9516 14.1656V20.4516Z"
fill="#5B5B5D"
/>
</g>
<defs>
<clipPath id="clip0_23775_3080">
<rect
width="24"
height="24"
fill="white"
transform="translate(0.5)"
/>
</clipPath>
</defs>
</svg>
</div>
<div class="content">
<span>
Thank you for choosing Boilerplate.com. Need help?
<a
href="https://starlight-nestjs.teams.hng.tech/contact-us"
class="contact-support"
>Contact our customer support</a
>
</span>
<hr />
<p>
You are receiving this email because you signed up at
Boilerplate.com. Want to change how you receive these emails?
</p>
<p>
You can
<a href="#" style="color: #111; text-decoration: none"
>update your preferences</a
>
or
<a href="#" style="color: #111; text-decoration: none"
>unsubscribe from this list</a
>.
</p>
</div>
</div>
</footer>
</body>
</html>