-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
55 lines (51 loc) · 2.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google-Fonts CDN Link -->
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@1,400;1,600&family=Pangolin&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Multi-Column Layout</title>
</head>
<body>
<header>
<h1>Globe Roamer</h1>
</header>
<main class="grid-container">
<!-- featured -->
<article class="featured">
<img src="images/bridge.jpg" alt="Featured Image">
<div class="featured-text">
<h2>Bridge Fascination</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nulla porro nesciunt. Optio, quisquam cumque veritatis recusandae earum nihil esse similique ipsam ut alias, libero illo veniam cum nesciunt deleniti iusto magnam ipsa est mollitia quis quia ducimus. Laborum ullam reprehenderit tempore. Beatae rem eum officia iure harum debitis adipisci eaque assumenda amet, atque nesciunt laboriosam obcaecati explicabo perferendis ab?</p>
</div>
</article>
<!-- /featured -->
<article class="article-image">
<img src="images/avenue.jpg" alt="article image">
<div>
<h3>Lonely Way Outside</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nulla porro nesciunt. Optio, quisquam cumque veritatis recusandae earum nihil esse similique ipsam ut alias.</p>
</div>
</article>
<article class="article-image">
<img src="images/hills.jpg" alt="article image">
<div>
<h3>Fairy Land</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nulla porro nesciunt. Optio, quisquam cumque veritatis recusandae earum nihil esse similique ipsam ut alias.</p>
</div>
</article>
<article class="article-image">
<img src="images/road.jpg" alt="article image">
<div>
<h3>Road To Freedom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nulla porro nesciunt. Optio, quisquam cumque veritatis recusandae earum nihil esse similique ipsam ut alias.</p>
</div>
</article>
</main>
</body>
</html>
<!-- In this series, desktop versions are firsly created
then we make them responsive on various devices. -->