Skip to content

Commit

Permalink
Merge pull request #25 from RSMKode/trailer
Browse files Browse the repository at this point in the history 
Creación de trailer y footer
  • Loading branch information
@SamuelFriasNieto
SamuelFriasNieto authored Feb 2, 2024
2 parents c8ce5e6 + d5b59fb commit 2826547
Show file tree
Hide file tree
Showing 2 changed files with 352 additions and 133 deletions.
303 changes: 187 additions & 116 deletions src/Entradas/Aot.html
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,202 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="entrada.css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="entrada.css" />
<title>Attack on titan</title>
</head>
<body>

</head>
<body>
<header class="encabezado">
<a class="titulo" href="#">
<img class="logo" src="../images/logo_afs.png" alt="Logo de Anime First Steps" />
<h1>Anime First Steps</h1>
</a>
<nav class="navegador">
<ul class="menu">
<li>
<a href="#accion">Acción</a>
<ul class="desplegable">
<li><a href="#attack-on-titan">Attack on Titan</a></li>
<li><a href="#naruto">Naruto</a></li>
<li><a href="#fullmetal">Fullmetal Alchemist</a></li>
<li><a href="#bokunohero">Boku no Hero Academia</a></li>
<li><a href="#dragon-ball">Dragon Ball Z</a></li>
</ul>
</li>
<li>
<a href="#fantasia">Fantasía</a>
<ul class="desplegable">
<li><a href="#sao">Sword Art Online</a></li>
<li><a href="#kimetsu">Kimetsu no Yaiba</a></li>
<li><a href="#abyss">Made in Abyss</a></li>
</ul>
</li>
<li>
<a href="#thriller">Thriller</a>
<ul class="desplegable">
<li><a href="#erased">Erased</a></li>
<li><a href="#steins">Steins;Gate</a></li>
<li><a href="#tokyo">Tokyo Rvengers</a></li>
</ul>
</li>
<li>
<a href="#drama">Drama</a>
<ul class="desplegable">
<li><a href="#violet">Violet Evergarden</a></li>
<li><a href="#anohana">Anohana</a></li>
<li><a href="#silent">A Silent Voice</a></li>
</ul>
</li>
<li>
<a href="#comedia">Comedia</a>
<ul class="desplegable">
<li><a href="#kaguya-sama">Kaguya Sama: Love is War</a></li>
<li><a href="#spy-x-family">Spy x Family</a></li>
<li><a href="#your-lie">Your Lie in April</a></li>
</ul>
</li>
<a class="titulo" href="../index.html">
<img
class="logo"
src="../images/logo_afs.png"
alt="Logo de Anime First Steps"
/>
<h1>Anime First Steps</h1>
</a>
<nav class="navegador">
<ul class="menu">
<li>
<a href="#accion">Acción</a>
<ul class="desplegable">
<li><a href="#attack-on-titan">Attack on Titan</a></li>
<li><a href="#naruto">Naruto</a></li>
<li><a href="#fullmetal">Fullmetal Alchemist</a></li>
<li><a href="#bokunohero">Boku no Hero Academia</a></li>
<li><a href="#dragon-ball">Dragon Ball Z</a></li>
</ul>
</li>
<li>
<a href="#fantasia">Fantasía</a>
<ul class="desplegable">
<li><a href="#sao">Sword Art Online</a></li>
<li><a href="#kimetsu">Kimetsu no Yaiba</a></li>
<li><a href="#abyss">Made in Abyss</a></li>
</ul>
</li>
<li>
<a href="#thriller">Thriller</a>
<ul class="desplegable">
<li><a href="#erased">Erased</a></li>
<li><a href="#steins">Steins;Gate</a></li>
<li><a href="#tokyo">Tokyo Rvengers</a></li>
</ul>
</li>
<li>
<a href="#drama">Drama</a>
<ul class="desplegable">
<li><a href="#violet">Violet Evergarden</a></li>
<li><a href="#anohana">Anohana</a></li>
<li><a href="#silent">A Silent Voice</a></li>
</ul>
</nav>
</li>
<li>
<a href="#comedia">Comedia</a>
<ul class="desplegable">
<li><a href="#kaguya-sama">Kaguya Sama: Love is War</a></li>
<li><a href="#spy-x-family">Spy x Family</a></li>
<li><a href="#your-lie">Your Lie in April</a></li>
</ul>
</li>
</ul>
</nav>
</header>

<main>
<section id="ficha-tecnica">
<div class="overlay">
<h1>Attack on Titan</h1>
<img
class="anime_imagen"
src="../images/Poster AoT.jpg"
alt="Anime poster"
/>
<table class="info_tecnica">
<tr>
<td>Estudio</td>
<td>Wit/Kappa</td>
</tr>
<tr>
<td>Fecha de lanzamiento</td>
<td>2013</td>
</tr>
<tr>
<td>Temporadas</td>
<td>4 y 2 especiales</td>
</tr>
<tr>
<td>Episodios</td>
<td>88 y 6 OVAs</td>
</tr>
<tr>
<td>Valoracion IMDB</td>
<td>9/10</td>
</tr>
</table>
</div>
<img
class="wallpaper"
src="../images/Wallpaper anime AoT 1.png"
alt="Fondo de AOT"
/>
</section>

