-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (146 loc) · 5.71 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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 rel="stylesheet" href="./css/normalize.css" />
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Ubuntu:wght@300&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header class="header">
<nav class="site-nav">
<ul class="nav-links">
<li class="nav-item"><a href="/" class="link">Lifestyle</a></li>
<li class="nav-item"><a href="/" class="link">Photodiary</a></li>
<li class="nav-item"><a href="/" class="link">Music</a></li>
<li class="nav-item"><a href="/" class="link">Travel</a></li>
</ul>
</nav>
</header>
<section class="blog-section">
<ul class="blog">
<li class="blog-item">
<p class="small-text">
<img
class="images"
src="./images/image-1.png"
alt="image-1"
width="420"
/>Lifestyle
</p>
<h2 class="title">More than just a music festival</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ut,
accusamus vitae possimus non fugit excepturi tempore inventore nisi
necessitatibus aperiam? Optio consequatur dignissimos sed magnam
architecto libero nulla quod labore natus laudantium consequuntur
officiis obcaecati voluptatibus quisquam esse molestiae, hic
eveniet, dicta alias quaerat facilis tenetur. Voluptate, repellendus
et!
</p>
</li>
<li class="blog-item">
<p class="small-text">
<img
class="images"
src="./images/image-2.png"
alt="image-2"
width="420"
/>Lifestyle
</p>
<h2 class="title">Life tastes better wiht coffee</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
odit nemo sit, aliquid labore quisquam illo veniam blanditiis quas
molestias incidunt dicta ducimus obcaecati quae provident officia
dignissimos adipisci consequatur nihil aut ipsum a qui ad. Repellat,
libero ut est nisi veritatis voluptatem quam. Explicabo officiis
aliquam accusantium unde eius.
</p>
</li>
<li class="blog-item">
<p class="small-text">
<img
class="images"
src="./images/image-3.png"
alt="image-3"
width="420"
/>Photodiary
</p>
<h2 class="title">American dream</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
soluta ad id. Consequatur nobis quidem minus, dicta atque voluptas.
Corrupti atque facere maiores. In a, incidunt rem nobis, consectetur
fugit pos20mus impedit expedita voluptatem assumenda dolore magnam
dolor dicta ex recusandae voluptates id repellat tempore adipisci
atque fuga inventore dignissimos?
</p>
</li>
<li class="blog-item">
<p class="small-text">
<img
class="images"
src="./images/image-4.png"
alt="image-4"
width="420"
/>Photodiary
</p>
<h2 class="title">A day exploring the Alps</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
deleniti a accusamus aut commodi numquam eveniet facilis excepturi
maxime, quis pariatur nemo repellendus, eos qui aperiam
reprehenderit nulla, vel eius porro aspernatur esse! Accusantium
quis reiciendis tempora aut exercitationem quidem, minima aliquid,
officia aliquam, nobis ea harum officiis quod vero?
</p>
</li>
<li class="blog-item">
<p class="small-text">
<img
class="images"
src="./images/image-5.png"
alt="image-5"
width="420"
/>Lifestyle
</p>
<h2 class="title">Top 10 song for running</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Consectetur, a! Quis reiciendis, velit itaque eligendi ea
perferendis sunt maxime asperiores veritatis cumque repudiandae.
Mollitia eius cumque quo! Perspiciatis eveniet quasi itaque
consectetur maiores totam suscipit illum doloremque. Rem, quidem
dignissimos! Earum distinctio quam, natus nemo velit dicta
consectetur dolorum dignissimos.
</p>
</li>
<li class="blog-item">
<img
class="images"
src="./images/image-6.png"
alt="image-6"
width="420"
/>
<p class="small-text">Lifestyle</p>
<h2 class="title">Cold winter days</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime,
repellendus. Aperiam illum vel nam. Blanditiis corporis sapiente
autem aliquam labore eveniet? Quisquam consequatur voluptate autem
libero neque. Cumque ratione debitis ab! Enim in incidunt reiciendis
neque veniam illo tempore error quia. Aliquam reiciendis illo quasi
repudiandae nemo, iure provident praesentium.
</p>
</li>
</ul>
</section>
<div class="button-container"><a href="" class="button">Load more</a></div>
</body>
</html>