-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
79 lines (71 loc) · 1.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Flexbox in practice</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Flexbox in practice</h1>
<p>
For this challenge you need to use Flexbox to build each of the following
exercises.
</p>
<p><b>Check the README for instructions.</b></p>
<div>
<h2>Exercise 1</h2>
<div class="nav-items">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/products">Our Products</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</div>
</div>
<div>
<h2>Exercise 2</h2>
<div class="parent">
<div class="child">Center me</div>
</div>
</div>
<div>
<h2>Exercise 3</h2>
<div class="card-3">
<div class="child-1">Cactus spike</div>
<div class="child-2">USD 20</div>
<div class="child-3"><b>12</b> left in stock</div>
</div>
</div>
<div>
<h2>Exercise 4</h2>
<div class="card-4">
<img
class="card-img"
src="https://fastly.picsum.photos/id/1011/200/200.jpg?hmac=ISwJXaLKDOtBGE_n3myoHUev_P_OH3zpWqLx0yHp0pY"
/>
<div class="card-text-wrapper">
<div class="child-1">Kayak ride</div>
<div class="child-2">USD 25</div>
<div class="child-3"><b>3</b> spots left</div>
<a class="reserve-btn">Reserve your spot</a>
</div>
</div>
</div>
<div>
<h2>Exercise 5</h2>
<ul class="tags">
<li>Potato</li>
<li>Sprout tomato</li>
<li>Gumbo beet greens</li>
<li>corn soko</li>
<li>endive gumbo gourd</li>
<li>Parsley shallot courgette tatsoi</li>
<li>pea sprouts fava bean</li>
<li>collard greens</li>
<li>dandelion okra wakame</li>
<li>tomato</li>
</ul>
</div>
</body>
</html>