-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnews-article.html
executable file
·202 lines (195 loc) · 11.7 KB
/
news-article.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<title>Remarkable Collective</title>
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="container">
<header class="header animated clearfix">
<div class="wrapper animated clearfix grey-border">
<div class="wrapper-header">
<div class="logo animated"><a href=""><img src="img/logo.png"></a></div>
<nav class="top-menu animated clearfix">
<div id="home" class="animated"><a href="">Home</a></div>
<div id="magazine" class="animated"><a href="">Magazine</a>
<ul class="drop-down">
<li><a href="#">Water</a></li>
<li><a href="#">Alternative energy</a></li>
<li><a href="#">Giving back</a></li>
<li><a href="#">Footprints</a></li>
</ul>
</div>
<div id="product" class="animated"><a href="">Product</a>
<ul class="drop-down">
<li><a href="#">Water</a></li>
<li><a href="#">Alternative energy</a></li>
<li><a href="#">Giving back</a></li>
<li><a href="#">Footprints</a></li>
<li><a href="#">Sustainable</a></li>
</ul>
</div>
<div id="community" class="animated"><a href="">Community</a></div>
<div id="about" class="animated"><a href="">About</a></div>
<div id="search-field" class="animated">
<form action="/search" method="get">
<input type="text" name="q" id="search-input" class="animated">
<button type="submit" name="search-button" id="search_button" class="sprite"></button>
</form>
</div>
</nav>
</div>
</div>
</header>
<div class="wrapper clearfix">
<div class="main animated clearfix newsarticle">
<section class="slide-show">
<ul class="slides">
<li class="active-slide stretching"><img src="img/newsarticle.png">
</ul>
<ul class="flex-direction-nav">
<li class="flex-previous"><img src="img/flex-previous.png" width="34px" height="68">
<li class="flex-next"><img src="img/flex-next.png" width="34px" height="68">
</ul>
</section>
<div class="page">
<section class="left">
<h1 class="article-heading">_one</h1>
<p class="category"><span class="red-text">News /</span> Water</p>
<time>17/09/2014</time>
<div class="infographic-big">
<div><img src="img/yellow-big.png"></div>
<div><img src="img/red-big.png"></div>
<div><img src="img/green-big.png"></div>
</div>
<div class="social-links">
<h3 class="category">Share</h3>
<ul>
<li><a href="#"><img src="img/fb-black.png"></a>
<li><a href="#"><img src="img/twitter-black.png"></a>
<li><a href="#"><img src="img/mail-black.png"></a>
<li><a href="#"><img src="img/google-black.png"></a>
<li><a href="#"><img src="img/insta-black.png"></a>
<li><a href="#"><img src="img/in-black.png"></a>
<li><a href="#"><img src="img/t-black.png"></a>
<li><a href="#"><img src="img/p-black.png"></a>
</ul>
</div>
</section>
<section class="main-column page">
<article>
<h2 class="bold">Boyan Slat</h2>
<p>Harunt quam fugitat que sunt am doluptassit reribus, qui do Ximinitiis etus des ipsam
audandus ven
te volor sam quias se ne voaut. Nobitionecero ilitatur as min niminum et dolup tae simolo
enist inihil ipsant exceaqu aturis es magnam et atiate poribus a vitat que num quiate
voluptat imus ea quasi offic tes aliam aut.Harunt quam fugitat que sunt am doluptassit
reribus, qui do Ximinitiis etus des ipsam audandus vente volor sam quias se ne voaut.
Nobitionecero ilitatur as min niminum et dolup tae simolo enist inihil ipsant exceaqu aturis
es magnam et atiate poribus a vitat que num quiate voluptat imus ea quasi offic tes aliam
aut. Harunt quam fugitat que sunt am dolup tassit reribus, qui do Ximin
itiis etus des ipsam audandus vente volor sam quias se ne volupti aerferu mquibus ut
volupicipsam
vel inciat laut aut oditaquide sum aut doluptus, cullaudam et arumque doluptaturLaceatur?
Itiusand
it velesti nus dolum alit fuga. Nam sequam aspis everibus, quaspero omnis aborehe
ndisciisciis volup
it minimaio quidipsum re quostio. Harunt quam fugitat que sunt am doluptassit reribus, qui
do Ximin
itiis etus des ipsam audandus vente volor sam quias se ne voaut. Nobitionecero ilitatur as
min nimi
num et dolup tae simolo enist inihil ipsant exceaqu aturis es magnam et atiate poribus a
vitat que
num. Nam sequam aspis everibus, quaspero omnis aborehe ndisciisciis volupit minimaio
quidipsum
re quostio. Harunt quam fugitat que sunt am doluptassit reribus, qui do Ximinitiis etus des
ipsam audandus vente volor sam quias se ne voaut. Nobitionecero ilitatur as min niminum et
dolup tae simolo enist inihil ipsant exceaqu aturis es magnam et atiate poribus a vitat que
num. Nam sequam aspis everibus, quaspero omnis aborehe ndisciisciis volupit minimaio
quidipsum re quostio. Harunt quam fugitat que sunt am doluptassit reribus, qui do Ximinitiis
etus des ipsam audandus vente volor sam quias se ne voaut. Nobitionecero ilitatur as min
niminum et dolup tae simolo enist inihil ipsant exceaqu aturis es magnam et atiate poribus a
vitat que num.
</p>
<p>Utempos sim eos am secum cum enihillor modis senimo bla volum eumquas piducia ectinum nusaes
aborporepero dolut. Itio ipienis ullorep eribus exerum voluptate sam ipis eos dus
molorestrum sape vere landesequi cum fugit, ut estium autempor amen dem nis eumquamus
solorestius ute voluptatio to idi voloreped eatur simenim usdanitium doluptat aut molupti
aesedis sitata conseni maximil ignatemos ate il magnia et quis soloressunda alibus at el
enia volupta spedis volorporum. Umet lande sequas de demporecte volupti ustempe ribust, aces
et, od moluptas sequidiorem el enist, offici berias volupta derum quia iust et quiderr
oviditi ut omnitas simolo dolenissunt ese estiossum eum fugiaspit, to quamus aut esecus.
</p>
<p>
Utempos sim eos am secum cum enihillor modis senimo bla volum eumquas piducia ectinum nusaes
aborporepero dolut.
</p>
</article>
<section class="comments">
<div class="grey-border"><p class="category">0 comments</p></div>
<div class="sorting"><a href="#">Sort by Best<img src="img/drop-down-arrow.png"></a></div>
<div>
<div class="stretching profile-photo"><img src="img/comments-photo.png"></div>
<div class="comment-field">
<form>
<textarea id="comment" placeholder="Start the discussion"></textarea><label
for="profile-image"><img src="img/attach-photo.png"></label><input type="file"
id="profile-image"
name="img">
<button type="submit" value="submit" id="join-btn">Join</button>
</form>
</div>
</div>
</section>
</section>
</div>
</div>
</div>
<footer class="footer">
<div class="wrapper">
<section class="footer-main clearfix">
<section class="footer-block more-info">
<h3>More info</h3>
<ul class="bottom-nav">
<li><a href="">About us</a>
<li><a href="">Contact us</a>
<li><a href="">Get involved</a>
<li><a href="">Dictionary</a>
</ul>
<ul class="column-2">
<li><a href="">FAQ</a>
<li><a href="">Privacy policy</a>
<li><a href="">Terms & conditions</a>
</ul>
</section>
<section class="footer-block sign-up">
<h3>Remarkable update!</h3>
<form action="#" method="post" class="sign-up-form">
<label for="sign-up-input">Sign in to get the latest news and more...</label>
<input type="email" placeholder="Email address" id="sign-up-input">
<button type="submit" value="submit" id="sign-up-btn">Go!</button>
</form>
</section>
<section class="footer-block find-us">
<h3>Find Us</h3>
<ul>
<li><a href=""><img src="img/fb-icon.png"></a>
<li><a href=""><img src="img/twitter-icon.png"></a>
<li><a href=""><img src="img/mail-icon.png"></a>
<li><a href=""><img src="img/google-icon.png"></a>
<li><a href=""><img src="img/insta-icon.png"></a>
<li><a href=""><img src="img/pin-icon.png"></a>
<li><a href=""><img src="img/t-icon.png"></a>
</ul>
</section>
</section>
<section class="info"><p>Remarkable Collective Holding B.V. © 2014. All rights reserved</section>
</div>
</footer>
</div>
<script src="js/main.js"></script>
</body>
</html>