-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (139 loc) · 6.97 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>NerdBox</title>
</head>
<body>
<!-- Seção 1: Header -->
<div class="container">
<header>
<img src="img/logonerdbox.svg" alt="">
<nav aria-label="Primario">
<ul class="header-menu font-2-s cor-0">
<li><a href="#produtos">Produtos</a></li>
<li><a href="#planos">Planos</a></li>
<li><a href="#sobrenos">Sobre nós</a></li>
<li><a href="#suaconta">Sua conta</a></li>
</ul>
</nav>
</header>
<!-- Seção 2: Introdução -->
<main>
<div class="introducao-imagem">
<img src="img/home/caixaintroducao.png" alt="" width="553" height="586">
</div>
<div class="introducao-texto">
<h1 class="font-1-xxl cor-1">Aventure-se com a nerd box!</h1>
<p class="font-2-l cor-2">Receba mensalmente loots incríveis no conforto de sua casa, são milhares de produtos pra você colecionar e atingir o level máximo.</p>
<a class="font-2-l cor-d0" href="./">Saiba mais ></a>
</div>
</main>
<!-- Seção 3: Produtos -->
<article class="produtos" id="produtos">
<h2 class="font-1-xxl cor-1">Conheça o loot que te aguarda</h2>
<p class="font-2-l cor-2">Camisetas, colecionaveis, livros, posters, itens de decoração, acessórios e muito mais!</p>
<div class="produtos-imagens">
<div><img src="img/home/produtos-1.png" alt=""></div>
<div><img src="img/home/produtos-2.png" alt=""></div>
<div><img src="img/home/produtos-3.png" alt=""></div>
<div><img src="img/home/produtos-4.png" alt=""></div>
<div><img src="img/home/produtos-5.png" alt=""></div>
</div>
</article>
<!-- Seção 4: Planos -->
<article class="planos" id="planos">
<h2 class="font-1-xxl cor-1">Nossas caixas</h2>
<div class="planos-opcoes">
<div>
<h3 class="font-2-xxl-b-u cor-3">Caixa <span class="cor-d1">Rara</span></h3>
<span class="font-2-l-sb-u cor-0">4 produtos</span>
<span class="font-2-xl-b-u cor-3">R$ 49,90</span>
<ul class="font-2-m cor-0">
<li>1 camiseta</li>
<li>1 colecionavel</li>
<li>2 produtos sortidos</li>
</ul>
</div>
<div>
<h3 class="font-2-xxl-b-u cor-3">Caixa <span class="cor-d2">Épica</span></h3>
<span class="font-2-l-sb-u cor-0">4 produtos</span>
<span class="font-2-xl-b-u cor-3">R$ 69,90</span>
<ul class="font-2-m cor-0">
<li>1 camiseta</li>
<li>2 colecionaveis</li>
<li>1 livros</li>
<li>2 produtos sortidos</li>
</ul>
</div>
<div>
<h3 class="font-2-xxl-b-u cor-3">Caixa <span class="cor-d3">Lendária</span></h3>
<span class="font-2-l-sb-u cor-0">4 produtos</span>
<span class="font-2-xl-b-u cor-3">R$ 99,90</span>
<ul class="font-2-m cor-0">
<li>2 camisetas</li>
<li>4 colecionaveis</li>
<li>1 livro</li>
<li>1 poster</li>
<li>2 produtos sortidos</li>
</ul>
</div>
</div>
</article>
<!-- Seção 5: Sobre nós -->
<article class="sobrenos" id="sobrenos">
<h2 class="font-1-xxl cor-1">Sobre nós</h2>
<div class="sobrenos-info">
<div>
<h3 class="font-2-xl-b-u cor-0">Criação</h3>
<p class="font-2-s cor-2">Em 2022 fomos forjados em terras sulistas com a missão de trazer aos amantes do mundo nerd, os mais variados loots para fazer parte de seus arsenais.</p>
</div>
<div>
<h3 class="font-2-xl-b-u cor-0">Equipe</h3>
<p class="font-2-s cor-2">Contamos com um grande clãn que com suas incriveis skills, combam uma poderosa sinergia que oferecem aos nossos players os melhores produtos e atendimentos.</p>
</div>
<div>
<h3 class="font-2-xl-b-u cor-0">Comunidade</h3>
<p class="font-2-s cor-2">Nossa ligação com o mundo nerd nos permite fazer alianças com grandes nomes da cultura nerd, nos permitindo criar eventos e produtos exclusivos para fortalecer a comunidade.</p>
</div>
</div>
</article>
<!-- Seção 6: Footer -->
<footer class="footer">
<div class="footer-container">
<div class="footer-logo">
<img src="img/logonerdbox.svg" alt="">
<q class="font-2-s cor-2">Garantindo o loot necessario para você subir de nível!</q>
</div>
<div class="footer-contato">
<h3 class="font-2-l-sb-u cor-0">Contato</h3>
<ul class="font-2-s cor-2">
<li><a href="#">(47) 99999-9999</a></li>
<li><a href="#">(47) 3399-9999</a></li>
<li><a href="#">[email protected]</a></li>
<li><a href="#">Rua Dormir não da xp, 777, Sala 7 ED. Priston Tale - Blumenau - SC 89000-000</a></li>
</ul>
<div class="footer-redes">
<a href="#"><img src="img/global/iconyoutube.svg" alt=""></a>
<a href="#"><img src="img/global/iconinstagram.svg" alt=""></a>
<a href="#"><img src="img/global/iconfacebook.svg" alt=""></a>
<a href="#"><img src="img/global/icontwitter.svg" alt=""></a>
</div>
</div>
<div class="footer-menu">
<h3 class="font-2-l-sb-u cor-0">Menu</h3>
<ul class="font-2-s cor-2">
<li><a href="#">Minha conta</a></li>
<li><a href="#">Prazo de entrega</a></li>
<li><a href="#">Termos e condições</a></li>
<li><a href="#">Política de privacidade</a></li>
</ul>
</div>
</div>
<p class="footer-copy font-2-s cor-2">NerdBox© Todos os direitos reservados</p>
</footer>
</div>
</body>
</html>