-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (136 loc) · 8.73 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
<!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>Bookflip | Inicio</title>
<!-- FAVICON -->
<link rel="shortcut icon" href="./IMG/bookflip_favicon.svg" type="image/x-icon">
<!-- DESCRIPTION -->
<meta name="description" content="Página enfocada a las personas que gusten de sentarse a leer un buen libro y compartir sus opiniones con otros. ">
<!-- BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="CSS/estilo.css">
</head>
<body>
<header>
<h1>Bienvenido a Bookflip</h1>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="./index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link " aria-current="page" href="./HTML/contacto.html">Contacto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./HTML/misLibros.html">Mis libros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./HTML/noticias.html">Noticias</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./HTML/resennas.html">Reseñas</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./IMG/slideWh.jpg" class="d-block w-100" alt="Warhammer 40.000">
<div class="carousel-caption d-none d-md-block">
<h5>Warhammer 40K</h5>
<p>Libro de literatura fantástica.</p>
</div>
</div>
<div class="carousel-item">
<img src="./IMG/slideAnillos.jpg" class="d-block w-100" alt="El anillo único sobre un mapa de la tierra media ">
<div class="carousel-caption d-none d-md-block">
<h5>El señor de los anillos</h5>
<p>Aventuras fantásticas en la tierra media.</p>
</div>
</div>
<div class="carousel-item">
<img src="./IMG/SlideHP.jpg" class="d-block w-100" alt="Carta de Hogwarts">
<div class="carousel-caption d-none d-md-block">
<h5>Harry Potter</h5>
<p>Mundos llenos de magia que huelen a infancia.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<h2 class="titulo">Página Principal</h2>
<p>Bienvenidos a Bookflip, una plataforma en línea para compartir, opinar y valorar libros. Somos un grupo de amantes de la lectura que queremos crear una comunidad de lectores apasionados que compartan sus pensamientos y opiniones sobre sus libros favoritos.
En Bookflip, puedes crear un perfil y agregar tus libros favoritos a tu estantería virtual. Califica y escribe reseñas de los libros que has leído para ayudar a otros usuarios a encontrar nuevas lecturas. También puedes conectarte con otros lectores, unirte a grupos de lectura y discutir temas específicos.
En nuestra plataforma, puedes explorar una amplia variedad de géneros y autores, y encontrar nuevos libros basados en tus preferencias de lectura. También ofrecemos recomendaciones personalizadas basadas en tus lecturas previas.
En Bookflip, creemos que la lectura es una actividad enriquecedora y emocionante que debe ser compartida con otros. Únete a nuestra comunidad en línea y comienza a compartir, opinar y valorar libros hoy mismo. ¡Te esperamos en Bookflip!</p>
<h2>Últimos libros </h2>
<div class="scroll-box">
<div class="scroll-box__content">
<div class="scroll-box__item"><img src="./IMG/portada-1.jpg" alt="Libro de Sherlock Holmes"></div>
<div class="scroll-box__item"><img src="./IMG/Papillon.jpg" alt="Libro Papillon"></div>
<div class="scroll-box__item"><img src="./IMG/La-fundacion.jpg" alt="Libro La fundación"> </div>
<div class="scroll-box__item"><img src="./IMG/Cronicas-marcianas.jpg" alt="Libro Cronicas marcianas"> </div>
<div class="scroll-box__item"><img src="./IMG/HarryPotter.jpg" alt="Libro Harry Potter"></div>
<div class="scroll-box__item"><img src="./IMG/Horus.jpg" alt="Libro de Warhammer"></div>
<div class="scroll-box__item"><img src="./IMG//portada-4.jpg" alt="Libro de Sherlock Holmes"></div>
<div class="scroll-box__item"><img src="./IMG/clubPelea.jpg" alt="Libro Club de la Pelea"></div>
<div class="scroll-box__item"><img src="./IMG/portada-6.jpg" alt="Libro de Sherlock Holmes"></div>
<div class="scroll-box__item"><img src="./IMG/portada-3.jpg" alt="Libro de Sherlock Holmes"></div>
</div>
</div>
<div class="text-success">
<hr>
</div>
<h2>Categorias</h2>
<div class="scroll-box">
<div class="scroll-box__content">
<div class="scroll-box__item"><img src="./IMG/iloveimg-resized/atrapan-desde-principio.jpg" alt="Categoria de libros que atrapan desde la primera página"></div>
<div class="scroll-box__item"><img src="./IMG/iloveimg-resized/clasicos.jpg" alt="Colecciones de clasicos"></div>
<div class="scroll-box__item"><img src="./IMG/iloveimg-resized/libros-cortos.jpg" alt="Libros cortos"></div>
<div class="scroll-box__item"><img src="./IMG/iloveimg-resized/Libros-de-aventura.jpg" alt="Libros de aventuras"></div>
<div class="scroll-box__item"><img src="./IMG/iloveimg-resized/libros-de-misterio.jpg" alt="Libros de misterio"></div>
<div class="scroll-box__item"><img src="./IMG/iloveimg-resized/libros-de-suspenso.jpg" alt="Libros de suspenso"></div>
<div class="scroll-box__item"><img src="./IMG/iloveimg-resized/Libros-de-Terror-500x300.jpg" alt="Libros de terror, para no leer de noche"></div>
<div class="scroll-box__item"><img src="./IMG/iloveimg-resized/temas-varios.jpg" alt="Libros sobre temas varios"></div>
</div>
</div>
<div class="text-success">
<hr>
</div>
</main>
<footer>
<p>Sitio creado por Diego Bustos</p>
<!-- icono whatsapp -->
<div class="social">
<a href="https://api.whatsapp.com/send?phone=+569XXXXXXXX">
<img class="logoW" src="./IMG/logo-whatsapp.png" alt="Logo de whatsapp" ></a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>