forked from jmasllorens/bookWorms
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (156 loc) · 8.57 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>bookworms</title>
<link rel="stylesheet" href="./styles/reset.css" />
<link rel="stylesheet" href="./styles/style.css" />
</head>
<body>
<header class="header-principal">
<section class="header">
<section class="header-logo">
<img class ="logotipo" src="img/iconos/logotipoCorr.png" alt="logotipo bookworms" onclick="cambiarPantallaPrincipal()">
<p class="razon-social">bookworms</p>
</section>
<hr class="vl-header">
<section class="header-carrito">
<img class="carrito" src="img/iconos/carritoCompra.png" alt="carrito compra">
</section>
</section>
<hr class="hr-header">
</header>
<main class="main-principal" style="display: block;">
<section>
<section class="main-presentacion">
<article class="slogan">
<h2 class="primeraParteSlogan">leer es resistir</h2>
<h2>resistamos juntos</h2>
</article>
<hr class="vl-separationMain">
<article class="cita-imagen">
<p class="cita">“Un lector vive mil vidas antes de morir; el que no lee solo vive una.”</p>
<p class="autor">George R. R. Martin</p>
<hr class="hr-citaCorazon">
<img class="libroCorazon" src="img/iconos/libroCorazon.png" alt="Corazon encima de un Libro">
</article>
</section>
<hr class="hr-redesSociales">
<section class="main-contacto">
<section class="redesSociales">
<a href="https://www.instagram.com" target="_blank"><img class="instagram" src="img/iconos/instagram.png" alt="Logo Instagram"></a>
<a href="https://www.facebook.com" target="_blank"><img class="facebook" src="img/iconos/facebook.png" alt="Logo Facebook"></a>
</section>
<section>
<a href="mailto:[email protected]"><p>[email protected]</p></a>
</section>
</section>
</section>
<section class="main-contacto"></section>
</section>
</main>
<main class="main-catalogo" style="display: none;">
<section>
<section class="libro" onclick="cambiarPantallaDescripcion()">
<img class="portada-libro" src="img/portadas/diarioDelFinDelMundo.jpg" alt="portada del libro diario del fin del mundo">
<h2 class="titulos-libros">Diario del fin del mundo</h2>
<p class="autores-libros">Mario Mendoza</p>
<p class="precios-libros">12.00 €</p>
<hr class="separador-libros">
</section>
<section class="libro">
<img class="portada-libro" src="img/portadas/elFrancotirador.jpg" alt="portada del libro el francotirador">
<h2 class="titulos-libros">El francotirador</h2>
<p class="autores-libros">Chris Kyle</p>
<p class="precios-libros">18.00 €</p>
<hr class="separador-libros">
</section>
<section class="libro">
<img class="portada-libro" src="img/portadas/elOrigenPerdido.jpg" alt="portada del libro el origen perdido">
<h2 class="titulos-libros">El origen perdido</h2>
<p class="autores-libros">Matilde Asensi</p>
<p class="precios-libros">18.99 €</p>
<hr class="separador-libros">
</section>
<section class="libro">
<img class="portada-libro" src="img/portadas/juegoDeTronos.jpg" alt="portada del libro juego de tronos">
<h2 class="titulos-libros">Juego de tronos I</h2>
<p class="autores-libros">George R. R. Martin</p>
<p class="precios-libros">15.00 €</p>
<hr class="separador-libros">
</section>
<section class="libro">
<img class="portada-libro" src="img/portadas/molloy.jpg" alt="portada del libro molloy">
<h2 class="titulos-libros">Molloy</h2>
<p class="autores-libros">Samuel Beckett</p>
<p class="precios-libros ultimo-precio">12.30 €</p>
</section>
</section>
</section>
</main>
<main class="main-descripcion-libro" style="display: none;">
<section class="specificaciones-libro">
<section class="foto-seccion">
<img class="foto-libro" src="img/portadas/diarioDelFinDelMundo.jpg" alt="Diario del fin del mundo">
</section>
<section class="datos-seccion">
<article class="datos-articulo">
<h2 class="titulo-descripcion-libro">Diario del fin del mundo</h2>
<h3 class="autor-descripcion">Mario Mendoza</h3>
<article class="puntacion-precio">
<img class="estrella" src="img/iconos/star.png" alt="icono de una estrella">
<p class="puntacion">8</p>
<p class="precio">18.99 €</p>
</article>
<button class="genero">Narrativa Histórica</button>
</article>
<article class="otros-datos">
<ul class="otros-datos-list1">
<li>Año:</li>
<li>Editorial:</li>
<li>Idioma:</li>
<li>Páginas:</li>
<li>País:</li>
</ul>
<ul>
<li>2018</li>
<li>Planeta</li>
<li>Español</li>
<li>496</li>
<li>Colombia</li>
</ul>
</article>
</section>
</section>
<h4 class="titulo-sinopsis">Sinopsis</h4>
<section class="resumen-libro">
<p>
El escritor Mario Mendoza recibe un mensaje de un viejo amigo de universidad: Daniel Klein. Entre ambos evocarán una juventud impetuosa en la cual compartieron el amor de una misma mujer:
Carmen Andreu. La inusual vida de Carmen, su adicción a las drogas, su estadía en una secta religiosa, su nomadismo como fotógrafa de paisajes desérticos, sus secretos trabajos como modelo de películas porno, serán tanto para Daniel como para Mario muy difíciles de asimilar. En algún momento de la narración, Daniel le pide a Mario que lo ayude a ir tras las huellas de su padre, un alemán que ha vivido camuflado en Bogotá intentando no llamar la atención. Las investigaciones los conducirán a ambos a un pasado siniestro e infernal:
torturas, genocidios, rituales religiosos de traslación de niveles de energía <span class="puntos" style="display: inline">...</span><span class="mas" style="display: none">, macabros experimentos en medio de la guerra.
Finalmente, el detective Frank Molina, que viene de novelas como Lady Masacre y La melancolía de los feos, encontrará, después de seguirlo durante varios días por el centro de Bogotá, en un callejón escondido, a esta especie de vampiro perverso y criminal.
Unas anotaciones apocalípticas en una libreta cierran esta novela que pretende descifrar nuestra época y anticipar el temible tiempo que se nos avecina.</span>
</p>
<p class="leer-mas" onclick="leerMas ()" style="display: block;">Leer mas</p>
<p class="leer-menos" onclick="leerMenos ()" style="display: none;">Leer menos</p>
</section>
<section class= "compra">
<hr class="separador-libros">
<button class="add-item">Añadir al carrito</button>
</section>
</main>
<footer class="footer">
<hr class="separador-footer">
<section class="seccion-footer">
<img class="icono-footer" src="img/iconos/casita.png" onclick="cambiarPantallaPrincipal()" alt="Símbolo de Home">
<img class="icono-footer" src="img/iconos/libros.png" onclick="cambiarPantallaCatalogo()" alt="Símbolo de Catálogo">
</section>
</footer>
<script src="js/script.js"></script>
<script src="js/leerMasMenos.js"></script>
</body>
<script src="./js/script.js"></script>
</body>
</html>