-
Notifications
You must be signed in to change notification settings - Fork 0
/
task2.html
212 lines (191 loc) · 8.64 KB
/
task2.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Responsive Design - All together
</title>
<link href="styles/task2.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<header>
<h1>
<a href="#">
<img src="images/ninja-logo.png" />
<span>The .NET Ninja</span>
</a>
</h1>
<nav>
<ul>
<li>
<a href="#">Nav item 1</a>
</li>
<li>
<a href="#">Nav item 2</a>
<ul>
<li>
<a href="#">Sub item 2.1</a>
</li>
<li>
<a href="#">Sub item 2.2</a>
</li>
<li>
<a href="#">Sub item 2.3</a>
</li>
<li>
<a href="#">Sub item 2.4</a>
</li>
</ul>
</li>
<li>
<a href="#">Nav item 3</a>
<ul>
<li>
<a href="#">Sub item 3.1</a>
</li>
<li>
<a href="#">Sub item 3.2</a>
</li>
<li>
<a href="#">Sub item 3.3</a>
</li>
<li>
<a href="#">Sub item 3.4</a>
</li>
</ul>
</li>
<li>
<a href="#">Nav item 4</a>
</li>
</ul>
</nav>
</header>
<aside>
<div class="social">
<ul>
<li>
<a href="#">
<img src="images/social_twitter_box.png" />
<span>Tweet about us</span>
</a>
</li>
<li>
<a href="#">
<img src="images/social_facebook.png" />
<span>Follow us on Facebook</span>
</a>
</li>
<li>
<a href="#">
<img src="images/social_google.png" />
<span>Join us on Google Plus</span>
</a>
</li>
<li>
<a href="#">
<img src="images/social_linkedin.png" />
<span>Join us on LinkedIn</span>
</a>
</li>
<li>
<a href="#">
<img src="images/social_myspace.png" />
<span>Follow us on Myspace</span>
</a>
</li>
</ul>
</div>
<div class="news">
<ul>
<li>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
</li>
<li>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
</li>
<li>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
</li>
<li>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
</li>
</ul>
</div>
</aside>
<section>
<article>
<header>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
</header>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel massa
nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Morbi posuere massa pretium neque condimentum quis posuere
libero ullamcorper. Praesent viverra sagittis nisi vel mattis. Pellentesque
non quam sem. Aenean dignissim elementum eleifend. Etiam ac dolor diam,
at vehicula felis. Fusce pretium placerat dui non egestas. Vivamus molestie
gravida urna, sit amet cursus ligula eleifend ac. Cras feugiat ultricies
eros, ac faucibus felis ullamcorper quis. Nulla fringilla tellus at risus
dictum sit amet bibendum velit mattis. Nam hendrerit accumsan aliquam.
Integer tincidunt felis a nibh tincidunt volutpat.</p>
</div>
</article>
<article>
<header>
<h1>Nulla adipiscing, ipsum malesuada</h1>
</header>
<div>
<p>Nulla adipiscing, ipsum malesuada sagittis euismod, nulla felis faucibus
diam, nec tempus mauris leo at est. Nunc ligula tortor, tincidunt a porta
sed, dignissim a neque. Aenean sagittis adipiscing nunc, a bibendum sapien
tincidunt ut. Fusce mattis fermentum sollicitudin. Phasellus id aliquet
mi. Mauris quis hendrerit turpis. Donec auctor sollicitudin pharetra. Phasellus
elementum faucibus aliquet. Nulla egestas elementum posuere. Vivamus pulvinar
tempor neque ut posuere. Integer consectetur pulvinar convallis. Nam auctor
tortor id neque volutpat vel placerat nulla vulputate.</p>
</div>
</article>
<article>
<header>
<h1>Aenean quam eros, sollicitudin eu auctor eu</h1>
</header>
<div>
<p>Aenean quam eros, sollicitudin eu auctor eu, convallis eget augue. Praesent
aliquet luctus mauris vel molestie. Praesent hendrerit hendrerit placerat.
Ut pharetra nisi id purus scelerisque pulvinar. Mauris sodales consequat
tincidunt. Integer pellentesque tristique leo et accumsan. Etiam augue
tellus, ornare ut blandit sit amet, venenatis in felis. Fusce augue mauris,
adipiscing quis porttitor ut, euismod at diam. Donec eu dolor nibh. Proin
sit amet fermentum nunc. Proin aliquam, mauris in euismod molestie, lorem
risus commodo urna, et faucibus libero turpis quis libero.</p>
</div>
</article>
<article>
<header>
<h1>Phasellus non lacus sit</h1>
</header>
<div>
<p>Phasellus non lacus sit amet dolor blandit consequat sit amet id felis.
Nunc eu massa ac lacus posuere ultricies. Pellentesque aliquam nunc ut
enim feugiat viverra. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Duis id pretium diam. Suspendisse
sollicitudin, nisi sit amet tempus gravida, erat nulla bibendum metus,
ullamcorper lobortis urna dolor eget purus. Aliquam rhoncus quam vitae
sapien rutrum hendrerit. Donec rutrum vehicula nibh vel lacinia. In hac
habitasse platea dictumst. Vestibulum orci mi, porttitor ac eleifend et,
rhoncus vel ipsum. Quisque sed magna vitae dui tempus blandit placerat
sed libero. Etiam volutpat, tortor non sollicitudin porta, est lacus venenatis
dolor, et cursus ipsum risus et orci. Aenean posuere consequat metus, non
molestie nibh dictum sit amet. Nam eu orci vitae justo sagittis laoreet.
Curabitur sollicitudin turpis et orci viverra semper.</p>
</div>
</article>
</section>
<footer>
<h2>
Telerik Software Academy - Slice and Dice
</h2>
</footer>
</div>
</body>
</html>