-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
235 lines (213 loc) · 11.3 KB
/
index.html
File metadata and controls
235 lines (213 loc) · 11.3 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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portal de arte y cultura - Explora las obras más famosas de la historia">
<meta name="keywords" content="arte, pinturas, esculturas, museos, historia del arte, obras famosas">
<meta name="author" content="Luis Calderon / Vecordia">
<title class="titulo-home">Vecordia</title>
<link rel="icon" type="image/svg+xml" href="assets/LogoS.svg">
<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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="css/estilos.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="./assets/LogoS.svg" alt="Logo Vecordia" class="logo-marca" width="40" height="40">
Vecordia
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="obras.html">Obras Famosas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="historia.html">Historia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacto.html">Contacto</a>
</li>
<li class="nav-item">
<button id="botonModoOscuro" class="btn btn-outline-primary ms-2">
<i class="bi bi-moon"></i>
</button>
</li>
</ul>
</div>
</div>
</nav>
<section class="hero-principal vh-100 d-flex align-items-center">
<div class="container text-center text-white">
<h1 class="display-1 fw-bold mb-4">Vecordia</h1>
<p class="lead fs-2 mb-4">Un viaje a través del arte contemporáneo</p>
<a href="obras.html" class="btn btn-light btn-lg">Explorar Obras</a>
</div>
</section>
<section class="py-5">
<div class="container">
<h2 class="text-center mb-5">Mini-Galería</h2>
<div id="galeriaCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row g-2">
<div class="col-md-3">
<img src="assets/Kanagawa.jpg" class="d-block w-100 rounded" alt="Obra 1">
</div>
<div class="col-md-3">
<img src="assets/StarryNight.jpg" class="d-block w-100 rounded" alt="Obra 2">
</div>
<div class="col-md-3">
<img src="assets/PaisajeV.jpg" class="d-block w-100 rounded" alt="Obra 3">
</div>
<div class="col-md-3">
<img src="assets/Socrates.jpg" class="d-block w-100 rounded" alt="Obra 4">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row g-2">
<div class="col-md-3">
<img src="assets/LasMeninas.jpg" class="d-block w-100 rounded" alt="Obra 5">
</div>
<div class="col-md-3">
<img src="assets/Sanson.jpg" class="d-block w-100 rounded" alt="Obra 6">
</div>
<div class="col-md-3">
<img src="assets/Shibaraku.jpg" class="d-block w-100 rounded" alt="Obra 7">
</div>
<div class="col-md-3">
<img src="assets/Paraiso.jpg" class="d-block w-100 rounded" alt="Obra 8">
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#galeriaCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Anterior</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#galeriaCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Siguiente</span>
</button>
</div>
</div>
</section>
<section class="quienes-somos py-5">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-md-6">
<div class="image-container">
<img src="assets/Diogenes.jpg"
class="img-fluid rounded shadow-lg"
alt="Quiénes Somos">
</div>
</div>
<div class="col-md-6">
<div class="content-container">
<h2 class="mb-4 fw-bold">Quiénes Somos</h2>
<p class="lead mb-4">Somos un equipo apasionado por el arte y su historia, dedicados a hacer que las obras más importantes del mundo sean accesibles para todos.</p>
<p class="text-muted">Nuestro equipo está formado por historiadores del arte, curadores y entusiastas que trabajan juntos para crear una experiencia única de aprendizaje y apreciación artística.</p>
</div>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-2">
<img src="assets/Friends.jpg" class="img-fluid rounded shadow" alt="Nuestro Objetivo">
</div>
<div class="col-md-6 order-md-1">
<h2 class="mb-4">Nuestro Objetivo</h2>
<p class="lead">Buscamos acercar el arte a todas las personas, rompiendo las barreras entre los grandes maestros y el público general.</p>
<p>Nuestra misión es crear un espacio donde el arte sea accesible, comprensible y emocionante para todos, independientemente de su nivel de conocimiento previo.</p>
<div class="mt-4">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-check-circle-fill text-primary me-2"></i>
<span>Educación artística accesible</span>
</div>
<div class="d-flex align-items-center mb-3">
<i class="bi bi-check-circle-fill text-primary me-2"></i>
<span>Preservación del patrimonio cultural</span>
</div>
<div class="d-flex align-items-center">
<i class="bi bi-check-circle-fill text-primary me-2"></i>
<span>Difusión del arte universal</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<h2 class="text-center mb-5">¿Que encontraras aqui?</h2>
<div class="row align-items-center mb-5">
<div class="col-md-6">
<img src="assets/MonaLisa.jpg" alt="La Mona Lisa" class="img-fluid rounded shadow" width="300" height="200" marginLeft="2rem" >
</div>
<div class="col-md-6">
<h2>La Mona Lisa</h2>
<p class="texto-destacado">La obra maestra de Leonardo da Vinci, también conocida como La Gioconda, es quizás el retrato más famoso de la historia del arte.</p>
<p>Pintada a principios del siglo XVI, esta obra ha cautivado a millones de personas con su misteriosa sonrisa y su técnica innovadora del sfumato.</p>
<a href="obras.html#mona-lisa" class="btn btn-primary">Leer más</a>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6 order-md-2">
<img src="assets/StarryNight.jpg" alt="La Noche Estrellada" class="img-fluid rounded shadow" width="500" height="400">
</div>
<div class="col-md-6 order-md-1">
<h2>La Noche Estrellada</h2>
<p class="texto-destacado">Vincent van Gogh creó esta obra maestra en 1889, representando una vista nocturna desde la ventana de su asilo.</p>
<p>Los remolinos, las estrellas llameantes y la luna creciente se combinan en un paisaje nocturno que transmite una profunda emoción y turbulencia.</p>
<a href="obras.html#noche-estrellada" class="btn btn-primary">Leer más</a>
</div>
</div>
<div class="text-center text-red mt-5">
<a href="obras.html" class="btn btn-light btn-lg">Explorar Obras</a>
</div>
<footer class="pie-pagina mt-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Vecordia</h5>
<p>Explorando la belleza del arte universal</p>
</div>
<div class="col-md-4">
<h5>Enlaces Rápidos</h5>
<ul class="list-unstyled">
<li><a href="index.html">Inicio</a></li>
<li><a href="obras.html">Obras Famosas</a></li>
<li><a href="historia.html">Historia</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Síguenos</h5>
<div class="iconos-sociales">
<a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a>
<a href="https://x.com/home"><i class="bi bi-twitter"></i></a>
<a href="https://www.instagram.com/"><i class="bi bi-instagram"></i></a>
<a href="https://es.pinterest.com/"><i class="bi bi-pinterest"></i></a>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script src="js/funciones.js"></script>
</body>
</html>