-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
271 lines (262 loc) · 10.6 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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<link rel="stylesheet" href="styles.css" />
<div class="news-page">
<!-- start: publisher/publication -->
<div class="news-page_section publisher">
<div class="logo">
<img src="http://redonion.se/cssgrid/images/logo-shield155.png" alt="" />
</div>
<div class="publisher_name">
<img src="http://redonion.se/cssgrid/images/logo-cleanup.svg" alt="" />
<div class="publisher_tagline">THE WIZARD WORLD'S BEGUILING BROADSHEET OF CHOICE</div>
</div>
</div>
<!-- end: publisher/publication -->
<!-- start: exclusive story -->
<div class="news-page_section exclusive-story">
<div class="exclusive-story_marker">exclusive</div>
<div class="exclusive-story_preview">
<div class="exclusive-story_preview_title">
<span class="text--uppercase display--block">inside the mind</span>
<span>of a MUGGLER</span>
</div>
<div class="preview-content-wrapper">
<div class="preview-content">
<p>
What are mugglers really like? Do mugglers dream of electric sheep? These and many more
questions are discussed with the top authoroties in the field of modern muggler studies. Is it
possible that mugglers are not too different from ourselves? Can we in fact learn from the fate
of our underdeveloped cousins?
</p>
</div>
<div class="preview-content--link">Read the Full story on Page 6.</div>
</div>
</div>
</div>
<!-- end: exclusive story -->
<!-- start: stories -->
<div class="news-page_section stories">
<div class="story--main">
<div class="column--left">
<div class="story_title">
<div class="text--vertical">hurricane</div>
<div>Maria Threatens Quidditch Playoffs</div>
</div>
<div class="story_content">
<div class="column--left">
<p class="text--lead">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.
</p>
<p class="text--capitalize-first">
Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id
est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam
libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
</p>
<p>
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut
et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.
</p>
</div>
<div class="column--right">
<p class="story_featured_photo">
<img src="https://media.giphy.com/media/GVjZ2dFsqfxFC/giphy.gif" alt="" />
</p>
<!-- start: blockquote -->
<div class="blockquote-wrapper">
<div class="blockquote_title_wrapper">
<div class="blockquote_title">
<div class="text--superscript">Captain Oliver</div>
<div class="text--normal">Wood not worried</div>
</div>
</div>
<div class="blockquote_content">
We're prepared for anything. Dealing with bad weather is not a problem. Quidditch is an
outdoor sport, and as such, Nature is a part of the game. Playing in rough conditions is
in fact something me and my crew are used to.
</div>
</div>
<!-- end: blockquote -->
<div class="paragraphs--multicolumn">
<p>
Veteran Captain Oliver Wood did not seem too anxious about the hurricane threat as he
and some of his fellow crew met reporters in the lobby at player hotel this morning. At
vero eos et accusamus et iusto.
</p>
<p>
Ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui.
</p>
<p>
Harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
possimus, omnis voluptas assumenda est, omnis dolor repellendus.
</p>
<p>
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et.
</p>
</div>
</div>
</div>
</div>
<div class="column--right">
<div class="author">
<div class="name">Rita Skeeter</div>
<div class="footnote">reports</div>
</div>
<p class="text--capitalize-first">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident.
</p>
<p>
Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus.
</p>
<p>
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat.
</p>
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
labore et dolore magnam aliquam quaerat voluptatem.
</p>
</div>
</div>
<div class="story-divider"></div>
<div class="story--secondary">
<div class="story--secondary--left">
<p class="story_title">Ministry Secretary Denies Job Crisis</p>
<div class="story_featured_photo">
<img src="https://media.giphy.com/media/NoBXm9gmqzx96/giphy.gif" alt="" />
</div>
<div class="caption">
<div class="caption_content">“THERE IS ENOUGH MAGIC FOR ALL”</div>
<div class="page-number">page 12</div>
</div>
</div>
<div class="story--secondary--right">
<div class="story_title">
<div class="title--left"><small>ALBUS SEVERUS POTTER</small> Scandal</div>
<div class="title--right">
In Polyjuice
<small
>Potter was discovered trying to enter girls dorm under the influence of polyjuice.</small
>
</div>
</div>
<div class="story_content">
<p class="story_featured_photo">
<img src="http://redonion.se/cssgrid/images/potions200.jpg" alt="" />
</p>
<p class="text--capitalize-first">
A Hogwarts spokesperson says the incident will not be taken lightly, since it was only a few
months ago young Potter was involved in a similar incident. Parents of the Hufflepuff girls are
now putting preassure on the school to assure the safety of their children.
</p>
<p>
An anonymous source says the Potter boy has been harassing girls and bullying his fellow
students since he started at Hogwarts. The source also says that because of his family name,
professors and staff are too scared to act. Neither one of the boy's parents wanted to comment
the event.
</p>
</div>
</div>
</div>
</div>
<!-- end: stories -->
<!-- start: weather section -->
<div class="news-page_section weather_report">
<div class="section-divider" title="Weather"></div>
<div class="weathers_wrapper">
<div class="weather_column">
<div class="weather_value text_shadow--hot">27 <span class="weater_value_measurement">*C</span></div>
<div class="weather_city">Adua</div>
</div>
<div class="weather_column">
<div class="weather_value">19 <span class="weater_value_measurement">*C</span></div>
<div class="weather_city">Hogsmeade</div>
</div>
<div class="weather_column">
<div class="weather_value">18 <span class="weater_value_measurement">*C</span></div>
<div class="weather_city">Idris</div>
</div>
<div class="weather_column">
<div class="weather_value text_shadow--hot">24 <span class="weater_value_measurement">*C</span></div>
<div class="weather_city">King's Landing</div>
</div>
<div class="weather_column">
<div class="weather_value text_shadow--cold">-84 <span class="weater_value_measurement">*C</span></div>
<div class="weather_city">Luna</div>
</div>
<div class="weather_column">
<div class="weather_value">12 <span class="weater_value_measurement">*C</span></div>
<div class="weather_city">Stormwind</div>
</div>
</div>
</div>
<!-- end: weather section -->
<!-- start: footer story -->
<div class="news-page_section footer_story">
<div class="story_title">AURORS OUT OF CONTROL?</div>
<div class="story_excerpt_and_number">
<div class="story_page_number">
<div>page</div>
<div class="number">7</div>
</div>
<div class="story_excerpt">
<div>THE FULL STORY</div>
<div class="text--lowercase">violence investigated</div>
</div>
</div>
</div>
<!-- end: footer story -->
<!-- start: news categories -->
<div class="news-page_section news_categories">
<div class="categories_wrapper">
<div class="category_column">
<div class="category">World</div>
<div class="badge_number">7</div>
</div>
<div class="category_column">
<div class="category">Ministry</div>
<div class="badge_number">12</div>
</div>
<div class="category_column">
<div class="category">Sport</div>
<div class="badge_number">4</div>
</div>
<div class="category_column">
<div class="category">Business</div>
<div class="badge_number">2</div>
</div>
<div class="category_column">
<div class="category">Amusements</div>
<div class="badge_number">3</div>
</div>
<div class="category_column">
<div class="category">Magic</div>
<div class="badge_number">6</div>
</div>
<div class="category_column">
<div class="category">Jobs</div>
<div class="badge_number">13</div>
</div>
<div class="category_column">
<div class="category">Adventure</div>
<div class="badge_number">14</div>
</div>
</div>
</div>
<!-- end: news categories -->
</div>