-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
233 lines (230 loc) · 9.68 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/styles.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=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="./script.js" defer></script>
<title>RocketNFTs</title>
</head>
<body>
<main>
<header>
<h1 class="slide-right"><img src="./assets/img/logo.svg" alt="Rocket NFTs Logo"></h1>
<nav>
<ul>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Comprar NFT</a></li>
<li>
<a href="http://" target="_blank" rel="noopener noreferrer">Sobre</a>
</li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">FAQ</a></li>
</ul>
</nav>
<button class="heartbeat"><img src="./assets/img/logo_MetaMask.svg" alt="MetaMask Logo">Conectar
carteira</button>
</header>
<section id="hero" class="scale-in-center">
<div>
<p>Mercado digital para colecionáveis em criptos e tokens não fungível (NFT).
Compre, venda e descubra ativos digitais exclusivos para você.</p>
<div>
<img src="./assets/img/group-avarts.png" alt="Creators group">
<div>
<p>+10</p>
<p>Artistas selecionados</p>
</div>
</div>
</div>
<h2>Descubra a verdadeira arte digital e colecione diversas <span class="highlight">NFTs</span></h2>
<img src="./assets/img/badge.svg" alt="RocketNFTs Badge" class="rotate-center">
</section>
<section id="hero-gallery" class="scale-in-center">
<img src="./assets/img/galeria-1.png" alt="Gallery Image">
<img src="./assets/img/galeria-2.png" alt="Gallery Image">
<img src="./assets/img/galeria-3.png" alt="Gallery Image">
<img src="./assets/img/galeria-4.png" alt="Gallery Image">
<img src="./assets/img/galeria-5.png" alt="Gallery Image">
<img src="./assets/img/galeria-6.png" alt="Gallery Image">
<img src="./assets/img/galeria-7.png" alt="Gallery Image">
<img src="./assets/img/galeria-8.png" alt="Gallery Image">
</section>
</main>
<article id="discover">
<section>
<div>
<p>10K+</p>
<p>Artes</p>
</div>
<div>
<p>200+</p>
<p>Vendas</p>
</div>
<div>
<p>20</p>
<p>Artistas</p>
</div>
</section>
<div class="news">
<p>Talvez você não tenha milhões de dólares para investir em obras de arte do segmento, mas reunimos aqui tudo
que você
precisa saber para <span class="highlight">se atualizar</span> nessa área — e, quem sabe, dar os primeiros
passos.
</p>
<a href="http://" target="_blank" rel="noopener noreferrer">Veja mais</a>
</div>
<div class="news">
<p>NFT é a sigla para non-fungible token, ou token não fungível, um ativo criado a partir da <span
class="highlight">tecnologia
blockchain</span> que
serve como identidade digital de um item. O NFT assegura a autenticidade daquele item, que é único. Ou seja, o
ativo
garante a posse de um bem exclusivo, que nenhuma outra pessoa tem.</p>
<a href="http://" target="_blank" rel="noopener noreferrer">Descubra</a>
</div>
<img src="./assets/img/banner2.png" alt="Discover banner" class="color-change-2x">
</article>
<section id="popular">
<h2><span class="highlight">Populares</span> da semana</h2>
<section class="popular-grid">
<section class="popular">
<div class="popular-top">
<p>Astronauta 1</p>
<a href="#"><img src="./assets/img/arrow-white.svg" alt="Arrow Icon"></a>
</div>
<div class="popular-content">
<p>Meghan Cortez</p>
<p><span class="highlight">1.50 RKT</span></p>
</div>
<img src="./assets/img/astronauta-1.png" alt="">
</section>
<section class="popular">
<div class="popular-top">
<p>Astronauta 2</p>
<a href="#"><img src="./assets/img/arrow-white.svg" alt="Arrow Icon"></a>
</div>
<div class="popular-content">
<p>Meghan Cortez</p>
<p><span class="highlight">1.50 RKT</span></p>
</div>
<img src="./assets/img/astronauta-2.png" alt="">
</section>
<section class="popular">
<div class="popular-top">
<p>Astronauta 3</p>
<a href="#"><img src="./assets/img/arrow-white.svg" alt="Arrow Icon"></a>
</div>
<div class="popular-content">
<p>Meghan Cortez</p>
<p><span class="highlight">1.50 RKT</span></p>
</div>
<img src="./assets/img/astronauta-3.png" alt="">
</section>
<section class="popular">
<div class="popular-top">
<p>Astronauta 4</p>
<a href="#"><img src="./assets/img/arrow-white.svg" alt="Arrow Icon"></a>
</div>
<div class="popular-content">
<p>Meghan Cortez</p>
<p><span class="highlight">1.50 RKT</span></p>
</div>
<img src="./assets/img/astronauta-4.png" alt="">
</section>
</section>
</section>
<section id="artists">
<h2>Melhores <span class="highlight">artistas</span></h2>
<section class="artists-grid">
<div class="artist">
<img src="./assets/img/artista-1.png" alt="">
<p>William Prince</p>
<p class="highlight">80 Fotografias</p>
</div>
<div class="artist bg-color-logo">
<img src="./assets/img/artista-2.png" alt="">
<p>Meghan Cortez</p>
<p class="highlight">99 Fotografias</p>
</div>
<div class="artist">
<img src="./assets/img/artista-3.png" alt="">
<p>Jose Coletti</p>
<p class="highlight">50 Fotografias</p>
</div>
<div class="artist">
<img src="./assets/img/artista-4.png" alt="">
<p>Tracy Thomas</p>
<p class="highlight">43 Fotografias</p>
</div>
<div class="artist">
<img src="./assets/img/artista-5.png" alt="">
<p>Judith Smith</p>
<p class="highlight">28 Fotografias</p>
</div>
<div class="artist">
<img src="./assets/img/artista-6.png" alt="">
<p>Ian Braden</p>
<p class="highlight">20 Fotografias</p>
</div>
</section>
<a href="http://" target="_blank" rel="noopener noreferrer">Ver todos os artistas <img
src="./assets/img/arrow-orange.svg" alt="Arrow right"></a>
</section>
<footer>
<div id="footer-top">
<img src="./assets/img/logo.svg" alt="Rocket NFTs logo">
<button id="backToTop"><img src="./assets/img/arrow-black.svg" alt="Back to top"></button>
</div>
<div id="footer-content">
<div>
<h3>Fique por dentro de <span class="highlight">todas as novidades</span></h3>
<form>
<input type="email" name="email" id="email" placeholder="more@rocketnft.com.br" required>
<input type="submit" value="Enviar">
</form>
</div>
<div id="footer-links">
<ul>
<li>Empresa</li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Sobre</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Serviços</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Time</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Carreira</a></li>
</ul>
<ul>
<li>Mapa</li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Galeria</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Populares</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Vendas</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Contato</a></li>
</ul>
<ul>
<li>Links</li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">FAQs</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Termos</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Política</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Ajuda</a></li>
</ul>
</div>
</div>
<div id="footer-bottom">
<p>www.rocketnfts.com</p>
<ul>
<li><a href="http://" target="_blank" rel="noopener noreferrer"><img src="./assets/img/instagram.svg"
alt="Instagram Icon"></a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer"><img src="./assets/img/youtube.svg"
alt="Youtube Icon"></a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer"><img src="./assets/img/twitter.svg"
alt="Twitter Icon"></a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer"><img src="./assets/img/email.svg"
alt="Email Icon"></a>
</li>
</ul>
</div>
</footer>
</body>
</html>