-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (97 loc) · 4.88 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
95
96
97
98
99
100
101
<!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">
<title>Responsive-Site-With-Flex</title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
</head>
<body>
<!-- header container -->
<header>
<div class="title">
<h1>Living for life</h1>
<p class="sub-title">A blog exploring life</p>
</div>
<nav>
<ul class="nav-list">
<li class="nav-list-item"><a class="nav-list-link home-page" href="#">Home</a></li>
<li class="nav-list-item"><a class="nav-list-link" href="#">About me</a></li>
<li class="nav-list-item"><a class="nav-list-link" href="#">Recent Posts</a></li>
</ul>
</nav>
</header> <!--END OF HEADER-->
<!-- contents container -->
<div class="container">
<h1>Duis <span>blandit</span> tortor</h1>
<img src="image/luxury-bedroom.jpg" alt="room" />
<div class="columns">
<div class="col col-50">
<h2>Donec a nibh ultricies</h2>
<p>
Duis blandit tortor in purus rutrum rhoncus. Donec a nibh ultricies,
dignissim nibh eu, consequat metus. In faucibus elit velit,
vitae rhoncus urna suscipit ut. Vestibulum ac vestibulum lectus.
Vivamus venenatis luctus tortor, quis cursus ligula elementum vel.
Vivamus sed sem vel sem varius iaculis. Curabitur quis velit in magna
molestie efficitur varius ac mi. Mauris dui tellus, luctus ut aliquam a,
vehicula vitae massa. Ut finibus consectetur varius.
Nam viverra tortor id ex luctus, in finibus turpis tincidunt.
Ut urna velit, interdum eu pharetra vitae, suscipit quis augue.
Nam fermentum sagittis ante, vel interdum tellus scelerisque sed.
</p>
</div>
<div class="col col-25">
<h2>Nam viverra tortor id ex luctus</h2>
<p>
Maecenas pulvinar, nisi a volutpat molestie, ex justo fringilla diam,
vitae accumsan nibh tellus id nisi.
Integer porta feugiat enim, in posuere mauris rhoncus a.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer eget ex quis diam fringilla fermentum.
Morbi pharetra fringilla odio ac euismod.
Sed vel turpis vitae quam commodo vulputate.
Nam libero mauris, iaculis ac aliquam eu, suscipit sit amet dui.
Morbi non vehicula neque. Nulla ut fringilla sapien.
</p>
</div>
<div class="col col-bg col-25">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer eget ex quis diam fringilla fermentum.
Morbi pharetra fringilla odio ac euismod.
Sed vel turpis vitae quam commodo vulputate.
Nam libero mauris, iaculis ac aliquam eu, suscipit sit amet dui.
Morbi non vehicula neque. Nulla ut fringilla sapien.
</p>
</div>
</div> <!--end of column1-->
<div class="columns">
<div class="col col-75">
<h2>Morbi non vehicula neque</h2>
<p>
Duis blandit tortor in purus rutrum rhoncus. Donec a nibh ultricies,
dignissim nibh eu, consequat metus. In faucibus elit velit,
vitae rhoncus urna suscipit ut. Vestibulum ac vestibulum lectus.
Vivamus venenatis luctus tortor, quis cursus ligula elementum vel.
Vivamus sed sem vel sem varius iaculis. Curabitur quis velit in magna
molestie efficitur varius ac mi. Mauris dui tellus, luctus ut aliquam a,
vehicula vitae massa. Ut finibus consectetur varius.
</p>
</div>
<div class="col col-bg col-25">
<p>Ut finibus consectetur varius.
Nam viverra tortor id ex luctus, in finibus turpis tincidunt.
Ut urna velit, interdum eu pharetra vitae, suscipit quis augue.
Nam fermentum sagittis ante.</p>
</div>
</div> <!--end of column1-->
</div> <!--end of contaisner-->
</body>
</html>