-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
235 lines (234 loc) · 16.2 KB
/
index.html
File metadata and controls
235 lines (234 loc) · 16.2 KB
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
<!DOCTYPE html>
<html lang="es">
<head>
<!-- estandar de caracteres -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Nombre -->
<meta name="author" content="Eduardo Farias Concha">
<!-- titulo de la pestaña -->
<title>Viajes Chile</title>
<!-- CSS only Bootstrap v5.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Google Fonts -->
<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=Cabin:wght@400;600&display=swap" rel="stylesheet">
<!-- estilo css -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
<!-- Fontawesom v.6 -->
<script src="https://kit.fontawesome.com/7d4f10acf2.js" crossorigin="anonymous">
</script>
</head>
<body>
<!-- Barra de navegacion + carrusel de imagenes -->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="assets/img/viajes.svg" alt="logo" width="30" height="24" class="d-inline-block align-text-top">
Viajes Chile
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav ms-auto">
<li class="nav-item">
<a class="nav-link text-white" href="#inicio">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#quienessomos" data-toggle="tooltip" data-placement="right"
title="Este botón te dirige directamente a la sección">Quienes Somos</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#destacados" data-toggle="tooltip" data-placement="right"
title="Este botón te dirige directamente a la sección">Destacados</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#contacto" data-toggle="tooltip" data-placement="right"
title="Este botón te dirige directamente a la sección">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Fin Navbar-->
<!--Carrusel de imagenes-->
<div class="carrusel" id="inicio">
<div id="carouselViajesChile" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/carousel1.jpg" class="d-block w-100" alt="Imagen desierto de Atacama">
</div>
<div class="carousel-item">
<img src="assets/img/carousel2.jpg" class="d-block w-100" alt="Iamgen Rapa Nui">
</div>
<div class="carousel-item">
<img src="assets/img/carousel3.jpg" class="d-block w-100" alt="Imagen Pingüino">
</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>
</div>
<!--Fin carrusel-->
</header>
<!-- ¿Quienes somos? -->
<section>
<!-- Título de la sección -->
<div class="container" id="quienessomos">
<p class="h1 text-center text-white">¿Quienes somos?</p>
</div>
<!--Linea horizontal-->
<div class="container-fluid">
<hr class="pt-1">
</div>
<!-- Tres columnas con texto e iconos de fontawesom-->
<div class="container">
<div class="row">
<div class="col">
<div class="card text-white bg-dark">
<div class="card-header text-white text-center" style="background-color: #00A5BB;">
<i class="fa-solid fa-plane"></i>
</div>
<div class="card-body" style="background-color: #000000;">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam rerum nisi unde vel fuga natus libero voluptates laborum odio quisquam facere, repudiandae repellat. Nostrum eligendi, architecto modi doloribus velit obcaecati magni quibusdam voluptate ex rerum perferendis dignissimos incidunt corporis iusto quaerat? Consequatur animi, voluptatum ratione voluptatem id beatae odit dignissimos nemo ullam explicabo nesciunt adipisci! Laborum quaerat nisi qui saepe atque ab voluptas excepturi mollitia aut quisquam cum reiciendis maiores voluptatibus harum eaque dolorem, eveniet pariatur animi iure. Explicabo distinctio assumenda veniam voluptates natus voluptatum esse error nam, iure quia obcaecati libero repellat laborum quod temporibus aut rem quam fugit ad alias ut vitae vel. Molestiae totam velit repellat, maxime eveniet ducimus delectus veritatis tempora impedit expedita temporibus exercitationem in beatae natus necessitatibus perferendis labore sequi porro obcaecati aliquam veniam provident. Accusantium autem esse quo quibusdam asperiores soluta, maiores sed, accusamus similique atque magnam! Necessitatibus dignissimos rerum aut non nesciunt.</p>
</div>
</div>
</div>
<div class="col">
<div class="card text-white bg-dark card-border-radius:0">
<div class="card-body" style="background-color: #000000;">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam rerum nisi unde vel fuga natus libero voluptates laborum odio quisquam facere, repudiandae repellat. Nostrum eligendi, architecto modi doloribus velit obcaecati magni quibusdam voluptate ex rerum perferendis dignissimos incidunt corporis iusto quaerat? Consequatur animi, voluptatum ratione voluptatem id beatae odit dignissimos nemo ullam explicabo nesciunt adipisci! Laborum quaerat nisi qui saepe atque ab voluptas excepturi mollitia aut quisquam cum reiciendis maiores voluptatibus harum eaque dolorem, eveniet pariatur animi iure. Explicabo distinctio assumenda veniam voluptates natus voluptatum esse error nam, iure quia obcaecati libero repellat laborum quod temporibus aut rem quam fugit ad alias ut vitae vel. Molestiae totam velit repellat, maxime eveniet ducimus delectus veritatis tempora impedit expedita temporibus exercitationem in beatae natus necessitatibus perferendis labore sequi porro obcaecati aliquam veniam provident. Accusantium autem esse quo quibusdam asperiores soluta, maiores sed, accusamus similique atque magnam! Necessitatibus dignissimos rerum aut non nesciunt.</p>
</div>
<div class="card-footer text-white text-center" style="background-color: #00A5BB;">
<i class="fa-solid fa-mountain"></i>
</div>
</div>
</div>
<div class="col">
<div class="card text-white bg-dark">
<div class="card-header text-white text-center" style="background-color: #00A5BB;">
<i class="fa-solid fa-route"></i>
</div>
<div class="card-body" style="background-color: #000000;">
<p class="card-text text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam rerum nisi unde vel fuga natus libero voluptates laborum odio quisquam facere, repudiandae repellat. Nostrum eligendi, architecto modi doloribus velit obcaecati magni quibusdam voluptate ex rerum perferendis dignissimos incidunt corporis iusto quaerat? Consequatur animi, voluptatum ratione voluptatem id beatae odit dignissimos nemo ullam explicabo nesciunt adipisci! Laborum quaerat nisi qui saepe atque ab voluptas excepturi mollitia aut quisquam cum reiciendis maiores voluptatibus harum eaque dolorem, eveniet pariatur animi iure. Explicabo distinctio assumenda veniam voluptates natus voluptatum esse error nam, iure quia obcaecati libero repellat laborum quod temporibus aut rem quam fugit ad alias ut vitae vel. Molestiae totam velit repellat, maxime eveniet ducimus delectus veritatis tempora impedit expedita temporibus exercitationem in beatae natus necessitatibus perferendis labore sequi porro obcaecati aliquam veniam provident. Accusantium autem esse quo quibusdam asperiores soluta, maiores sed, accusamus similique atque magnam! Necessitatibus dignissimos rerum aut non nesciunt.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Fin de las tres columnas -->
</section>
<!-- Destacados (cards) -->
<main>
<!-- Título del principal -->
<div class="container mt-5" id="destacados">
<p class="h1 text-center text-white">Destacados</p>
</div>
<!--Linea horizontal-->
<div class="container-fluid">
<hr class="pt-1">
</div>
<!-- Inicio de las cards-->
<div class="container">
<div class="row">
<div class="col-12 col-lg-3 mb-3">
<div class="card text-white" style="width: 18rem; height: 100%; background-color: #00A5BB;">
<img src="assets/img/card1.jpg" height="200" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam fugiat sequi adipisci molestiae iste quas provident, porro, eligendi possimus enim velit praesentium veniam temporibus tempore maxime alias. Accusantium distinctio in doloribus adipisci? Voluptate, illo praesentium laudantium esse voluptatem assumenda sit commodi rem voluptas ipsum quas amet, quibusdam in voluptatibus non.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card text-white" style="width: 18rem; height: 100%; background-color: #00A5BB;">
<img src="assets/img/card2.jpg" height="200" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi, recusandae id. Vero libero repudiandae similique laboriosam at labore ullam, quod perspiciatis alias quae praesentium magnam possimus animi, laborum voluptatem minima, enim accusantium eveniet odio? Perspiciatis, consequatur, iure esse perferendis voluptatibus incidunt optio iste quam sequi nesciunt facilis ad nihil dolorum.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card text-white" style="width: 18rem; height: 100%; background-color: #00A5BB;">
<img src="assets/img/card3.jpg" height="200" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate fuga beatae, ipsam laudantium aperiam ullam blanditiis ut exercitationem voluptatem? Voluptates amet laudantium quos est beatae aperiam voluptate illum, perspiciatis omnis enim vel repellat officiis, dignissimos laboriosam, consectetur quisquam eos excepturi officia? Beatae ipsa perspiciatis ab dolore sunt atque recusandae blanditiis.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card text-white" style="width: 18rem; height: 100%; background-color: #00A5BB;">
<img src="assets/img/card4.jpg" height="200" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident exercitationem ad praesentium fugit ducimus soluta minus debitis nam, iste fuga mollitia at deserunt quo numquam eveniet? Perspiciatis quisquam quis culpa saepe, fugiat esse quia cupiditate a repellat accusantium aut officiis dolores voluptas! Itaque modi autem porro non voluptas eligendi adipisci.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Fin de las cards-->
</main>
<!-- Formulario de contacto -->
<article>
<div class="container" id="contacto">
<p class="h1 text-center text-white">Contacto</p>
</div>
<!--Linea horizontal-->
<div class="container-fluid">
<hr class="pt-1">
</div>
<div class="container my-5">
<!-- Código Typeform-->
<div data-tf-widget="UUr4xJP7" data-tf-iframe-props="title=Formulario de contacto" data-tf-medium="snippet" style="width:100%;height:500px;"></div><script src="//embed.typeform.com/next/embed.js"></script>
</div>
</article>
<!-- Barra inferior + iconos fontawesom -->
<footer>
<div class="container text-white py-1 text-center">
<div class="row container m-auto">
<div class="col-md-4">
<h3 class="text-uppercase mt-2" data-toggle="tooltip" data-placement="right"
title="Sigue nuestras redes sociales"> Viajes Chile </h3>
</div>
<div class="col-md-4 ms-auto">
<a href="https://github.com/" target="_blank">
<i class="fab fa-github-square fa-2x mx-1 mt-2" style="color: white;"></i>
</a>
<a href="https://linkedin.com/" target="_blank">
<i class="fab fa-linkedin fa-2x mx-1" style="color: white;"></i>
</a>
<a href="https://twitter.com/" target="_blank">
<i class="fab fa-twitter-square fa-2x mx-1" style="color: white;"></i>
</a>
<a href="https://facebook.com/" target="_blank">
<i class="fab fa-facebook-square fa-2x mx-1" style="color: white;"></i>
</a>
</div>
</div>
</div>
</footer>
</body>
</html>