-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (154 loc) · 7.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Galeria</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
<link rel="stylesheet" href="./style/style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col" style="text-align: center">
<img src="./image/digital-camera-7775707_640.jpg" alt="logo" class="logo" />
</div>
<div class="col-10">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-4">
<h2>Enlaces de interes</h2>
<ul>
<li>
<a href="https://cnnespanol.cnn.com/category/arte/">Novedades</a>
</li>
<li>
<a href="https://www.crehana.com/blog/estilo-vida/mejores-pintores-del-mundo/">Artistas</a>
</li>
<li>
<a href="https://www.elledecor.com/es/arte/a39595095/cuadros-famosos-historia-obras-arte/">Obras
recomendadas</a>
</li>
<li>
<a href="https://pixabay.com/es/images/search/arte/">Imagenes</a>
</li>
<li>
<a href="https://www.semana.com/noticias/eventos-de-arte-en-colombia/">Eventos</a>
</li>
</ul>
</div>
<div class="col">
<h1>¿Que es una galeria?</h1>
<p class="parrafo1">
Lorem ipsum dolor sit amet,
<strong>consectetur adipiscing elit.</strong>Maecenas eu ante eget
ex lacinia consequat. Aenean magna nisi, maximus eu lacus et,
fringilla fermentum odio. <i>Class aptent taciti sociosqu</i>ad
litora torquent per conubia nostra, per inceptos himenaeos. Nunc sit
amet turpis ultricies
<small> lectus pretium aliquet sit amet ut risus.</small> Nulla eget
nisl fringilla risus pellentesque interdum nec sed odio. Sed quis
fringilla nulla. Nunc sollicitudin, eros blandit cursus venenatis,
justo justo laoreet metus, in rhoncus purus lectus a lectus. Etiam
pharetra lectus aliquet eleifend blandit. Pellentesque tempor leo
nec nunc laoreet mollis. Praesent ante massa, gravida in lacinia
non, pellentesque sit amet ipsum.
</p>
<p class="parrafo2">
Pellentesque pharetra sit amet turpis ac cursus. Curabitur in
accumsan quam. Nulla at vehicula velit. Vivamus vitae nisi nec ante
ultricies euismod at non ante. Sed pulvinar pharetra quam sit amet
hendrerit. Nunc malesuada aliquet fermentum. Etiam at volutpat nibh.
Donec tincidunt id magna sit amet venenatis. Quisque id velit
congue, tincidunt turpis et, tempus enim.
</p>
<p class="parrafo3">
Nulla nibh massa, tristique at diam eget, maximus tincidunt enim.
Praesent euismod nunc eu odio faucibus tempus. Mauris a pretium
massa, in congue est. Praesent et enim vel lorem consequat semper et
eget mauris. Donec ac convallis dui, ac convallis nulla. In sit amet
pulvinar tortor. Nunc neque ligula, suscipit bibendum ex in, blandit
hendrerit justo. Morbi lobortis a turpis sed tempor. Phasellus
pharetra lacus a interdum varius. Quisque ultrices turpis sed lacus
tincidunt, a mattis dui convallis. Donec sed vestibulum odio. Fusce
tristique lobortis arcu, at dictum massa ultricies non.
</p>
<div style="text-align: center">
<img src="./image/eye-4453129_1280.jpg" alt="imagen1" /><br />
<br />
<img src="./image/mosaic-200864_1280.jpg" alt="imagen2" />
</div>
<br />
<table border="1">
<tr>
<td>Obra</td>
<td>Autor</td>
<td>Cantidad</td>
</tr>
<tr>
<td>La Mona Lisa</td>
<td>Leonardo Da Vinci</td>
<td>3</td>
</tr>
<tr>
<td>Tener los pies sobre la tierra</td>
<td>Diego Velázquez</td>
<td>6</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<div class="footer-section">
<ul>
<li>Hans Alejandro</li>
<li>[email protected]</li>
<li>3203764931</li>
</ul>
</div>
<div class="footer-section">
<ul>
<li><a href="https://www.facebook.com/">Facebook</a></li>
<li><a href="https://www.instagram.com/">Instagram</a></li>
</ul>
</div>
<div class="footer-section">
<h1>Formulario de contacto</h1>
<form action="#" method="post">
<label for="input1">Nombre:</label>
<input type="text" id="input1" name="input1" required /><br />
<label for="input2">Telefono:</label>
<input type="text" id="input2" name="input2" required /><br />
<label for="input3">Correo electronico:</label>
<input type="email" id="input3" name="input3" required /><br />
<input type="button" value="Mostrar Mensaje" onclick="mostrarAlerta()" />
</form>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
</html>