Skip to content

feat: create complete Wikipedia-style Game of Thrones page #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: create complete Wikipedia-style Game of Thrones page #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
255 changes: 234 additions & 21 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,251 @@
body, html {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
line-height: 1.6;
color: #202122;
background-color: #f6f6f6;
}
ul { list-style: none; padding-left: 5px; }
a { color:blue; text-decoration: none;}

* {
box-sizing: border-box;
}

ul {
list-style: none;
padding-left: 0;
margin: 0;
}

a {
color: #36c;
text-decoration: none;
transition: color 0.2s ease;
}

a:hover {
color: #447ff5;
text-decoration: underline;
}

header {
background-color: #fff;
border-bottom: 1px solid #a2a9b1;
padding: 1rem 0;
text-align: center;
}

.logo img {
max-width: 200px;
height: auto;
}

.bar {
background-color: #f9f9fb;
padding:15px;
border-top: solid 1px #cdcdcd;
border-bottom: solid 1px #cdcdcd;
background-color: #f8f9fa;
padding: 0.5rem 1rem;
border-bottom: 1px solid #a2a9b1;
}

.bar ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin: 0;
padding: 0;
}

.bar li {
margin: 0;
}

.content {
max-width: 1440px;
margin: auto;
grid-gap: 3rem;
margin: 2rem auto;
display: grid;
gap: 3rem;
grid-template-areas: "sidebar main anchors";
grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
padding-left: 1rem;
padding-right: 1rem;
grid-template-columns: 250px 1fr 250px;
gap: 2rem;
padding: 0 1rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
.footer {
min-height: 100px;
border-top: solid 1px #cdcdcd;

.sidebar {
grid-area: sidebar;
background-color: #f8f9fa;
padding: 1.5rem;
border-right: 1px solid #eaecf0;
}
.anchors {
border-left: solid 1px #cdcdcd;
padding-left: 15px;

.sidebar h2 {
color: #54595d;
font-size: 1.1rem;
margin-bottom: 1rem;
border-bottom: 1px solid #eaecf0;
padding-bottom: 0.5rem;
}
.sidebar {
border-right: solid 1px #cdcdcd;

.sidebar ul {
list-style: none;
padding: 0;
}

.sidebar li {
margin-bottom: 0.5rem;
}

.sidebar a {
color: #36c;
font-size: 0.9rem;
display: block;
padding: 0.25rem 0;
}

.main {
grid-area: main;
padding: 2rem;
background-color: #fff;
}

.main h1 {
color: #000;
font-size: 2.5rem;
margin-bottom: 1rem;
border-bottom: 1px solid #a2a9b1;
padding-bottom: 0.5rem;
}

.main h2 {
color: #000;
font-size: 1.5rem;
margin: 2rem 0 1rem 0;
border-bottom: 1px solid #eaecf0;
padding-bottom: 0.25rem;
}

.main h3 {
color: #54595d;
font-size: 1.2rem;
margin: 1.5rem 0 0.5rem 0;
}

.main p {
margin-bottom: 1rem;
text-align: justify;
}

.main ul {
margin: 1rem 0;
padding-left: 2rem;
}

.main li {
margin-bottom: 0.5rem;
list-style-type: disc;
}

figure {
text-align: center;
margin: 2rem 0;
background-color: #f8f9fa;
padding: 1rem;
border-radius: 4px;
}

figure img {
max-width: 100%;
height: auto;
border-radius: 4px;
}

figcaption {
margin-top: 0.5rem;
font-size: 0.9rem;
color: #54595d;
font-style: italic;
}

.anchors {
grid-area: anchors;
background-color: #f8f9fa;
padding: 1.5rem;
border-left: 1px solid #eaecf0;
}

.anchors h2 {
color: #54595d;
font-size: 1.1rem;
margin-bottom: 1rem;
border-bottom: 1px solid #eaecf0;
padding-bottom: 0.5rem;
}

.anchors ul {
list-style: none;
padding: 0;
}

.anchors li {
margin-bottom: 0.5rem;
}

.anchors a {
color: #36c;
font-size: 0.9rem;
display: block;
padding: 0.25rem 0;
}

.footer {
background-color: #f8f9fa;
border-top: 1px solid #a2a9b1;
padding: 1rem 2rem;
text-align: center;
color: #54595d;
font-size: 0.9rem;
}

.footer p {
margin: 0.5rem 0;
}

@media (max-width: 1200px) {
.content {
grid-template-columns: 200px 1fr 200px;
gap: 1rem;
}
}

@media (max-width: 768px) {
.content {
grid-template-areas:
"main"
"sidebar"
"anchors";
grid-template-columns: 1fr;
gap: 1rem;
margin: 1rem;
}

.sidebar, .anchors {
border: none;
border-top: 1px solid #eaecf0;
}

.bar ul {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}

.main {
padding: 1rem;
}

.main h1 {
font-size: 2rem;
}
}
97 changes: 77 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,98 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Principal</title>
<title>Game of Thrones - Wikipédia, a enciclopédia livre</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

<div>
<header>
<div class="logo">
<img src="assets/images/logo.png" width="200"/>
<img src="assets/images/logo.png" width="200" alt="Logo da Wikipédia"/>
</div>
</div>
</header>

<div class="bar"></div>
<nav class="bar">
<ul>
<li><a href="#">Página principal</a></li>
<li><a href="#">Conteúdo destacado</a></li>
<li><a href="#">Eventos atuais</a></li>
<li><a href="#">Esplanada</a></li>
<li><a href="#">Página aleatória</a></li>
<li><a href="#">Colaborar</a></li>
</ul>
</nav>

<div class="content">
<div class="sidebar">
<h2>Título</h2>
<main class="content">
<aside class="sidebar">
<h2>Navegação</h2>
<ul>
<li><a href="#">Links</a></li>
<li><a href="#sinopse">Sinopse</a></li>
<li><a href="#personagens">Personagens</a></li>
<li><a href="#casas">Casas Nobres</a></li>
<li><a href="#produção">Produção</a></li>
<li><a href="#recepção">Recepção</a></li>
<li><a href="#legado">Legado</a></li>
</ul>
</div>
</aside>

<div class="main">
<article class="main">
<h1>Game of Thrones</h1>

</div>
<figure>
<img src="assets/images/game-of-thrones.png" alt="Banner da série Game of Thrones" width="600"/>
<figcaption>Banner promocional da série Game of Thrones</figcaption>
</figure>

<div class="anchors">
<h2>Neste Artigo</h2>
<p><strong>Game of Thrones</strong> é uma série de televisão norte-americana criada por David Benioff e D. B. Weiss, baseada na série de livros <em>A Song of Ice and Fire</em> de George R. R. Martin. A série foi exibida pela HBO de 17 de abril de 2011 a 19 de maio de 2019, totalizando 73 episódios distribuídos em oito temporadas.</p>

<h2 id="sinopse">Sinopse</h2>
<p>A série se passa em Westeros, um continente fictício onde sete reinos disputam o Trono de Ferro. A história gira em torno de várias famílias nobres que lutam pelo controle do reino, enquanto uma antiga ameaça sobrenatural se aproxima do norte.</p>

<h2 id="personagens">Personagens Principais</h2>
<ul>
<li><a href="#">Âncoras</a></li>
<li><strong>Jon Snow</strong> - Bastardo da Casa Stark</li>
<li><strong>Daenerys Targaryen</strong> - A Mãe dos Dragões</li>
<li><strong>Tyrion Lannister</strong> - O Anão</li>
<li><strong>Arya Stark</strong> - A Garota Sem Rosto</li>
<li><strong>Cersei Lannister</strong> - Rainha Regente</li>
</ul>
</div>
</div>

<div class="footer">
<h2 id="casas">Casas Nobres</h2>
<h3>Casa Stark</h3>
<p>Os Stark governam o Norte de Winterfell. Seu lema é "O Inverno Está Chegando".</p>

<h3>Casa Lannister</h3>
<p>Os Lannister controlam as Terras Ocidentais de Rochedo Casterly. Seu lema é "Ouça Me Rugir".</p>

<h3>Casa Targaryen</h3>
<p>Antiga casa real que governou Westeros por 300 anos. Seu lema é "Fogo e Sangue".</p>

<h2 id="produção">Produção</h2>
<p>A série foi filmada em diversos locais ao redor do mundo, incluindo Irlanda do Norte, Croácia, Islândia, Marrocos e Espanha. Com um orçamento estimado de 15 milhões de dólares por episódio, Game of Thrones se tornou uma das séries mais caras já produzidas.</p>

<h2 id="recepção">Recepção</h2>
<p>Game of Thrones recebeu aclamação da crítica e do público, ganhando 59 Prêmios Emmy, incluindo Melhor Série Dramática em 2015, 2016 e 2018. A série também quebrou recordes de audiência e se tornou um fenômeno cultural global.</p>

<h2 id="legado">Legado</h2>
<p>A série revolucionou a televisão com sua narrativa complexa, produção de alta qualidade e disposição de matar personagens principais. Seu sucesso abriu caminho para outras séries de fantasia épica na televisão.</p>
</article>

<aside class="anchors">
<h2>Neste Artigo</h2>
<ul>
<li><a href="#sinopse">Sinopse</a></li>
<li><a href="#personagens">Personagens</a></li>
<li><a href="#casas">Casas Nobres</a></li>
<li><a href="#produção">Produção</a></li>
<li><a href="#recepção">Recepção</a></li>
<li><a href="#legado">Legado</a></li>
</ul>
</aside>
</main>

</div>
<footer class="footer">
<p>Esta página foi editada pela última vez às 15:30 de 15 de dezembro de 2024.</p>
<p>O conteúdo está disponível sob a licença Creative Commons Attribution-ShareAlike.</p>
</footer>
</body>
</html>