-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (70 loc) · 7.59 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Understanding Responsive Images - Course Open Assignment</title>
<!-- Styles -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<header>
<h1>Clearview office space</h1>
<p>A great place to work, share new ideas and make friends.</p>
<p>Just down the street from the Starbucks Coffee Shop.</p>
<div>
<figure class="fw">
<img class="fw-img" src="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-1_r6fnkt.jpg" srcset="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-1_r6fnkt.jpg 300w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_600/v1699326718/IDMX%20268/office-1_r6fnkt.jpg 600w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_1200/v1699326718/IDMX%20268/office-1_r6fnkt.jpg 1200w" alt="office" width="3500" height="2334">
<figcaption>- Join us today!</figcaption>
</figure>
</div>
</header>
<!-- MAIN -->
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore veniam, accusantium ducimus iure exercitationem accusamus alias unde esse reiciendis. Eum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, asperiores voluptates non maxime sequi consectetur quasi mollitia corrupti excepturi veritatis qui voluptate corporis, quos perspiciatis cum ducimus nostrum ex esse numquam necessitatibus, illum alias consequuntur eum odio adipisci? Doloremque voluptates repudiandae quis ad excepturi facere, temporibus beatae ex atque sint ipsum omnis illo officiis in cum, odio, eum maxime quidem consectetur. Voluptates facilis delectus architecto est dolore, perspiciatis vitae quidem impedit nostrum esse fugit, velit hic eius laborum itaque reprehenderit repellat soluta repellendus aliquam. Veritatis dolorem officia provident dolores, ad quas rerum autem est, totam id fugiat magni mollitia. Illo.</p>
<div class="figure-grp">
<figure class="half">
<img src="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-2_cjqfuh.jpg" srcset="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_150/v1699326718/IDMX%20268/office-2_cjqfuh.jpg 300w,https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-2_cjqfuh.jpg 600w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_600/v1699326718/IDMX%20268/office-2_cjqfuh.jpg 1200w" alt="office" width="3500" height="2333">
</figure>
<figure class="half">
<img src="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-3_dqkt07.jpg" srcset="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_150/v1699326718/IDMX%20268/office-3_dqkt07.jpg 300w,https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-3_dqkt07.jpg 600w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_600/v1699326718/IDMX%20268/office-3_dqkt07.jpg 1200w" alt="office" width="3500" height="2333">
</figure>
<figure class="half">
<img src="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326719/IDMX%20268/office-8_s1gzux.jpg" srcset="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_150/v1699326719/IDMX%20268/office-8_s1gzux.jpg 300w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326719/IDMX%20268/office-8_s1gzux.jpg 600w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_600/v1699326719/IDMX%20268/office-8_s1gzux.jpg 1200w" alt="office" width="3500" height="2333">
</figure>
<figure class="half">
<img src="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326720/IDMX%20268/office-9_usj6ct.jpg" srcset="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_150/v1699326720/IDMX%20268/office-9_usj6ct.jpg 300w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326720/IDMX%20268/office-9_usj6ct.jpg 600w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_600/v1699326720/IDMX%20268/office-9_usj6ct.jpg 1200w" alt="office" width="3500" height="2333">
</figure>
<figure class="half">
<img src="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-1_r6fnkt.jpg" srcset="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_150/v1699326718/IDMX%20268/office-1_r6fnkt.jpg 300w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-1_r6fnkt.jpg 600w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_600/v1699326718/IDMX%20268/office-1_r6fnkt.jpg 1200w" alt="office" width="3500" height="2334">
</figure>
<figure class="half">
<img src="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-2_cjqfuh.jpg" srcset="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_150/v1699326718/IDMX%20268/office-2_cjqfuh.jpg 300w,https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326718/IDMX%20268/office-2_cjqfuh.jpg 600w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_600/v1699326718/IDMX%20268/office-2_cjqfuh.jpg 1200w" alt="office" width="3500" height="2333">
</figure>
<p class="double-row" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, quisquam voluptatum in ipsa provident blanditiis nesciunt facere. Ea, officiis provident placeat fugit cupiditate minima enim veniam libero hic tempore deserunt iusto qui harum vero consectetur suscipit, architecto cum voluptate assumenda. Eveniet facere officiis ullam, est quasi debitis voluptates corporis culpa!</p>
<div class="double-row">
<figure class="solo-img">
<img src="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326720/IDMX%20268/office-4_gvfkhc.jpg" srcset="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_150/v1699326720/IDMX%20268/office-4_gvfkhc.jpg 300w,https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326720/IDMX%20268/office-4_gvfkhc.jpg 600w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_600/v1699326720/IDMX%20268/office-4_gvfkhc.jpg 1200w" alt="office" width="3500" height="2333">
<figcaption>Post-its</figcaption>
</figure>
</div>
</div> <!-- end figure-grp -->
<div>
<figure class="fw">
<img class="fw-img" src="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326719/IDMX%20268/office-5_u5qllz.jpg" srcset="https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_300/v1699326719/IDMX%20268/office-5_u5qllz.jpg 300w,https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_600/v1699326719/IDMX%20268/office-5_u5qllz.jpg 600w, https://res.cloudinary.com/dxiisosc3/image/upload/f_auto,q_auto,w_1200/v1699326719/IDMX%20268/office-5_u5qllz.jpg 1200w" alt="office" width="3500" height="2333">
<figcaption>- Laptop on table</figcaption>
</figure>
</div>
</main>
<!-- FOOTER -->
<footer>
<hr>
<p>Thanks for dropping by! Hope to see you soon in your new office.</p>
</footer>
</body>
</html>