-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathflexbox-last-challenge.html
84 lines (83 loc) · 2.89 KB
/
flexbox-last-challenge.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&family=Roboto:wght@300;400&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="flexbox-last-challenge.css" />
</head>
<body>
<section class="heading">
<div class="container">
<p>lorem ipsum sit</p>
<h1>Responsive layout don't have to be a struggle</h1>
</div>
</section>
<section class="quality">
<div class="container">
<h2>Quality Design</h2>
<div class="row">
<p class="col">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus maiores reprehenderit reiciendis consequatur eaque
odio vel dolorem amet libero, velit voluptas, neque earum quam id
explicabo perspiciatis a praesentium incidunt? Dolorum consequuntur,
inventore nulla provident molestias esse vel tempore earum dicta,
molestiae, beatae obcaecati eveniet ad corporis perspiciatis
distinctio vero!
</p>
<p class="col">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
fuga temporibus accusantium, vel qui maiores, labore modi molestiae
inventore, sint autem possimus consequatur voluptas ea? Laborum,
quaerat voluptas. Corporis blanditiis dicta iure ea animi. Dolorum
harum reiciendis exercitationem quo, a, quibusdam laborum unde minus
autem recusandae omnis quos excepturi magni.
</p>
</div>
</div>
</section>
<section class="custom">
<div class="container row">
<div class="col">
<h2>Made custom for you</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit
pariatur possimus repudiandae quas rerum voluptas!
</p>
</div>
<div class="col">
<img src="img/image-01.jpg" alt="sunset" />
</div>
</div>
</section>
<section class="care">
<div class="container row">
<div class="col">
<img src="img/image-02.jpg" alt="sunrise" />
</div>
<div class="col">
<h2>Created with care</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio natus
incidunt vel alias, cupiditate eligendi facilis quaerat ipsa nemo a!
</p>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="copy">
<p>© [email protected] May 2020</p>
<p class="source">
Based on Conquering Responsive Layouts by Kevin Powell
</p>
</div>
</div>
</footer>
</body>
</html>