-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
283 lines (274 loc) · 14.7 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favico/672634.png" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
.custom-orange:hover {
color: #FF4500;
}
</style>
<title>Doguinho Style</title>
</head>
<body>
<header class="d-flex justify-content-between align-items-center bg-dark text-white py-3">
<div class="logo">
<img src="img/logo/logo.jpg" alt="Logo do site" class="img-fluid">
</div>
<nav class="nav">
<ul class="list-unstyled d-flex mb-0 justify-content-end">
<li class="nav-item me-0"><a href="#" class="nav-link custom-orange">Início</a></li>
<li class="nav-item me-0"><a href="#about-us" class="nav-link custom-orange">Sobre nós</a></li>
<li class="nav-item me-0"><a href="#products" class="nav-link custom-orange">Roupinhas</a></li>
<li class="nav-item"><a href="#our-team" class="nav-link custom-orange">Nosso time</a></li>
</ul>
</nav>
</header>
<section class="carousel">
<div class="container">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="3"
aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel/1.jpg" class="d-block w-100" alt="Primeira imagem do carousel">
<div class="carousel-caption d-none d-md-block" style="font-size: 50px;">
<h2>Estilo e Aconchego: Roupinhas irresistíveis para cachorros
cheios de personalidade.</h2>
</div>
</div>
<div class="carousel-item">
<img src="img/carousel/2.jpg" class="d-block w-100" alt="Segunda imagem do carousel">
<div class="carousel-caption d-none d-md-block" style="font-size: 50px;">
<h2>Patas na Passarela: As tendências mais fofas para seu
companheiro peludo.</h2>
</div>
</div>
<div class="carousel-item">
<img src="img/carousel/3.jpg" class="d-block w-100" alt="Terceira imagem do carousel">
<div class="carousel-caption d-none d-md-block" style="font-size: 50px;">
<h2>Fashion Paws: Transforme seu pet em uma estrela da moda!</h2>
</div>
</div>
<div class="carousel-item">
<img src="img/carousel/4.jpg" class="d-block w-100" alt="Quarta imagem do carousel">
<div class="carousel-caption d-none d-md-block" style="font-size: 50px;">
<h2>Moda Canina: Vista seu melhor amigo com estilo e conforto!</h2>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<section id="about-us" class="about-us">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Sobre nós</h2>
<p>Na Doguinho Style, acreditamos que nossos amigos peludos merecem
todo o amor e cuidado que podemos oferecer. Somos uma empresa
apaixonada por cachorros e dedicada a trazer o melhor em estilo e
conforto para os nossos companheiros de quatro patas. Nossa missão é
proporcionar uma experiência única de moda para os cãezinhos,
garantindo que eles estejam sempre bem-vestidos e confiantes em
qualquer ocasião. Com uma variedade de roupinhas para todas as
estações e estilos, queremos que os pets se sintam especiais e
amados. Cada peça da nossa coleção é cuidadosamente selecionada,
priorizando a qualidade dos materiais e o design encantador. Nossas
roupas são projetadas para se ajustarem perfeitamente ao corpo dos
cachorros, proporcionando conforto e mobilidade para suas
brincadeiras e aventuras diárias.</p>
</div>
<div class="col-md-6">
<div class="about-image">
<img src="img/sobrenos/sobrenos.png" alt="Imagem da empresa">
</div>
</div>
</div>
</div>
</section>
<section id="products" class="product-cards">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="img/roupinhas/1.jpg" class="card-img-top" alt="Roupinha 1">
<div class="card-body">
<h5 class="card-title">Cão Vaidoso</h5>
<p class="card-text">Perfeito para manter seu pet quentinho e estiloso durante os
dias frios.</p>
<p class="card-price">R$69,90</p>
<button class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#addToCartModal">Comprar</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="img/roupinhas/2.jpg" class="card-img-top" alt="Roupinha 2">
<div class="card-body">
<h5 class="card-title">Patas Estilosas</h5>
<p class="card-text">Leveza e liberdade para seu cãozinho explorar o mundo com a
nossa jaqueta acolchoada.
</p>
<p class="card-price"><del>R$78</del> R$59,90</p>
<button class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#addToCartModal">Comprar</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="img/roupinhas/3.jpg" class="card-img-top" alt="Roupinha 3">
<div class="card-body">
<h5 class="card-title">Moda Cão</h5>
<p class="card-text">Uma experiência de moda divertida e confortável.</p>
<p class="card-price"><del>R$99,90</del> R$ 59,90</p>
<button class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#addToCartModal">Comprar</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="img/roupinhas/4.jpg" class="card-img-top" alt="Roupinha 4">
<div class="card-body">
<h5 class="card-title">Peludinhos Fashion</h5>
<p class="card-text">A escolha perfeita para os tutores que buscam roupas elegantes
para seus amigos peludos.</p>
<p class="card-price">R$79,90</p>
<button class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#addToCartModal">Comprar</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="img/roupinhas/5.jpg" class="card-img-top" alt="Roupinha 5">
<div class="card-body">
<h5 class="card-title">Cãoture</h5>
<p class="card-text">Deixe seu cãozinho experimentar o luxo da Cãoture.</p>
<p class="card-price">R$89,90</p>
<button class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#addToCartModal">Comprar</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="img/roupinhas/6.jpg" class="card-img-top" alt="Roupinha 6">
<div class="card-body">
<h5 class="card-title">Estilo Pet</h5>
<p class="card-text">O soninho do seu cão mais confortável do que nunca.</p>
<p class="card-price">R$60,90</p>
<button class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#addToCartModal">Comprar</button>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="modal fade" id="addToCartModal" tabindex="-1" aria-labelledby="addToCartModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addToCartModalLabel">Produto adicionado ao carrinho</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
</div>
<div class="modal-body">
O produto foi adicionado ao seu carrinho de compras.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Continuar comprando</button>
<button type="button" class="btn btn-primary">Ir para o carrinho</button>
</div>
</div>
</div>
</div>
<section id="our-team" class="team-section">
<div class="container">
<h2>Nossa Equipe</h2>
<div class="team-members">
<div class="team-member">
<div class="team-icon">
<i class="bi bi-person"></i>
</div>
<h3>Manuella</h3>
<p>Amante de cães desde pequena, Manuella traz sua paixão e expertise para criar roupas que combinam
estilo e conforto, fazendo os peludinhos brilharem!</p>
</div>
<div class="team-member">
<div class="team-icon">
<i class="bi bi-person"></i>
</div>
<h3>Manu</h3>
<p>Com um olhar afiado para tendências de moda, Manu está sempre em busca das peças mais estilosas
para que os pets expressem sua personalidade única.</p>
</div>
<div class="team-member">
<div class="team-icon">
<i class="bi bi-person"></i>
</div>
<h3>Manuzinha</h3>
<p>Manuzinha é a mestra dos detalhes, garantindo que cada peça de roupa seja confeccionada com amor
e
qualidade, para que os pets se sintam mimados em grande estilo.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-md-4">
<i class="bi bi-geo-alt-fill"></i>
<p>Localização: São Paulo, SP</p>
</div>
<div class="col-md-4">
<i class="bi bi-telephone"></i>
<p>Telefone: 4002-8922</p>
</div>
<div class="col-md-4">
<i class="bi bi-envelope"></i>
<p>Email: [email protected]</p>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container text-center">
<a href="https://www.linkedin.com/in/manuella-oliveira-02b369192/" target="_blank"><i
class="bi bi-linkedin"></i></a>
<a href="https://www.instagram.com/manuggetts/" target="_blank" <i class="bi bi-instagram"></i></a>
<a href="https://www.twitter.com/" target="_blank"><i class="bi bi-twitter"></i></a>
</div>
</div>
</footer>
</body>
</html>