-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
209 lines (195 loc) · 9.02 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header class="header-wrapper wrapper">
<img class="main-logo" src="img/minimo_logo.png" alt="minimo_logo" />
<nav class="main-nav hamburger-wrapper">
<svg class="hamburger" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
<ul class="main-menu dropdown">
<li class="main-menu-item">
<a href="#">
lifestyle
</a>
</li>
<li class="main-menu-item">
<a href="#">
photodiary
</a>
</li>
<li class="main-menu-item">
<a href="#">
music
</a>
</li>
<li class="main-menu-item">
<a href="#">
travel
</a>
</li>
</ul>
</nav>
</header>
<main class="main-content-wrapper">
<section id="main-article">
<div class="wrapper">
<img src="img/pics/main_post_img.jpg" alt="Main Article Image" class="main-image"/>
<article class="main-article articles-wrapper">
<span class="category">
photodiary
</span>
<h2 class="main-article-title">
The Perfect weekend getaway
</h2>
<p class="main-article-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nisl nibh. Sed eget molestie mauris. Fusce nec dolor posuere sem laoreet gravida eget quis turpis. Donec congue lorem at lectus euismod tempor. Vivamus sem enim, tincidunt vitae scelerisque id, posuere nec erat. Maecenas imperdiet mattis lectus at egestas. Aliquam malesuada, felis nec tempor tristique, velit nisl vehicula felis, ut porttitor elit nibh quis ligula. In hac habitasse platea dictumst. Nunc eget erat non quam molestie volutpat. Curabitur fermentum porttitor turpis rhoncus mattis. Nam rhoncus mi sit amet ligula tempus vulputate. Nulla facilisi. Proin rhoncus elementum nibh, nec euismod purus interdum eget.
</p>
<p class="main-article-paragraph">
Sed sed est a ante fringilla imperdiet commodo eget ex. Sed pharetra justo sit amet massa tincidunt egestas. Proin suscipit massa vitae maximus dignissim. Aenean sagittis ligula in consequat tincidunt. Vestibulum hendrerit sapien sit amet magna facilisis fringilla. Etiam blandit vehicula massa quis blandit. Fusce maximus, leo nec vehicula eleifend, ipsum magna commodo enim, non molestie tortor orci eget dolor. Nam ut nunc ac nunc pharetra tempor. Phasellus consequat, lacus eget tempus vulputate, lorem ligula sagittis enim, eget ullamcorper diam nisi eget orci. Morbi non arcu augue.
</p>
<span class="leave_comment">
<a href="#">
leave a comment
</a>
</span>
</article>
</div>
</section>
<section id="other-articles">
<div class="wrapper other-articles-container articles-wrapper">
<article class="other-article">
<img src="img/pics/more_than.jpg" alt="festival image" class="other-article-img" />
<span class="category">
lifestyle
</span>
<h2 class="other-article-title">
More than just a music festival
</h2>
<p class="other-article-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
</article>
<article class="other-article">
<img src="img/pics/life_tastes.jpg" alt="coffe mug" class="other-article-img" />
<span class="category">lifestyle</span>
<h2 class="other-article-title">
Life tastes better with coffe
</h2>
<p class="other-article-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
</article>
<article class="other-article">
<img src="img/pics/american_dream.jpg" alt="American Dream" class="other-article-img" />
<span class="category">
photodiary
</span>
<h2 class="other-article-title">
American Dream
</h2>
<p class="other-article-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
</article>
<article class="other-article">
<img src="img/pics/exploring_alps.jpg" alt="Exploring Alps" class="other-article-img" />
<span class="category">
photodiary
</span>
<h2 class="other-article-title">
A day exploring Alps
</h2>
<p class="other-article-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
</article>
</div>
<!-- NEWSLETTER -->
<div class="newsletter-banner">
<div class="newsletter-banner-content">
<h2 class="newsletter-title">
Sign up for our newsletter!
</h2>
<form class="newsletter-form">
<input type="text" placeholder="Enter a valid email adress" class="newsletter-input"/>
<button type="submit" name="submit" class="newsletter-button"></button>
</form>
</div>
</div>
<!-- NEWSLETTER END -->
<div class="wrapper other-articles-container articles-wrapper">
<article class="other-article">
<img src="img/pics/songs_running.jpg" alt="Songs for running" class="other-article-img" />
<span class="category">
lifestyle
</span>
<h2 class="other-article-title">
Top 10 songs for running
</h2>
<p class="other-article-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
</article>
<article class="other-article">
<img src="img/pics/cold_winter.jpg" alt="Cold winter days" class="other-article-img" />
<span class="category">
lifestyle
</span>
<h2 class="other-article-title">
Cold winter days
</h2>
<p class="other-article-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
</article>
<div class="load-more wrapper">
<button id="load-more" class="load-more-button">Load more</button>
</div>
</div>
</section>
</main>
<footer id="main-footer" class="footer-wrapper">
<div class="wrapper footer-content">
<div class="terms-privacy">
<ul class="footer-privacy-menu">
<li class="privacy-menu-item">
<a href="#">
Terms and Conditions
</a>
</li>
<li class="privacy-menu-item">
<a href="#">
Privacy
</a>
</li>
</ul>
</div>
<div class="socials">
<ul class="social-list">
<li class="social-item">
Follow
</li>
<li class="social-item">
<a href="#">
<img src="img/facebook.png" alt="facebook">
</a>
</li>
<li class="social-item">
<a href="#">
<img src="img/twitter.png" alt="twitter">
</a>
</li>
<li class="social-item">
<a href="#">
<img src="img/instagram.png" alt="instagram">
</a>
</li>
</ul>
</div>
</div>
</footer>
</body>
</html>