-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
174 lines (144 loc) · 7.87 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
<!DOCTYPE html>
<html lang="es" class="html-index">
<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">
<!-- SEO tags -->
<meta name="description" content="Desde lo más básico hasta un conjunto completo de ropa, elegí tu baby starter pack con todo lo necesario para tu bebé recién nacido, sin pensar demasiado ni andar a las corridas.">
<meta name="keywords" content="baby, starter, pack, bebe, mochila, maternal, cambiador, porta, mamadera, pañales, algodón, oleo, calcareo, toallitas, humedas, chupete, kit, manicura, bata, gorro, body, pantalon, escarpines, envio, gratis, Argentina, mercado, pago, bitcoin, ether, usdc">
<!-- Title -->
<title>Baby Starter Pack</title>
<!-- Google Fonts - Didact Gothic -->
<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=Didact+Gothic&display=swap" rel="preload" as="style">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- Animate On Scroll Library -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<!-- style.css -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1bc3c59861.js" crossorigin="anonymous"></script>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/img/bsp.webp" type="image/x-icon">
</head>
<body class="index">
<!-- Navbar -->
<header class="mb-5">
<nav class="navbar fixed-top navbar-expand-md p-1 navbar-custom">
<div class="container-fluid container-xl col-12">
<div>
<a class="navbar-brand d-flex flex-row flex-nowrap me-0 navbar-brand-custom" href="#"><img class="logo align-self-center pe-2" src="assets/img/bsp.webp" alt="Logo de Baby Starter Pack">baby starter pack</a>
</div>
<button class="navbar-toggler p-1 px-sm-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-5" id="collapsibleNavbar">
<ul class="navbar-nav column-gap-5">
<li class="nav-item nav-item-custom">
<a class="nav-link nav-link-custom" href="assets/pages/productos.html">productos</a>
</li>
<li class="nav-item nav-item-custom">
<a class="nav-link nav-link-custom" href="assets/pages/faq.html">faq</a>
</li>
<li class="nav-item nav-item-custom">
<a class="nav-link nav-link-custom" href="assets/pages/nosotros.html">nosotros</a>
</li>
<li class="nav-item nav-item-custom">
<a class="nav-link nav-link-custom" href="assets/pages/contacto.html">contacto</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Main text & image -->
<main class="container-fluid container-xl d-flex flex-wrap flex-row">
<h1 class="col-12">¡Bienvenido/a al mundo!</h1>
<!-- Main text -->
<div class="col-md-7 col-12 order-1 mb-4 mb-md-0">
<h2>Encontrá todo lo que necesitás<br>para empezar.</h2>
<p class="mb-4">
Desde lo más básico hasta un conjunto completo de ropa, elegí tu <em>baby starter pack</em> con todo lo necesario para tu bebé recién nacido, sin pensar demasiado ni andar a las corridas. Nosotros te ayudamos.
</p>
<h3>Todos los <em>starter packs</em> incluyen:</h3>
<ul>
<li>Mochila maternal</li>
<li>Porta mamaderas térmico</li>
<li>Cambiador</li>
<li>Babero</li>
<li>Pañales</li>
<li>Algodón</li>
<li>Óleo calcáreo</li>
<li>¡Envío gratis!</li>
</ul>
</div>
<!-- Image -->
<div class="col-md-5 col-12 order-2 mb-4">
<img class="img-fluid rounded-5 side-image" data-aos="fade-up" data-aos-duration="1000" src="assets/img/room.webp" alt="Imagen ilustrativa de habitación de bebé">
</div>
</main>
<!-- Price cards -->
<section class="container-fluid py-5 price-cards" data-aos="fade-up" data-aos-duration="1000">
<div class="d-md-flex text-center justify-content-evenly">
<!-- 1st card -->
<div class="card card-custom rounded-5 mx-auto mx-md-2">
<img src="assets/img/backpack1.webp" class="card-img-top rounded-top-5" alt="Imagen ilustrativa de mochila para bebés">
<div class="card-body">
<h4 class="card-title card-title-custom">Starter Pack Base</h4>
<p class="card-text card-text-custom text-center">Lo más básico para salir del apuro 👶🏻</p>
<p class="card-text card-text-custom text-center card-price">U$S 44,99</p>
<a href="assets/pages/productos.html" class="btn btn-dark card-link card-link-custom">Ver contenido</a>
</div>
</div>
<!-- 2nd card -->
<div class="card card-custom rounded-5 mx-auto mx-md-2 my-5 my-md-0">
<img src="assets/img/backpack2.webp" class="card-img-top rounded-top-5" alt="Imagen ilustrativa de mochila para bebés">
<div class="card-body">
<h4 class="card-title card-title-custom">Starter Pack Recargado</h4>
<p class="card-text card-text-custom text-center">Sumá chupete, mamadera y más 😎</p>
<p class="card-text card-text-custom text-center card-price">U$S 74,99</p>
<a href="assets/pages/productos.html" class="btn btn-dark card-link card-link-custom">Ver contenido</a>
</div>
</div>
<!-- 3rd card -->
<div class="card card-custom rounded-5 mx-auto mx-md-2">
<img src="assets/img/backpack3.webp" class="card-img-top rounded-top-5" alt="Imagen ilustrativa de mochila para bebés">
<div class="card-body">
<h4 class="card-title card-title-custom">Starter Pack Definitivo</h4>
<p class="card-text card-text-custom text-center">¡Agregale ropa y kit de manicura a tu pack! 🤩</p>
<p class="card-text card-text-custom text-center card-price">U$S 94,99</p>
<a href="assets/pages/productos.html" class="btn btn-dark card-link-custom">Ver contenido</a>
</div>
</div>
</div>
</section>
<!-- WhatsApp floating button -->
<div class="fixed-bottom whatsapp-floating-icon">
<a href="#" onclick="alert('(Link a chat de WhatsApp)')"><i class="fa-brands fa-whatsapp fa-fade"></i></a>
</div>
<!-- Footer -->
<footer>
<ul class="container-fluid social-media-list">
<li>
<a href="#" onclick="alert('(Link a página de Facebook)')"><i class="fa-brands fa-facebook" style="font-size: 2em;"></i></a>
</li>
<li>
<a href="#" onclick="alert('(Link a página de Instagram)')"><i class="fa-brands fa-instagram" style="font-size: 2em;"></i></a>
</li>
</ul>
<p class="m-0 disclaimer">
Las imágenes del sitio -exceptuando el logo- fueron generadas con <a href="https://midjourney.com" target="_blank">Midjourney</a>. Sitio de fantasía <i class="fa-regular fa-copyright fa-flip-horizontal"></i>
<a href="https://github.com/cirmialexis/web-development-coderhouse" target="_blank" class="ps-1">Alexis Cirmi</a>
</p>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<!-- Animate On Scroll JS -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>AOS.init();</script>
</body>
</html>