-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
233 lines (218 loc) · 12.5 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
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="icon" href="img/descarga.png" type="image/png" />
</head>
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><img src="img/descarga.png" class="w-50"></li>
<li><a href="#" class="nav-link px-2 text-secondary">Inicio</a></li>
<li><a href="#" class="nav-link px-2 text-white">El Pingüino</a></li>
<li><a href="#" class="nav-link px-2 text-white">Preguntas frecuentes</a></li>
<li><a href="#" class="nav-link px-2 text-white">Sobre nosotros</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Buscar..." aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Iniciar sesion</button>
<button type="button" class="btn btn-warning">Registrarse</button>
</div>
</div>
</div>
</header>
<main>
<h1 class="visually-hidden">Features examples</h1>
<div class="container px-4 py-5" id="custom-cards">
<h2 class="pb-2 border-bottom">Tipos de pingüinos</h2>
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> <img src="img/DM-BuG3XUAEr-qc.jpg" alt="">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold text-center">El pingüino de Ilerna</h3>
<ul class="d-flex list-unstyled mt-auto">
<li class="me-auto">
<i class="bi bi-pin-angle-fill"></i>
</li>
<li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"></use></svg>
<small>Ilerna</small>
</li>
<li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"></use></svg>
<small>no sé de cuando es</small>
</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> <img src="img/Penguin_King_scan.webp" alt="">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold text-center">Pingüino falso</h3>
<ul class="d-flex list-unstyled mt-auto">
<li class="me-auto">
<i class="bi bi-pin-angle-fill"></i>
</li>
<li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"></use></svg>
<small>Mario bros: la pelicula</small>
</li>
<li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"></use></svg>
<small>hace ná</small>
</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1"> <img src="img/Tuxie.webp" alt="">
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">THE FUCKING REAL PINGÜINO</h3>
<ul class="d-flex list-unstyled mt-auto">
<li class="me-auto">
<i class="bi bi-pin-angle-fill"></i>
</li>
<li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"></use></svg>
<small>Super mario 64</small>
</li>
<li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"></use></svg>
<small>22y y pico</small>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2 class="pb-2 border-bottom">Menciones especiales</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col"><h3 class="text-center">Pengu: el plastilinas </h3>
<div class="card shadow-sm"> <img src="img/pengu.jpg" width="100%" height="225">
<div class="card-body">
<p class="card-text">El puto pengu, una serie en el que los personajes son pingüinos y están hechos de plastilina, flipa tú.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col"><h3 class="text-center">Kowalski: el mandao </h3>
<div class="card shadow-sm">
<img src="img/Kowalski03.webp" width="100%" height="225" >
<div class="card-body">
<p class="card-text">Kowalski es un personaje de la serie de dibujos animados "Los pingüinos de Madagascar", que es un spin-off de la película "Madagascar". Kowalski es un pingüino inteligente, valiente y algo torpe que forma parte de un grupo de pingüinos que viven en el zoológico de Central Park en Nueva York.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col"><h3 class="text-center">Skipper: el jefe </h3>
<div class="card shadow-sm">
<img src="img/penguin-skipper-kowalski-madagascar-dreamworks-animation-penguin.jpg" alt="" width="100%" height="225">
<div class="card-body">
<p class="card-text">Skipper es otro personaje importante en la serie de dibujos animados "Los pingüinos de Madagascar". Es el líder del grupo de pingüinos y es conocido por su actitud valiente, decidida y militar.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col"> <h3 class="text-center">Rico: el yihadista </h3>
<div class="card shadow-sm">
<img src="img/images_rico.jpeg" width="100%" height="225">
<div class="card-body">
<p class="card-text">Rico es otro miembro del grupo de pingüinos en la serie de dibujos animados "Los pingüinos de Madagascar". Es conocido por ser el experto en demoliciones y por su naturaleza excéntrica.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col"> <h3 class="text-center">Cabo: el tonto </h3>
<div class="card shadow-sm">
<img src="img/cabo.jpeg" width="100%" height="225">
<div class="card-body">
<p class="card-text">Cabo es otro miembro del grupo de pingüinos en la serie de dibujos animados "Los pingüinos de Madagascar". Es conocido por ser el más joven y el más inocente del equipo. El tonto del grupo que todas la tias le tiene cariño porque es "tierno"</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col"> <h3 class="text-center">Wheezy: el que nadie recuerda pero yo lo pongo para que quede bien la web </h3>
<div class="card shadow-sm">
<img src="img/Wheezy_Toy_Story.webp" width="100%" height="225">
<div class="card-body">
<p class="card-text">
Weezy es un personaje ficticio en la película de animación "Toy Story 2", producida por Pixar Animation Studios. Es un pingüino de juguete de peluche que se encuentra en la habitación de Andy, el dueño de los juguetes principales de la película. Lo he metido para rellenar</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Inicio</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">El Pingüino</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Preguntas frecuentes</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Sobre nosotros</a></li>
</ul>
<p class="text-center text-body-secondary">© 2023 Ilerna, Manuel Soto Romero</p>
</footer>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
</body>
</html>