-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (217 loc) · 13.3 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cac-Movies</title>
<!-- La descripción de nuestra página para Google -->
<meta name="description" content="Películas, series ilimitadas y mucho más le presenta una selección de los contenidos multimedia más importantes de la actualidad. ">
<!-- Para el SEO de Google u otros buscadores, le indico a Google que entre al index y siga los enlaces-->
<meta name="robots" content="index, follow">
<!-- Para el color de la barra del navegador en la Pc o en móviles, con la relación "theme-color" y el atributo content genero el color que quiero.-->
<meta name="theme-color" content="#B80000">
<!-- OPEN GRAPH:
Un conjunto de etiquetas que creó Facebook para que cuando compartimos contenido de nuestra página en una red social se vea correctamente:
Hay etiquetas para Meta, Twitter, etc. Para cotejar una URL ver: https://www.opengraph.xyz -->
<meta property="og:title" content="Cac-Movies - Películas, series y mucho más.">
<meta property="og:description" content="Películas, series ilimitadas y mucho más le presenta una selección de los contenidos multimedia más importantes de la actualidad.">
<meta property="og:image" content="./img/Oppenheimer.jpg">
<meta property="og:image:alt" content="Una fotografía de la película Oppenheimer.">
<!-- Nota: Para ver más, ingresar a "The Open Graph protocol", es importante compartir y renderizar correctamente en distintas plataformas nuestra página. -->
<!-- SEO -->
<!-- Para enlazar a un recurso externo alternativo a la página -->
<link rel="alternate" href="#/en" hreflang="en-GB">
<!-- Para que el navegador detecte cuál es la página principal entre dos páginas duplicadas. -->
<link rel="canonical" href="#">
<!-- Favicon: -->
<link rel="Cac-Movies icon" href="./static/img/favicon.ico" type="image/x-icon">
<!-- Con la etiqueta link y la relación "icon" dentro del atributo rel, podemos establecer el favicon.ico para el logo de la pestaña. -->
<!-- Google Fonts: -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:wght@200..1000&display=swap" rel="stylesheet">
<!-- Agregar Fontawesome: -->
<script src="https://kit.fontawesome.com/f7fb471b65.js" crossorigin="anonymous"></script>
<!--Enlazo el script con un archivo CSS externo:-->
<link rel="stylesheet" href="./static/css/style.css">
</head>
<body>
<header class="header"> <!--Indico la cabecera, donde contengo el menú de navegación.-->
<nav> <!--Este elemento define un conjunto de enlaces de navegación,
sirve para hacer un menú de navegación con distintos enlaces.-->
<div id="logo">
<h1><!-- La etiqueta para definir el texto después del logo.
Esta etiqueta h1 es un elemento en bloque, usa todo el ancho de la página.-->
<!-- El logo de fontawesome: -->
<i class="fas fa-yin-yang fa-pulse"></i>
<span>Cac-Movies 🎥</span>
</h1>
</div>
<ul type="square" class="nav-links">
<!-- Una lista de ítems desordenados.
El atributo type="square" es para que la lista no posea círculos y esté ordenada con cuadrados-->
<li><a href="#popular">Tendencias</a></li>
<li>
<a href="./register.html">Registrarse</a>
<!--La etiqueta a, de anchor ("ancor" o "ancla"), es para crear enlaces.
En este caso, un enlace interno a una ruta relativa a un archivo dentro del proyecto.
Para hacer esto, dentro del href escribir "./" y, a continuación, la ubicación y el nombbre del archivo del enlace en nuestro directorio.-->
</li>
<li>
<a href="https://developer.themoviedb.org/docs"
target="_blank"
title="Ir a la API">
API Movie
</a>
<!--
En este caso, hay un enlace externo a una ruta absoluta.
El atributo target="_blank" es para que el enlace se abra en otra pestaña del navegador.
Y el atributo title="" sirve para que el navegador nos muestre una pequeña descripción cuando pasamos el cursor sobre el enlace.-->
</li>
<li><a href="#" target="_blank" class="btn-cac">
<!-- Un ícono de fontawesome: -->
<i class="fas fa-sign-in-alt"></i>
<span class="login-text">
Iniciar sesión
</span>
</a>
</li>
</ul>
</nav>
</header>
<main><!-- El contenido principal.
Generé cuatro secciones dentro del contenido de la página: -->
<section id="banner">
<!-- Divido el contenido principal en secciones. A la primera sección la identifico con un atributo id para después trabajar con ella por medio de Javascript o CSS. -->
<div class="banner-card container"> <!--Nomenclatura tipo BEM -->
<h1>Películas, series ilimitadas y mucho más</h1> <!--Las etiquetas h1 a h6 son etiquetas para hacer títulos y subtítulos.-->
<h2>Disfrutá donde quieras. Cancelá cuando quieras</h2>
<a href="./templates/register.html" id="btn-register" class="btn-cac">Registrarse</a>
</div>
</section>
<section id="search" class="container">
<h2 class="search-title">¿Qué estás buscando?</h2>
<input type="text" class="input-search" placeholder="Buscar...">
</section>
<section id="popular">
<div class="container">
<h2 class="h2-subtitle">Las tendencias de hoy</h2>
<div id="popular-list" class="movies-flex"> <!--Un contentedor, un divisor donde puedo agrupar distintos elementos html. La etiqueta div es un elemento en bloque.-->
<div class="movie-item" id="movie-1">
<!--<a href=""><img src="https://picsum.photos/200/300" alt="Foto de una película." width="200" ></a>
Con la etiqueta img voy a agregar una imagen, a partir del atributo src indico la ruta.
El atributo alt posibilita una semántica de acuerdo al usuario,
por un lado, si no carga la imagen indica el contenido de la misma,
por el otro, es para la accesibilidad del usuario y los asistentes virtuales.-->
<a href="./templates/detail-movie.html">
<img class="movie-item-img" src="./static/img/Oppenheimer.jpg" alt="Foto de la película Oppenheimer." >
<!-- Una ruta relativa, en un archivo interno.
Las rutas pueden ser relativas o absolutas.-->
<div class="movie-item-detail">
<p class="movie-item-detail-title">Oppenheimer</p>
<p class="movie-item-detail-subtitle">2023 ~ 10.0</p>
</div>
</a>
</div>
<div class="movie-item" id="movie-2">
<a href="./templates/detail-movie.html">
<img class="movie-item-img" src="./static/img/poor-things.jpg" alt="Foto de la película Poor things con Ema Stone." >
<div class="movie-item-detail">
<p class="movie-item-detail-title">Poor Things</p>
<p class="movie-item-detail-subtitle">2023 ~ 9.8</p>
</div>
</a>
</div>
<div class="movie-item" id="movie-3">
<a href="./templates/detail-movie.html">
<img class="movie-item-img" src="./static/img/Horizon_An_American_Saga_Capaitulo_1.jpg" alt="Foto de la película Horizon con Kevin Costner." >
<div class="movie-item-detail">
<p class="movie-item-detail-title">Horizon: An American Saga</p>
<p class="movie-item-detail-subtitle">2024 ~ 9.5</p>
</div>
</a>
</div>
<div class="movie-item" id="movie-4">
<a href="./templates/detail-movie.html">
<img class="movie-item-img" src="./static/img/Siempre hay un mañana.jpg" alt="Foto de la película Siempre hay un mañana." >
<div class="movie-item-detail">
<p class="movie-item-detail-title">Siempre hay un mañana</p>
<p class="movie-item-detail-subtitle">2024 ~ 9.9</p>
</div>
</a>
</div>
<div class="movie-item" id="movie-5">
<a href="./templates/detail-movie.html">
<img class="movie-item-img" src="./static/img/Nosferatu.jpg" alt="Foto de la película Nosferatu 2024." >
<div class="movie-item-detail">
<p class="movie-item-detail-title">Nosferatu</p>
<p class="movie-item-detail-subtitle">2024 ~ 9.9</p>
</div>
</a>
</div>
<div class="movie-item" id="movie-6">
<a href="./templates/detail-movie.html">
<img class="movie-item-img" src="./static/img/dune-part-2-character-posters_s4rh.600.jpg" alt="Foto de la película Duna 2." >
<div class="movie-item-detail">
<p class="movie-item-detail-title">Dune: Parte 2</p>
<p class="movie-item-detail-subtitle">2024 ~ 8.9</p>
</div>
</a>
</div>
</div>
</section>
<section id="top-rated">
<div class="container">
<h2 class="h2-subtitle">Las más vistas</h2>
<div id="top-rated-list">
<div class="movie-item-v2">
<div class="wrapper">
<img src="#" alt="">
</div>
<div class="movie-item-detail-v2">
<p class="movie-item-detail-title-v2">...</p>
<p class="movie-item-detail-subtitle-v2">2023 ~ 9.8</p>
</div>
</div>
<div class="movie-item-v2">
<div class="wrapper">
<img src="#" alt="">
</div>
<div class="movie-item-detail-v2">
<p class="movie-item-detail-title-v2">...</p>
<p class="movie-item-detail-subtitle-v2">2023 ~ 9.8</p>
</div>
</div>
<div class="movie-item-v2">
<div class="wrapper">
<img src="#" alt="">
</div>
<div class="movie-item-detail-v2">
<p class="movie-item-detail-title-v2">...</p>
<p class="movie-item-detail-subtitle-v2">2023 ~ 9.8</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer ID="footer"><!-- El pie de página. -->
<div class="nav-links">
<a href="#">Términos y condiciones</a> <!--Etiquetas en linea, para separarlas hay que usar el br, la etiqueta de break. -->
<a href="#">Preguntas frecuentes</a>
<a href="#">Ayuda</a>
</div>
</footer>
<!-- Una referencia externa -->
<script src="./static/js/index.js">
// Referencias internas-->
// Una ventana emergente:
// alert('Hola mundo JS 😎');
//La etiqueta script me permite escribir código Javascript para ejecutar algo, en este caso por medio de la consola del navegador:
//console.log('Hola');
</script>
</body>
<!-- <p>Con la tecla Ctrl + } comento el código VSC.</p> -->
<!-- Usar Control + c para copiar, Ctrl + x para cortar y Ctrl + v para pegar>-->
</html>