-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
209 lines (206 loc) · 11.1 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
<!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>Netflix Website Clone</title>
<link rel="stylesheet" href="./css/style.css"><!-- Aplico css externo -->
<link rel="shortcut icon" type="image/jpg" href="img/netflix-flavicon.png" />
<meta name="keywords" content="html,css,clon netflix" />
<meta name="description" content="Clon de la página principal de Netflix España hecho con HTML y CSS para la asignatura de Lenguajes de Marcas del IES Fernando Wirtz" />
<meta name="author" content="Cristina Correa" />
<meta name="generator" content="VSCode" />
<meta name="theme-color" content="#000" />
<meta name="google" content="nositelinkssearchbox" />
<meta name="google" content="notranslate" />
<meta name="robots" content="index, nofollow" />
<meta property="og:title" content="Clon de Netflix España con HTML y CSS">
<meta property="og:description" content="Clon de la página principal de Netflix España hecho con HTML y CSS para la asignatura de Lenguajes de Marcas del IES Fernando Wirtz">
</head>
<body>
<!-- -------------------------HEADER ----------------------------------- -->
<div class="header"> <!-- Creamos la cabecera en donde van los primeros botones y el mensaje de bienvenida -->
<nav>
<img src="./img/logo.png" alt="NetflixLogo" class="logo">
<div>
<button class="idioma">Español<img src="img/down-icon.png"></button>
<a href="./cuenta.html">
<button>Iniciar sesión</button>
</a>
</div>
</nav>
<div class="contenido-headder">
<h1>Todas las películas y series que desees, y mucho más.</h1>
<h3>Disfruta donde quieras. Cancela cuando quieras.</h3>
<p>¿Quieres ver algo ya? Escribe tu dirección de correo para crear una suscripción a Netflix o reactivarla.</p>
<form class="entrada-mail">
<input type="email" placeholder="Dirección de correo" required>
<button type="submit">Empezar</button>
</form>
</div>
</div>
<!-- --------------------------ELEMENTOS ------------------------------------ -->
<div class="elementos">
<div class="fila">
<div class="columna-texto">
<h2>Disfruta de Netflix en tu TV.</h2>
<p>Smart TV, Playstation, Xbox, Chromecast, Apple TV, reproductores Blu-ray y muchos más.</p>
</div>
<div class="columna-imagen">
<img src="./img/index/elemento1.png" alt="imagen1">
</div>
</div>
</div>
<div class="elementos">
<div class="fila">
<div class="columna-imagen">
<img src="./img/index/elemento2.png" alt="imagen2">
</div>
<div class="columna-texto">
<h2>Disfruta en todas partes.</h2>
<p>Reproduce en streaming todas las películas y series en tu móvil, tableta, ordenador y TV sin pagar más.</p>
</div>
</div>
</div>
<div class="elementos">
<div class="fila">
<div class="columna-texto">
<h2>Crea perfiles infantiles.</h2>
<p>Deja que los niños vivan aventuras con sus personajes favoritos en un espacio diseñado exclusivamente para ellos, gratis con tu suscripción.</p>
</div>
<div class="columna-imagen">
<img src="./img/index/elemento3.png" alt="imagen3">
</div>
</div>
</div>
<div class="elementos">
<div class="fila">
<div class="columna-imagen">
<img src="./img/index/elemento4.png" alt="imagen4">
</div>
<div class="columna-texto">
<h2>Descárgate tus series favoritas para verlas sin conexión.</h2>
<p>Disponible en todos los planes menos en el Básico con anuncios.</p>
</div>
</div>
</div>
<!-- ------------------------------INFORMACION---------------------------------------- -->
<div class="faq">
<h2 id="faqs">Preguntas frecuentes</h2>
<ul class="acordeon">
<li>
<!-- Ahora vamos a crear un botón de tipo radio que se llama acordeón, tendrá el mismo nombre para
los siete postes de información para que si vemos la información de una pregunta, las otras se oculten
pero tendrán un id diferente para diferenciarlas -->
<input type="radio" name="acordeon" id="primera">
<label for="primera">¿Qué es Netflix?</label>
<div class="contenido">
<p>Netflix es un servicio de streaming que ofrece una amplia variedad de series, películas, títulos de anime, documentales
y otros contenidos premiados en miles de dispositivos conectados a internet.
<br><br>
Puedes ver todo lo que quieras, cuando quieras, por una tarifa mensual reducida. ¡Siempre hay algo nuevo que descubrir,
y cada semana se añaden nuevas series y películas!</p>
</div>
</li>
<li>
<input type="radio" name="acordeon" id="segunda">
<label for="segunda">¿Cuánto cuesta Netflix?</label>
<div class="contenido">
<p>Disfruta de Netflix en tu smartphone, tableta, Smart TV, ordenador o dispositivo de streaming, todo por una tarifa
mensual fija. Planes desde 5,49 € a 17,99 € al mes. Sin cargos adicionales ni contratos.</p>
</div>
</li>
<li>
<input type="radio" name="acordeon" id="tercera">
<label for="tercera">¿Cuál es la diferencia de Básico con anuncios?</label>
<div class="contenido">
<p>Básico con anuncios es una manera excelente de disfrutar de series y películas a un precio más bajo. Puedes ver tus
títulos favoritos en cualquier dispositivo con algunas pausas publicitarias. Este plan no permite descargas y algunas
series y películas no estarán disponibles debido a las restricciones de licencias. También hay ciertas restricciones
relacionadas con los dispositivos y la ubicación.</p>
</div>
</li>
<li>
<input type="radio" name="acordeon" id="cuarta">
<label for="cuarta">¿Dónde puedo ver Netflix?</label>
<div class="contenido">
<p>Disfruta donde quieras y cuando quieras. Inicia sesión con tu cuenta de Netflix para disfrutar al instante de todo el
contenido de netflix.com desde tu ordenador personal o en cualquier dispositivo conectado a internet que ofrezca la
aplicación de Netflix, entre ellos, smart TV, smartphones, tabletas, reproductores multimedia de streaming y consolas de
juegos.
<br><br>
También puedes descargar tus series favoritas con la aplicación de iOS, Android o Windows 10. Utiliza las descargas para
ver títulos dondequiera que vayas y cuando no dispongas de conexión a internet. Netflix siempre te acompaña.</p>
</div>
</li>
<li>
<input type="radio" name="acordeon" id="quinta">
<label for="quinta">¿Cómo cancelo?</label>
<div class="contenido">
<p>Netflix es flexible. 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>
</div>
</li>
<li>
<input type="radio" name="acordeon" id="sexta">
<label for="sexta">¿Qué puedo ver en Netflix?</label>
<div class="contenido">
<p>Netflix dispone de una amplia biblioteca de originales de Netflix galardonados, títulos de anime, series de TV,
documentales, largometrajes y otros contenidos. Ve todo el contenido que quieras, cuando quieras.</p>
</div>
</li>
<li>
<input type="radio" name="acordeon" id="septima">
<label for="septima">¿Es Netflix bueno para los niños?¿Qué es Netflix?</label>
<div class="contenido">
<p>La experiencia infantil de Netflix se incluye en la suscripción para que los padres tengan el control mientras los niños
disfrutan de series y películas familiares en su propio espacio.
<br><br>
Los perfiles infantiles incluyen controles parentales protegidos por PIN que te permiten restringir la calificación por
edades del contenido que pueden ver los niños y bloquear determinados títulos que no quieras que vean.</p>
</div>
</li>
</ul>
<small>¿Quieres ver algo ya? Escribe tu dirección de correo para crear una suscripción a Netflix o reactivarla.</small>
<form class="entrada-mail">
<input type="email" placeholder="Dirección de correo" required>
<button type="submit">Empezar</button>
</form>
</div>
<!-- ------------------------------------FOOTER------------------------------------------------------ -->
<div class="footer">
<h2>¿Preguntas? Llama al 900-759-106</h2>
<div class="fila">
<div class="columna">
<a href="#faqs">Preguntas frecuentes</a>
<a href="#">Inversores</a>
<a href="#">Formas de ver</a>
<a href="/info-corporativa.html">Informacion corporativa</a>
<a href="/avisos-legales.html">Avisos legales</a>
</div>
<div class="columna">
<a href="#">Centro de ayuda</a>
<a href="#">Empleo</a>
<a href="/terminos-de-uso.html">Términos de uso</a>
<a href="mailto:help@netflix.es">Contáctanos</a>
<a href="#">Solo en Netflix</a>
</div>
<div class="columna">
<a href="/cuenta.html">Cuenta</a>
<a href="#">Canjear tarjetas regalo</a>
<a href="/privacidad.html">Privacidad</a>
<a href="https://fast.com/es/">Prueba de velocidad</a>
</div>
<div class="columna">
<a href="#">Zona de prensa</a>
<a href="#">Comprar tarjetas regalo</a>
<a href="#">Preferencias de cookies</a>
<a href="#">Garantía legal</a>
</div>
</div>
<button class="idioma">Español<img src="img/down-icon.png"></button>
<p class="texto-copyright">Netflix España</p>
</div>
</body>
</html>