<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>O meu primeiro web site</title>
<style>
body {
font-family: Roboto;
}
footer {
background-color: brown;
color: White;
padding: 50px 10px
}
h2 {
background-color: gray;
color: White;
padding: 50px;
text-align: center;
font-size: 60px;
font-family: Anton;
text-transform: uppercase;
}
p {
font-size: 20px;
letter-spacing: 1px;
line-height: 1.5;
margin: 30px 0 10px 0;
}
</style>
</head>
<body>
<!-- CABEÇALHO -->
<div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#produtos">Produtos</a></li>
<li><a href="#contactos">Contactos</a></li>
</ul>
</nav>
</div>
<!-- /CABEÇALHO -->
<div>
<!-- HOME -->
<div id="home">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus ex, condimentum a sem in, tempor molestie elit. Cras in tempus metus, aliquam malesuada magna. Vestibulum viverra tortor lorem, porttitor placerat magna vehicula vel. In sodales, odio non porta dapibus, neque nisi suscipit justo, ac eleifend leo erat in turpis. Phasellus varius eu purus a aliquam. Aliquam luctus dui quis felis vulputate, eget hendrerit justo feugiat. Quisque augue quam, aliquam eu urna in, sagittis ullamcorper quam. Maecenas molestie quam sit amet tortor vulputate posuere. Donec sagittis dolor tortor, ut tincidunt elit venenatis vel. Vestibulum consectetur nisi sit amet pellentesque scelerisque. Maecenas id augue et mi suscipit aliquet. Nam ut eros tempor urna varius finibus. Integer quis congue ligula, non dignissim nibh. Praesent accumsan, purus vel aliquam bibendum, risus nulla tristique sapien, non gravida nisi leo et elit.</p>
<p>Integer nulla lacus, tempor a nunc ac, consequat volutpat ante. Etiam cursus metus non tincidunt tristique. In a pharetra nunc, quis fermentum nisi. Morbi vel ultrices mi. Nam consectetur elementum purus, in cursus massa. Phasellus varius auctor neque eget iaculis. Sed rutrum consequat risus, eu posuere leo elementum ut. Nullam sollicitudin mattis nisi non finibus. Fusce vitae neque convallis, dignissim eros tempus, ullamcorper dolor. Integer ullamcorper eget lacus quis condimentum. Mauris dignissim vestibulum odio, eget suscipit sapien facilisis sed. Etiam lectus augue, semper non porttitor eu, posuere a metus. Mauris feugiat lectus ac accumsan blandit. Donec commodo, felis vel consequat posuere, turpis metus faucibus turpis, eget ultrices lectus velit aliquam arcu. Phasellus luctus eu nisl et blandit.</p>
<p>Proin quis mollis nunc. Vivamus libero nunc, tempor quis velit maximus, condimentum feugiat velit. Mauris eu tincidunt justo, quis maximus felis. Nullam velit enim, interdum eu libero ut, malesuada mollis velit. Sed malesuada, ligula id gravida pretium, velit elit auctor odio, eu aliquam quam dolor nec diam. Phasellus ac aliquet nisl, at pharetra ante. Vestibulum nec quam tellus. Sed congue lacus sit amet turpis euismod tincidunt. Nam accumsan erat at efficitur porta. Praesent nulla mi, lobortis vel ullamcorper vel, sollicitudin sit amet ipsum. Sed vestibulum ipsum eu metus fringilla ultrices. Ut pellentesque velit at tincidunt feugiat. Aliquam volutpat urna ac eleifend rutrum. Morbi posuere dignissim leo, vel viverra felis convallis nec. Integer facilisis porta justo, vitae elementum eros sollicitudin non. Vivamus sit amet condimentum sem, nec cursus turpis.</p>
</div>
<!-- /HOME -->
<!-- SOBRE -->
<div id="sobre">
<h2>Sobre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus ex, condimentum a sem in, tempor molestie elit. Cras in tempus metus, aliquam malesuada magna. Vestibulum viverra tortor lorem, porttitor placerat magna vehicula vel. In sodales, odio non porta dapibus, neque nisi suscipit justo, ac eleifend leo erat in turpis. Phasellus varius eu purus a aliquam. Aliquam luctus dui quis felis vulputate, eget hendrerit justo feugiat. Quisque augue quam, aliquam eu urna in, sagittis ullamcorper quam. Maecenas molestie quam sit amet tortor vulputate posuere. Donec sagittis dolor tortor, ut tincidunt elit venenatis vel. Vestibulum consectetur nisi sit amet pellentesque scelerisque. Maecenas id augue et mi suscipit aliquet. Nam ut eros tempor urna varius finibus. Integer quis congue ligula, non dignissim nibh. Praesent accumsan, purus vel aliquam bibendum, risus nulla tristique sapien, non gravida nisi leo et elit.</p>
<p>Integer nulla lacus, tempor a nunc ac, consequat volutpat ante. Etiam cursus metus non tincidunt tristique. In a pharetra nunc, quis fermentum nisi. Morbi vel ultrices mi. Nam consectetur elementum purus, in cursus massa. Phasellus varius auctor neque eget iaculis. Sed rutrum consequat risus, eu posuere leo elementum ut. Nullam sollicitudin mattis nisi non finibus. Fusce vitae neque convallis, dignissim eros tempus, ullamcorper dolor. Integer ullamcorper eget lacus quis condimentum. Mauris dignissim vestibulum odio, eget suscipit sapien facilisis sed. Etiam lectus augue, semper non porttitor eu, posuere a metus. Mauris feugiat lectus ac accumsan blandit. Donec commodo, felis vel consequat posuere, turpis metus faucibus turpis, eget ultrices lectus velit aliquam arcu. Phasellus luctus eu nisl et blandit.</p>
<p>Proin quis mollis nunc. Vivamus libero nunc, tempor quis velit maximus, condimentum feugiat velit. Mauris eu tincidunt justo, quis maximus felis. Nullam velit enim, interdum eu libero ut, malesuada mollis velit. Sed malesuada, ligula id gravida pretium, velit elit auctor odio, eu aliquam quam dolor nec diam. Phasellus ac aliquet nisl, at pharetra ante. Vestibulum nec quam tellus. Sed congue lacus sit amet turpis euismod tincidunt. Nam accumsan erat at efficitur porta. Praesent nulla mi, lobortis vel ullamcorper vel, sollicitudin sit amet ipsum. Sed vestibulum ipsum eu metus fringilla ultrices. Ut pellentesque velit at tincidunt feugiat. Aliquam volutpat urna ac eleifend rutrum. Morbi posuere dignissim leo, vel viverra felis convallis nec. Integer facilisis porta justo, vitae elementum eros sollicitudin non. Vivamus sit amet condimentum sem, nec cursus turpis.</p>
</div>
<!-- /SOBRE -->
<!-- PRODUTOS -->
<div id="produtos">
<h2>Produtos</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus ex, condimentum a sem in, tempor molestie elit. Cras in tempus metus, aliquam malesuada magna. Vestibulum viverra tortor lorem, porttitor placerat magna vehicula vel. In sodales, odio non porta dapibus, neque nisi suscipit justo, ac eleifend leo erat in turpis. Phasellus varius eu purus a aliquam. Aliquam luctus dui quis felis vulputate, eget hendrerit justo feugiat. Quisque augue quam, aliquam eu urna in, sagittis ullamcorper quam. Maecenas molestie quam sit amet tortor vulputate posuere. Donec sagittis dolor tortor, ut tincidunt elit venenatis vel. Vestibulum consectetur nisi sit amet pellentesque scelerisque. Maecenas id augue et mi suscipit aliquet. Nam ut eros tempor urna varius finibus. Integer quis congue ligula, non dignissim nibh. Praesent accumsan, purus vel aliquam bibendum, risus nulla tristique sapien, non gravida nisi leo et elit.</p>
</div>
<!-- /PRODUTOS -->
<!-- CONTACTOS -->
<div id="contactos">
<h2>Contactos</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus ex, condimentum a sem in, tempor molestie elit. Cras in tempus metus, aliquam malesuada magna. Vestibulum viverra tortor lorem, porttitor placerat magna vehicula vel. In sodales, odio non porta dapibus, neque nisi suscipit justo, ac eleifend leo erat in turpis. Phasellus varius eu purus a aliquam. Aliquam luctus dui quis felis vulputate, eget hendrerit justo feugiat. Quisque augue quam, aliquam eu urna in, sagittis ullamcorper quam. Maecenas molestie quam sit amet tortor vulputate posuere. Donec sagittis dolor tortor, ut tincidunt elit venenatis vel. Vestibulum consectetur nisi sit amet pellentesque scelerisque. Maecenas id augue et mi suscipit aliquet. Nam ut eros tempor urna varius finibus. Integer quis congue ligula, non dignissim nibh. Praesent accumsan, purus vel aliquam bibendum, risus nulla tristique sapien, non gravida nisi leo et elit.</p>
<p>Integer nulla lacus, tempor a nunc ac, consequat volutpat ante. Etiam cursus metus non tincidunt tristique. In a pharetra nunc, quis fermentum nisi. Morbi vel ultrices mi. Nam consectetur elementum purus, in cursus massa. Phasellus varius auctor neque eget iaculis. Sed rutrum consequat risus, eu posuere leo elementum ut. Nullam sollicitudin mattis nisi non finibus. Fusce vitae neque convallis, dignissim eros tempus, ullamcorper dolor. Integer ullamcorper eget lacus quis condimentum. Mauris dignissim vestibulum odio, eget suscipit sapien facilisis sed. Etiam lectus augue, semper non porttitor eu, posuere a metus. Mauris feugiat lectus ac accumsan blandit. Donec commodo, felis vel consequat posuere, turpis metus faucibus turpis, eget ultrices lectus velit aliquam arcu. Phasellus luctus eu nisl et blandit.</p>
<p>Proin quis mollis nunc. Vivamus libero nunc, tempor quis velit maximus, condimentum feugiat velit. Mauris eu tincidunt justo, quis maximus felis. Nullam velit enim, interdum eu libero ut, malesuada mollis velit. Sed malesuada, ligula id gravida pretium, velit elit auctor odio, eu aliquam quam dolor nec diam. Phasellus ac aliquet nisl, at pharetra ante. Vestibulum nec quam tellus. Sed congue lacus sit amet turpis euismod tincidunt. Nam accumsan erat at efficitur porta. Praesent nulla mi, lobortis vel ullamcorper vel, sollicitudin sit amet ipsum. Sed vestibulum ipsum eu metus fringilla ultrices. Ut pellentesque velit at tincidunt feugiat. Aliquam volutpat urna ac eleifend rutrum. Morbi posuere dignissim leo, vel viverra felis convallis nec. Integer facilisis porta justo, vitae elementum eros sollicitudin non. Vivamus sit amet condimentum sem, nec cursus turpis.</p>
</div>
<!-- /CONTACTOS -->
</div>
<!-- RODAPÉ -->
<footer style="">
<div>
<p>Aqui fica o rodapé</p>
</div>
</footer>
<!-- /RODAPÉ -->
</body>
</html>
Sem comentários:
Enviar um comentário