-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
212 lines (207 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Noto+Sans+Bengali:wght@400..600&family=Noto+Serif+Khojki:wght@600&display=swap"
rel="stylesheet">
<meta name="description"
content="Adquira já a continuação da épica aventura de Cloud, Tifa e todos os seus companheiros, em busca de Sephiroth para salvar o planeta e se livrar das correntes do destino.">
<link rel="icon" href="./assets/logos-and-icons/favicon.svg" type="image/svg+xml">
<title>Final Fantasy VII Rebirth</title>
<link rel="preload" href="./css/style.min.css" as="style">
<link rel="stylesheet" href="./css/style.min.css">
<script>document.documentElement.classList.add('js');</script>
</head>
<body>
<div class="main-bg">
<header class="header container">
<a href="./"><img width="240" height="125" src="./assets/logos-and-icons/logo-ff7-official.png"
class="header-main-logo" alt="Logo do jogo Final Fantasy VII Rebirth">
</a>
<nav aria-label="primaria">
<ul class="header-menu" data-links>
<li><a href="#home">Home</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#screenshots">Screenshots</a></li>
<li><a href="#edition">Edições</a></li>
<li><a href="https://www.youtube.com/watch?v=KOhs9ZLImgE">Trailer</a></li>
</ul>
</nav>
<ul class="header-icons-menu" aria-label="menu-secundario">
<li>
<a href="#" aria-label="Carrinho"><svg xmlns="http://www.w3.org/2000/svg" height="24"
viewBox="0 -960 960 960" width="24" fill="white">
<path
d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z" />
</svg></a>
</li>
<li>
<a href="#" aria-label="Curtir"><svg xmlns="http://www.w3.org/2000/svg" height="24"
viewBox="0 -960 960 960" width="24" fill="white">
<path
d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" />
</svg></a>
</li>
<li>
<a href="https://membership.square-enix.com/users/sign_in"
aria-label="Fazer login ou registrar-se"><svg xmlns="http://www.w3.org/2000/svg" height="24"
viewBox="0 -960 960 960" width="24" fill="white">
<path
d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z" />
</svg></a>
</li>
</ul>
</header>
<main class="main container js-scroll" data-anime="scroll" id="home">
<span class="main-detail">A aventura continua</span>
<h1 class="main-title">O jogo mais <span>esperado</span> do ano</h1>
<p class="main-paragraph">Adquira já a continuação da épica aventura de Cloud, Tifa e todos os seus
companheiros, em
busca de Sephiroth
para salvar o planeta e se livrar das correntes do destino.</p>
<span class="btn-bg">
<a class="main-link-btn styled-btn"
href="https://www.playstation.com/pt-br/games/final-fantasy-vii-rebirth/">Comprar</a>
</span>
<span class="btn-bg">
<a class="main-link-btn styled-btn" href="https://www.youtube.com/watch?v=KOhs9ZLImgE">Ver Trailer</a>
</span>
</main>
</div>
<div class="about-bg">
<section class="about container js-scroll" data-anime="scroll" id="about" aria-label="sobre">
<div class="about-description">
<h2 class="about-title">Sobre</h2>
<p>FINAL FANTASY VII REBIRTH é o aguardado novo capítulo no projeto de remake de FINAL FANTASY VII, uma
reimaginação do icônico jogo original em três títulos independentes pelos seus criadores originais.
Neste jogo, os jogadores desfrutarão de vários elementos novos à medida que a história se desenrola,
culminando na jornada do grupo para "The Forgotten Capital" do FINAL FANTASY VII original.</p>
</div>
</section>
</div>
<div class="screenshots-bg">
<section class="screenshots js-scroll" data-anime="scroll" id="screenshots" aria-label="screenshots">
<h2 class="styled-title">Screenshots</h2>
<section class="screenshots-slide-wrapper" data-slide-wrapper>
<ul class="screenshots-slide" data-slide>
<li>
<img src="./assets/images/image-slide2.jpg"
alt="Screenshot retirado do jogo Final Fantasy 7 Rebirth">
</li>
<li>
<img src="./assets/images/image-slide3.jpg"
alt="Screenshot retirado do jogo Final Fantasy 7 Rebirth">
</li>
<li>
<img src="./assets/images/image-slide1.jpg"
alt="Screenshot retirado do jogo Final Fantasy 7 Rebirth">
</li>
<li>
<img src="./assets/images/slide-image5.jpg"
alt="Screenshot retirado do jogo Final Fantasy 7 Rebirth">
</li>
<li>
<img src="./assets/images/image-slide6.jpg"
alt="Screenshot retirado do jogo Final Fantasy 7 Rebirth">
</li>
</ul>
</section>
<div class="arrow-nav">
<button type="button" class="screenshots-prev" aria-label="slide anterior"></button>
<button type="button" class="screenshots-next" aria-label="próximo slide"></button>
</div>
</section>
</div>
<div class="edition-bg">
<section class="edition container js-scroll" data-anime="scroll" id="edition" aria-label="edicoes">
<h2 class="styled-title">Selecione sua edição</h2>
<div class="edition-item-container">
<div class="edition-item-wrapper">
<div class="edition-item-img twin-deluxe-img">
</div>
<div class="edition-item-about">
<h3>DIGITAL DELUXE TWIN PACK</h3>
<div class="edition-item-logo">
<img src="./assets/logos-and-icons/ps5-logo.png"
alt="Logo da marca do videogame playstation 5">
</div>
<ul class="edition-item-list">
<li>FINAL FANTASY VII REBIRTH GAME - Digital</li>
<li>FINAL FANTASY VII REMAKE INTERGRADE GAME - Digital</li>
<li>Digital Artbook</li>
<li>Digital Mini Soundtrack</li>
<li>Accessory: Reclaimant Choker</li>
<li>Armor: Orchid Bracelet</li>
<li>Magic Pot Summoning Materia</li>
</ul>
<span class="btn-bg">
<a href="https://store.playstation.com/pt-br/product/UP0082-PPSA08666_00-0435948542374390/?_gl=1*srsbun*_gcl_aw*R0NMLjE3MDk1NzUwMjguQ2p3S0NBaUFfNVd2QmhCQUVpd0FadENVNzNaV0NvM3hjMFVWNy1pc2h2aDVjVlBPamlRSzcySWc0LUcxUE9zejA3YzJhcl9xOVdRdzZ4b0NLdE1RQXZEX0J3RQ..*_gcl_au*MTY0NzkwMjk2NC4xNzA4NzI0MzEx"
class="edition-item-btn styled-btn">
comprar
</a>
</span>
</div>
</div>
<div class="edition-item-wrapper">
<div class="edition-item-img standard-img">
</div>
<div class="edition-item-about">
<h3>DIGITAL STANDARD EDITION</h3>
<div class="edition-item-logo">
<img src="./assets/logos-and-icons/ps5-logo.png"
alt="Logo da marca do videogame playstation 5">
</div>
<ul class="edition-item-list">
<li>FINAL FANTASY VII REBIRTH GAME - Digital</li>
</ul>
<span class="btn-bg">
<a href="https://store.playstation.com/pt-br/concept/10003999/?_gl=1*12uppj0*_gcl_aw*R0NMLjE3MDk1NzUwMjguQ2p3S0NBaUFfNVd2QmhCQUVpd0FadENVNzNaV0NvM3hjMFVWNy1pc2h2aDVjVlBPamlRSzcySWc0LUcxUE9zejA3YzJhcl9xOVdRdzZ4b0NLdE1RQXZEX0J3RQ..*_gcl_au*MTY0NzkwMjk2NC4xNzA4NzI0MzEx"
class="edition-item-btn styled-btn">
comprar
</a>
</span>
</div>
</div>
</div>
</section>
</div>
<div class="footer-bg">
<footer class="footer container">
<div class="footer-logo">
<img src="./assets/logos-and-icons/square-enix-logo.png" alt="Logo da square-enix">
</div>
<div class="footer-contact">
<h4>Contato</h4>
<ul class="footer-contact-list">
<li>
<a href="tel:+551195929-1962">(11) 95929-1962</a>
</li>
<li>
<a href="mailto:fernando.mkv@gmail.com">fernando.mkv@gmail.com</a>
</li>
</ul>
<ul class="footer-icon-list">
<li>
<a href="https://www.linkedin.com/in/fernando-pereira-710448247/"><img
src="./assets/logos-and-icons/linkedin.svg" alt="icone do linkedin"></a>
</li>
<li>
<a href="https://github.com/Feehh32">
<img src="./assets/logos-and-icons/github.svg" alt="icone do github">
</a>
</li>
</ul>
</div>
<p>Projeto construido apenas como conceito, todos os direitos de produto, marca, logo e imagens pertencem
a
Square Enix.</p>
<p> Desenvolvido por Fernando Pereira - 2024 </p>
</footer>
</div>
<script src="./main.js"></script>
</body>
</html>