-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
298 lines (280 loc) · 12.9 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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="./styles/style.css">
<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=Outfit:wght@100;400&display=swap" rel="stylesheet">
</head>
<nav>
<a class="goHome" href="#"> <p class="goHome">cafedealtura.com <b> <img src="./images/Vector.png"></b></p></a>
<div class="splitter">
<a href="shop.html">
<p class="goto">Tienda</p>
</a>
<a href="#">
<p class="goto">Suscripción</p>
</a>
<p class="goto">Para empresas</p>
<p class="goto">Sobre nosotros</p>
<p class="goto">Contacto</p>
</div>
<div class="phone">
<a type="color:black" href="/"><img src="./images/Icon.png">+34 919 49 05 18</a>
<a href="#"> <button id="logInButton">Iniciar sesión</button></a>
</div>
<div class="cartsection"><a href="cart.html" id="cart"> <img src="./images/Group.png" ></a></div>
</nav>
<body>
<section class="description">
<div>
<!-- class="description" -->
<div class="product">
<h3 id="title">De la planta a tu taza</h3>
<h1 class="declaration">El mejor café del mundo, ahora en tu casa.</h1>
<p id="model" style="font-size: 16px;">Trabajamos con agricultores de todo el mundo para seleccionar los
mejores
granos de café y que puedas
viajar desde la comodidad de tu hogar.
</p>
<div class="origin">
<button id="origin"> Descubrir Orígenes</button>
<a href="shop.html"><button id="shop">Comprar café</button></a>
</div>
</div>
</div>
<div id="cofe">
<!-- class="description" -->
<img class="description" src="./images/Hero image (1).png">
</div>
</section>
<!------------------------------COFFECARDS-------------------------------->
<section class="coffeecards">
<h1 class="coffeecardsText">Café con las mejores condiciones</h1>
<article class="coffeecardsconditions">
<div class="coffeecard">
<button class="buttonforbuying"> <img src="./images/Icon (1).png"> </button>
<h3>Recibe tu pedido sin preocuparte</h3>
<p>Tienes cosas más importantes en la cabeza por es con nuestras suscripción de café, nunca te
quedarás
sin
tu taza de la mañana.
</p>
</div>
<div class="coffeecard">
<button class="buttonforbuying" id="sending"> <img src="./images/Icon of truck.png"> </button>
<h3>Envío en 24/48h</h3>
<p>
Pide tu café antes de las 12h y lo recibirás al día siguiente.
</p>
</div>
<div class="coffeecard">
<button class="buttonforbuying" id="benefits"> <img src="./images/Icon of gift.png"> </button>
<h3>Descuentos y beneficios</h3>
<p>
Cada dos meses, te regalamos una bolsa de un nuevo origen sorpresa, para que lo descubras junto
a
nosotros.
</p>
</div>
</article>
</section>
<!------------------------------------------- NOVELTY---------------------------------------------->
<h2 class="noveltyText" style="color: #2A5B45">Novedades</h2>
<section class="novelty">
<div class="products"><img class="imageSetUp" src="../images/Images.svg"><h2 class="nameOfCoffee">Costa Rica Tarrazú</h2>
<div class="priceOfCoffee">9,00€</div>
<button class="addButton">Añadir</button>
</div>
<div class="products"><img class="imageSetUp" src="../images/Images (1).svg"><h2 class=nameOfCoffee>Colombia Los
Naranjos</h2>
<div class="priceOfCoffee">9,00€</div>
<button class="addButton">Añadir</button>
</div>
<div class="products"><img class="imageSetUp" src="../images/Images2.svg"><h2 class=nameOfCoffee>Laos
Amanecer</h2>
<div class="priceOfCoffee">9,00€</div>
<button class="addButton">Añadir</button>
</div>
<div class="products"><img class="imageSetUp" src="../images/Images 3.svg">
<h2 class=nameOfCoffee>Etiopia Yrgacheff</h2>
<div class="priceOfCoffee">9,00€</div>
<button class="addButton">Añadir</button>
</div>
</section>
<!-- <a href="#" class="noveltyButton">Ver todos<img class="arrowSetup" src="./images/Icon (2).svg"></a> -->
<a href="shop.html" class="noveltyButton">Ver todos<img src="./images/Icon (2).svg"></a>
<!------------------------------------------ FAQS----------------->
<section class="faq">
<h2 style="color:#FFFFFF">Preguntas frecuentes</h2>
<!-- <div></div> -->
<div class="divider">
<button class="accordion">
<h2>¿Cómo hago el pedido?
</h2>
</button>
<div class="panel">
<div class="line"></div>
<p class="textexpand1"> Selecciona el café que desees probar y completa el proceso de compra. Si lo
prefieres, te
preguntaremos
cada cuánto quieres que te lo mandemos a casa y así nunca te quedarás sin café.</p>
</div>
</div>
<div class="divider">
<button class="accordion">
<h2>¿Por qué los precios son tan bajos?</h2>
</button>
<div class="panel">
<div class="line"></div>
<p class="textexpand1">
Viajamos constantemente para encontrar los mejores granos y a los agricultores más exigentes. Si
podemos
ofrecerte estos precios es porque tratamos directamente con los productores de café, sin
intermediarios. Así
obtenemos el mejor precio para ti y la persona que está detrás de los granos de café recibe el mayor
beneficio posible.</p>
</div>
</div>
</div>
<div class="divider">
<button class="accordion">
<h2>¿Es posible enviar café a mi oficina?<img src="./images/Icon(8).jpg" alt=""></h2>
</button>
</div>
<div class="resolveDoubts">
<a href="#" class="resolveDoubts">Resolvemos tus dudas</a>
</div>
</section>
<!----------------------- COFFE SHOP --------------->
<section class="cometous">
<div class="blockInfoCoffe" id="padding">
<h2 id="tryit">Pruébalo en nuestro coffee shop</h2>
<p id="ourshopinthemid"> Visita nuestra cafetería en el centro de la ciudad para probar los granos de café
antes de hacer tu
pedido y
llévate un descuento.</p>
<div id="reachus">
<a id="reachus" style="color:#3E3D3D"
href="https://www.google.es/maps/place/Gamma+Tech+School/@40.4373963,-3.6780706,17z/data=!3m2!4b1!5s0xd4228fdcb7e008d:0xc14eb6e97092bea0!4m6!3m5!1s0xd4229deaf9deea1:0xed04d2cdcbd84b03!8m2!3d40.4373922!4d-3.6754957!16s%2Fg%2F11t18d_y50?entry=ttu">Cómo
llegar<img src="./images/right arrow.png"></a>
</div>
</div>
<div class="cometous">
<img class="visitUs" id="cofehero" src="./images/Hero coffe.png" alt="installment">
</div>
</section>
<!-- https://www.youtube.com/watch?v=B3KBKX8mIHo -->
<!------------------------------- FORM --------------->
<section class="contactus">
<article class="contactInfo">
<h3 id="headerOfContactUs">Entra en contacto con nosotros</h3>
<p>Si tienes dudas, ponte en contacto con nosotros a través del formularios y te responderemos lo antes
posible.
</p>
<div>
<p>También puedes ponerte en contacto con nosotros en nuestra dirección o a través del teléfono de
la tienda</p>
<div>
<p>742 Evergreen Terrace </p>
<p>Springfield, OR 12345</p>
</div>
<div>
<p> +1(555)123-4567</p>
</div>
<div class="mail">
<p>support@example.com</p>
</div>
<div>
<p> ¿Buscas un trabajo?<a id="ourOffers" href="#">Ver nuestras ofertas</a></p>
</div>
</div>
</article>
<!-- class="form-article" -->
<form class="form">
<!-- class="separator" -->
<div class="nameForm">
<label for="nameForm">Nombre completo</label>
<input type="text" name="nameForm" id="nameForm" required>
</div>
<div class="email">
<label for="emailForm">Email</label>
<input type="email" name="emailForm" id="emailForm" required>
</div>
<div class="telephoneForm">
<label for="phoneForm">Teléfono</label>
<div class="input-phone">
<select name="numbersPhone" id="opt">
<option value="us">US</option>
<option value="es">ES</option>
<option value="gr">GR</option>
<option value="fr">FR</option>
<option value="it">IT</option>
<input type="number" name="numbersPhone" id="numbersPhone" placeholder="+1 (555) 987-6543"
required minlength="8" maxlength="11">
</select>
</div>
</div>
<div class="textArea">
<label for="textareaForm"></label>
<textarea name="textareaForm" id="textareaForm" cols="30" rows="10"
placeholder="¿En qué podemos ayudarte?" required></textarea>
</div>
<div class="checkTerms">
<input type="checkbox" name="checkForm" id="checkForm" value="acept">
<label for="checkForm"><a id="termsandConditions" href="#">Acepto la <span id="strong">Política de
Privacidad</span> y
los <span id="strong">Términos y condiciones.</span></a></label>
</div>
<button type="submit" id="buttonForm">Enviar</button>
</form>
</section>
<!------------------- FOOTER -------------------->
<footer class="firstPartOfFooter">
<div id="footer">
<div class="waysOfContact" id="identity">
<div>
<p class="logo" id="footerlogo">cafedealtura.com<img src="./images/Vector.png"></p>
</div>
<h3 id="wehelpyou">Te ayudamos en</h3>
<div class="waysOfContact">
<button class="contact" id="phone">
<div>
<p><img src="./images/Icon.png">+34 919 49 05 18</p>
</div>
</button>
<div></div>
<button class="contact" id="email">
<div>
<p><img src="./images/Icon (2).png">hola@cafedealtura.com</p>
</div>
</button>
</div>
</div>
<div class="directionsAndTerms">
<div class="directions">
<a href="#" class="logo">Tienda</a>
<a href="#" class="logo">Suscripción</a>
<a href="#" class="logo">Para empresas</a>
<a href="#" class="logo">Sobre nosotros</a>
<a href="#" class="logo">Contacto</a>
</div>
<div class="terms">
<a href="#" class="logo">Política de privacidad</a>
<a href="#" class="logo">Política de coockes</a>
<a href="#" class="logo">Términos y condiciones</a>
</div>
</div>
<div></div>
</div>
<div id="copyrightfooter">
<p>Todos los derechos reservados - Café de Altura SL - 2022</p>
</div>
</footer>
<script src="main.js" type="module"></script>
</body>
</html>