-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
254 lines (247 loc) · 10.4 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
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
<!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="./assets/favicon-32x32.png"
/>
<!---
<link rel="stylesheet" href="./styles/style.scss" />
used this during production but failed during build. see
link below
-->
<link rel="stylesheet" href="./styles/style.css" />
<title>Frontend Mentor | Typemaster pre-launch landing page</title>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="logo__container">
<a href="/" aria-label="well come to typemaster">
<img
class="image__item"
src="./assets/shared/logo.svg"
alt="typemaster international"
/>
</a>
</div>
<div class="order">
<button class="order__btn main__btn">Pre-order now</button>
</div>
</nav>
<!--hero section-->
<div class="hero">
<div class="hero__content">
<h1 class="hero__content__title">Typemaster keyboard</h1>
<p class="hero__content__description">
Improve your productivity and gaming without breaking the bank.
Upgrade to a high quality mechanical typing experience.
</p>
<div class="hero__content__primary">
<button class="hero__content__btn main__btn">
Pre-order now
</button>
<span class="hero__content__span">Release on 5/27</span>
</div>
</div>
<!--hero image-->
<div class="hero__img">
<picture>
<source
media="(max-width:680px)"
srcset="./assets/mobile/image-keyboard.jpg"
/>
<source
media="(min-width:681px )"
srcset="./assets/tablet/image-keyboard.jpg"
/>
<source
media="(min-width:980px )"
srcset="./assets/desktop/image-keyboard.jpg"
/>
<img
class="hero__img__img image__item"
src="./assets/mobile/image-keyboard.jpg"
alt="general keyboard"
/>
</picture>
</div>
</div>
</header>
<!--main section-->
<main>
<!--primary section-->
<div class="primary">
<div class="primary__img1">
<picture>
<source
media="(max-width: 680px )"
srcset="./assets/mobile/image-phone-and-keyboard.jpg"
/>
<source
media="(min-width:681px )"
srcset="./assets/tablet/image-phone-and-keyboard.jpg"
/>
<source
media="(min-width:980px )"
srcset="./assets/desktop/image-phone-and-keyboard.jpg"
/>
<img
class="primary__img1__img image__item"
src="./assets/mobile/image-phone-and-keyboard.jpg"
alt="phone and keyboard"
/>
</picture>
</div>
<div class="primary__img2">
<picture>
<source
media="(max-width: 680px )"
srcset="./assets/mobile/image-glass-and-keyboard.jpg"
/>
<source
media="(min-width:681px )"
srcset="./assets/tablet/image-glass-and-keyboard.jpg"
/>
<source
media="(min-width:980px )"
srcset="./assets/desktop/image-glass-and-keyboard.jpg"
/>
<img
class="primary__img2__img image__item"
src="./assets/mobile/image-glass-and-keyboard.jpg"
alt="glass and keyboard"
/>
</picture>
</div>
<div class="primary__content">
<h2 class="primary__content__title">
Mechanical wireless keyboard
</h2>
<p class="primary__content__description">
The Typemaster keyboard boasts top-notch build and practical
design. It offers a wide variety of switches and keycaps, along
with reliable wireless connectivity.
</p>
</div>
</div>
<!--secondary section -->
<div class="secondary">
<div class="cards">
<!--card one-->
<div class="card">
<div class="card__image__holder">
<svg
role="img"
class="card__img image__item"
width="26"
height="21"
xmlns="http://www.w3.org/2000/svg"
>
<title>Our high quality monitors</title>
<path
d="M15.673 17.755l2.253 2.939H7.51l2.253-2.939h5.91zM23.183.45a1.96 1.96 0 011.96 1.96v12.08a1.96 1.96 0 01-1.96 1.96H1.96A1.96 1.96 0 010 14.489V2.41A1.96 1.96 0 011.96.448z"
fill="#FFF"
fill-rule="nonzero"
/>
</svg>
</div>
<h3 class="card__title">Highly compatible</h3>
<p class="card__description">
Easy to use and works well with all major computer brands,
gaming consoles and mobile devices. Plug & play, no installation
or driver needed.
</p>
</div>
<!--card two-->
<div class="card">
<div class="card__image__holder">
<svg
role="img"
class="card__img image__item"
width="19"
height="28"
xmlns="http://www.w3.org/2000/svg"
>
<title>Bluetooth fully supported</title>
<path
d="M11.947 13.93l5.974-5.999a1.653 1.653 0 00-.25-2.537L10.076.282a1.663 1.663 0 00-2.592 1.37v7.942L3.533 5.6a1.641 1.641 0 00-2.326-.01 1.652 1.652 0 00-.01 2.336l5.953 6.002-5.953 6.002a1.653 1.653 0 00.01 2.338 1.64 1.64 0 002.326-.01l3.95-3.994v7.941c0 .61.348 1.172.887 1.459a1.659 1.659 0 001.705-.09l7.596-5.11a1.655 1.655 0 00.25-2.538l-5.974-5.996zm-1.111-9.173l3.358 2.26-3.358 3.372V4.757zm0 18.348v-5.632l3.358 3.372-3.358 2.26z"
fill="#FFF"
fill-rule="nonzero"
/>
</svg>
</div>
<h3 class="card__title">Wireless with bluetooth</h3>
<p class="card__description">
Powerful 2.4G RF technology allows you to connect the cordless
keyboard from up to 30ft away. Simply plug the unifying receiver
into your computer.
</p>
</div>
<!--card three-->
<div class="card">
<div class="card__image__holder">
<svg
role="img"
class="card__img image__item"
width="32"
height="21"
xmlns="http://www.w3.org/2000/svg"
>
<title>Long lasting batteries</title>
<path
d="M29.655 4.333h-.322V4A3.67 3.67 0 0025.667.333h-22A3.67 3.67 0 000 4v12.667a3.67 3.67 0 003.667 3.666h22a3.67 3.67 0 003.666-3.666v-.334h.322A2.336 2.336 0 0031.988 14V6.667a2.336 2.336 0 00-2.333-2.334zm-20.322 11a1 1 0 01-1 1H5a1 1 0 01-1-1v-10a1 1 0 011-1h3.333a1 1 0 011 1v10zm8 0a1 1 0 01-1 1H13a1 1 0 01-1-1v-10a1 1 0 011-1h3.333a1 1 0 011 1v10zm8 0a1 1 0 01-1 1H21a1 1 0 01-1-1v-10a1 1 0 011-1h3.333a1 1 0 011 1v10z"
fill="#FFF"
fill-rule="nonzero"
/>
</svg>
</div>
<h3 class="card__title">High capacity battery</h3>
<p class="card__description">
Equipped with a long-lasting built-in battery, you’ll never have
to spend a dime on replaceable ones. Enjoy 40 hours of usage
time between charges.
</p>
</div>
<!--card four-->
<div class="card">
<div class="card__image__holder">
<svg
role="img"
class="card__img image__item"
width="32"
height="32"
xmlns="http://www.w3.org/2000/svg"
>
<title>back light modes supported</title>
<path
d="M20 28v1.667A2.345 2.345 0 0117.667 32h-3.334C13.213 32 12 31.147 12 29.28V28h8zm5.47-3.947l1.845 1.846a1 1 0 11-1.415 1.414l-1.845-1.845a1 1 0 111.414-1.415zm-17.523 0a1 1 0 010 1.415L6.1 27.313a.997.997 0 01-1.414 0 1 1 0 010-1.414l1.845-1.846a1 1 0 011.415 0zM14 6.88c2.813-.6 5.693.093 7.88 1.867A9.297 9.297 0 0125.333 16c0 2.88-1.306 5.547-3.56 7.333-.92.72-1.52 1.654-1.706 2.667v.013C20.04 26 20.027 26 20 26h-8l-.047.002-.046.011V26c-.187-1.053-.734-1.96-1.52-2.547-2.907-2.2-4.267-5.8-3.52-9.426.733-3.534 3.6-6.414 7.133-7.147zM31 15a1 1 0 010 2h-2.61a1 1 0 010-2H31zM3.61 15a1 1 0 010 2H1a1 1 0 010-2h2.61zm12.723-5c-.546 0-1 .453-1 1 0 .547.454 1 1 1A3.665 3.665 0 0120 15.667c0 .546.453 1 1 1 .547 0 1-.454 1-1A5.679 5.679 0 0016.333 10zm10.982-5.315a1 1 0 010 1.415l-1.846 1.845a1.003 1.003 0 01-1.414 0 1 1 0 010-1.414L25.9 4.685a1 1 0 011.415 0zm-21.214 0l1.846 1.846a1 1 0 11-1.415 1.414L4.687 6.1A1 1 0 116.1 4.685zM16 0a1 1 0 011 1v2.61a1 1 0 01-2 0V1a1 1 0 011-1z"
fill="#FFF"
fill-rule="nonzero"
/>
</svg>
</div>
<h3 class="card__title">RGB backlit modes</h3>
<p class="card__description">
Choose from 4 backlight brightness levels and adjustable
breathing speed. Each key glows intensely in the dark and helps
you type in low light conditions.
</p>
</div>
</div>
</div>
</main>
<footer>
<p class="footer__content">
<span>Typemaster 2021 </span> | All Rights Reserved
</p>
</footer>
</div>
<script src="./index.js"></script>
</body>
</html>