-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (162 loc) · 6.91 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
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
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Last Of Us</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="backgroundimg"></div>
<div>
<div class="container">
<h1>THE LAST OF US</h1>
<nav>
<ul>
<li>
<a href="#sobre">SOBRE O SITE</a>
</li>
<li>
<a href="#sinopse">SINOPSE</a>
</li>
<li>
<a href="#episódios">EPISÓDIOS</a>
</li>
<li>
<a href="#contact">CONTATO</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="sobre">
<div class="container">
<div class="cont2">
<div>
<h2>SOBRE O SITE</h2>
<p>
Olá! Este é um pequeno site cômico sobre uma série muito aclamada pelos espectadores, e por mim! Aconselho assistir antes para não estragar a experiência dos episódios!
</p>
</div>
<img src="Imagens/sobre.jpeg" alt="Joe e Ellie">
</div>
</div>
</section>
<section id="sinopse">
<div class="container">
<div class="cont2">
<div>
<h2>SINOPSE</h2>
<p> The Last of Us, adentra em um mundo pós apocaliptico, em que um fungo devastou a raça humana, ganhando destaque por sua pegada nada inédita ao seguir fielmente um jogo já existente. Sendo assim, caso tenha jogado, não terá surpresa alguma.</p>
</div>
<img src="Imagens/teste gif.webp" alt="Joe e Ellie ">
</div>
</div>
</section>
<section id="episódios">
<div class="container">
<h2>EPISÓDIOS</h2>
<div class="articles">
<article>
<img src="Imagens/thumb ep 1.jpeg" alt="Filha de Joe">
<h3>Episódio 1</h3>
<p>O primeiro e alucinante episódio, contém uma morte horrível que marca Joe. Mas não posso dizer quem..</p>
</article>
<article>
<img src="Imagens/thumb ep 2.jpeg" alt="Tess">
<h3>Episódio 2</h3>
<p>Também não posso dizer quem.. mas alguém morre nesse episódio.. </p>
</article>
<article>
<img src="Imagens/thumb ep 3.png" alt="">
<h3>Episódio 3</h3>
<p>Um romance (não vou dizer quem) e um final triste, porém bonito.. </p>
</article>
<article>
<img src="Imagens/thumb ep 4.jpeg" alt="">
<h3>Episódio 4</h3>
<p>A vilã mais chata, enjoada, tediosa, murcha, bobona, sem graça, no salt que você vai conhecer..</p>
</article>
<article>
<img src="Imagens/thumb ep 5.jpeg" alt="">
<h3>Episódio 5</h3>
<p>Um episódio tranquilo e fofo e ninguem morre.. mentira, morre sim. Nem tente perguntar, eu não vou dizer..</p>
</article>
<article>
<img src="Imagens/thumb ep 6.jpg" alt="">
<h3>Episódio 6</h3>
<p>Visitando a vila esquisita, dessa vez ninguem morre mesmo, mas você não vai acreditar, vai?</p>
</article>
<article>
<img src="Imagens/thumb ep 7.jpeg" alt="">
<h3>Episódio 7</h3>
<p>aaarrg ##4%#&$6 aaaa@#&$¨& cof cof.. Acabei de sofrer uma tortura para dizer quem morre.. mas não vou!</p>
</article>
<article>
<img src="Imagens/thum ep 8.jpeg" alt="">
<h3>Episódio 8</h3>
<p>Esse é o episódio mais tenebroso da série. Go Ellie!</p>
</article>
<article>
<img src="Imagens/thumb ep 9.jpeg" alt="">
<h3>Episódio 9 (Final)</h3>
<p>Sem palavras para o episódio final! Só assistindo.. Corre lá! Tchau!</p>
</article>
</div>
<div class="heman">
<img src="Imagens/he-man bye.jpeg" alt="He-man">
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="formulario">
<h2>CONTATO</h2>
<div class="contact-methods">
<div>
<h3>Me mande uma mensagem!</h3>
<form>
<input type="text" placeholder="Seu nome" required/>
<input type="email" placeholder="Seu e-mail" required/>
<input type="tel" placeholder="Seu telefone (opcional)"/>
<textarea placeholder="Sua mensagem" required></textarea>
<button type="submit">Enviar</button>
</form>
</div>
<div>
<h3>Me acompanhe</h3>
<ul class="social-links">
<li>
<a href="#" title="Siga-me no Instagram">
<img src="Imagens/instagram.png" alt="Logo do instagram">
</a>
</li>
<li>
<a href="#" title="Siga-me no Facebook">
<img src="Imagens/facebook.png" alt="Logo do facebook">
</a>
</li>
</ul>
</div>
<div>
<h3>Onde eu estou?</h3>
<p>
Rua JavaScript nº 5, Vila HTML - São Paulo - SP
</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© The Last Of Us - Todo os direitos não reservados - 2023</p>
</div>
</footer>
</body>
</html>