-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (141 loc) · 9.11 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hashtag Watch</title>
<link rel="stylesheet" href="./style.css" />
<script src="./index.js" defer></script> <!-- Acelerar a leitura do js sem interroper o restante da página, como se colocasse no final -->
</head>
<body>
<nav>
<ul>
<li>
<svg
height="48"
viewBox="0 0 17 48"
width="17"
xmlns="http://www.w3.org/2000/svg">
<path
d="m15.5752 19.0792a4.2055 4.2055 0 0 0 -2.01 3.5376 4.0931 4.0931 0 0 0 2.4908 3.7542 9.7779 9.7779 0 0 1 -1.2755 2.6351c-.7941 1.1431-1.6244 2.2862-2.8878 2.2862s-1.5883-.734-3.0443-.734c-1.42 0-1.9252.7581-3.08.7581s-1.9611-1.0589-2.8876-2.3584a11.3987 11.3987 0 0 1 -1.9373-6.1487c0-3.61 2.3464-5.523 4.6566-5.523 1.2274 0 2.25.8062 3.02.8062.734 0 1.8771-.8543 3.2729-.8543a4.3778 4.3778 0 0 1 3.6822 1.841zm-6.8586-2.0456a1.3865 1.3865 0 0 1 -.2527-.024 1.6557 1.6557 0 0 1 -.0361-.337 4.0341 4.0341 0 0 1 1.0228-2.5148 4.1571 4.1571 0 0 1 2.7314-1.4078 1.7815 1.7815 0 0 1 .0361.373 4.1487 4.1487 0 0 1 -.9867 2.587 3.6039 3.6039 0 0 1 -2.5148 1.3236z"></path>
</svg>
</li>
<li>Loja</li>
<li>Mac</li>
<li>IPad</li>
<li>IPhone</li>
<li>Watch</li>
<li>AirPods</li>
<li>TV e Casa</li>
<li>Entretenimento</li>
<li>Acessórios</li>
<li>Suporte</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
width="15px"
height="44px"
viewBox="0 0 15 44">
<path
d="M14.298,27.202l-3.87-3.87c0.701-0.929,1.122-2.081,1.122-3.332c0-3.06-2.489-5.55-5.55-5.55c-3.06,0-5.55,2.49-5.55,5.55 c0,3.061,2.49,5.55,5.55,5.55c1.251,0,2.403-0.421,3.332-1.122l3.87,3.87c0.151,0.151,0.35,0.228,0.548,0.228 s0.396-0.076,0.548-0.228C14.601,27.995,14.601,27.505,14.298,27.202z M1.55,20c0-2.454,1.997-4.45,4.45-4.45 c2.454,0,4.45,1.997,4.45,4.45S8.454,24.45,6,24.45C3.546,24.45,1.55,22.454,1.55,20z"></path>
</svg>
</li>
<li>
<svg
height="44"
viewBox="0 0 14 44"
width="14"
xmlns="http://www.w3.org/2000/svg">
<path
d="m11.3535 16.0283h-1.0205a3.4229 3.4229 0 0 0 -3.333-2.9648 3.4229 3.4229 0 0 0 -3.333 2.9648h-1.02a2.1184 2.1184 0 0 0 -2.117 2.1162v7.7155a2.1186 2.1186 0 0 0 2.1162 2.1167h8.707a2.1186 2.1186 0 0 0 2.1168-2.1167v-7.7155a2.1184 2.1184 0 0 0 -2.1165-2.1162zm-4.3535-1.8652a2.3169 2.3169 0 0 1 2.2222 1.8652h-4.4444a2.3169 2.3169 0 0 1 2.2222-1.8652zm5.37 11.6969a1.0182 1.0182 0 0 1 -1.0166 1.0171h-8.7069a1.0182 1.0182 0 0 1 -1.0165-1.0171v-7.7155a1.0178 1.0178 0 0 1 1.0166-1.0166h8.707a1.0178 1.0178 0 0 1 1.0164 1.0166z"></path>
</svg>
</li>
</ul>
</nav>
<main>
<section id="produto">
<div id="opcoes-produto">
<h1 id="titulo-produto">Pulseira loop esportiva azul-inverno para caixa de 45 mm</h1>
<div class="precos">
<p id="preco">R$ 499,90</p>
<span id="parcelas" class="link">
<p>ⓘ</p>
<p>Em até 12x de R$ 41,58</p>
</span>
<p id="a-vista">R$ 449,10 à vista (10% de desconto)</p>
</div>
<div id="opcoes">
<h2 id="nome-cor-selecionada">Cor - Azul-inverno</h2>
<ul id="selecao-cores">
<li><input type="radio" name="opcao-cor" onclick="trocarCor()" id="0-cor"><label for="0-cor"><img src="./imagens/opcoes-cores/verde-cipreste.jpeg" alt="" srcset=""></label></li>
<li><input type="radio" name="opcao-cor" onclick="trocarCor()"id="1-cor" checked><label for="1-cor"><img src="./imagens/opcoes-cores/azul-inverno.jpeg" alt="" srcset=""></label></li>
<li><input type="radio" name="opcao-cor" onclick="trocarCor()" id="2-cor"><label for="2-cor"><img src="./imagens/opcoes-cores/meia-noite.jpeg" alt="" srcset=""></label></li>
<li><input type="radio" name="opcao-cor" onclick="trocarCor()" id="3-cor"><label for="3-cor"><img src="./imagens/opcoes-cores/estelar.jpeg" alt="" srcset=""></label></li>
<li><input type="radio" name="opcao-cor" onclick="trocarCor()"id="4-cor"><label for="4-cor"><img src="./imagens/opcoes-cores/rosa-claro.jpeg" alt="" srcset=""></label></li>
</ul>
<div id="selo-carbono">
<img src="./imagens/outros-recursos/neutralidade-c.jpeg" alt="">
<p>Carbon Neutral</p>
</div>
<div id="tamanho-caixa">
<h2>Tamanho da caixa</h2>
<div id="opcoes-tamanho">
<input type="radio" name="opcao-tamanho" id="0-tamanho" onclick="trocarTamanho()">
<label for=0-tamanho>41 mm</label>
<input type="radio" name="opcao-tamanho" id="1-tamanho" onclick="trocarTamanho()" checked>
<label for="1-tamanho">45 mm</label>
</div>
<div id='disclaimer'>
<p>Compatível com a maioria das versões de Apple Watch.
</p>
<p id='saiba-mais' class="link">Saiba mais sobre a compatibilidade de pulseiras <b>›</b>
</p>
</div>
<div id="info-extra">
<h2>Tamanho da pulseira
</h2>
<p id="info-principal">Tamanho único (cabe na maioria dos pulsos)
</p>
<p id="info-secundaria">Para pulsos de 145 a 220 mm.
</p>
</div>
</div>
<div id="entrega">
<div id="icone">
<svg viewBox="0 0 25 25" class="as-svgicon as-svgicon-boxtruck as-svgicon-reduced as-svgicon-boxtruckreduced" role="img" aria-hidden="true" width="25px" height="25px"><path fill="none" d="M0 0h25v25H0z"></path><path fill="#1d1d1f" d="m23.482 12.847-2.92-3.209A1.947 1.947 0 0 0 18.985 9H17V6.495a2.5 2.5 0 0 0-2.5-2.5h-11a2.5 2.5 0 0 0-2.5 2.5v9.75a2.5 2.5 0 0 0 2.5 2.5h.548A2.746 2.746 0 0 0 6.75 21.02 2.618 2.618 0 0 0 9.422 19h6.681a2.744 2.744 0 0 0 5.347-.23h.735A1.656 1.656 0 0 0 24 16.98v-2.808a1.937 1.937 0 0 0-.518-1.325ZM8.426 18.745a1.74 1.74 0 0 1-3.352 0 1.577 1.577 0 0 1 .015-1 1.738 1.738 0 0 1 3.322 0 1.578 1.578 0 0 1 .015 1ZM9.447 18a2.726 2.726 0 0 0-5.394-.255H3.5a1.502 1.502 0 0 1-1.5-1.5v-9.75a1.502 1.502 0 0 1 1.5-1.5h11a1.502 1.502 0 0 1 1.5 1.5V18Zm10.972.77a1.738 1.738 0 0 1-3.337 0 1.573 1.573 0 0 1 0-1 1.742 1.742 0 1 1 3.337 1ZM23 16.98c0 .569-.229.79-.815.79h-.735A2.73 2.73 0 0 0 17 16.165V10h1.986a.976.976 0 0 1 .838.314l2.927 3.214a.95.95 0 0 1 .249.644Zm-1.324-3.36a.512.512 0 0 1 .174.38h-3.306a.499.499 0 0 1-.544-.528V11h1.073a.76.76 0 0 1 .594.268Z"></path></svg>
</div>
<div id="informacoes-entrega">
<span>Entrega:</span>
<p id="disponibilidade">Em estoque</p>
<p id="valor-frete">Frete Grátis</p>
<p id="tempo-entrega" class="link">Ver datas de entrega</p>
</div>
</div>
<div id="comprar">
<button id="adicionar-a-sacola">Colocar na sacola</button>
<div id="comprar-depois">
<span>Precisa de um tempo?</span>
<p>Mantenha todas as suas seleções salvando este aparelho em Itens salvos. Depois, você pode voltar quando quiser e continuar de onde parou.</p>
<p class="link" id="salvar-depois"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/>
</svg> Salvar para depois</p>
</div>
</div>
</div>
</div>
<div id="visualizacao">
<img src="./imagens/opcoes-cores/imagens-azul-inverno/imagem-1.jpeg" alt="" id="imagem-visualizacao">
<ul id="selecionar-imagem">
<li><input type="radio" name="opcao-imagem" id="0-imagem"><label for="0-imagem" onclick="trocarImagem()"><img src="./imagens/opcoes-cores/imagens-azul-inverno/imagem-0.jpeg" alt="" srcset="" id="0-imagem-miniatura"></label></li>
<li><input type="radio" name="opcao-imagem" id="1-imagem" checked><label for="1-imagem" onclick="trocarImagem()"><img src="./imagens/opcoes-cores/imagens-azul-inverno/imagem-1.jpeg" alt="" srcset="" id="1-imagem-miniatura"></label></li>
<li><input type="radio" name="opcao-imagem" id="2-imagem"><label for="2-imagem" onclick="trocarImagem()"><img src="./imagens/opcoes-cores/imagens-azul-inverno/imagem-2.jpeg" alt="" srcset="" id="2-imagem-miniatura"></label></li>
</ul>
</div>
</section>
<section id="carbon-neutral"></section>
<section id="informacoes"></section>
<section id="compatibilidade"></section>
<section id="outros"></section>
</main>
</body>
</html>