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

<!DOCTYPE html>
<html>
	<head>
		<title>CSS Exercise</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div id="header">
			<h1>Online Newspaper</h1>
			<h2>CSS Exercise</h2>
		</div>
		<div id="menu">
			<ul>
				<li><a href="">Politics</a></li>
				<li><a href="">Sports</a></li>
				<li><a href="">World</a></li>
				<li><a href="">Education</a></li>
				<li><a href="">Society</a></li>
			</ul>
		</div>
		<div id="content">
			<div class="news-item">
				<h3>Donec et metus</h3>
				<img src="http://ipsumimage.appspot.com/300x200,ff7700" alt="300x200">
				<p class="introduction">Donec et metus sit amet augue mattis bibendum et ut nunc. Donec eleifend laoreet suscipit. In <a href="link.html">ullamcorper leo</a> vel dui consectetur eu sodales nisl iaculis. Ut posuere ullamcorper nunc eu gravida. Maecenas pulvinar rutrum feugiat. Morbi dolor nibh, gravida vel lobortis quis, aliquet eget massa. In lectus risus, adipiscing id consequat non, ultricies non ligula. Maecenas a orci vitae erat elementum pretium. In ut arcu vel quam luctus faucibus vitae ac lectus. Mauris in lacus tristique augue aliquet tempor.</p>
				<p>In eu viverra nibh. Phasellus <a href="link.html">interdum</a> feugiat sapien ac volutpat. Nulla facilisi. Quisque condimentum consectetur tortor ut pulvinar. Sed a ipsum sollicitudin enim porta consectetur. Proin scelerisque leo quis dui lacinia commodo. Nunc erat massa, lacinia nec venenatis id, lacinia et nulla. Vivamus quis ipsum tellus, non gravida augue. Cras eget lectus et tortor convallis fringilla. Praesent et augue urna, dapibus dignissim orci. Duis gravida malesuada est sit amet ultricies. Cras ultrices vulputate magna, egestas pharetra purus pellentesque vel. Integer ornare, dui at volutpat varius, urna justo consequat velit, ornare egestas est nisl feugiat nulla. Proin fermentum turpis ut arcu semper vel tincidunt leo auctor. Nam ut augue nunc, et euismod tellus.</p>
				<ul>
					<li><a href="noticia1.html">see more</a></li>
					<li><a href="comentarios1.html">comments (2)</a></li>
					<li><a href="partilhar1.html">share</a></li>
				</ul>
			</div>
			<div class="news-item">
				<h3>Pellentesque vitae feugiat</h3>
				<img src="http://ipsumimage.appspot.com/300x200,ff0077" alt="300x200">
				<p class="introduction">Pellentesque vitae feugiat eros. Cras commodo porttitor enim ac ullamcorper. Aenean pellentesque metus eget nisl pharetra ut semper risus rutrum. Cras accumsan aliquet enim, quis facilisis leo lacinia quis. Mauris non neque arcu, et tristique tortor. Etiam vitae neque justo. Morbi vel suscipit enim. Vestibulum neque ligula, consectetur pharetra hendrerit id, pretium tempus sem. Sed nec felis justo, tempus viverra urna. Vestibulum id nisl quis libero fermentum sodales nec a felis. Nunc turpis metus, pharetra ac fermentum pellentesque, mollis eget quam. Aenean sed lorem id tellus rhoncus volutpat non vitae neque.</p>
				<p>In eu ligula a felis egestas placerat. Integer tempus tempus mauris, id <a href="link.html">pellentesque mauris tempor</a> nec. Nulla leo massa, venenatis id iaculis at, semper in lectus. Nullam fermentum est sit amet felis aliquet varius dapibus dolor tempus. Maecenas volutpat leo eu turpis suscipit fermentum id eget nisi. Donec ac neque nec massa placerat aliquet vitae vitae ligula. Fusce ac urna vitae ipsum mattis porta id ac lorem. Aenean tempus interdum iaculis. Ut ac euismod neque. Etiam quis ipsum sem, eu vestibulum est.</p>
				<ul>
					<li><a href="noticia2.html">see more</a></li>
					<li><a href="comentarios2.html">comments (0)</a></li>
					<li><a href="partilhar2.html">share</a></li>
				</ul>
			</div>
			<div class="news-item">
				<h3>Sed ultricies porta ligula</h3>
				<img src="http://ipsumimage.appspot.com/300x200,77ff00" alt="300x200">
				<p class="introduction">Sed ultricies porta ligula, convallis ultricies risus ultrices nec. <a href="link.html">Quisque</a> pellentesque sagittis leo, et vehicula quam tempor vel. Nulla mollis tincidunt leo, vitae mollis risus posuere et. Praesent lacinia eros ut purus adipiscing ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque interdum, erat non condimentum commodo, libero urna fermentum mi, tristique pharetra risus tellus sit amet elit. Nullam vel quam nibh, quis vehicula dolor.</p>
				<p>Nulla mi sem, <a href="link.html">dictum</a> eget euismod ac, adipiscing a ante. Nam rutrum eros et turpis commodo <a href="link.html">facilisis</a>. Pellentesque elementum varius libero. Vestibulum commodo massa vel leo consectetur vitae lacinia lacus mattis. Phasellus ac ligula eu lorem lobortis laoreet nec sed odio. Duis eu elit enim, in varius libero. Ut et velit nunc, in egestas metus. Donec dui elit, semper non suscipit eget, vestibulum quis leo.</p>
				<ul>
					<li><a href="noticia3.html">see more</a></li>
					<li><a href="comentarios3.html">comments (5)</a></li>
					<li><a href="partilhar3.html">share</a></li>
				</ul>
			</div>		
		</div>
		<div id="footer">
			<p>CSS Exercises @ FEUP - 2013</p>
		</div>
	</body>
</html>