<section id="ficha-tecnica">
<div class="overlay">
<h1>Attack on Titan</h1>
<img class="anime_imagen" src="../images/Poster AoT.jpg" alt="Anime poster">
<table class="info_tecnica">
<tr>
<td>Estudio</td>
<td>Wit/Kappa</td>
</tr>
<tr>
<td>Fecha de lanzamiento</td>
<td>2013</td>
</tr>
<tr>
<td>Temporadas</td>
<td>4 y 2 especiales</td>
</tr>
<tr>
<td>Episodios</td>
<td>88 y 6 OVAs</td>
</tr>
<tr>
<td>Valoracion IMDB</td>
<td>9/10</td>
</tr>
</table>
</div>
<img class="wallpaper" src="../images/Wallpaper anime AoT 1.png" alt="Fondo de AOT">
<section class="sinopsis">
<img
class="anime_fondo"
src="../images/Fondo AoT.jpg"
alt="Fondo Anime"
/>
<div class="anime_sinopsis">
<h3 class="anime_nombre">Sinopsis</h3>
<p>
La historia se desarrolla en un mundo ficticio en el que la
humanidad está al borde de la extinción a causa de unas criaturas
humanoides llamadas «titanes», lo que obliga a los supervivientes a
refugiarse en tres enormes murallas que impiden el acceso a dichos
monstruos. La trama gira en torno a Eren Jaeger quien después de
perder a su madre a manos de los titanes, decide unirse al «Ejército
de las murallas» junto a su Mikasa Ackerman y su Armin Arlert con el
objetivo de vengar la muerte de su madre y destruir a los titanes.
Más adelante, descubre que tiene el poder de transformarse en un
titán con características especiales, lo que desencadenará toda una
serie de acontecimientos.
</p>
</div>
<div class="galeria">
<img src="../images/Poster AoT.jpg" alt="" />
<img src="../images/Poster AoT.jpg" alt="" />
<img src="../images/Poster AoT.jpg" alt="" />
<img src="../images/Poster AoT.jpg" alt="" />
<img src="../images/Poster AoT.jpg" alt="" />
</div>
</section>

</section>
<section class="trailer">
<img
class="anime_fondo"
src="../images/Fondo AoT.jpg"
alt="Fondo Anime"
/>

<section class="sinopsis">
<div class="trailer_contenido">
<h3 class="trailer_titulo">Trailer</h3>
<iframe class="trailer_video"
width="560"
height="315"
src="https://www.youtube.com/embed/MGRm4IzK1SQ?si=5JTETzj0Wz0IG2P0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>
</section>
</main>

<footer class="pie_pagina">
<div class="logo_git">
<a href="https://github.com/RSMKode/anime-first-steps" target="_blank" rel="noopener noreferrer">GitHub</a>
<img src="images/Seccion Github.png" alt="">
</div>

<img class="anime_fondo" src="../images/Fondo AoT.jpg" alt="Fondo Anime">
<div class="anime_sinopsis">
<h3 class="anime_nombre">Sinopsis</h3>
<p>
La historia se desarrolla en un mundo ficticio en el que la humanidad está al borde de
la
extinción a causa de unas criaturas humanoides llamadas «titanes», lo que obliga a los
supervivientes a refugiarse en tres enormes murallas que impiden el acceso a dichos
monstruos. La trama gira en torno a Eren Jaeger quien después de perder a su madre a
manos
de los titanes, decide unirse al «Ejército de las murallas» junto a su Mikasa Ackerman y
su
Armin Arlert con el objetivo de vengar la muerte de su madre y destruir a los titanes.
Más
adelante, descubre que tiene el poder de transformarse en un titán con características
especiales, lo que desencadenará toda una serie de acontecimientos.
</p>
</div>
<div class="galeria">
<img src="../images/Poster AoT.jpg" alt="">
<img src="../images/Poster AoT.jpg" alt="">
<img src="../images/Poster AoT.jpg" alt="">
<img src="../images/Poster AoT.jpg" alt="">
<img src="../images/Poster AoT.jpg" alt="">
</div>
</article>
<form action="">
<p class="cap">Si quieres estar al día de los mejores <br>animes, suscribete a nuestra newsletter</p>
<label for="nombre">Nombre</label>
<br>
<input type="text" id="nombre">
<br>
<label for="email">E-Mail</label>
<br>
<input type="email" id="email">
<br>
<label for="feedback">¿Tienes feedback que compartirnos?</label>
<br>
<textarea id="feedback"></textarea>

</form>
<section class="info_pie">
<div class="links-github">
<a href="https://github.com/SamuelFriasNieto" target="_blank" rel="noopener noreferrer">Github -
SamuelFriasNieto</a>
<a href="https://github.com/RSMKode" target="_blank" rel="noopener noreferrer">Github - RSMKode</a>
</div>
<div class="ubi">
<p>Salvador Guinot <br>46017<br>Valencia</p>
</div>
<div class="copyright">
<p>© 2023 AnimeFirstSteps</p>
</div>
<div class="redes">
<a href="" target="_blank"><img src="../images/Logo_behance.png" alt="behance"></a>
<a href="" target="_blank"><img src="../images/Logo_x.png" alt="x"></a>
<a href="" target="_blank"><img src="../images/Logo_instagram.png" alt="instagram"></a>
<a href="" target="_blank"><img src="../images/Logo_linkedin.png" alt="linkedin"></a>
</div>
</section>

</main>

</body>
</html>
</footer>
</body>
</html>
Loading

0 comments on commit 2826547

Please sign in to comment.