-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
257 lines (245 loc) · 11.7 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Midnight in Paris - Woody Allen</title>
<link rel="stylesheet" href="./dist/css/main.css">
</head>
<body>
<header class="header">
<div class="header__content">
<ul class="navbar">
<li class="menu-icon">
<a href="javascript:void(0);" onclick="toggleMenu()">☰</a>
</li>
<div class="navbar__item">
<li class="button--menu">
<a href="#home">home</a>
</li>
<li class="button--menu">
<a href="#sinopse">sinopse</a>
</li>
<li class="button--menu">
<a href="#elenco">elenco</a>
</li>
</div>
</ul>
</div>
</header>
<section class="hero" id="home">
<div class="hero__content">
<h1>
<img src="./dist/images/logo_hero.png" alt="logo do filme">
<p class="title--big">Escrito e dirijido por Woody Allen</p>
</h1>
<div class="hero__text">
<p class="title--big">PARIS IN THE MORNIGN IS <br><span class="title--span">Beautiful</span></p>
<p class="title--big">PARIS IN THE AFTERNOON IS <br><span class="title--span">Charming</span></p>
<p class="title--big">PARIS IN THE EVENING IS <br><span class="title--span">Enchanting</span></p>
<p class="hero__text--last title--big ">BUT PARIS <span class="title--span">after midnight is
magic</span></p>
</div>
</div>
</section>
<section class="sinopse" id="sinopse">
<div class="sinopse__content">
<p class="title--big">
Gil Pender é um jovem escritor em busca da fama. De férias em Paris com sua noiva, ele sai sozinho para
explorar a cidade e conhece um grupo de estranhos que são, na verdade, grandes nomes da literatura. Eles
levam Gil a uma viagem ao passado e, quanto mais tempo passam juntos, mais o jovem escritor fica
insatisfeito com o presente.
</p>
</div>
</section>
<section class="cast-scenes" id="elenco">
<nav class="cast-scenes__tabs">
<button data-tab-button="elenco" class="cast-scenes__button cast-scenes__button--is-active">Elenco</button>
<button data-tab-button="diretor" class="cast-scenes__button">O diretor</button>
</nav>
<!--Diretor e filmes-->
<ul data-tab-id="elenco" class="cast-scenes__content cast-scenes__content--is-active">
<li class="cast-scenes__item">
<figure>
<img src="./dist/images/owen wilson.jpg" alt="Owen Wilson">
<figcaption>
<div class="fig-title text">Owen Wilson</div>
<div class="fig-character text"> como Gil</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__item">
<figure>
<img src="./dist/images/rachel.jpg" alt="Rachel McAdamns">
<figcaption>
<div class="fig-title text">Rachel McAdamns</div>
<div class="fig-character text">como Inez</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__item">
<figure>
<img src="./dist/images/Marion.jpg" alt="Marion Cotillard">
<figcaption>
<div class="fig-title text">Marion Cotillard</div>
<div class="fig-character text">como Adriana</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__item">
<figure>
<img src="./dist/images/pablo_picasso.jpg" alt="Marcial Di Fonzo Bo">
<figcaption>
<div class="fig-title text">Marcial Di Fonzo Bo</div>
<div class="fig-character text">como Pablo Picasso</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__item">
<figure>
<img src="./dist/images/hemingway.jpg" alt="Corey Stoll">
<figcaption>
<div class="fig-title text">Corey Stoll</div>
<div class="fig-character text">como Ernest Hemingway</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__item">
<figure>
<img src="./dist/images/scene_a.jpg" alt="Alisson Pill e Tom Hiddleston">
<figcaption>
<div class="fig-title text">Alisson Pill e Tom Hiddleston</div>
<div class="fig-character text">como Zelda e F.Scott Fitzgerald</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__item">
<figure>
<img src="./dist/images/dali.jpg" alt=">Adrien Brody">
<figcaption>
<div class="fig-title text">Adrien Brody</div>
<div class="fig-character text">como Salvador Dali</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__item">
<figure>
<img src="./dist/images/kurt fuller.jpg" alt="Kurt Fuller e Mimi Kennedy">
<figcaption>
<div class="fig-title text">Kurt Fuller e Mimi Kennedy</div>
<div class="fig-character text">como John e Helen</div>
</figcaption>
</figure>
</li>
</ul>
<!--Diretor e filmes-->
<ul data-tab-id="diretor" class="cast-scenes__content">
<div class="cast-scenes__content--director">
<li class="cast-scenes__item--bio">
<img src="./dist/images/Woody_Allen.JPG" alt="Allan Stewart Konigsberg ( Woody Allen)">
<p class="text--big">Allan Stewart Konigsberg ( Woody Allen) nasceu em 1º de dezembro de 1935. Diretor,
roteirista e comediante americano, é conhecido por seu estilo inteligente e humor neuroticamente
engraçado. Seus filmes mais notáveis incluem "Noivo Neurótico, Noiva Nervosa" (1977), "Annie Hall"
(1977), "Meia-Noite em Paris" (2011) e "Manhattan" (1979), que capturam suas complexidades
relacionais e sua visão única das cidades de Nova York e Paris. Allen se estabeleceu como uma figura
lendária no mundo do cinema, com uma carreira prolífica que continua a inspirar e entreter o
público. br <br><br> Confira mais de seus filmes abaixo</p>
</li>
</div>
<div class="cast-scenes__content--movies">
<li class="cast-scenes__posters">
<figure>
<img class="diretorFoto" src="./dist/images/manhattan.jpg" alt="Manhattan">
<figcaption>
<div class="fig-title text">Manhattan</div>
<div class="fig-character text">1979</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__posters">
<figure>
<img src="./dist/images/vicky_cristina_barcelona.jpg" alt="Vicky Cristina Barcelona">
<figcaption>
<div class="fig-title text">Vicky Cristina Barcelona</div>
<div class="fig-character text">2008</div>
</figcaption>
</figure>
</figure>
</li>
<li class="cast-scenes__posters">
<figure>
<img src="./dist/images/match_point.jpg" alt="Match Point">
<figcaption>
<div class="fig-title text">Match Point</div>
<div class="fig-character text">2005</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__posters">
<figure>
<img src="./dist/images/escorpiao.jpg" alt="O escorpião de Jade">
<figcaption>
<div class="fig-title text">O escorpião de Jade</div>
<div class="fig-character text">2001</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__posters">
<figure>
<img src="./dist/images/scoop.jpg" alt="Scoop">
<figcaption>
<div class="fig-title text">Scoop</div>
<div class="fig-character text">2006</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__posters">
<figure>
<img src="./dist/images/sweet_and_lowdown.jpg" alt="Sweet and Lowdown">
<figcaption>
<div class="fig-title text">Sweet and Lowdown</div>
<div class="fig-character text">1999</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__posters">
<figure>
<img src="./dist/images/irracional.jpg" alt="O Homem Irracional">
<figcaption>
<div class="fig-title text">O Homem Irracional</div>
<div class="fig-character text">2015</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__posters">
<figure>
<img src="./dist/images/hanna.jpg" alt="Hanna e suas irmãs">
<figcaption>
<div class="fig-title text">Hanna e suas irmãs</div>
<div class="fig-character text">1986</div>
</figcaption>
</figure>
</li>
<li class="cast-scenes__posters">
<figure>
<img src="./dist/images/noivo.jpg" alt="Noivo Neurótico, Noiva Nervosa">
<figcaption>
<div class="fig-title text">Noivo Neurótico, Noiva Nervosa</div>
<div class="fig-character text">1977</div>
</figcaption>
</figure>
</li>
</div>
</ul>
</section>
<footer class="footer">
<ul class="footer__content">
<li class="footer__content--info">
<p class="text">Página para fins de estudo - curso da EBAC</p>
<p class="text">Desenvolvida por Luiz Francisco</p>
</li>
</ul>
</footer>
<script src="./src/scripts/main.js"></script>
</body>
</html>