-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
181 lines (135 loc) · 8.77 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- icons -->
<script src="https://unpkg.com/feather-icons"></script>
<!-- Css -->
<link rel="stylesheet" href="css/style.css">
<title>La Casita del libro</title>
</head>
<body>
<!-- Image and text -->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">La Casita del libro</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbar-nav ml-auto">
<li class="nav-item m-auto">
<a class="nav-link" href="#bookSearchSection">Sección 1</a>
</li>
<li class="nav-item m-auto">
<a class="nav-link" href="#bookSection">Sección 2</a>
</li>
<a href="form.html" class="ml-lg-4 m-auto"><i class="text-secondary" data-feather="user"></i></a>
</ul>
</div>
</div>
</nav>
<div id="bookSearchSection" class="jumbotron jumbotron-fluid mb-2 d-flex align-items-center">
<div class="container text-center w-100">
<h1 class="display-4 mb-3">Encuentra tu libro favorito</h1>
<p class="lead mb-4">Nuestro buscador le ayudará a encontrar el libro que necesita</p>
<form id="form-search" onsubmit="return validateSearch()">
<div class="input-group mb-3 w-50 m-auto">
<input id="form-search__search-input" type="text" class="form-control" placeholder="Título, autor, categoría..." aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="button-addon2"><i width="15" height="15" data-feather="search"></i></button>
</div>
<div id="is-invalid-message__search" class="invalid-feedback"></div>
</form>
</div>
</div>
</header>
<!-- Sección de los libros -->
<section id="bookWrapper" class="d-flex">
<!-- sidebar para filtro de libros -->
<div id="sidebarBook">
<div id="sidebarBook__content">
<div class="m-3">
<h4>Filtrar por...</h4>
<h5 class="mt-4">Autor</h5>
<button class="btn btn-secondary">George Orwell</button>
<button class="btn btn-secondary">Miguel de cervantes</button>
<button class="btn btn-secondary">J.K Rowling</button>
<h5 class="mt-4">Género</h5>
<button class="btn btn-info">Ciencia ficción</button>
<button class="btn btn-info">Literatura fantástica</button>
<button class="btn btn-info">Novela de Aventuras</button>
</div>
</div>
</div>
<!-- contenido sección de libros -->
<div id="bookSection" class="container-fluid">
<div class="d-flex align-items-center mt-4">
<button id="filterButton" class="btn btn-secondary"> <i width="20" heigth="20" data-feather="filter"></i></button>
<h1 class="font-weight-normal m-auto">Librería</h1>
</div>
<div class="row mt-5 mb-5">
<div class="book col-12 col-md-6 col-xl-4 d-flex flex-column flex-lg-row">
<div id="bookImg" class="m-3">
<img src="img/george-orwell-1984.webp" class="img-fluid" width="200" height="300" alt="1984 libro escrito por Geroge Orwell">
</div>
<div id="bookInfo" class="m-3">
<h3>1984</h3>
<h5 class="font-weight-normal">George Orwell</h5>
<h6 class="font-weight-lighter">En el año 1984 Londres es una ciudad lúgubre en la que la Policía del Pensamiento controla de forma asfixiante la vida de los ciudadanos. Winston Smith es un peón de este engranaje perverso y su cometido es reescribir la historia para adaptarla a lo que el Partido considera la versión oficial de los hechos. Hasta que decide replantearse la verdad del sistema que los gobierna y somete.</h6>
<h6 class="font-weight-normal">Ciencia ficción social</h6>
</div>
</div>
<div class="book col-12 col-md-6 col-xl-4 d-flex flex-column flex-lg-row">
<div id="bookImg" class="m-3">
<img src="img/j-k-rowling-harry-potter-y-la-piedra-filosofal.webp" class="img-fluid" width="200" height="300" alt="1984 libro escrito por Geroge Orwell">
</div>
<div id="bookInfo" class="m-3">
<h3>Harry potter y la piedra filosofal</h3>
<h5 class="font-weight-normal">J.K Rowling</h5>
<h6 class="font-weight-lighter">Con las manos temblorosas, Harry le dio la vuelta al sobre y vio un sello de lacre púrpura con un escudo de armas: un león, un águila, un tejón y una serpiente, que rodeaban una gran letra H.»
Harry Potter nunca ha oído hablar de Hogwarts hasta que empiezan a caer cartas en el felpudo del número 4 de Privet Drive. Llevan la dirección escrita con tinta...</h6>
<h6 class="font-weight-normal">Literatura fantástica</h6>
</div>
</div>
<div class="book col-12 col-md-6 col-xl-4 d-flex flex-column flex-lg-row">
<div id="bookImg" class="m-3">
<img src="img/miguel-de-cervantes-don-quijote-de-la-mancha.webp" class="img-fluid" width="200" height="300" alt="1984 libro escrito por Geroge Orwell">
</div>
<div id="bookInfo" class="m-3">
<h3>Don Quijote de la mancha</h3>
<h5 class="font-weight-normal">Miguel de Cervantes</h5>
<h6 class="font-weight-lighter">Don Quijote de la Mancha es una de las obras cumbre de la literatura universal; obtuvo un gran éxito desde su publicación, se ha reeditado constantemente y se ha traducido a todas las lenguas de cultura del mundo. La influencia del Quijote ha sido decisiva en el género novelesco y todos los grandes novelistas del XIX lo tuvieron en cuenta, por....</h6>
<h6 class="font-weight-normal">Novela de aventuras</h6>
</div>
</div>
</div>
</div>
</section>
<!-- toogle sidebar -->
<script>
let sidebarBookId = document.getElementById("sidebarBook");
let filterButtonId = document.getElementById("filterButton");
filterButtonId.addEventListener('click', (el)=>{
sidebarBookId.classList.toggle("toggled");
});
</script>
<!-- app js -->
<script src="js/searchValidation.js"></script>
<!-- <script src="js/app.js"></script> -->
<!-- icons -->
<script>
feather.replace();
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>