-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·80 lines (77 loc) · 5.34 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
<!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">
<link rel="stylesheet" href="./assets/css/output.css">
<link rel="stylesheet" href="./assets/css/custom.css">
<title>Frontend Mentor | Newsletter sign-up form with success message</title>
</head>
<body class="tw-overflow-y-hidden tw-h-screen md:tw-bg-ns-dsg md:tw-flex tw-justify-center tw-items-center">
<main id="main" class="tw-h-full tw-overflow-hidden md:tw-flex md:tw-w-[46rem] md:tw-h-[32rem] md:tw-rounded-3xl md:tw-bg-white">
<!-- Sign-up form start -->
<div class="tw-h-full md:tw-flex md:tw-w-full">
<!-- hero start -->
<div class="tw-h-1/3 md:tw-order-2 md:tw-h-[32rem] md:tw-w-1/2 md:tw-p-5 md:tw-pl-10">
<div id="mobile_hero" class="tw-w-full tw-h-full tw-bg-[url('../images/illustration-sign-up-mobile.svg')] tw-bg-no-repeat tw-bg-cover tw-rounded-b-2xl md:tw-hidden"></div>
<div id="desktop_hero" class="tw-hidden md:tw-flex tw-flex-row tw-items-center tw-justify-end tw-bg-white tw-h-full tw-w-full tw-rounded-2xl tw-bg-[url('../images/illustration-sign-up-desktop.svg')] tw-bg-cover tw-bg-no-repeat"></div>
</div>
<!-- hero end -->
<!-- form start -->
<div class="tw-pt-6 tw-text-[0.9375rem] tw-pb-7 tw-px-6 tw-flex tw-flex-col tw-justify-between tw-h-2/3 md:tw-w-1/2 md:tw-h-[32rem] md:tw-pl-9 md:tw-pr-0 md:tw-justify-center md:tw-items-center">
<div class="md:tw-w-11/12">
<!-- NOTE!! 1 PIXEL IS EQUAL TO 0.0625 REMS/EMS -->
<h1 class="tw-text-4xl tw-font-extrabold md:tw-mt-4">Stay updated!</h1>
<p class="tw-my-4 text-md-size">Join 60,000+ product managers receiving monthly updates on:</p>
<ul class="tw-flex tw-flex-col tw-justify-around tw-h-3/6 text-md-size">
<li class="tw-flex tw-my-2 list-aligned-hoz md:tw-my-1">
<div class="tw-mr-3 tw-pt-1"><img src="./assets/images/icon-list.svg" alt="" srcset="" class="icons-md-size"></div>
<div>Product discovery and building what matters</div>
</li>
<li class="tw-flex tw-my-2 list-aligned-hoz md:tw-my-1">
<div class="tw-mr-3 tw-pt-1"><img src="./assets/images/icon-list.svg" alt="" srcset="" class="icons-md-size"></div>
<div>Measuring to ensure updates are a success</div>
</li>
<li class="tw-flex tw-my-2 list-aligned-hoz md:tw-my-1">
<div class="tw-mr-3 tw-pt-1"><img src="./assets/images/icon-list.svg" alt="" srcset="" class="icons-md-size"></div>
<div>And much more!</div>
</li>
</ul>
</div>
<form action="#" class="md:tw-w-11/12">
<label for="email" class="tw-font-extrabold tw-flex tw-flex-col">
<div class="tw-flex tw-flex-row tw-justify-between md:tw-mt-10">
<span class="tw-text-[0.9rem] md:tw-text-[0.7rem]">Email address</span>
<span id="vldt_msg" class="tw-text-[0.9rem] md:tw-text-[0.7rem] tw-capitalize tw-text-red-400"></span>
</div>
<input type="text" name="email" id="email" placeholder="email@company.com" value="" class="tw-p-4 tw-rounded-lg tw-font-bold tw-border tw-outline-none tw-border-ns-g/70 tw-mb-5 tw-mt-1 tw-tracking-[0.025rem] tw-placeholder-black/30 md:tw-text-[0.65rem] md:tw-py-3 hover:tw-cursor-pointer focus:tw-border-black focus:tw-border-[1.5px] tw-transition-colors">
</label>
<button id="submit" type="submit" class="tw-mb-5 tw-w-full tw-p-4 tw-bg-ns-dsg tw-text-white tw-font-bold tw-rounded-lg md:tw-text-[0.7rem] tw-tracking-[0.03rem] md:tw-py-3 active:tw-bg-gradient-to-r tw-from-rose-500 tw-to-orange-500 tw-transition-colors tw-duration-1000">Subscribe to monthly newsletter</button>
</form>
</div>
<!-- form end -->
</div>
<!-- Sign-up form end -->
</main>
<!-- modal start -->
<div id="modal" class="tw-hidden tw-fixed text-md-size">
<div class="tw-flex tw-flex-col tw-h-screen tw-justify-between tw-p-6 md:tw-bg-white md:tw-w-[24rem] md:tw-h-[24rem] md:tw-rounded-3xl md:tw-p-10 md:tw-justify-between">
<div class="tw-h-3/5 tw-flex tw-flex-col tw-justify-end md:tw-h-4/5">
<div class="tw-mb-3 md:tw-mb-0 md:tw-w-10"><img src="./assets/images/icon-success.svg" alt="" srcset=""></div>
<h1 class="tw-text-4xl tw-font-black tw-py-7">Thanks for subscribing!</h1>
<p>A confirmation email has been sent to
<span id="sub_email" class="tw-font-extrabold">ash@loremcompany.com</span>
Please open it and click the button inside to confirm your subscription.</p>
</div>
<button id="modal_dismiss_button" class="tw-w-full tw-p-4 tw-bg-ns-dsg tw-text-white tw-font-bold tw-rounded-lg md:tw-text-[0.7rem] tw-tracking-[0.03rem] md:tw-py-3 active:tw-bg-gradient-to-r tw-from-rose-500 tw-to-orange-500 tw-transition-colors tw-duration-1000">Dismiss message</button>
</div>
</div>
<!-- modal end -->
<!-- <footer 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>.
</footer> -->
</body>
<script src="./assets/js/fm_vldt.js"></script>
</html>