-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
343 lines (337 loc) · 13.6 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
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Biblioteca Triple Peaks</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="./vendor/normalize.css" />
<link rel="stylesheet" href="./styles/style.css" />
</head>
<body>
<!-- Envuelve todo el contenido de la página en un nuevo div con la clase page Recuerda agregar la etiqueta de cierre -->
<div class="page">
<header class="header">
<nav class="nav">
<img
src="./images/logo.svg"
alt="Logotipo de la Biblioteca Triple Peaks"
class="nav__logo"
/>
<!-- Se supone que poner enlaces de navegación en una lista es la mejor práctica para escribir el código semántico, ya que permite a los lectores de pantalla hacer una pausa entre cada enlace en lugar de leer todos los enlaces como una oración. -->
<ul class="nav__links">
<li>
<a class="nav__link" href="#staff">Los preferidos de nuestro staff</a>
</li>
<li>
<a class="nav__link" href="#events">Eventos</a>
</li>
<li>
<a class="nav__link" href="#membership">Conviértete en miembro</a>
</li>
<li>
<a class="nav__link" href="#footer">Contactos</a>
</li>
</ul>
</nav>
<div class="header__content">
<div>
<h1 class="header__title">
Bienvenidos a la biblioteca Triple Peaks
</h1>
<p class="header__description">
¡Nos complace abrir las puertas de nuestra biblioteca a todos! Ven
y amplía tus conocimientos sobre desarrollo, o simplemente ven a
trabajar o estudiar con nosotros. ¡Este es un lugar genial para
estudiantes!
</p>
</div>
<!-- -------------------------------------------------------------------- -->
<!-- No descomentar hasta la sección 2.3 de la etapa 1 del brief -->
<!-- -------------------------------------------------------------------- -->
<div>
<img
src="./images/inside_the_library.png"
alt="Ilustración 'Dentro de la biblioteca'"
class="header__image"
/>
</div>
</div>
<div class="header__footer">
<p class="header__address">Triple Peaks, 200 Success Avenue</p>
</div>
</header>
<main class="content">
<section class="staff" id="staff">
<!-- --------------------------------------------------------------- -->
<!-- No descomentar hasta la etapa final del proyecto. -->
<!-- --------------------------------------------------------------- -->
<h2 class="staff__title">Los preferidos de nuestro staff</h2>
<p class="staff__subtitle">Que nuestros lectores y lectoras aman</p>
<ul class="staff__cards">
<li class="card">
<div class="card__content">
<h3 class="card__title">Introducción a los algoritmos</h3>
<p class="card__text">
El nombre de este libro se explica por sí solo; ¡es una buena
Introducción a los algoritmos! Introducción a los algoritmos,
o CLRS, en referencia a los apellidos de los autores,
profundiza y abarca una serie de algoritmos a lo largo de
varios capítulos independientes.
</p>
<p class="card__footer">
Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest,
Clifford Stein
</p>
</div>
</li>
<li class="card">
<div class="card__content">
<h3 class="card__title">
La estructura e interpretación de los programas
computacionales (SICP)
</h3>
<p class="card__text">
Este es uno de los mejores libros para aprender los conceptos
básicos de la programación. Incluido por el MIT en uno de sus
cursos básicos de programación, SICP es un libro de
programación de carácter general que utiliza Scheme para
ilustrar diversos conceptos de programación.
</p>
<p class="card__footer">
Harold Abelson, Gerald Jay Sussman, Julie Sussman
</p>
</div>
</li>
<li class="card">
<div class="card__content">
<h3 class="card__title">
El programador limpio: un código de conducta para
programadores profesionales
</h3>
<p class="card__text">
Compilado por el experimentado ingeniero de software y autor
Robert C. Martin (también conocido como "Tío Bob"), este libro
abarca las técnicas y herramientas de la verdadera artesanía
de software. Explica cómo escribir código limpio y muestra
cómo cultivar la actitud de un programador experto y
profesional.
</p>
<p class="card__footer">Steve McConnell</p>
</div>
</li>
<li class="card">
<div class="card__content">
<h3 class="card__title">
Código completo: un manual práctico de construcción de
software
</h3>
<p class="card__text">
¿Te gustaría saber cómo escribir un buen código al margen de
la arquitectura del lenguaje de programación que hayas
elegido? Después, podrías leer Code Complete: A Practical
Handbook of Software Construction ("Código completo: un
práctico manual sobre creación de software"). Este aborda de
manera exhaustiva todo lo relacionado con la buena estructura
de código.
</p>
<p class="card__footer">Steve McConnell</p>
</div>
</li>
</ul>
</section>
<section class="events" id="events">
<div class="events__content">
<h2 class="events__heading">Próximos eventos:</h2>
<h3 class="events__title">
En honor de Joan Feynman: mujeres en la astrofísica
</h3>
<div class="event-info events__info-section">
<div class="event-info__item">
<img
src="./images/icon_calendar.svg"
alt="Calendar icon"
class="event-info__icon"
/>
<p class="event-info__text">Lunes 12 de enero</p>
</div>
<div class="event-info__item">
<img
src="./images/icon_pin.svg"
alt="Pin icon"
class="event-info__icon"
/>
<p class="event-info__text">
Sala de conferencias y virtual de la biblioteca Triple Peaks
</p>
</div>
</div>
<p class="events__description">
En este evento, en el que celebramos el nombre de nuestra biblioteca, nuestra
invitada nos llevará a través de un viaje para conocer a algunas de las mujeres
investigadoras más importantes en el mundo de la ciencia espacial. Es
fácil caer en la falsa idea de que este campo está principalmente
dominado por hombres, pero nuestra conferencia busca cambiar esa noción y
probar que no ha sido así desde, al menos, el siglo
XVII.
</p>
<a href="#" class="events__more">Más eventos →</a>
</div>
<div class="events__cover" id="events_cover">
<div class="event-info__item">
<img
src="./images/cafe.png"
alt="Coffee Library"
class="events__image"/>
</div>
<div
class="person person_name_feynman">
<p class="person__caption">Joan Feynman</p>
<img
src="./images/person_feynman.png"
alt="Joan Feynman"
class="person__image person__image_size_l"/>
</div>
<div
class="person person_name_tarter">
<p class="person__caption">Jill Tarter</p>
<img
src="./images/person_tarter.png"
alt="Jill Tarter"
class="person__image person__image_size_s"/>
</div>
<div
class="person person_name_burbidge">
<p class="person__caption">Margaret Burbiged</p>
<img
src="./images/person_burbidge.png"
alt="Margaret Burbiged"
class="person__image person__image_size_m"/>
</div>
<div
class="person person_name_cannon">
<img
src="./images/person_cannon.png"
alt="Annie Jump Cannon"
class="person__image person__image_size_m"/>
<p class="person__caption">Annie Jump Cannon</p>
</div>
<div
class="person person_name_mitchell">
<img
src="./images/person_mitchell.png"
alt="Maria Mitchell"
class="person__image person__image_size_s"/>
<p class="person__caption">Maria Mitchell</p>
</div>
</div>
<!-- Comienza a crear la composición aquí -->
</section>
<section class="membership" id="membership">
<h2 class="membership__title">¡Convertirse en miembro es muy fácil!</h2>
<ul class="membership__steps">
<li class="step">
<h3 class="step__title">
Paso 1
<img
src="./images/icon_step_forward.svg"
alt="icon forward"
class="step__icon"
/>
</h3>
<p class="step__description">
Completa el formulario de afiliación en línea o en persona.
</p>
</li>
<li class="step">
<h3 class="step__title">
Paso 2
<img
src="./images/icon_step_forward.svg"
alt="icon forward"
class="step__icon"
/>
</h3>
<p class="step__description">
Ven y recoge tu credencial de la biblioteca en la recepción.
</p>
</li>
<li class="step">
<h3 class="step__title">
Paso 3
<img
src="./images/icon_step_forward.svg"
alt="icon forward"
class="step__icon"
/>
</h3>
<p class="step__description">Firma el envés de la tarjeta.</p>
</li>
<li class="step">
<h3 class="step__title">
Paso 4
<img
src="./images/icon_step_finish.svg"
alt="icon finish"
class="step__icon"
/>
</h3>
<p class="step__description">
¡Disfruta de los increíbles beneficios de nuestra membresía!
</p>
</li>
</ul>
</section>
</main>
<!--FOOTER-->
<footer class="footer">
<div class="footer footer_columns">
<div class="footer__column">
<img
src="/images/logo_white.svg"
alt="Logo Blanco"
class="footer__logo"
/>
</div>
<div class="footer__column footer__column_content_hours">
<h3 class="footer__column-heading">Horario de apertura</h3>
<ul class="footer__list">
<li class="footer__list-item">
Lunes a Viernes: 9 a.m. - 8 p.m.
</li>
<li class="footer__list-item">
Sábados y domingos: 10 a.m. - 6 p.m.
</li>
</ul>
</div>
<div class="footer__column footer__column_content_social">
<h3 class="footer__column-heading">Redes sociales</h3>
<ul class="footer__list">
<li class="footer__list-item">
<a href="#" class="footer__column-link">
<img
src="/images/facebook_white.svg"
alt="Facebook logo"
class="footer__social-icon"
/>Facebook
</a>
</li>
<li class="footer__list-item">
<a href="#" class="footer__column-link">
<img
src="/images/instagram_white.svg"
alt="Instagram logo"
class="footer__social-icon"
/>Instagram
</a>
</li>
</ul>
</div>
</div>
<div class="footer__copyright">
<p >© 2024 Lia Rodriguez</p>
</div>
</footer>
</div>
</body>
</html>