-
Notifications
You must be signed in to change notification settings - Fork 40
/
Copy pathindex.html
60 lines (53 loc) · 2.27 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise Flexbox and Grid</title>
<link rel="stylesheet" href="css/style.css">
<!--<link rel="stylesheet" href="css/style-solution.css"> don't cheat! Use Jen Simmons video as a tutorial instead so that you get to write/understand it yourself -->
</head>
<body>
<main class="deals">
<article class="sale-item">
<h1>Computer Starter Kit</h1>
<p>This is the best computer money can buy, if you don’t have much money.</p>
<ul>
<li>Computer</li>
<li>Monitor</li>
<li>Keyboard</li>
<li>Mouse</li>
</ul>
<img src="https://www.w3.org/TR/css-flexbox-1/images/computer.jpg" alt="You get: a white computer with matching peripherals">
<button>BUY NOW</button>
</article>
<article class="sale-item">
<h1>Printer</h1>
<p>Only capable of printing ASCII art.</p>
<ul>
<li>Paper and ink not included.</li>
</ul>
<img src="https://www.w3.org/TR/css-flexbox-1/images/printer.png" alt="You get: a dot-matrix printer.">
<button>BUY NOW</button>
</article>
<article class="sale-item">
<h1>Printer 2</h1>
<p>A la 1989.</p>
<img src="https://www.w3.org/TR/css-flexbox-1/images/printer.png" alt="You get: a dot-matrix printer.">
<button>BUY NOW</button>
</article>
<article class="sale-item">
<h1>Mouse</h1>
<p>A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface. Clickity Click!</p>
<button>BUY NOW</button>
</article>
<article class="sale-item">
<h1>Macintosh 8500</h1>
<p>This is the best computer money can buy, if you don’t have much money. This computer was state of the art in 1995.</p>
<img src="https://www.w3.org/TR/css-flexbox-1/images/computer.jpg" alt="You get: a white computer with matching peripherals.">
<button>BUY NOW</button>
</article>
</main>
<script src="js/scripts.js"></script>
</body></html>