-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
129 lines (93 loc) · 7.79 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Semântico</title>
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header id="topo-pagina">
<nav>
<ul>
<li>
<a href="./index.html">Home</a>
</li>
<li>
<a href="#sobre-nos">Sobre nós</a>
</li>
</ul>
</nav>
<h1 class="titulo-de-pagina">Novo título da minha página</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi exercitationem nihil fuga voluptates tempora eum, molestias totam corrupti odio voluptas illo, pariatur modi praesentium neque! Iure, reprehenderit! Totam eaque laudantium necessitatibus nobis doloremque quam labore quis id a, laboriosam veritatis minima atque ea iusto saepe.</p>
</header>
<p>Quaerat rerum, veritatis a sequi quis suscipit dolore quae ex delectus et possimus minima cum maxime odio vitae labore dignissimos inventore. Error, rerum ut eveniet praesentium ullam facilis totam a aperiam minus consectetur animi qui doloremque accusamus, natus quam laudantium modi. Inventore aut unde ipsum.</p>
<h2 class="subtitulo-de-pagina">Novo subtítulo da minha página</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias nihil reiciendis impedit facere, perspiciatis dolorum, nulla, eligendi veritatis quia ipsam quisquam voluptate suscipit officia ut porro animi? Ipsum, enim voluptates.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni aliquam quis provident commodi quae magnam omnis iusto quam aperiam, id temporibus quisquam similique earum mollitia maiores incidunt? Culpa, quaerat? Nemo?</p>
<article>
<header>
<h1 class="titulo-de-artigo">Este é um artigo com dois parágrafos</h1>
<p class="autor-do-artigo">Posted by John Doe</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos repellat voluptatibus dignissimos nisi beatae aperiam ut error quisquam totam aut.</p>
</article>
<article>
<header>
<h1 class="titulo-de-artigo">Agora um artigo com três parágrafos</h1>
<p class="autor-do-artigo">Posted by John Doe</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos repellat voluptatibus dignissimos nisi beatae aperiam ut error quisquam totam aut.</p>
</article>
<article>
<header>
<h1 class="titulo-de-artigo">Mais um artigo com 5 parágrafos</h1>
<p class="autor-do-artigo">Posted by John Doe</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores atque nemo doloremque explicabo dicta quasi, necessitatibus totam? Itaque, recusandae culpa.</p>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos repellat voluptatibus dignissimos nisi beatae aperiam ut error quisquam totam aut.</p>
</article>
<article>
<header>
<h1 class="titulo-de-artigo">Finalmente, um artigo com um único parágrafo</h1>
<p class="autor-do-artigo">Posted by John Doe</p>
<p class="paragrafo-de-artigo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, eius? Ipsum repellendus sunt sit vitae odit. Autem repellendus amet excepturi!</p>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et at consequatur ratione molestiae voluptates facere rerum neque pariatur in doloribus!</p>
</article>
<section id="sobre-nos">
<a href="#topo-pagina">Topo</a>
<h2 class="titulo-de-secao">Sobre nós</h2>
<!-- Abreviação: p*2>lorem40 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, debitis molestiae enim molestias aut aliquam voluptate magnam autem eveniet, sit officia sed, esse dolores blanditiis eius dicta non laborum doloribus quos cumque id aspernatur minima ipsa! Laboriosam alias deleniti necessitatibus?</p>
<p>Consequatur perspiciatis cum aut inventore voluptas eaque, distinctio mollitia placeat ducimus officia, ratione eius molestias a dolorum laudantium magni aliquam repudiandae illo, in esse et recusandae! Hic eum perferendis ratione? Tempore dicta incidunt natus necessitatibus debitis repellat recusandae voluptatum sequi.</p>
</section>
<details>
<summary><strong>Lorem ipsum dolor sit amet.</strong></summary>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quis expedita deserunt provident doloribus itaque, incidunt, repellendus debitis vel aut minus eos nesciunt quos labore! Maxime sit sapiente optio eligendi qui asperiores corrupti quaerat a officiis aliquam sunt voluptas eveniet sed, necessitatibus illo in itaque reiciendis earum tenetur? Cum quam alias tenetur aut consequuntur. Culpa nisi veritatis optio ex autem.
</details>
<br>
<details>
<summary><strong>Lorem ipsum dolor sit.</strong></summary>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit unde commodi, laudantium maiores recusandae sed ea rerum, aperiam eveniet facilis possimus quidem. Odio laboriosam vero amet velit, ex repudiandae tempora corrupti, voluptatem beatae, nemo minus fuga dolorum. Neque, magni dicta?
</details>
<footer>
<h3>Este é o rodapé</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dicta, debitis sint ullam dolorum tempora aspernatur possimus eligendi perspiciatis maxime officiis nobis reprehenderit dolor. Nihil numquam aut at quidem maxime.</p>
<address>
<strong>Endereço:</strong>
Rua Moreira de Godói, 226 - Ipiranga - São Paulo - SP
</address>
</footer>
</body>
</html>