Commit 676be425 authored by angel cerrajero's avatar angel cerrajero

Finalizo todas las internas

parent 647d25ad
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
:root{
font-family: Raleway, Arial, Helvetica, sans-serif;
}
body {
margin: 0;
padding: 0;
}
/* ///////////////////// CONTAINER /////////////////////////// */
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 4fr 1fr;
/* grid-gap: 2px; */
height: 100vh;
width: 100%;
}
/* ///////////////////// HEADER /////////////////////////// */
header {
display: flex;
z-index: 1;
position: fixed;
width: 100%;
/* max-width: 700px; */
padding: 5px;
align-items: center;
justify-content: space-between;
font-family: 'Raleway', Arial, Helvetica, sans-serif;
background-color:lightseagreen;
/* border: solid 1px red; */
}
header .logo {
margin-left: 10px;
}
header h4 {
color: white;
margin-right: 10px;
}
.busca-logout {
display: flex;
justify-content: space-between;
align-items: center;
}
.buscador {
margin-right: 20px;
background-color: white;
font-size: 14px;
color: black;
box-shadow: 0;
border: 0;
border-radius: 10px;
width: 200px;
height: 30px;
}
.logo-logout {
height: 36px;
margin-right: 15px;
}
/* ///////////////////// MAIN /////////////////////////// */
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* border: solid 1px blueviolet; */
height: 100%;
width: 100%;
background-color: #11171c;
}
section {
display: flex;
width: 100%;
height: 100%;
justify-content: space-around;
}
/* ///////////////////// INFO /////////////////////////// */
.info {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
width: 100%;
max-width: 1000px;
margin-bottom: 30px;
margin-top: 40px;
/* border: solid 1px pink; */
}
.titulo {
color: white;
font-family: 'Raleway';
font-size: 2rem;
}
.datos {
margin-top: 50px;
width: 90%;
text-align: justify;
color: white;
;
}
.sinopsis {
padding: 0;
margin: 0;
}
/* ///////////////////// ACTORS /////////////////////////// */
.cabecera-latest {
color: white;
font-size: 1.5rem;
margin-top: 50px;
}
.titulo-actores {
font-size: 1.7rem;
color: white
}
.actors {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
max-width: 1200px;
margin-top: 2px;
margin-bottom: 100px;
/* border: solid blue 1px; */
}
.latest-content {
margin-top: 50px;
}
.actors img {
height: 166px;
width: 296px;
}
.latest-content {
position: relative;
}
.title {
color: #019b6a;
background: black;
width: 100%;
height: 30px;
}
.latest-info {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
display: none;
}
.latest-content:hover .latest-info {
display: inherit;
background-color: rgba(0, 0, 0,.3);
}
.latest-content:hover .latest-info {
display: inherit;
}
.latest-content:hover .description {
color: white;
}
.latest-content:hover img {
opacity: .2;
}
/* ///////////////////// RELATED /////////////////////////// */
.titulo-related {
font-size: 1.7rem;
color: white
}
.related {
margin-top: 20px;
margin-bottom: 100px;
}
/* ///////////////////// FOOTER /////////////////////////// */
footer {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #11171c;
/* border-top: solid 0.1px grey; */
height: 100px;
color: white;
/* border: solid 1px red; */
}
.logo-footer {
align-self: center;
}
footer h4 {
font-size: 0.7rem;
align-self: center;
}
\ No newline at end of file
......@@ -22,6 +22,8 @@ body {
/* ///////////////////// HEADER /////////////////////////// */
header {
display: flex;
z-index: 1;
position: fixed;
width: 100%;
padding: 5px;
align-items: center;
......@@ -88,7 +90,7 @@ section {
/* ///////////////////// LATEST /////////////////////////// */
/* ///////////////////// SERIES /////////////////////////// */
.cabecera-latest {
color: white;
......@@ -242,7 +244,7 @@ section {
}
/* ///////////////////// SERIES /////////////////////////// */
/* ///////////////////// NOVEDADES /////////////////////////// */
.novedades {
margin-top: 35px;
......@@ -293,10 +295,3 @@ section {
/* ///////////////////// FOOTER /////////////////////////// */
footer {
background-color: black;
color: white;
/* border: solid 1px red; */
}
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
:root{
font-family: Raleway, Arial, Helvetica, sans-serif;
}
body {
margin: 0;
padding: 0;
}
/* ///////////////////// NAVBAR /////////////////////////// */
.navbar {
/* z-index: 1; */
}
.navbar-list {
list-style-type: none;
margin: 0;
flex: 1 100%;
display: flex;
justify-content: flex-end;
}
.navbar-item > a {
text-decoration: none;
color: white;
padding: 1rem;
display: block;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/footer.css">
<title>Viewfy España - Tus series y peliculas a la carta</title>
</head>
<body>
<div class="container">
<header>
<div class="logo"><img src="/img/logomini.png" alt="log"></div>
<nav class="navbar">
<!--
<input type="checkbox" id="burger-checkbox">
<label for="burger-checkbox" class="burger-label"></label> -->
<ul class="navbar-list">
<li class="navbar-item"><a href="home.html">Inicio</a></li>
<li class="navbar-item"><a href="home.html">Novedades</a></li>
<li class="navbar-item"><a href="home.html#peliculas">Peliculas</a></li>
<li class="navbar-item"><a href="home.html#series">Series</a></li>
<li class="navbar-item"><a href="#favoritos">Favoritos</a></li>
</ul>
</nav>
<div class="busca-logout">
<input type="text" class="buscador" name="username" id="username" placeholder="Buscar....">
<a href="/index.html"> <img src="/img/logout.png" alt="logout" class="logo-logout"></a>
</div>
</header>
<main id="inicio">
<h3 class="cabecera-films" id="peliculas">Tus Favoritos</h3>
<h1 class="cabecera-films">Tus Favoritos</h1>
<section class="films">
<div class="film">
<div class="film-info">
<div class="title"> Real Box - Puntuación 6/10</div>
<div class="description"> <h4></h4>Cuenta la vida del mejor boxeador de la historia de los EEUU </div>
</div>
<img src="/img/films/real-boxing.jpg" alt="film 1">
</div>
<div class="film">
<div class="film-info">
<div class="title">400 - Puntuación 7/10</div>
<div class="description"> <h4></h4>Los 400 Griegos mas valientes defendieron su tierra de las ordas turcas. Tan solo 400 guerreros consiguieron detener a mas de 30.000 soldados turcos</div>
</div>
<img src="/img/films/400.jpg" alt="film 2">
</div>
<div class="film">
<div class="film-info">
<div class="title">James Plotter - Puntuación 10/10</div>
<div class="description"> <h4></h4>Cuenta la vida del famoso mago James Plotter quien en las primeras edades de los magos consiguio unificar a todos y crear un ministerio de magia</div>
</div>
<img src="/img/films/plotter.jpg" alt="film 3">
</div>
<div class="film">
<div class="film-info">
<div class="title">IronCrack - Puntuación 8/10</div>
<div class="description"> <h4></h4>Un cientifico loco y tremendamente rico decide crear el arma de guerra mas letal jamas vista</div>
</div>
<img src="/img/films/ironcrack.jpg" alt="film 4">
</div>
<div class="film">
<div class="film-info">
<div class="title">Moon Wars - Puntuación 9/10</div>
<div class="description"> <h4></h4>Cuenta la historia del hombre que consigui unificar a todas las lunas de la galaxia para derrotar al temible imperio lunar que amenaza la democracia </div>
</div>
<img src="/img/films/moonwars.jpg" alt="film 5">
</div>
<div class="film">
<div class="film-info">
<div class="title">Spidey - Puntuación 9/10</div>
<div class="description"> <h4></h4>Un joven estudiante de ingenieria decide ayudar a todos los habitantes de su ciudad debido a los altos indices de criminalidad</div>
</div>
<img src="/img/films/spidey.jpg" alt="film 6">
</div>
<div class="film">
<div class="film-info">
<div class="title">Stalingradest - Puntuación 9/10</div>
<div class="description"> <h4></h4>La terrible historia de la batalla de Stalingradest, una de las mas temibles y destructoras de toda la historia de la humanidad</div>
</div>
<img src="/img/films/stalingrad.jpg" alt="film7">
</div>
<div class="film">
<div class="film-info">
<div class="title">Genius - Puntuación 9/10</div>
<div class="description"> <h4></h4>La historia de un genio de lampara un poco loco que concede deseos a cualquier persona que encuentre su lampara en el desierto del sahara </div>
</div>
<img src="/img/films/genius.jpg" alt="film 8">
</div>
</section>
</main>
<footer>
<div class="logo-footer"><img src="/img/logomini.png" alt=""></div>
<h4>Todos los derechos reservados, © 1996-2019, Viewfy Inc. o sus filiales</h4>
</footer>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/ficha.css">
<link rel="stylesheet" href="css/footer.css">
<title>Viewfy España - Tus series y peliculas a la carta</title>
</head>
<body>
<div class="container">
<header>
<div class="logo"><img src="/img/logomini.png" alt="log"></div>
<nav class="navbar">
<!--
<input type="checkbox" id="burger-checkbox">
<label for="burger-checkbox" class="burger-label"></label> -->
<ul class="navbar-list">
<li class="navbar-item"><a href="home.html">Inicio</a></li>
<li class="navbar-item"><a href="home.html">Novedades</a></li>
<li class="navbar-item"><a href="home.html#peliculas">Peliculas</a></li>
<li class="navbar-item"><a href="home.html#series">Series</a></li>
<li class="navbar-item"><a href="favoritos.html">Favoritos</a></li>
</ul>
</nav>
<div class="busca-logout">
<input type="text" class="buscador" name="username" id="username" placeholder="Buscar....">
<a href="/index.html"> <img src="/img/logout.png" alt="logout" class="logo-logout"></a>
</div>
</header>
<main>
<section class="info">
<div class="titulo"><h1>Spidey</h1></div>
<div class="player">
<iframe class="player" width="560" height="315" src="https://www.youtube-nocookie.com/embed/raQQmdoQMyc?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="datos">
<h5 class="sinopsis">Spider-Man: Homecoming (titulada Spider-Man: de regreso a casa en Hispanoamérica) es una película de superhéroes estadounidense de 2017 basada en el personaje de Marvel Comics Spider-Man, co-producida por Columbia Pictures y Marvel Studios, y distribuida por Sony Pictures Releasing. Es el segundo reinicio cinematográfico de Spider-Man y la decimosexta película del Universo cinematográfico de Marvel (MCU). La película es dirigida por Jon Watts, a partir de un guion de los equipos de Jonathan Goldstein y John Francis Daley, Watts y Christopher Ford, y Chris McKenna y Erik Sommers. Tom Holland es protagoniza como Peter Parker / Spider-Man, junto con Michael Keaton, Jon Favreau, Zendaya, Donald Glover, Tyne Daly, Marisa Tomei y Robert Downey Jr. En Spider-Man: Homecoming, Peter Parker intenta equilibrar la vida escolar con ser Spider-Man, mientras enfrenta al Buitre.
En febrero de 2015, Marvel Studios y Sony llegaron a un acuerdo para compartir los derechos del personaje de Spider-Man, integrándolo en el MCU ya establecido. El siguiente mes de junio, Holland fue confirmado para el papel principal, mientras que Jon Watts fue contratado para dirigir. En abril de 2016, se reveló el título de la película, junto con el reparto adicional, entre ellos Downey en su papel del MCU de Tony Stark / Iron Man. La fotografía principal comenzó en junio de 2016 en Pinewood Atlanta Studios en el Condado de Fayette, Georgia, y continuó en Atlanta, Los Ángeles y Nueva York. Los otros guionistas fueron revelados durante el rodaje, que concluyó en Berlín en octubre de 2016. El equipo de producción se esforzó en diferencias a la película de versiones anteriores de Spider-Man.
Spider-Man: Homecoming tuvo su premier en Hollywood el 28 de junio de 2017, y se estrenó en Estado Unidos en 3D, IMAX y IMAX 3D el 7 de julio de 2017. Homecoming recaudó más de $880 millones mundialmente, convirtiéndose en la segunda película de Spider-Man más exitosa y la sexta película más taquillera de 2017. Fue elogiada por el tono ligero y el foco en la vida escolar de Peter, y las actuaciones de Holland y Keaton. Una secuela, Spider-Man: Far From Home, se estrenará el 5 de julio de 2019. </h5>
</div>
</section>
<div class="titulo-actores">Actores</div>
<section class="actors">
<div class="latest-content">
<div class="latest-info">
<div class="description"> <h4></h4>Tom Holland</div>
</div>
<img src="/img/actors/tom-mini.jpg" alt="tom">
</div>
<div class="latest-content">
<div class="latest-info">
<div class="description"> <h4></h4>Zendaya Maree</div>
</div>
<img src="/img/actors/zendaya-mini.jpg" alt="zendaya">
</div>
<div class="latest-content">
<div class="latest-info">
<div class="description"> <h4></h4>Robery Downey Jr.</div>
</div>
<img src="/img/actors/robert-mini.jpg" alt="robert">
</div>
<div class="latest-content">
<div class="latest-info">
<div class="description"> <h4></h4>Michael Keaton</div>
</div>
<img src="/img/actors/michael-mini.jpg" alt="michael">
</div>
</section>
<div class="titulo-related">Contenido Relacionado</div>
<section class="related">
<div class="latest-content">
<div class="latest-info">
<div class="title">Desaparecida - Puntuación 5/10</div>
<div class="description"> <h4></h4>Una chica desaparece y un cuerpo de elite policia intenta averiguar que paso para poder encontrarla con vida </div>
</div>
<img src="/img/series/desaparecida.jpg" alt="desaparecida">
</div>
<div class="latest-content">
<div class="latest-info">
<div class="title">Los Vikingos - Puntuación 9/10</div>
<div class="description"> <h4></h4>Cuenta la historia de como se forjaron los Vikingos y como estos consiguieron invadir todos los puntos importantes de Reino Unido y Europa</div>
</div>
<img src="/img/series/vikings.jpg" alt="vikingos">
</div>
<div class="latest-content">
<div class="latest-info">
<div class="title">El Mejor Doctor - Puntuación 10/10</div>
<div class="description"> <h4></h4>Un medico residente con deficit de atencion y con el sindrome del sabio, quiere hacerse un hueco en el escalafon mas alto de la medicina actual a nivel mundial.</div>
</div>
<img src="/img/series/doctor.jpg" alt="doctor">
</div>
<div class="latest-content">
<div class="latest-info">
<div class="title">Cuentame - Puntuación 8/10</div>
<div class="description"> <h4></h4>Cuenta la historia de una familia de clase media Española desde la epoca Franquista hasta nuestros dias. Galardonada como la serie mas larga de producción Española</div>
</div>
<img src="/img/series/cuentame.jpg" alt="cuentame">
</div>
</section>
</main>
<footer>
<div class="logo-footer"><img src="/img/logomini.png" alt=""></div>
<h4>Todos los derechos reservados, © 1996-2019, Viewfy Inc. o sus filiales</h4>
</footer>
</div>
</body>
</html>
\ No newline at end of file
......@@ -7,6 +7,8 @@
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/footer.css">
<title>Viewfy España - Tus series y peliculas a la carta</title>
</head>
......@@ -14,7 +16,20 @@
<body>
<div class="container">
<header>
<div class="logo"><img src="/img/logomini.png" alt=""></div>
<div class="logo"><img src="/img/logomini.png" alt="log"></div>
<nav class="navbar">
<!--
<input type="checkbox" id="burger-checkbox">
<label for="burger-checkbox" class="burger-label"></label> -->
<ul class="navbar-list">
<li class="navbar-item"><a href="#inicio">Inicio</a></li>
<li class="navbar-item"><a href="#inicio">Novedades</a></li>
<li class="navbar-item"><a href="#peliculas">Peliculas</a></li>
<li class="navbar-item"><a href="#series">Series</a></li>
<li class="navbar-item"><a href="favoritos.html">Favoritos</a></li>
</ul>
</nav>
<div class="busca-logout">
<input type="text" class="buscador" name="username" id="username" placeholder="Buscar....">
<a href="/index.html"> <img src="/img/logout.png" alt="logout" class="logo-logout"></a>
......@@ -22,9 +37,9 @@
</header>
<main>
<main id="inicio">
<section class="novedades">
<section class="novedades" >
<div class="slider">
<ul>
<li><img src="/img/films/snowman.jpg" alt="snowman"></li>
......@@ -35,7 +50,7 @@
</div>
</section>
<h3 class="cabecera-films">Top Peliculas</h3>
<h3 class="cabecera-films" id="peliculas">Top Peliculas</h3>
<section class="films">
<div class="film">
......@@ -43,7 +58,7 @@
<div class="title"> Real Box - Puntuación 6/10</div>
<div class="description"> <h4></h4>Cuenta la vida del mejor boxeador de la historia de los EEUU </div>
</div>
<img src="/img/films/real-boxing.jpg" alt="film 1">
<a href="ficha.html"><img src="/img/films/real-boxing.jpg" alt="film 1"></a>
</div>
......@@ -52,7 +67,7 @@
<div class="title">400 - Puntuación 7/10</div>
<div class="description"> <h4></h4>Los 400 Griegos mas valientes defendieron su tierra de las ordas turcas. Tan solo 400 guerreros consiguieron detener a mas de 30.000 soldados turcos</div>
</div>
<img src="/img/films/400.jpg" alt="film 2">
<a href="ficha.html"><img src="/img/films/400.jpg" alt="film 2"></a>
</div>
<div class="film">
......@@ -60,7 +75,7 @@
<div class="title">James Plotter - Puntuación 10/10</div>