-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponentes.html
139 lines (126 loc) · 4.57 KB
/
componentes.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
<!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="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps:wght@400;900&family=Montserrat:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/css/base/base.css" />
<link rel="stylesheet" href="./assets/css/components/cabecalho.css" />
<link rel="stylesheet" href="./assets/css/components/botoes.css" />
<link rel="stylesheet" href="./assets/css/components/input.css" />
<link rel="stylesheet" href="./assets/css/components/cartao.css" />
<link rel="stylesheet" href="./assets/css/components/item.css" />
<link rel="stylesheet" href="./assets/css/components/produto.css" />
<link rel="stylesheet" href="./assets/css/components/video.css" />
<link rel="stylesheet" href="./assets/css/components/rodape.css" />
<title>Home | Casa Verde</title>
</head>
<body>
<header class="container cabecalho">
<img
class="cabecalho__logo"
src="assets/img/icons/logo.svg"
alt="Logo da Casa Verde"
/>
<a href="#" aria-label="Meu carrinho">
<img
class="cabecalho__carrinho"
src="assets/img/icons/carrinho.svg"
alt="Icone do carrinho de compras"
/>
</a>
</header>
<main class="container">
<button class="botao">Assinar Newsletter</button>
<button class="botao botao--alternativo">Botão Alternativo</button>
<input
type="text"
class="input input--icone input--email"
placeholder="Insira seu e-mail"
aria-label="Insira seu e-mail"
/>
<article class="cartao">
<h2 class="titulo alinhamento--center">
Como conseguir <span class="titulo-destaque"> minha planta</span>
</h2>
<ul class="lista-item">
<li class="item">
<span class="item__icone item__icone--cursor"></span>
<p>Escolha suas plantas</p>
</li>
<li class="item">
<span class="item__icone item__icone--carrinho"></span>
<p>Faça seu pedido</p>
</li>
<li class="item">
<span class="item__icone item__icone--caminhao"></span>
<p>Aguarde na sua casa</p>
</li>
</ul>
</article>
<article class="produto">
<img
src="assets/img/produto-01.png"
alt="Foto do produto"
class="produto__imagem"
/>
<div class="produto__conteudo">
<h3 class="produto__titulo titulo-destaque">Ajuda reptans</h3>
<p class="produto__preco">R$ 20,00</p>
<a href="" class="produto__comprar"
>Comprar<span class="produto__comprar--icone"></span
></a>
</div>
</article>
<article class="cartao-de-video">
<div class="cartao-de-video__video">
<img src="https://picsum.photos/278/252" alt="Banner do vídeo" />
</div>
<h3 class="cartao-de-video__titulo">Vídeo XYZ</h3>
<p>Publicação em março de 2019</p>
</article>
</main>
<footer class="container rodape">
<img
src="assets/img/icons/logo.svg"
alt="Logo da Casa Verde"
class="rodape__logo"
/>
<ul class="rodape__social">
<li>
<a href="#" class="rodape__social-midia" title="Facebook"
><img src="assets/img/icons/facebook.svg" alt="Logo do Facebook"
/></a>
</li>
<li>
<a href="#" class="rodape__social-midia" title="Twitter"
><img src="assets/img/icons/twitter.svg" alt="Logo do Twitter"
/></a>
</li>
<li>
<a href="#" class="rodape__social-midia" title="Instagram"
><img src="assets/img/icons/instagram.png" alt="Logo do Instagram"
/></a>
</li>
</ul>
<address class="rodape__unidade texto">
<span class="rodape__unidade-titulo">Rio de Janeiro</span>
Rua Siqueira Campos, 171, 303 <br>
Copacana <br>
Telefone: (21) 99876-0099
</address>
<address class="rodape__unidade texto">
<span class="rodape__unidade-titulo">São Paulo</span>
Rua Anita Garibaldi, 33, 13 <br>
Sé <br>
Telefone: (11) 99875-2201
</address>
</footer>
</body>
</html>