-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
199 lines (191 loc) · 11.4 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción del negocio propietario del sitio web">
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
<title>Nombre del local</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row mb-5">
<header class="col-md-12 p-0">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top mt-n1">
<a class="navbar-brand ml-5 text-dark" href="#"><img src="assets/img/Logo.png" alt="logotype"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-md-flex justify-content-md-end" id="navbarContent">
<ul class="nav navbar-nav">
<li class="nav-item mr-3 active">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="#products">Servicios</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="#about">Nosotros</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="#contact">Contacto</a>
</li>
<li class="nav-item d-none d-lg-block">
<form class="form-inline mx-xl-5 mx-2 my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar..." aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Aceptar</button>
</form>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
<div class="container bg-light mt-5">
<div id="carousel" class="carousel slide mt-5" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/slide1.jpg" class="d-block w-100" alt="té con limón">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-4">Primer Slide</h5>
<p>Contenido relacionado a la imagen</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/slide2.jpg" class="d-block w-100" alt="desayuno">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-4">Segundo Slide</h5>
<p>Contenido relacionado a la imagen</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/img/slide3.jpg" class="d-block w-100" alt="torta de queso">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-4">Tercer Slide</h5>
<p>Contenido relacionado a la imagen</p>
</div>
</div>
</div>
</div>
<div id="products" class="row col-md-12 m-auto">
<h2 class="display-4 w-100 mt-5 mb-4 d-flex justify-content-center gray font-weight-bold">¿Qué ofrecemos?</h2>
<div class="d-flex flex-wrap flex-md-row flex-column align-content-center">
<div class="card shadow border-0 text-center text-white m-3">
<img src="assets/img/1.jpg" class="card-img" alt="desayuno">
<div class="card-img-overlay">
<h3 class="card-title">Desayunos</h3>
<p class="card-text d-none d-lg-block">¡Inicia tu día con nutritivos desayunos para llenarte de energías!</p>
</div>
</div>
<div class="card shadow border-0 text-center text-white m-3">
<img src="assets/img/2.jpg" class="card-img" alt="bebida">
<div class="card-img-overlay">
<h3 class="card-title">Bebidas</h3>
<p class="card-text d-none d-lg-block">¿Frío o Caliente? ¡Escoge la bebida ideal para acompañar tus pedidos!</p>
</div>
</div>
<div class="card shadow border-0 text-center text-white m-3">
<img src="assets/img/3.jpg" class="card-img" alt="postre">
<div class="card-img-overlay">
<h3 class="card-title">Postres</h3>
<p class="card-text d-none d-lg-block">¡Disfruta de nuestra amplia variedad de postres que endulzarán hasta a los más empalagosos!</p>
</div>
</div>
<div class="card shadow border-0 text-center text-white m-3">
<img src="assets/img/4.jpg" class="card-img" alt="regalo">
<div class="card-img-overlay">
<h3 class="card-title">¿Falta de tiempo?</h3>
<p class="card-text d-none d-lg-block">¡No te preocupes! Pide tu orden para llevar y deléitate en el momento perfecto</p>
</div>
</div>
</div>
</div>
<div class="jumbotron mt-4">
<div class="border border-light p-5">
<h3 class="display-4 text-white text-center">¡Aprovecha nuestras ofertas!</h3>
<p class="lead text-white text-center">Sabemos que tu satisfacción es lo primero, por eso no sólo mejoramos nuestros servicios, sino también nuestros precios</p>
<p class="lead text-white text-center">¡No dudes en utilizar los descuentos que tenemos para ofrecerte!
</p>
<div class="d-flex justify-content-center">
<a class="btn border-success text-success mt-4 btn-lg d-flex justify-content-center w-50 display-5" href="#" role="button">Revisar ofertas</a>
</div>
</div>
</div>
<div class="d-flex mt-5 justify-content-lg-between justify-content-center flex-wrap" id="about">
<div class=" d-flex flex-column p-lg-3 px-3 mx-5 mx-lg-0 justify-content-lg-center">
<p class="display-5 mb-4 ">Sobre nosotros...</p>
<h3 class="display-4 display-lg-3 font-weight-bold mb-3 gray">Nuestra <br class="d-none d-lg-block">misión</h3>
</div>
<div class="box d-flex flex-column p-lg-3 px-2 mx-2">
<img class="about " src="assets/img/about1.jpg" alt="pizza">
<p class="mt-4 ">Nuestra misión es brindarte la mejor calidad para que no solo te alimentes, sino que disfrutes cada bocado.</p>
</div>
<div class="box d-flex flex-column p-lg-3 px-2 mx-2">
<p class="mb-4 ">También hemos sido clientes. Por ello sabemos el servicio que deseas y mereces…</p>
<img class="about" src="assets/img/about2.jpg" alt="camarero">
</div>
</div>
<div class="d-flex justify-content-lg-between justify-content-center flex-wrap p-1 mt-5" id="contact">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3968.187368910313!2d-62.537613185232225!3d5.9689135456764655!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8dc6be717030a879%3A0x73210e8bf60fdfe7!2sSalto%20Angel!5e0!3m2!1ses!2sve!4v1595806005149!5m2!1ses!2sve" width="350" height="375" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<div class="d-flex flex-column justify-content-center p-xl-3 p-0">
<h3 class="local gray d-flex justify-content-center w-100 font-weight-bold mt-5 mt-xl-0">Nuestro local</h3>
<div class="d-flex flex-wrap flex-row flex-lg-column justify-content-center">
<div class="p-2">
<h5 class="gray font-weight-bold">Dirección</h5>
<p class="text-muted">dirección del local...</p>
</div>
<div class="p-2">
<h5 class="gray font-weight-bold">Teléfono</h5>
<p class="text-muted">+58 0000000</p>
</div>
<div class="p-2">
<h5 class="gray font-weight-bold">Horarios</h5>
<p class="text-muted">LUN-VIE 09:00 – 19:00</p>
<p class="text-muted">SÁB-DOM 10:00 – 14:00</p>
</div>
</div>
</div>
<div class="p-3">
<img src="assets/img/contact.jpg" alt="local">
</div>
</div>
</div>
<div class="container-fluid p-0">
<footer class="d-flex flex-column justify-content-center bg-dark text-light px-5 pt-5" id="footer">
<div class="d-flex flex-lg-row flex-column">
<p class="display-4 d-flex flex-lg-column justify-content-center">Gracias por preferirnos...</p>
<div class="d-flex flex-column m-auto" id="social">
<p>¡No olvides seguirnos para mantenerte al corriente de nuestras ofertas!</p>
<div class="d-flex flex-row justify-content-around">
<a href="#">
<img class="icon rounded-circle " src="assets/img/facebook.svg" alt="facebook">
</a>
<a href="#">
<img class="icon rounded-circle " src="assets/img/instagram.svg" alt="instagram">
</a>
<a href="#">
<img class="icon" src="assets/img/whatsapp.svg" alt="whatsapp">
</a>
<a href="#">
<img class="icon" src="assets/img/twitter.svg" alt="twitter">
</a>
</div>
</div>
</div>
<p class="d-flex justify-content-center align-content-end mt-4 py-4 border-top ">© Javier Boscán | Negocio ficticio</p>
</footer>
</div>
</body>
</html>