-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (138 loc) · 3.45 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
<!-- @format -->
<!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="./images/favicon-32x32.png" />
<title>Frontend Mentor | Intro component with sign up form</title>
<link rel="stylesheet" href="./style.css" />
<script src="./main.js" defer></script>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<main class="main">
<div class="text">
<h1 class="text__h1">Learn to code by watching others</h1>
<p class="text__p">
See how experienced developers solve problems in real-time.
Watching scripted tutorials is great, but understanding how
developers think is invaluable.
</p>
</div>
<div class="entry">
<p class="entry__banner">
<strong>Try it free 7 days</strong> then $20/mo. thereafter
</p>
<div class="form">
<form
class="form__form"
action="https://httpbin.org/"
method="post"
novalidate>
<div class="ibox">
<input
type="text"
name="fname"
id="fname"
class="ibox__input"
placeholder="First Name" />
<img
src="./images/icon-error.svg"
alt="error"
width="24"
height="24"
class="ibox__img noerror" />
<p class="ibox__p noerror">
First Name cannot be empty
</p>
</div>
<div class="ibox">
<input
type="text"
name="lname"
id="lname"
class="ibox__input"
placeholder="Last Name" />
<img
src="./images/icon-error.svg"
alt="error"
width="24"
height="24"
class="noerror ibox__img" />
<p class="noerror ibox__p">
Last Name cannot be empty
</p>
</div>
<div class="ibox">
<input
type="email"
name="email"
id="email"
class="ibox__input"
placeholder="Email Address" />
<img
src="./images/icon-error.svg"
alt="error"
width="24"
height="24"
class="noerror ibox__img" />
<p class="noerror ibox__p">Email cannot be empty</p>
<p class="noerror ibox__p">
Looks like this is not an email
</p>
</div>
<div class="ibox">
<input
type="password"
name="password"
id="password"
class="ibox__input"
placeholder="Password" />
<img
src="./images/icon-error.svg"
alt="error"
width="24"
height="24"
class="noerror ibox__img" />
<p class="noerror ibox__p">
Password cannot be empty
</p>
</div>
<button type="submit" class="form__form__btn">
CLAIM YOUR FREE TRIAL
</button>
</form>
<p class="form__p">
By clicking the button, you are agreeing to our
<a class="form__p__a">Terms and Services</a>
</p>
</div>
</div>
</main>
<!-- <footer>
<p 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>.
</p>
</footer> -->
</body>
</html>