-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
309 lines (298 loc) · 17.5 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
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bienvenido a Oh my dog, la tienda especializada en accesorios, alimentos y cuidado para perros. Encuentra todo lo que necesitas para consentir a tu mejor amigo peludo. También ofrecemos servicios de farmacia, adopciones, emergencias de mascotas y peluquería canina.">
<meta name="keywords" content="Oh my dog, perros, accesorios para perros, alimentos para perros, cuidado de mascotas, juguetes para perros, correa para perros, camas para perros, farmacia para perros, adopciones de perros, emergencias de mascotas, peluquería canina">
<meta name="author" content="Oh my dog">
<title>Oh my god! | incio</title>
<link rel="shortcut icon" href="../IMG/favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.iconify.design/iconify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<header class="header nav__banner__index">
<nav class="navbar navbar-expand-sm fixed-top nav">
<div class="container-fluid">
<a href="./index.html" class="nav__marca">Oh my dog!</a>
<button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3 nav__lista">
<li class="nav-item">
<a class="nav-link active nav__items" id="activo" href="./index.html">INICIO</a>
</li>
<li class="nav-item">
<a class="nav-link nav__items" href="./pages/shop.html">TIENDA</a>
</li>
<li class="nav-item">
<a class="nav-link nav__items" href="./pages/services.html">SERVICIOS</a>
</li>
<li class="nav-item">
<a class="nav-link nav__items" href="./pages/aboutus.html">SOBRE NOSOTROS</a>
</li>
<li class="nav-item">
<a class="nav-link nav__items" href="./pages/contact.html">CONTACTO</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="nav__titulo__container">
<h1 class="nav__titulo">
<em class="nav__titulo__color"><span>30%</span> descuento en tu primer compra!</em>
</h1>
</div>
</header>
<main>
<section class="seccion__menu">
<div class="seccion__menu__list">
<div class="seccion__menu__list__container__orange">
<a class= "seccion__menu__items" href="./pages/shop.html" target="_blank">perros</a>
</div>
<div class="seccion__menu__list__container__lgorange">
<a class="seccion__menu__items" href="./pages/shop.html" target="_blank">gatos</a>
</div>
<div class="seccion__menu__list__container__orange">
<a class="seccion__menu__items" href="./pages/shop.html" target="_blank">aves</a>
</div>
<div class="seccion__menu__list__container__lgorange">
<a class="seccion__menu__items" href="./pages/shop.html" target="_blank">
roedores</a>
</div>
<div class="seccion__menu__list__container__orange">
<a class="seccion__menu__items" href="./pages/shop.html" target="_blank"> acuáticos</a>
</div>
<div class="seccion__menu__list__container__lgorange">
<a class="seccion__menu__items" href="./pages/shop.html" target="_blank"> exóticos</a>
</div>
</div>
</section>
<section class="seccion__texto">
<h2 class="titulo__secundario">Productos destacados</h2>
<p class="parrafo">Mirá estos descuentos que tenemos para vos!</p>
<div class="row m-0 row-cols-1 row-cols-sm-2 row-cols-lg-4">
<div class="col">
<div class="card text-center m-5">
<img src="./IMG/Familia2.jpg" class="card-img-top" alt="Generic image of a store product">
<div class="card-body">
<h2 class="card-title titulo__card">Felinavita</h2>
<p class="card-text parrafo__card">20% off</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-center m-5">
<img src="./IMG/bowl1.png" class="card-img-top" alt="Generic image of a store product">
<div class="card-body">
<h5 class="card-title titulo__card">Ladridos Gourmet</h5>
<p class="card-text parrafo__card">40% off</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-center m-5">
<img src="./IMG/dogfood_1.png" class="card-img-top" alt="Generic image of a store product">
<div class="card-body">
<h5 class="card-title titulo__card">PupPerfect</h5>
<p class="card-text parrafo__card">50% off</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-center m-5">
<img src="./IMG/bowl_2.png" class="card-img-top" alt="Generic image of a store product">
<div class="card-body">
<h5 class="card-title titulo__card">CatoBowls</h5>
<p class="card-text parrafo__card">10% off</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-center m-5">
<img src="./IMG/vitamin_1.png" class="card-img-top" alt="Generic image of a store product">
<div class="card-body">
<h5 class="card-title titulo__card">VitaFelina</h5>
<p class="card-text parrafo__card">30% off</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-center m-5">
<img src="./IMG/Perro2.jpg" class="card-img-top" alt="Picture of a dog">
<div class="card-body">
<h5 class="card-title titulo__card">PurrFusion</h5>
<p class="card-text parrafo__card">30% off</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-center m-5">
<img src="./IMG/dogfood_2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title titulo__card">Delish</h5>
<p class="card-text parrafo__card">5% off</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-center m-5">
<img src="./IMG/Pareja2.jpg" class="card-img-top" alt="Generic image of a store product"">
<div class="card-body">
<h5 class="card-title titulo__card">Gato Festín</h5>
<p class="card-text parrafo__card">30% off</p>
</div>
</div>
</div>
</div>
<button type="button" class="my__button"><a href="./shop.html" class="my__button__text" >ver más</a></button>
</section>
<section class="row seccion__intro">
<div class="col-sm-6 seccion__intro__columnas">
<h2 class="titulo__secundario">¿Necesitas ayuda de un profesional?</h2>
<p class="parrafo__aboutus">En Oh My Dog, contamos con expertos en veterinaria, peluquería, planes nutricionales y más. Confía en nosotros para brindarle a tu compañero peludo el amor y la atención que se merece.</p>
<button type="button" class="my__button"><a href="./pages/contact.html" class="my__button__text">Solicitá un turno</a></button>
</div>
</section>
<section class="seccion__testimonials">
<div>
<h2 class="titulo__secundario">Lo que dice la gente de nosotros:</h2>
</div>
<div id="carouselExampleControls" class="carousel slide carousel-dark" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-inner">
<div class="carousel-item active text-center">
<h4 class="titulo__italic__bold">Familia de Rocco, un Cóquer spaniel de 11 años y medio</h4>
<p class="parrafo__italic"><em>“Oh My Dog ha sido un verdadero apoyo para nuestra familia y nuestro amado Rocco. Su equipo veterinaria Paula es excepcional, brindando cuidados expertos y afectuosos en cada visita. La peluquería deja a Rocco radiante y cómodo. Los planes nutricionales han mejorado su salud significativamente. Adoptamos a otro compañero gracias a su asesoramiento responsable. La farmacia siempre cuenta con lo necesario. El transporte y las emergencias 24 hs nos brindan tranquilidad. Oh My Dog es más que una tienda de mascotas, ¡es como un hogar para nuestros peludos! Recomendamos a todos los amantes de los animales que confíen en ellos. Gracias, Oh My Dog, por ser parte de nuestra familia y cuidar a nuestros peludos con tanto cariño y profesionalism”</em></p>
</div>
<div class="carousel-item text-center">
<h4 class="titulo__italic__bold">Familia de Jamaica, una cobaya de 2 años</h4>
<p class="parrafo__italic"><em>“La experiencia con Oh My Dog y su equipo ha sido excepcional para nuestra Jamaica. La atención veterinaria ha sido impecable y cariñosa, brindándole cuidados de calidad. La tienda ofrece todo lo necesario para su bienestar, y nos han asesorado en su alimentación y cuidados. ¡Estamos agradecidos por el amor que muestran a nuestra pequeña mascota! Oh My Dog es sin duda el lugar ideal para el cuidado de nuestras mascotas. ¡Recomendado!”</em></p>
</div>
<div class="carousel-item text-center">
<h4 class="titulo__italic__bold">Familia de Pelusa, un caniche toy de 5 meses</h4>
<p class="parrafo__italic"><em>“Oh My Dog es el mejor lugar para Pelusa. Su equipo veterinario es excepcional, la peluquería la deja adorable y encuentras todo lo necesario. ¡Recomendado para todas las familias con mascotas! Estamos agradecidos por su dedicación”</em></p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section class="seccion__services">
<div>
<h2 class="titulo__secundario">Personalizá tus accesorios!</h2>
</div>
<div class="seccion__services__container">
<div class="specialbutton">
<img src="./IMG/chapitas.jpg" alt="chapitas" class="seccion__services__img">
<span class="text">Chapitas</span>
</div>
<div class="specialbutton">
<img src="./IMG/ropa.jpg" alt="ropa" class="seccion__services__img">
<span class="text">Ropa</span>
</div>
<div class="specialbutton">
<img src="./IMG/platos.jpg" alt="platos" class="seccion__services__img">
<span class="text">Platos</span>
</div>
<div class="specialbutton">
<img src="./IMG/peceras.jpg" alt="peceras" class="seccion__services__img">
<span class="text">Peceras</span>
</div>
</div>
</section>
<section class="spikes">
</section>
</main>
<footer class="my__footer">
<div class="container-fluid">
<div class="row p-3 d-flex align-items-center">
<div class="col-xs-12 col-md-6 col-lg-3 text-center pb-5">
<div class="col-inter">
<a href="./index.html" class="nav__marca">Oh my dog!</a>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-3 text-center pb-5">
<p class="titulo__footer">Seguinos en nuestras redes!</p>
<div class="row orange justify-content-center">
<div class="col-2 text-center">
<a href="https://www.instagram.com/" target="_blank">
<i class="fab fa-instagram" style="font-size: 30px;"title="Nuestro Instagram"></i>
</a>
</div>
<div class="col-2 text-center">
<a href="https://www.youtube.com/" target="_blank">
<i class="fab fa-youtube" style="font-size: 30px;" title="Nuestro Youtube"></i>
</a>
</div>
<div class="col-2 text-center">
<a href="https://m.facebook.com/" target="_blank">
<i class="fab fa-facebook" style="font-size: 30px;" title="Nuestro Facebook"></i>
</a>
</div>
<div class="col-2 text-center">
<a href="https://twitter.com/?" target="_blank">
<i class="fab fa-twitter" style="font-size: 30px;" title="Nuestro Twitter"></i>
</a>
</div>
<div class="col-2 text-center">
<a href="https://www.tiktok.com/" target="_blank">
<i class="fab fa-tiktok" style="font-size: 30px;" title="Ahora tenemos TikTok!"></i>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-3 text-center pb-5">
<p class="titulo__footer">Contactanos!</p>
<div class="d-grid gap-3">
<div class="container__icon">
<!-- Utiliza la clase 'fas' y 'fa-phone' para agregar el ícono de teléfono -->
<i class="fas fa-phone" style="font-size: 30px;"></i>
<a href="tel:+011-1234-5678" class="form__style__text">011-1234-5678</a>
</div>
<div class="container__icon">
<!-- Utiliza la clase 'fas' y 'fa-envelope' para agregar el ícono de correo -->
<i class="fas fa-envelope" style="font-size: 30px;"></i>
<a href="mailto:[email protected]" class="form__style__text">[email protected]</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-3 text-center pb-5">
<p class="titulo__footer">Suscribite a nuestro newsletter:</p>
<div class="d-grid gap-3">
<div>
<form action="
" method="get" class="row">
<div class="col"><label class="form__style__text" for="Name"> Nombre </label>
<input class="my__input" type="text" name="Name" id="Name" required>
</div>
<div class="col">
<label class="form__style__text" for="E-mail">E-mail</label>
<input class="my__input" type="email" name="E-mail" id="E-mail" required>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="my__button my__button__text">enviar</button>
</div>
</form>
</div>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>