-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
209 lines (189 loc) · 7.51 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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ALT School Web Development Training</title>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="utilty.css" />
</head>
<body>
<nav class="w-full flex items-center justify-between">
<div class="logo">
<img src="/assets/logo.png" alt="Site Logo" />
</div>
<div class="nav-links-container w-full flex items-center justify-between">
<a href="#">Pricing</a>
<a href="#">Help</a>
<a href="#">Learn More</a>
<a href="#">Download</a>
<button class="nav-btn">Account</button>
</div>
<div class="harmburger">
<svg
id="harmburger"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="font-bold"
height="35"
width="35"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M4 11h12v2H4zm0-5h16v2H4zm0 12h7.235v-2H4z"></path>
</svg>
</div>
</nav>
<div class="mobile-nav" id="mobile-nav">
<a href="#">Pricing</a>
<a href="#">Help</a>
<a href="#">Learn More</a>
<a href="#">Download</a>
<button class="nav-btn">Account</button>
</div>
<br /><br />
<main class="flex items-center justify-between items-center">
<section class="form w-full">
<section class="header">
<h1 class="capitalize form-heading">checkout</h1>
</section>
<hr />
<br /><br /><br />
<form>
<section class="step flex items-center">
<div class="stepper">1</div>
<h3 class="capitalize">your basic information</h3>
</section>
<section class="form-group flex">
<div>
<label for="first-name" class="capitalize">first name</label>
<input type="text" placeholder="Enter your first name" />
</div>
<div>
<label for="last-name" class="capitalize">last name</label>
<input type="text" placeholder="Enter your last name" />
</div>
</section>
<section class="form-section">
<label for="email" class="capitalize">E-mail </label>
<input
type="email"
name="email"
placeholder="Enter your email address"
/>
</section>
<br />
<hr />
<br />
<section class="step flex items-center">
<div class="stepper">2</div>
<h3 class="capitalize">your payment information</h3>
</section>
<section class="form-section">
<label for="credit-card" class="capitalize">Credit card </label>
<input
type="text"
name="credit-card"
placeholder="Enter card details"
/>
</section>
<button class="button capitalize">Buy WP Pusher</button>
<section class="support">
<p>
<span>Need any support?</span> Don't hesitate to contact
<a href="#">support</a>
</p>
</section>
</form>
</section>
<section class="banner">
<h1 class="capitalize banner-heading">freelancer</h1>
<section class="price-container flex items-center">
<span class="dollar">$</span>
<h1 class="price">99</h1>
<span class="per-year"> / year</span>
</section>
<p class="info">Automatically renews after 1 year</p>
<section class="features">
<section class="feature flex items-center">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289L9 10.5858L12.2929 7.29289C12.6834 6.90237 13.3166 6.90237 13.7071 7.29289C14.0976 7.68342 14.0976 8.31658 13.7071 8.70711L9.70711 12.7071C9.31658 13.0976 8.68342 13.0976 8.29289 12.7071L6.29289 10.7071C5.90237 10.3166 5.90237 9.68342 6.29289 9.29289Z"
fill="#B9F5FF"
/>
</svg>
<p>Use on 5 client sites</p>
</section>
<section class="feature flex items-center">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289L9 10.5858L12.2929 7.29289C12.6834 6.90237 13.3166 6.90237 13.7071 7.29289C14.0976 7.68342 14.0976 8.31658 13.7071 8.70711L9.70711 12.7071C9.31658 13.0976 8.68342 13.0976 8.29289 12.7071L6.29289 10.7071C5.90237 10.3166 5.90237 9.68342 6.29289 9.29289Z"
fill="#B9F5FF"
/>
</svg>
<p>Private repositories</p>
</section>
<section class="feature flex items-center">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289L9 10.5858L12.2929 7.29289C12.6834 6.90237 13.3166 6.90237 13.7071 7.29289C14.0976 7.68342 14.0976 8.31658 13.7071 8.70711L9.70711 12.7071C9.31658 13.0976 8.68342 13.0976 8.29289 12.7071L6.29289 10.7071C5.90237 10.3166 5.90237 9.68342 6.29289 9.29289Z"
fill="#B9F5FF"
/>
</svg>
<p>Email support</p>
</section>
</section>
<section class="other">
<p>Need 20 client sites?</p>
<a href="#" class="agency-plan">Switch to the agency plan</a>
</section>
<br />
<hr />
<br />
<p>
FTP is horrible to deal with. WP Pusher solves that issue, and the
customer support is awesome!
</p>
<br />
<section class="avatar-container">
<section class="avatar flex items-center">
<img
src="https://api.dicebear.com/7.x/micah/svg"
width="30"
height="30"
alt=""
class="avatar-image"
/>
<p class="name">Kirk Beard</p>
</section>
</section>
</section>
</main>
<script src="/script.js"></script>
</body>
</html>