-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
221 lines (201 loc) · 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
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inicio - Nuestro Café</title>
<link href="bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles1.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!-- Barra de navegación fija -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand text-center" href="index.html">TIENDA DE CAFÉ</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">INICIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="productos.html">PRODUCTOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="franquicia.html">FRANQUICIA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="locales.html">LOCALES</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Sección de carrusel con texto superpuesto -->
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img id="change_1" src="img/foto3.png" class="d-block" alt="...">
<div id="change_2" class="carousel-caption d-none d-md-block">
<h2 id="change_3" class="textocarrusel2007">Desde 2007</h2>
<h1 id="change_3" class="textocarruseltostando">TOSTANDO TU CAFÉ</h1>
<p id="change_3" class="textocarruselanos">Años de experiencia cuidando cada paso del proceso.</p>
<a id="change_3" href="#" class="btn btn-primary1">ENCONTRANOS</a>
</div>
</div>
<!-- Primera imagen -->
<!-- Segunda imagen -->
<div class="carousel-item">
<img id="change_1" src="img/foto2.png" class="d-block" alt="...">
<div id="change_2" class="carousel-caption d-none d-md-block">
<h2 id="change_3" class="textocarrusel2-proba">Proba nuestro</h2>
<h1 id="change_3" class="textocarrusel2-Capsulas">CAFÉ</h1>
<p id="change_3" class="textocarrusel2-100">En bolsas naturales 100% orgánicas<br> compatible con máquinas Nespresso*.</p>
<a id="change_3" href="productos.html" class="btn btn-primary2">DESCUBRILO</a>
</div>
</div>
<!-- Tercera imagen -->
<div class="carousel-item active">
<img id="change_1" src="img/foto1.png" class="d-block" alt="...">
<div id="change_2" class="carousel-caption d-none d-md-block">
<h2 id="change_3" class="textocarrusel1cafe">Tu café preferido</h2>
<h1 id="change_3" class="textocarrusel1cerca">SIEMPRE CERCA</h1>
<p id="change_3" class="textocarruseltienda">Blends, varietales, cafés del mundo. <br> Encontrá tu Tienda más cercana y
tentate con nuestros sabores.</p>
<a id="change_3" href="#" class="btn btn-primary3">ENCONTRANOS</a>
</div>
</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>
<!-- Sección de nuestros productos -->
<div class="container mt-5 ">
<h2 class="NuestrosProductos">NUESTROS PRODUCTOS</h2>
<div id="carouselProductos" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 position-relative">
<img src="img/producto1.jpg" class="d-block" alt="Producto 1">
</div>
<div class="col-md-4 position-relative">
<img src="img/producto2.jpg" class="d-block" alt="Producto 2">
</div>
<div class="col-md-4 position-relative">
<img src="img/producto3.jpg" class="d-block" alt="Producto 3">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 position-relative">
<img src="img/producto4.jpg" class="d-block" alt="Producto 4">
</div>
<div class="col-md-4 position-relative">
<img src="img/producto5.jpg" class="d-block" alt="Producto 5">
</div>
<div class="col-md-4 position-relative">
<img src="img/producto6.jpg" class="d-block" alt="Producto 6">
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselProductos" 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="#carouselProductos" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!--- Nuestro cafe--->
<div class="fondo">
<div class="container mt-5">
<h2 class="NuestroCafe">NUESTRO CAFÉ</h2>
<p class="cual">¿CUÁL VAS A ELEGIR HOY?</p>
<div class="imagenmedium-container">
<div class="texto-izquierda">
<p class="texto">BARISTA</p>
<p class="texto-izquierda-descripcion1">Nuestro tradicional house blend, el hijo prodigio de la casa. Granos provenientes de Brasil</p>
<p class="texto">SCEGLIERE</p>
<p class="texto-izquierda-descripcion2">Una combinación única, lograda por la combinación de tres varietales: Brasil Santos Mogiana, Colombia Supremo y Moka.</p>
<p class="texto">MINKA</p>
<p class="texto-izquierda-descripcion3">Este blend nos regala un café de gran cuerpo, con un sabor especiado. Si sos amante del café intenso, te vas a enamorar
de nuestro Minka.</p>
</div>
<img src="img/medium.jpg" class="imagenmedium" alt="Descripción de la imagen">
<div class="texto-derecha">
<p class="texto">COLOMBIA</p>
<p class="texto-derecha-descripcion1">Nuestro varietal clásico. Adentrate en las regiones colombianas con este café.</p>
<p class="texto">DESCAFEINADO</p>
<p class="texto-derecha-descripcion2">Si querés disfrutar un exquisito café, pero reducir tu dosis diaria de cafeína, este es tu blend! Café originario de Colombia</p>
<p class="texto">BRASIL</p>
<p class="texto-derecha-descripcion3">Un café de cuerpo suave, y baja acidez hacen de BRASIL el ideal para tus preparaciones de café filtrado.</p>
</div>
</div>
</div>
<div>
<div class="imagen-container ">
<img src="img/definitiva.png" alt="" class="prefooter">
<div class="textoprefooter">
<p class="textoprefooter-siempre">Siempre hay una</p>
<p class="textoprefooter-tiendita">TIENDA CERCA TUYO</p>
<p class="textoprefooter-sucu">Encontrá nuestra sucursal<br> más cercana.</p>
<a href="locales.html" class="btn-primary4">INGRESAR</a>
</div>
</div>
<!-- footer -->
<footer id="contacto">
<div class="contenedor footer-content">
<!-- Logo -->
<div class="logo">
<img src="img/logito.png" alt="Logo" class="footer-logo">
</div>
<!-- Columnas de contenido -->
<div class="footer-column">
<h3 class="footer-title">CONTENIDOS</h3>
<ul class="footer-links">
<li><a href="index.html">INICIO</a></li>
<li><a href="productos.html">PRODUCTOS</a></li>
</ul>
</div>
<div class="footer-column">
<h3 class="footer-title">NECESITÁS AYUDA</h3>
<ul class="footer-links">
<li><a href="franquicia.html">FRANQUICIAS</a></li>
<li><a href="locales.html">LOCALES</a></li>
</ul>
</div>
<!-- Redes sociales -->
<div class="social-media">
<p class="footer-title-redes">REDES</p>
<div class="social-icons">
<a href="https://www.facebook.com/Tiendadecafe" class="social-media-icon">
<i class='bx bxl-facebook'></i>
</a>
<a href="https://www.instagram.com/tiendadecafear/" class="social-media-icon">
<i class='bx bxl-instagram'></i>
</a>
</div>
</div>
<div class="line1"></div>
<p class="copyright">© Copyright 2021 Tienda de café - Todos los derechos reservados.<br>Todos los logos, productos, marcas y nombres aqui utilizados son propiedad registrada de Antonio Ortiz.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>