forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
380 lines (374 loc) · 15.5 KB
/
index.html
File metadata and controls
380 lines (374 loc) · 15.5 KB
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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css">
<title>Budget Pre-built Computers</title>
</head>
<body>
<main class="Home">
<header class="header">
<nav class="links">
<a href="#about"><p class="nav-link left-link">About</p></a>
<a href="#features"><p class="nav-link center-link">Features</p></a>
<a href="#videos"><p class="nav-link center-link">Videos</p></a>
<a href="#pricing1"><p class="nav-link right-link">Pricing</p></a>
</nav>
</header>
<section class="top-section" id="about">>
<article class="top-article-left">
<img
src="https://o.aolcdn.com/images/dims?resize=980%2C640&quality=100&image_uri=https%3A%2F%2Fo.aolcdn.com%2Fimages%2Fdims%3Fcrop%3D1600%252C1067%252C0%252C0%26quality%3D85%26format%3Djpg%26resize%3D1600%252C1067%26image_uri%3Dhttps%253A%252F%252Fs.yimg.com%252Fos%252Fcreatr-uploaded-images%252F2019-07%252F3ea8b9a0-9fb6-11e9-a9af-3d319d232d0f%26client%3Da1acac3e1b3290917d92%26signature%3D6275eccd66bca3156fd26da8e33f6b1402a009f7&client=amp-blogside-v2&signature=76478092239c8833dd9c58a9ccbb90bd249c5d65"
alt=""
class="top-img-1"
/>
<img
src="https://i.redd.it/8adb2qd0ddn51.jpg"
alt=""
class="top-img-2"
/>
</article>
<article class="top-article-center">
<header class="center-article-header">
<h1 class="center-header">Budget Pre-Built Computers</h1>
</header>
<p class="center-article-paragraph">
As you can see by the title of the website, we sell pre-built
computers at a reliable price, although they are budget, they are
reliable and trustworthy machines that can handle anything you throw
at it, whether your doing video/photo editing, live streaming,
gaming or the combination of both gaming and streaming.
</p>
<p class="center-article-paragraph">
Subscribe to our email listing so that you can get up to date
feedback on when we will be re-stocking on new & old parts for our
pre-builts
</p>
</article>
<article class="top-article-right">
<img
class="top-img-3"
src="https://cdn.hipwallpaper.com/i/34/32/mY143s.jpg"
alt="intel_wallpaper"
/>
<img
class="top-img-4"
src="https://c4.wallpaperflare.com/wallpaper/292/860/979/amd-dark-minimalism-ryzen-wallpaper-thumb.jpg"
alt="ryzen_wallpaper"
/>
</article>
</section>
<section>
<form class="Form">
<input
type="text"
placeholder="Enter your email address"
required
class="input-field"
/>
<button class="Form-btn">Welcome!</button>
</form>
</section>
<section class="main-section" id="features">
<article class="main-section-1">
<header class="section-1-header"><h2>Features</h2></header>
<div class="features">
<div class="feature-1">
<header class="feature-1-header">
<h3>Quality Assurance</h3>
</header>
<p>
We ensure to our customers that they will get the best-quality
pre-built computers if they are looking on saving time and just
want to get straight to the action and not have to worry about
building a computer.
</p>
</div>
<div class="feature-2">
<header class="feature-2-header">
<h3>Best and Reliable Sources</h3>
</header>
<p>
We will make sure that we source out the best parts for our
pre-builts so that you don't have to. We will also make sure
that the people we buy these components from are reliable enough
to purchase their second-hand goods so that we both can benefit
from it both financially and stress-free.
</p>
</div>
<div class="feature-3">
<header class="feature-3-header">
<h3>Best Bang for your Buck</h3>
</header>
<p>
Our company will provide our customers with the best value for
their money depending on the pre-built that they are purchasing,
we will do our utmost best to do price-checking against other
companies so that we can best them at prices while we still
provide quality reassurance.
</p>
</div>
<div class="feature-4">
<header class="feature-4-header">
<h3>Unsatisfied/faulty product.</h3>
</header>
<p>
Don't worry if you are not satisfied of our product or if a
component gets damaged on the way to you, we will allow you to
return the product/s and if we cannot get it fixed and
personally delivered to you within a work week, we will ensure
that you will get your money back guaranteed!
</p>
</div>
</div>
</article>
<section class="main-section" id="videos">>
<article class="main-section-2">
<header><h2>Videos</h2></header>
<div class="videos">
<div class="videoWrapper">
<iframe
class="video1"
src="https://www.youtube.com/embed/02h_dNl-C-s"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="videoWrapper">
<iframe
class="video2"
src="https://www.youtube.com/embed/tdeH3uGtb_Q"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="videoWrapper">
<iframe
class="video3"
src="https://www.youtube.com/embed/ViddsDFIkwY"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="videoWrapper">
<iframe
class="video4"
src="https://www.youtube.com/embed/VwAHkzt6MUI"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="videoWrapper">
<iframe
class="video5"
src="https://www.youtube.com/embed/lUL-KkGcsBo"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="videoWrapper">
<iframe
class="video6"
src="https://www.youtube.com/embed/IsJ89NzeGb0"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</article>
<section class="main-section" id="pricing1">>
<article class="main-section-3">
<header>
<h2 class="main-section3-header">
Pricing
<h3 class="main-section-3-paragraph">Here are some of the pre-builts that we will be selling, by selecting a pre-built you can customize the parts in the system that you would like</h3>
</h2>
</header>
<div class="section-3-build">
<h3>Intel PC with an Nvidia Graphics Card</h3>
<div class="computer__img">
<img
class="computer1-img"
src="https://m.media-amazon.com/images/I/71zB+cepSvL._AC_SL1500_.jpg"
alt="Intel Core i9 PC Nvidia"
/>
</div>
<div class="computer__info">
<div class="price">
<h4 class="price-1">$1700</h4>
</div>
<div class="specs">
<ol>
<li>Intel Core i7-9700K @ 4.9GHz Max Boost</li>
<li>Nvidia GTX 2070 Super</li>
<li>MSI Z390 A Pro Motherboard</li>
<li>Team T-FORCE Delta RGB 32GB @ 3200MHz</li>
<li>
Connectivity -> Displayport 1.4, HDMI 2.0b, USB Type-C &
DVI-DL
</li>
<li>Power Supply Recommended -> 750W - 850W</li>
</ol>
</div>
<button class="btn-select">Select</button>
</div>
</div>
<div class="section-3-build">
<h3>AMD Ryzen PC with an Nvidia Graphics Card</h3>
<div class="computer__img">
<img
class="computer1-img"
src="https://images-na.ssl-images-amazon.com/images/I/71DDQIRPLJL._AC_SL1200_.jpg"
alt="AMD Ryzen PC Nvidia"
/>
</div>
<div class="computer__info">
<div class="price">
<h4 class="price-2">$1650</h4>
</div>
<div class="specs">
<ol>
<li>AMD Ryzen 3700X @ 4.4GHz Max Overclock</li>
<li>Nvidia GTX 2070 Super</li>
<li>ASRock B550 Taichi Motherboard</li>
<li>Team T-FORCE Delta RGB 32GB @ 3600MHz</li>
<li>
Connectivity -> Displayport 1.4, HDMI 2.0b, USB Type-C &
DVI-DL
</li>
<li>Power Supply Recommended -> 750W - 850W</li>
</ol>
</div>
<button class="btn-select">Select</button>
</div>
</div>
<div class="section-3-build">
<h3>AMD Ryzen PC with an AMD Graphics Card</h3>
<div class="computer__img">
<img
class="computer1-img"
src="https://c1.neweggimages.com/ProductImageCompressAll1280/83-221-592-V21.jpg"
alt="AMD Ryzen PC Radeon"
/>
</div>
<div class="computer__info">
<div class="price">
<h4 class="price-3">$1500</h4>
</div>
<div class="specs">
<ol>
<li>AMD Ryzen 3600X @ 4.3GHz Max Overclock</li>
<li>ASRock Radeon RX 5700XT Taichi OC+</li>
<li>ASRock B550 Taichi Motherboard</li>
<li>Team T-FORCE Delta RGB 32GB @ 3600MHz</li>
<li>
Connectivity -> Displayport 1.4, HDMI 2.0b, USB Type-C &
DVI-DL
</li>
<li>Power Supply Recommended -> 700W - 850W</li>
</ol>
</div>
<button class="btn-select">Select</button>
</div>
</div>
<div class="section-3-build">
<h3>Intel PC with a Radeon Graphics Card</h3>
<div class="computer__img">
<img
class="computer1-img"
src="https://c1.neweggimages.com/ProductImageCompressAll1280/ABFSD200720ONFHQ.jpg"
alt="Intel Core i9 PC Radeon"
/>
</div>
<div class="computer__info">
<div class="price">
<h4 class="price-4">$1600</h4>
</div>
<div class="specs">
<ol>
<li>
Intel Core i7-9700F @ 3.0GHz Base & 4.7GHz Max Overclock
</li>
<li>ASRock Radeon RX 5700XT Taichi OC+</li>
<li>MSI Z390 A Pro Motherboard</li>
<li>Team T-FORCE Delta RGB 32GB @ 3200MHz</li>
<li>
Connectivity -> Displayport 1.4, HDMI 2.0b, USB Type-C &
DVI-DL
</li>
<li>Power Supply Recommended -> 700W - 850W</li>
</ol>
</div>
<button class="btn-select">Select</button>
</div>
</div>
</article>
<article class="main-section-4">
<header class="section-4-header"><h2>Links</h2></header>
<div class="inks__info">
<div class="info__text">
<p>
If you would like to know here we source our parts from, here is
a few links to the products listed above if you would like to
check it out, these produts are a bit more pricey that is shown
on the website, but we will mark it down to the best of our
ability so that us and the customer is satisfied:
</p>
</div>
<div class="info__links">
<ul>
<li>
Intel PC with Nvidia Graphics Card @
<a
class="extlinks"
href="https://www.amazon.com/ASUS-Desktop-Overclocked-i7-9700K-GeForce/dp/B07PDHWPNB/ref=sr_1_8?crid=3OFIM5OUVT1IX&dchild=1&keywords=9700k%2B2070%2Bsuper&qid=1607003082&sprefix=9700k%2B2070%2Caps%2C512&sr=8-8&th=1"
target="_blank"
>Amazon</a
>
</li>
<li>
Intel PC with Radeon Graphics Card @
<a
class="extlinks"
href="https://www.newegg.com/clx-tgvsetrxh0533bm/p/3D5-000B-00100?Description=gaming%20pc%205700xt&cm_re=gaming_pc%205700xt-_-9SIABFSBN57351-_-Product"
target="_blank"
>Newegg</a
>
</li>
<li>
Ryzen PC with Nvidia Graphics Card @
<a
class="extlinks"
href="https://www.amazon.com/Skytech-Chronos-Gaming-Desktop-Motherboard/dp/B08BLBGF7L/ref=sr_1_1?crid=24OHNHB8E5TF&dchild=1&keywords=3700x+2070+super&qid=1607003846&sprefix=3700X+2070%2Caps%2C494&sr=8-1"
target="_blank"
>Amazon</a
>
</li>
<li>
Ryzen PC with Radeon Graphics Card @
<a
class="extlinks"
href="https://www.newegg.com/asus-ga15dh-es557-rog-strix/p/N82E16883221592?Description=3600x%205700xt&cm_re=3600x_5700xt-_-83-221-592-_-Product"
target="_blank"
>Newegg</a
>
</li>
</ul>
</div>
</div>
</article>
</section>
<footer class="Footer">
<h5 class="Author">Made by Jarrod Benjamin</h5>
<h5 class="Copyright">© 2020 Budget Pre-Built PCs</h5>
</footer>
</main>
</body>
</html>