-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
155 lines (148 loc) · 5.56 KB
/
index.htm
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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Hyrule Herald</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
/>
<link rel="icon" type="image/x-icon" href="/img/icon.png" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header class="container-fluid fixed-top bg-dark text-light p-3">
<div class="container d-flex align-items-center justify-content-between">
<a href="#" class="navbar-brand">
<img
src="img/text-1725246663085.png"
alt="Logo The Hyrule Herald"
width="200"
/>
</a>
<nav>
<ul class="nav d-flex" id="menu">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Sobre</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Curiosidades</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">História de Hyrule</a>
</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="banner">
<div class="container">
<div class="banner-content text-center">
<h1>Bem-vindo a Hyrule Herald</h1>
<p class="lead">O seu portal de notícias sobre o mundo de Zelda</p>
</div>
</div>
</section>
<section class="container">
<div class="row">
<div class="col-md-8">
<h2 class="mb-3">Últimas Notícias</h2>
<article class="noticia row mb-4">
<div class="col-md-4">
<img
src="img/Link_Master_Sword.avif"
alt="Link empunhando a Master Sword"
class="img-fluid"
/>
</div>
<div class="col-md-8">
<h3>Herói da Hora: Link Derrota Ganondorf!</h3>
<p>
Após uma batalha épica, o jovem herói Link triunfou sobre o
maligno Ganondorf, salvando Hyrule da escuridão. Leia mais
sobre essa incrível aventura!
</p>
<a href="#" class="btn btn-warning">Ler mais</a>
</div>
</article>
<article class="noticia row mb-4">
<div class="col-md-4">
<img
src="img/Princess-Zelda-Ocarina-of-Time-featured-image.jpg"
alt="Princesa Zelda tocando a Ocarina do Tempo"
class="img-fluid"
/>
</div>
<div class="col-md-8">
<h3>A Princesa Zelda e a Profecia</h3>
<p>
Descubra os segredos da profecia que envolve a Princesa Zelda
e sua ligação com a Triforce *. Uma história emocionante que
você não pode perder!
</p>
<a href="#" class="btn btn-warning">Ler mais</a>
</div>
</article>
<article class="noticia row mb-4">
<div class="col-md-4">
<img
src="img/Goron-City.jpg"
alt="Cidade dos Gorons em Hyrule"
class="img-fluid"
/>
</div>
<div class="col-md-8">
<h3>
A Revolução dos Gorons: Novo Chefe Eleito na Montanha da Morte
</h3>
<p>
Em uma decisão histórica, os Gorons de Hyrule elegeram Darunia
Jr. como o novo Chefe da Cidade Goron. Veja como essa eleição
pode impactar toda Hyrule!
</p>
<a href="#" class="btn btn-warning">Ler mais</a>
</div>
</article>
</div>
<div class="col-md-4">
<aside>
<h3>Destaques</h3>
<ul>
<li><a href="#">Entrevista Exclusiva com a Sheikah Impa</a></li>
<li><a href="#">Os Segredos da Master Sword Revelados</a></li>
<li><a href="#">Guia Completo das Masmorras de Hyrule</a></li>
</ul>
<div class="mt-4">
<h3>Folhito Recomenda</h3>
<div class="card mb-3" id="recomendacao">
<img
src="img/Triforce_(Ocarina_of_Time).webp"
class="card-img-top"
alt="Descrição da imagem da recomendação"
/>
<div class="card-body">
<h5 class="card-title">Saiba mais sobre a Triforce</h5>
<p class="card-text">
Descubra quando e como surgiu esse artefato mágico!
</p>
<a href="#" class="btn btn-secondary">Saiba mais</a>
</div>
</div>
</div>
</aside>
</div>
</div>
</section>
</main>
<footer class="container-fluid bg-dark text-light py-3 mt-5">
<div class="container text-center">
<p>© Todos os direitos reservados para o Folhito !</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>