-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (107 loc) · 2.95 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
<!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="./images/favicon-32x32.png"
/>
<title>Frontend Mentor | Ping coming soon page</title>
<!-- DEPENDENCIES -->
<script
defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css"
/>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
></script>
</head>
<body class="font-libre-franklin" un-cloak>
<section class="flex justify-center" x-data="comingSoon">
<div
class="flex flex-col items-center py-21 px-12 max-w-183 text-center text-neutral-blue"
md="py-21.5"
>
<img src="images/logo.svg" alt="" class="h-4" md="h-6.5" />
<h1
class="mt-8.75 text-5.5 text-neutral-gray"
md="mt-10 text-12.25 -tracking-0.1"
>
We are launching
<span class="font-700 text-neutral-blue">soon!</span>
</h1>
<p class="mt-3.5 text-3" md="mt-1.5 text-5">
Subscribe and get notified
</p>
<div
class="relative mt-7.75 flex flex-col gap-2.5 w-full"
md="mt-9.25 flex-row gap-3.5"
>
<input
type="text"
name=""
id=""
placeholder="Your email address..."
class="text-3 px-7.75 py-2.5 border-1 border-secondary-blue rounded-full"
md="py-3.75 text-4 flex-1"
x-model="email"
:class="(isChecking && !isValidEmail()) && 'border-secondary-red'"
/>
<button
class="text-3 px-15.5 py-2.75 bg-primary-blue font-700 text-white rounded-full shadow-lg shadow-secondary-blue transition-all"
md="py-3.75 text-4"
hover="opacity-80"
active="opacity-60"
@click="useSubmit"
>
Notify Me
</button>
<p
class="absolute text-3 tracking-0.05 italic text-secondary-red -bottom-6.25 left-7.25"
x-show="isChecking && !isValidEmail()"
>
Please provide a valid email address
</p>
</div>
<img
src="images/illustration-dashboard.png"
alt=""
class="mt-17.5"
md="mt-22"
/>
<div class="mt-36 flex gap-2" md="mt-18">
<ion-icon
name="logo-facebook"
class="social-media"
></ion-icon>
<ion-icon
name="logo-twitter"
class="social-media"
></ion-icon>
<ion-icon
name="logo-instagram"
class="social-media"
></ion-icon>
</div>
<p class="mt-5.5 text-2.5 text-neutral-gray" md="text-3">
© Copyright Ping. All rights reserved.
</p>
</div>
</section>
</body>
</html>