-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
267 lines (240 loc) · 9.24 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
<!DOCTYPE html>
<html lang="en">
<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>Tailwind Responsive</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body class="text-gray-900 bg-gray-50 p-0 dark:bg-gray-900">
<main class="lg:relative lg:max-w-7xl">
<div
class="h-64 sm:h-72 md:h-96 lg:w-1/2 lg:absolute lg:right-0 lg:h-full"
>
<img
src="img/hero.jpg"
alt="StartWars"
class="w-full h-full object-cover"
/>
</div>
<div
class="text-center pt-8 px-4 lg:w-1/2 lg:py-48 lg:text-left lg:max-w-lg"
>
<h1
class="text-4xl text-gray-900 font-extrabold tracking-tight dark:text-gray-100 sm:text-5xl md:text-6xl"
>
Mira tus películas
<span class="block text-blue-700">y series favoritas</span>
</h1>
<p
class="text-lg text-gray-500 mt-3 max-w-md mx-auto dark:text-gray-400 sm:text-xl md:mt-5 md:max-w-3xl"
>
Reproduce en streaming todas las películas y series en tu móvil,
tableta, ordenador y TV.
</p>
<div class="mt-10">
<a href="#" class="btn"> Empezar </a>
</div>
</div>
</main>
<ul
class="mt-28 px-5 space-y-12 mx-auto sm:max-w-2xl md:mt-36 lg:mt-32 lg:max-w-5xl lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-12 lg:space-y-0"
>
<li class="px-3 py-5 rounded-md border bg-blue-50 lg:h-72">
<div
class="space-y-4 sm:grid sm:grid-cols-3 sm:gap-6 sm:space-y-0 lg:gap-8 lg:h-full"
>
<div class="aspect-w-3 aspect-h-2 sm:aspect-w-3 sm:aspect-h-4">
<img
class="object-cover object-bottom shadow-lg rounded-lg sm:object-center"
src="img/black-widow.jpg"
alt="Black Widow"
/>
</div>
<div class="space-y-4 sm:col-span-2 sm:relative sm:h-full">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="dark:text-white">Black Widow</h3>
<p class="text-blue-600">Película</p>
</div>
<p class="text-base text-gray-500 line-clamp-5">
Al nacer, la Viuda Negra, también conocida como Natasha Romanova,
se entrega a la KGB para convertirse en su agente definitivo.
Cuando la URSS se separa, el gobierno intenta matarla.
</p>
<button class="btn px-3 py-1 sm:absolute sm:bottom-0">Ver</button>
</div>
</div>
</li>
<li class="px-3 py-5 rounded-md border bg-blue-50 lg:h-72">
<div
class="space-y-4 sm:grid sm:grid-cols-3 sm:gap-6 sm:space-y-0 lg:gap-8 lg:h-full"
>
<div class="aspect-w-3 aspect-h-2 sm:aspect-w-3 sm:aspect-h-4">
<img
class="object-cover shadow-lg rounded-lg"
src="img/dune.jpg"
alt="Dune"
/>
</div>
<div class="space-y-4 sm:col-span-2 sm:relative sm:h-full">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="dark:text-white">Dune</h3>
<p class="text-blue-600">Película</p>
</div>
<p class="text-base text-gray-500 line-clamp-5">
Arrakis, también denominado "Dune", se ha convertido en el planeta
más importante del universo. A su alrededor comienza una
gigantesca lucha por el poder que culmina en una guerra
interestelar.
</p>
<button class="btn px-3 py-1 sm:absolute sm:bottom-0">Ver</button>
</div>
</div>
</li>
<li class="px-3 py-5 rounded-md border bg-blue-50 lg:h-72">
<div
class="space-y-4 sm:grid sm:grid-cols-3 sm:gap-6 sm:space-y-0 lg:gap-8 lg:h-full"
>
<div class="aspect-w-3 aspect-h-2 sm:aspect-w-3 sm:aspect-h-4">
<img
class="object-cover object-bottom shadow-lg rounded-lg sm:object-center"
src="img/loki.jpg"
alt="Loki"
/>
</div>
<div class="space-y-4 sm:col-span-2 sm:relative sm:h-full">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="dark:text-white">Loki</h3>
<p class="text-blue-600">Serie</p>
</div>
<p class="text-base text-gray-500 line-clamp-5">
Loki, el Dios de las Mentiras, se aleja de la sombra de su hermano
para embarcarse en una aventura que se desarrolla tras los
acontecimientos de “Vengadores: Endgame”.
</p>
<button class="btn px-3 py-1 sm:absolute sm:bottom-0">Ver</button>
</div>
</div>
</li>
<li class="px-3 py-5 rounded-md border bg-blue-50 lg:h-72">
<div
class="space-y-4 sm:grid sm:grid-cols-3 sm:gap-6 sm:space-y-0 lg:gap-8 lg:h-full"
>
<div class="aspect-w-3 aspect-h-2 sm:aspect-w-3 sm:aspect-h-4">
<img
class="object-cover object-bottom shadow-lg rounded-lg sm:object-center"
src="img/mare-of-easttown.jpg"
alt="Mare of Easttown"
/>
</div>
<div class="space-y-4 sm:col-span-2 sm:relative sm:h-full">
<div class="text-lg leading-6 font-medium space-y-1">
<h3 class="dark:text-white">Mare of Easttown</h3>
<p class="text-blue-600">Serie</p>
</div>
<p class="text-base text-gray-500 line-clamp-5">
Una detective de un pequeño pueblo de Pensilvania investiga un
asesinato mientras intenta evitar que su vida se derrumbe. Una
detective de un pequeño pueblo de Pensilvania investiga un
asesinato mientras intenta evitar que su vida se derrumbe.
</p>
<button class="btn px-3 py-1 sm:absolute sm:bottom-0">Ver</button>
</div>
</div>
</li>
</ul>
<div
class="px-5 py-20 mx-auto prose prose-blue dark:prose-dark lg:prose-lg md:px-0 lg:prose-lg lg:mt-24"
>
<hr class="w-20 mx-auto" />
<h2>¿Qué es esto?</h2>
<p class="lead">
Esto es un servicio de streaming que ofrece una amplia variedad de
<em>series</em>, <em>películas</em>, <em>títulos de anime</em>,
<em>documentales</em> y otros contenidos premiados en miles de
dispositivos conectados a internet.
</p>
<p>
Puedes ver todo el contenido que quieras, cuando quieras y sin un solo
anuncio por una tarifa mensual reducida. ¡Siempre hay algo nuevo que
descubrir, y cada semana se añaden nuevas series y películas!
</p>
<figure>
<img src="img/tv-and-remote.jpg" alt="TV & Remote" />
<figcaption>
Incluso hay mandos a distancia que tienen un botón para acceder
directamente a nuestra aplicación.
</figcaption>
</figure>
<h2>¿Dónde lo puedo ver?</h2>
<p>
Disfruta donde quieras y cuando quieras en un número ilimitado de
dispositivos. Inicia sesión con tu cuenta para disfrutar al instante de
todo el contenido de desde tu ordenador personal o en cualquier
dispositivo conectado a internet que ofrezca la aplicación, entre ellos:
</p>
<ul>
<li>Smart TVs</li>
<li>Móviles</li>
<li>Tablets</li>
<li>Reproductores multimedia de streaming</li>
<li>Consolas de juegos</li>
</ul>
<h2>¿Cuánto cuesta?</h2>
<p>Ofrecemos dos niveles de precios:</p>
<table>
<thead>
<tr>
<th></th>
<th>Standard</th>
<th>Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Precio</td>
<td><strong>5 €</strong></td>
<td><strong>10 €</strong></td>
</tr>
<tr>
<td>Dispositivos simultáneos</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>Calidad de video</td>
<td>HD</td>
<td>Ultra HD</td>
</tr>
</tbody>
</table>
<h2>¿Cómo cancelo?</h2>
<p>
Somos flexibles. Sin contratos liosos ni compromisos. Puedes cancelar
fácilmente tu cuenta en línea con tan solo dos clics. Sin cargos por
cancelación: activa o cancela tu cuenta en cualquier momento.
</p>
<h2>Tengo algunas preguntas</h2>
<p>
Escríbenos a <a href="mailto:[email protected]">[email protected]</a> si
tienes algún problema.
</p>
<h2>Registro</h2>
<form action="#" method="POST" class="grid grid-cols-1 gap-y-5">
<label for="email" class="sr-only">Email</label>
<input class="input" name="email" type="email" placeholder="Email" />
<label for="password" class="sr-only">Contraseña</label>
<input
class="input"
name="password"
type="password"
placeholder="Contraseña"
/>
<div>
<button class="btn">Enviar</button>
</div>
</form>
</div>
</body>
</html>