-
Notifications
You must be signed in to change notification settings - Fork 0
/
bicicletas.html
130 lines (122 loc) · 6.9 KB
/
bicicletas.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
<!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.min.css">
<link rel="shortcut icon" href="favicon.svg" type="image/svg">
<title>Bicicletas | Bikcraft</title>
<meta name="description" content="Nossa lista de bicicletas Bikcraft">
<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=Merriweather:ital,wght@1,900&family=Poppins:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<script>document.documentElement.className += ' js';</script>
</head>
<body>
<header class="header-bg">
<div class="container">
<a href="index.html"><img src="img/bikcraft.svg" alt="Bikcraft Logo" width="136" height="32"></a>
<nav>
<button class="menu-mobile" type="button" aria-controls="menu" data-menu="menuBotao" aria-expanded="false" aria-label="Abrir e fechar menu"></button>
<ul class="header-menu c-0 f-3" data-menu="menu" id="menu">
<li><a href="./bicicletas.html">Bicicletas</a></li>
<li><a href="./seguros.html">Seguros</a></li>
<li><a href="./contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="titulo">
<p class="fn-1 c-1 container">Escolha a melhor para você</p>
<h1 class="f-1 c-0 container">nossas bicicletas<span class="p-1">.</span></h1>
</div>
<ul class="bicicletas">
<li class="container fadeInLeft" data-anime="200">
<a href="bicicletas/nimbus.html" class="bicicletas-imagem">
<img src="img/bicicletas/nimbus.jpg" alt="Foto da bicicleta Nimbus Stark" width="560" height="340">
<span class="fn-2 c-0">R$ 4999</span>
</a>
<section class="bicicletas-conteudo">
<h2 class="f-2 c-2">Nimbus Stark</h2>
<p class="fn-3 c-2">A Nimbus Stark é a melhor Bikcraft já criada pela nossa equipe. Ela vem equipada com os melhores acessórios, o que garante maior velocidade.</p>
<ul class="bicicletas-espec fn-2 c-2">
<li><img src="img/icones/eletrica.svg" alt="" width="24" height="24"> Motor Elétrico</li>
<li><img src="img/icones/carbono.svg" alt="" width="24" height="24">Fibra de Carbono</li>
<li><img src="img/icones/velocidade.svg" alt="" width="24" height="24">50 km/h</li>
<li><img src="img/icones/rastreador.svg" alt="" width="24" height="24">Rastreador</li>
</ul>
<a class="botao f-3" href="bicicletas/nimbus.html">Mais sobre</a>
</section>
</li>
<li class="bicicletas-magic-bg fadeInRight" data-anime="400">
<div class="container">
<a href="bicicletas/magic.html" class="bicicletas-imagem">
<img src="img/bicicletas/magic.jpg" alt="Foto da bicicleta Magic Might" width="560" height="340">
<span class="fn-2 c-0">R$ 2499</span>
</a>
<section class="bicicletas-conteudo">
<h2 class="f-2 c-0">Magic Might</h2>
<p class="fn-3 c-1">A Magic Might é a melhor Bikcraft já criada pela nossa equipe. Ela vem equipada com os melhores acessórios, o que garante maior velocidade.</p>
<ul class="bicicletas-espec fn-2 c-1">
<li><img src="img/icones/eletrica.svg" alt="" width="24" height="24"> Motor Elétrico</li>
<li><img src="img/icones/carbono.svg" alt="" width="24" height="24">Fibra de Carbono</li>
<li><img src="img/icones/velocidade.svg" alt="" width="24" height="24">45 km/h</li>
<li><img src="img/icones/rastreador.svg" alt="" width="24" height="24">Rastreador</li>
</ul>
<a class="botao f-3" href="bicicletas/magic.html">Mais sobre</a>
</section>
</div>
</li>
<li class="container fadeInLeft" data-anime="600">
<a href="bicicletas/nebula.html" class="bicicletas-imagem">
<img src="img/bicicletas/nebula.jpg" alt="Foto da bicicleta Nebula Cosmic" width="560" height="340">
<span class="fn-2 c-0">R$ 3999</span>
</a>
<section class="bicicletas-conteudo">
<h2 class="f-2 c-2">Nebula Cosmic</h2>
<p class="fn-3 c-2">A Nebula Cosmic é a melhor Bikcraft já criada pela nossa equipe. Ela vem equipada com os melhores acessórios, o que garante maior velocidade.</p>
<ul class="bicicletas-espec fn-2 c-2">
<li><img src="img/icones/eletrica.svg" alt="" width="24" height="24"> Motor Elétrico</li>
<li><img src="img/icones/carbono.svg" alt="" width="24" height="24">Fibra de Carbono</li>
<li><img src="img/icones/velocidade.svg" alt="" width="24" height="24">40 km/h</li>
<li><img src="img/icones/rastreador.svg" alt="" width="24" height="24">Rastreador</li>
</ul>
<a class="botao f-3" href="bicicletas/nebula.html">Mais sobre</a>
</section>
</li>
</ul>
</main>
<footer class="footer-bg">
<article class="footer container">
<a href="index.html"><img src="img/bikcraft.svg" alt="Bikcraft Logo" width="136" height="32"></a>
<div class="footer-contato">
<h3 class="fn-1 c-0">Contato</h3>
<ul class="contato fn-2 c-1">
<li>+55 21 9999-9999</li>
<li>[email protected]</li>
<li>Rua Ali Perto, 42 - Botafogo</li>
<li>Rio de Janeiro - RJ</li>
</ul>
<ul class="contato-redes">
<li><a href="https://www.instagram.com/marmitas_guga/" target="_blank" aria-label="Link para o perfil Guga Marmitas no Instagram"><img src="img/redes/instagram.svg" alt="" width="32" height="32"></a></li>
<li><a href="https://www.facebook.com/profile.php?id=100091625292086" target="_blank" aria-label="Link para o perfil Guga Marmitas no Facebook"><img src="img/redes/facebook.svg" alt="" width="32" height="32"></a></li>
<li><a href="https://www.youtube.com/@Gr11xyz" target="_blank" aria-label="Link para o canal de Valorant do meu irmão no Youtube"><img src="img/redes/youtube.svg" alt="" width="32" height="32"></a></li>
</ul>
</div>
<div class="footer-informacoes">
<h3 class="fn-1 c-0">Informações</h3>
<ul class="fn-2 c-1">
<li><a href="./bicicletas.html">Bicicletas</a></li>
<li><a href="./seguros.html">Seguros</a></li>
<li><a href="./contato.html">Contato</a></li>
<li><a href="./termos.html">Termos e Condições</a></li>
</ul>
</div>
</article>
<p class="fn-2 c-1 container"><a href="https://www.origamid.com" target="_blank">Origamid</a> © Projeto feito por <a href="https://github.com/gustavogularte" target="_blank">Gustavo Gularte Arend</a>.</p>
</footer>
<script src="./js/plugins/simple-anime.js"></script>
<script type="module" src="js/script.js"></script>
</body>
</html>