Last active
April 13, 2020 12:39
-
-
Save thyagoraphael/d39e143b9c61e950fb01391a05308928 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>IMDB Codenation</title> | |
<!-- CSS --> | |
<link rel="stylesheet" href="./styles/normalize.css"> | |
<link rel="stylesheet" href="./styles/style.css"> | |
</head> | |
<body> | |
<header class="header"> | |
<div class="header-topBar container"> | |
<a href="/" class="header-topBar__title"> | |
<img src="./img/header/logo-imdb.jpg" alt="Logo IMDB"> | |
</a> | |
<ul class="header-topBar__nav"> | |
<li><a href="/">Lançamentos</a></li> | |
<li><a href="/">Crítica</a></li> | |
<li><a href="/">Em Cartaz</a></li> | |
</ul> | |
<div class="header-topBar__userAuth"> | |
<img src="./img/header/walter-white.jpg"> | |
<a href="/">Walter White</a> | |
</div> | |
</div><!-- .header-topBar --> | |
<div class="header-hero container"> | |
<div class="header-hero__title"> | |
<h2>Mad Max: Estrada da Fúria</h2> | |
</div> | |
<ul class="header-hero__categories"> | |
<li><a href="/">Aventura</a></li> | |
<li><a href="/">SCI-FI</a></li> | |
<li><a href="/">Terror</a></li> | |
</ul> | |
<a href="/" class="header-hero__link"> | |
<span>Assistir Trailer</span> | |
<i class="fa fa-play-circle-o"></i> | |
</a> | |
<div class="header-hero__info"> | |
<p>Nos Cinemas</p> | |
<p>15 de Outubro de 2015 (Brasil)</p> | |
</div> | |
</div><!-- .header-hero --> | |
</header> | |
<main class="main"> | |
<nav class="main-nav container"> | |
<ul class="main-nav__list"> | |
<li><a href="/">Nos Cinemas</a></li> | |
<li><a href="/">Em Breve</a></li> | |
<li><a href="/">Bilheteria</a></li> | |
<li><a href="/">Séries</a></li> | |
<li><a href="/">Trailers</a></li> | |
</ul> | |
</nav> | |
<section class="main-listMovies container"> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-moonlight.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>Moolight</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>Moonlight</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Drama</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-bladerunner.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>BLADE RUNNER</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>BLADE RUNNER</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Aventura, SCI-FI</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-mad-max.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>Mad Max</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>Mad Max</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Aventura, SCI-FI, Terror</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-alita.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>Alita</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>Alita</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Aventura, SCI-FI</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-batman-superman.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>BATMAN VS SUPERMAN</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>BATMAN VS SUPERMAN</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Ação, Drama</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-jurassic-world.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>JURASSIC WORLD</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>JURASSIC WORLD</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Aventura, Terror</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-civil-war.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>GUERRA CIVIL</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>GUERRA CIVIL</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Aventura, Ação</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-capita-marvel.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>CAPITÃ MARVEL</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>CAPITÃ MARVEL</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">SCI-FI</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 9.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-coringa.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>CORINGA</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>CORINGA</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Suspense, Drama</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 10.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-liga-justica.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>LIGA DA JUSTIÇA</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>LIGA DA JUSTIÇA</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Aventura, Ação</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-star-wars.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>STAR WARS VII</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>STAR WARS VII</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Aventura, SCI-FI</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
<div class="listMovies__catalog"> | |
<figure class="listMovies__poster"> | |
<img src="./img/menu/poster-pantera-negra.jpg" alt=""> | |
<div class="listMovies__poster-info"> | |
<h3>PANTERA NEGRA</h3> | |
<a href="/"> | |
<i class="fa fa-play" area-hidden="true"></i> | |
</a> | |
</div> | |
</figure> | |
<div class="listMovies__synopsis"> | |
<h3>PANTERA NEGRA</h3> | |
<p class="listMovies__synopsis-gender"> | |
<a href="#">Aventura, SCI-Fi</a> | |
</p> | |
<p class="listMovies__synopsis-rating"> | |
<i class="fa fa-heart" aria-hidden="true"></i> 7.0 | |
</p> | |
</div> | |
</div> | |
</section> | |
</main> | |
<footer class="footer"> | |
<div class="footer-container container"> | |
<a href="/"> | |
<img src="./img/header/logo-imdb.jpg" alt="Logo IMDB"> | |
</a> | |
<ul class="footer-socialMedia"> | |
<li> | |
<a href="/" class="footer-socialMedia__twitter"> | |
<i class="fa fa-twitter" aria-hidden="true"></i> | |
</a> | |
</li> | |
<li> | |
<a href="/" class="footer-socialMedia__facebook"> | |
<i class="fa fa-facebook-official" aria-hidden="true"></i> | |
</a> | |
</li> | |
<li> | |
<a href="/" class="footer-socialMedia__instagram"> | |
<i class="fa fa-instagram" aria-hidden="true"></i> | |
</a> | |
</li> | |
</ul> | |
</div> | |
</footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/***** IMPORT FONT AND ICONS ****/ | |
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css); | |
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); | |
/***** GLOBAL STYLES *****/ | |
* { margin: 0; padding: 0; box-sizing: border-box; } | |
body { background-color: rgb(242,242,242); font-family: "Montserrat", sans-serif; font-size: 100%; } | |
.container { max-width: 960px; margin: 0 auto; } | |
/******************/ | |
/***** HEADER *****/ | |
/******************/ | |
.header { | |
background-image: url(../img/header/capa-madmax2.jpg); | |
background-repeat: no-repeat; | |
background-size: cover; | |
background-attachment: fixed; | |
width: 100%; | |
height: 90vh; | |
padding: 20px; | |
position: relative; | |
} | |
.header::after { | |
position: absolute; | |
background-image: linear-gradient( | |
0deg, | |
rgba(0, 0, 0, 0.6) 0%, | |
rgba(0, 212, 255, 0) 75% | |
); | |
height: 90vh; | |
width: 100%; | |
content: ''; | |
top: 0; | |
left: 0; | |
} | |
/*----- .header-topBar -----*/ | |
.header-topBar { | |
z-index: 2; | |
position: relative; | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.header-topBar__nav { | |
display: flex; | |
list-style: none; | |
} | |
.header-topBar__nav li { | |
margin: 0 25px; | |
} | |
.header-topBar__nav li a { | |
text-transform: uppercase; | |
} | |
.header-topBar__userAuth { | |
display: flex; | |
justify-content: flex-start; | |
align-items: center; | |
} | |
.header-topBar__userAuth img { | |
width: 45px; | |
height: 45px; | |
border-radius: 100%; | |
} | |
.header-topBar__userAuth a { | |
margin-left: 15px; | |
text-transform: capitalize; | |
} | |
/*----- .header-hero -----*/ | |
.header-hero { | |
z-index: 2; | |
position: relative; | |
} | |
.header-hero__title { | |
margin-top: 115px; | |
} | |
.header-hero__title h2 { | |
font-size: 4.063rem; | |
line-height: 4.875rem; | |
text-transform: uppercase; | |
font-weight: 700; | |
color: rgb(255, 255, 255); | |
} | |
.header-hero__categories { | |
margin: 15px 0 30px; | |
list-style: none; | |
display: flex; | |
} | |
.header-hero__categories li { | |
margin-right: 15px; | |
} | |
.header-hero__categories li a { | |
color: rgb(255, 255, 255); | |
font-size: 0.813rem; | |
font-weight: 400; | |
text-decoration: none; | |
text-transform: uppercase; | |
transition: all 0.2s ease-in-out; | |
} | |
.header-hero__link { | |
display: inline-block; | |
padding: 15px 45px; | |
color: #000; | |
font-size: 0.938rem; | |
text-decoration: none; | |
background-color: rgb(228,187,35); | |
border-radius: 40px; | |
transition: all 0.4s ease-in-out; | |
position: relative; | |
} | |
.header-hero__link:hover { | |
background-color: rgb(188,154,29); | |
} | |
.header-hero__link i { | |
font-size: 1.4rem; | |
position: absolute; | |
right: 15px; | |
top: 13px; | |
} | |
.header-hero__info { | |
padding: 35px 0; | |
font-size: 0.875rem; | |
color: rgb(255, 255, 255); | |
} | |
.header-hero__info p:last-child { | |
color: rgb(188,154,29); | |
padding-top: 15px; | |
} | |
/*----- .header-topBar and .header-hero -----*/ | |
.header-topBar__nav li a, | |
.header-topBar__userAuth a { | |
color: rgb(255, 255, 255); | |
font-size: 0.813rem; | |
font-weight: bold; | |
text-decoration: none; | |
transition: all 0.2s ease-in-out; | |
} | |
.header-topBar__nav li a:hover, | |
.header-topBar__userAuth a:hover, | |
.header-hero__categories li a:hover { | |
color: rgb(228, 187, 35) | |
} | |
/****************/ | |
/***** MAIN *****/ | |
/****************/ | |
.main { | |
background-color: rgb(242,242,242); | |
} | |
/*----- .main-nav -----*/ | |
.main-nav { | |
border-bottom: 1px solid rgba(0, 0, 0, 0.09); | |
} | |
.main-nav__list { | |
list-style: none; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.main-nav__list li { | |
margin: 0 20px; | |
text-transform: uppercase; | |
} | |
.main-nav__list li a { | |
text-decoration: none; | |
color: rgb(228,187,35); | |
display: inline-block; | |
padding: 25px 0; | |
font-size: 0.813rem; | |
font-weight: 700; | |
} | |
.main-nav__list li a:hover { | |
box-shadow: inset 0 -1px 0 rgb(228,187,35); | |
} | |
/*----- .main-listMovies -----*/ | |
.main-listMovies { | |
padding: 30px 0; | |
width: 100%; | |
display: flex; | |
justify-content: space-between; | |
flex-direction: row; | |
align-items: flex-start; | |
flex-wrap: wrap; | |
} | |
.listMovies__catalog { | |
background-color: rgb(255, 255, 255); | |
border-radius: 8px; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
margin-bottom: 30px; | |
overflow: hidden; | |
width: 24%; | |
display: flex; | |
flex-direction: column; | |
} | |
.listMovies__poster { | |
width: 100%; | |
height: auto; | |
margin: 0; | |
overflow: hidden; | |
position: relative; | |
} | |
.listMovies__poster img { | |
width: 100%; | |
height: auto; | |
} | |
.listMovies__poster-info { | |
background-color: rgba(0, 0, 0, 0.5); | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
opacity: 0; | |
padding: 80px 20px; | |
position: absolute; | |
text-align: center; | |
visibility: hidden; | |
z-index: 1; | |
transition: all 0.4s ease-in-out; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
.listMovies__catalog:hover .listMovies__poster-info { | |
opacity: 1; | |
visibility: visible; | |
} | |
.listMovies__poster-info h3 { | |
color: rgb(228,187,35); | |
font-size: 1.25rem; | |
line-height: 1.25rem; | |
text-transform: uppercase; | |
font-weight: 700; | |
} | |
.listMovies__poster-info a { | |
color: rgb(255, 255, 255); | |
font-size: 3.125rem; | |
transition: all 0.4s ease-in-out; | |
padding-top: 15px; | |
} | |
.listMovies__poster-info a:hover { | |
color: rgb(228,187,35); | |
} | |
/*----- .listMovies__synopsis -----*/ | |
.listMovies__synopsis { | |
padding: 10px; | |
width: 100%; | |
} | |
.listMovies__synopsis h3 { | |
font-size: 0.813rem; | |
font-weight: 700; | |
text-transform: uppercase; | |
} | |
.listMovies__synopsis-gender { | |
margin: 10px 0; | |
display: flex; | |
} | |
.listMovies__synopsis-gender a { | |
text-decoration: none; | |
font-size: 0.75rem; | |
color: rgb(228,187,35); | |
} | |
.listMovies__synopsis-gender a:hover { | |
text-decoration: underline; | |
} | |
.listMovies__synopsis-rating { | |
align-items: center; | |
font-size: 1.25rem; | |
font-weight: bold; | |
display: flex; | |
justify-content: space-between; | |
} | |
.listMovies__synopsis-rating i { | |
color: rgb(204,204,204); | |
cursor: pointer; | |
} | |
.listMovies__synopsis-rating i:hover{ | |
color: rgb(231,76,60) | |
} | |
/******************/ | |
/***** FOOTER *****/ | |
/******************/ | |
.footer { | |
background-color: rgb(255, 255, 255); | |
color: rgb(186,186,186); | |
padding-top: 30px; | |
padding-bottom: 20px; | |
} | |
.footer-container { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.footer-socialMedia { | |
list-style: none; | |
display: flex; | |
} | |
.footer-socialMedia li { | |
margin: 0 20px; | |
} | |
.footer-socialMedia li:last-child { | |
margin-right: 0; | |
} | |
.footer-socialMedia li a { | |
font-size: 1.563rem; | |
color: rgb(186,186,186); | |
text-decoration: none; | |
transition: all 0.2s ease-in-out; | |
} | |
.footer-socialMedia__twitter:hover { | |
color: rgb(85,172,238); | |
} | |
.footer-socialMedia__facebook:hover { | |
color: rgb(59,89,152); | |
} | |
.footer-socialMedia__instagram:hover { | |
color: rgb(233,89,80); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment