-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (148 loc) · 6.2 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">
<title>SNEAK. Ultra Light</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<p>SNEAK.</p>
<nav>
<a>Masculino</a>
<a>Feminino</a>
<a>Novidades</a>
<a>Ofertas</a>
<a>Coleções</a>
</nav>
<div class="acoes">
<div class="busca">
<img src="./assets/header/search.svg" class="busca-lupa">
<input class="busca-input" type="search" name="busca" placeholder="Procurar">
</div>
<button class="btn-bag">
<img src="./assets/header/bag.svg" class="bag-logo">
</button>
</div>
</header>
<main>
<section class="hero-section">
<div>
<h1>SNEAK. <span>Ultra Light</span></h1>
<p>Os tênis SNEAK foram criados especificamente para treinos de circuito, seja para aulas fitness em
casa ou para sua própria rotina de treinos.</p>
<button class="btn">
<span class="btn-texto">Adicionar ao Carrinho</span>
<img src="./assets/hero/plus.svg">
</button>
</div>
<img src="./assets/hero/sneak-hero.png" alt="imagem de um tênis esporte branco" class="sneak-hero">
</section>
<section class="sneak-escolha">
<h3>CORRIDA - MASCULINO</h3>
<img src="./assets/tenis/colors.png" alt="cores de tenis">
<img src="./assets/tenis/sneak-branco.png" alt="tenis branco esportivo">
<p>Branco</p>
<button class="btn">
<span class="btn-texto">Adicionar ao Carrinho</span>
</button>
</section>
<section class="destaques">
<div class="destak">
<div class="destak-texto">
<h2>Leveza e agilidade</h2>
<p>A construção ligeira de espuma e malha do SNEAK proporcionam conforto e agilidade durante o
exercício. Um “burpee break” na parte frontal do pé torna-o extremamente flexível para fazer
prancha
ou Mountain Climber.</p>
</div>
<div><img src="./assets/destaques/leveza-agilidade.png" alt="imagem focando a sola de um tenis"></div>
</div>
<div class="destak">
<div><img src="./assets/destaques/amortecimento-imediato.png" alt="imagem de duas pessoas usando tenis">
</div >
<div class="destak-texto">
<h2>Amortecimento imediato</h2>
<p>A espuma grossa sob o pé absorve o impacto e retorna a energia ao correr com os joelhos altos e
ao
saltar. O suporte de arco da parte média do pé garante conforto durante todo o treino.</p>
</div>
</div>
<div class="destak">
<div class="destak-texto">
<h2>Sensação de estabilização</h2>
<p>O outrigger - a proteção lateral - dá estabilidade ao pé ao fazer movimentos laterais, como por
exemplo, o Skater Squat. </p>
</div>
<div><img src="./assets/destaques/sensacao-estabilidade.png"
alt="homem e mulher usando tenis fazendo atividade física"></div>
</div>
</section>
<section class="corra">
<div class="corra-div">
<p><img src="./assets/destaques/seta.svg">CORRA</p>
<p>COMO SE O MUNDO </p>
<p>DEPENDESSE DE VOCÊ</p>
</div>
</section>
<!--seção resevada para o formulário-->
<section class="contato">
<iframe width="720" height="700" frameborder="0" style="border:0"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/view?key=AIzaSyABBogQvge4Gb0kmSt-2b5JonkkNiPgjkk¢er=-22.9028509,-43.203343&zoom=18"
allowfullscreen>
</iframe>
<form>
<h2>Entre em Contato</h2>
<input type="text" placeholder="Nome" class="contato-input">
<input type="text" placeholder="Email" class="contato-input">
<textarea rows="10" class="contato-input" placeholder="Comentários"></textarea>
<div class="contato-checkbox">
<input type="checkbox" id="privacidade">
<label for="privacidade">Concordo com a política de privacidade</label>
</div>
<button type="submit"><span class="btn-texto">Enviar</span></button>
</form>
</section>
<!--seção resevada para o formulário-->
</main>
<footer>
<div class="containers">
<div class="container">
<h6 class="brand">SNEAK.</h6>
</div>
<div class="container">
<h6 class="container-titulo">SOBRE SNEAK</h6>
<ul>
<li><a>Novidades</a></li>
<li><a>Carreira</a></li>
<li><a>Para investidores</a></li>
<li><a>Cuidado com o meio ambiente</a></li>
</ul>
</div>
<div class="container">
<h6 class="container-titulo">AJUDA</h6>
<ul>
<li><a>Status do pedido</a></li>
<li><a>Entregas e frete</a></li>
<li><a>Trocas e devoluções</a></li>
<li><a>Opções de pagamento</a></li>
</ul>
</div>
<div class="container">
<h6 class="container-titulo">REDES SOCIAIS</h6>
<div class="social-icones">
<img src="./assets/footer/instagram.svg" class="social-icone">
<img src="./assets/footer/twitter.svg" class="social-icone">
<img src="./assets/footer/facebook.svg" class="social-icone">
</div>
</div>
</div>
<div class="creditos">
<h6>DESIGNED BY</h6>
<img src="./assets/footer/logo-mentorama.png" class="mentorama">
</div>
</footer>
</body>
</html>