<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/SL0TR/pen/jwmyqe?depth=everything&order=popularity&page=34&q=movie&show_forks=false" />
<style class="cp-pen-styles">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Quicksand', sans-serif;
}
.container {
display: flex;
flex-direction: column;
height: 1080px;
width: auto;
background-image: linear-gradient(rgba(172, 132, 97, 0.8), rgba(172, 132, 97, 0)), url('https://images3.alphacoders.com/650/thumb-1920-650014.jpg');
background-size: cover;
background-position: center;
height: 100vh;
;
background-attachment: fixed;
}
header {
height: 100px;
width: auto;
display: flex;
justify-content: space-between;
}
.logo {
height: 100%;
width: 10%;
margin-left: 15px;
margin-top: 20px
}
nav {
width: 40%;
height: 100%;
}
.account-info {
height: 100%;
width: 10%;
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
max-height: 100%;
}
nav ul,
nav ul li {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul { text-align: center;}
nav ul li {
display: inline-block;
padding: 20px;
margin-top: 35px;
}
nav a {
text-decoration: none;
color: #e0dfdf;
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
font-size: 75%;
font-weight: 600;
}
nav a:hover {
color: #DBB315;
}
.active a {
color: #DBB315;
}
.icon-setting {
font-size: 15px;
display: inline-flex;
margin-right: 15px;
color: #bdc3c7;
margin-top: 20px;
}
.account-info img {
height: 35%;
width: 25%;
border-radius: 9px;
box-shadow: 1px 1px 15px #3b3b3b;
margin-top: 20px;
cursor: pointer;
}
.movie-details {
display: flex;
flex-direction: column;
width: 500px;
height: 500px;
align-items: center;
position: relative;
top: 20%;
line-height: 50px;
font-family: 'Quicksand', sans-serif;
left: 15%
}
.movie-details h1 {
font-weight:700;
font-size: 3.6em;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
margin-right: 20px;
}
.movie-details p {
color: #e0dfdf;
margin-left: -160px;
word-spacing: 30px;
text-transform: uppercase;
font-size: .9em;
font-weight: 500;
}
button {
padding: 10px;
width: 180px;
margin-left: -240px;
border-radius: 55px;
height: 45px;
font-family: 'Open Sans', sans-serif;
background-color: #E5BC00;
border: none;
font-weight: 600;
color: #333;
margin-top: 20px;
font-size: 1em;
cursor: pointer;
line-height: 10px;
box-shadow: -8px 11px 44px -7px rgba(0,0,0,0.75);
}
button:hover {
box-shadow: -8px 11px 44px -7px rgba(0,0,0,0.35);
color: #eaeaea;
}
.movie-details h4 {
color: #e0dfdf;
margin-left: -300px;
margin-top: 100px;
font-weight: 500;
letter-spacing: 3px;
}
.movie-details h3 {
color: #DBB315;
font-weight: 400;
letter-spacing: 3px;
font-size: 1.2em;
margin-left: -200px;
margin-top: -25px;
}
.play-btn {
font-size: 20px;
margin-left: 10px;
}
.container2 {
height: 1400px;
width: auto;
display: flex;
flex-direction: column;
background-color: #F3F3F3;
}
.movie-nav {
height: 300px;
width: 64%;
position: relative;
left: 18%;
bottom: 4%;
background-color: #f3f3f3;
border-radius: 5px;
}
.movie-nav ul,
ul li {
list-style-type: none;
padding: 0;
margin: 0;
}
.movie-nav ul {
text-align: center;
position: relative;
bottom: 15%;
/* border-bottom: 1px solid black; */
}
.movie-nav ul li {
display: inline-block;
padding: 20px;
margin-top: 35px;
}
.movie-nav a {
text-decoration: none;
font-family: 'Quicksand', sans-serif;
text-transform: uppercase;
font-size: .8em;
font-weight: 600;
color: #333;
}
.active2 a {
color: #DBB315;
}
#rank {
padding: 10px;
width: 100px;
margin-left: -240px;
border-radius: 5px;
height: 30px;
font-family: 'Quicksand', sans-serif;
background-color: #E5BC00;
border: none;
font-weight: 600;
color: #fff;
margin-top: 20px;
font-size: .8em;
cursor: pointer;
line-height: 10px;
margin-left: 50px;
}
.star {
margin-right: 10px;
}
hr {
position: relative;
bottom: 15%;
width: 80%;
left: 10%;
}
/*
#scroll-img {
width: 765px;
margin-left: 49px
}
*/
.browse-movies {
height: 1100px;
width: 890px;
display: flex;
margin: 0 auto;
flex-wrap: wrap;
background-color: #F3F3F3;
position: relative;
bottom: 5%;
}
.box {
height: 488px;
width: 270px;
display: flex;
margin-left: 20px;
margin-top: 20px;
background-color: #FFFFFF;
box-shadow: -8px 11px 44px -7px rgba(0,0,0,0.75);
flex-direction: column;
transition: all ease-in-out 300ms;
}
.box:hover {
cursor: pointer;
box-shadow: -8px 11px 44px -7px rgba(0,0,0,0.45);
transform: translate(0px, -10px) scale(1.2);
}
.box img {
width: 100%;
max-width: 100%;
max-height: 100%;
height: 80%;
}
.box h3 {
font-family: 'Quicksand', sans-serif;
display: flex;
font-weight: 500;
letter-spacing: 1px;
margin-left: 20px;
margin-top: 10px;
color: #3E3F42;
text-transform: uppercase;
margin-right: 20px;
}
.box h4 {
margin-left: 47px;
margin-right: 150px;
color: #3E3F42
}
.box h6 {
font-family: 'Quicksand', sans-serif;
margin-right: 10px;
color: #DBB315;
letter-spacing: 1px;
margin-left: 20px;
position: relative;
top: 5%;
}
.ion-ios-heart {
color: #EE7051;
font-size: 25px;
margin-left: 21px;
margin-top: 6px;
margin-right: 220px;
position: relative;
top: 5%;
}
.btn-right {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
transform: rotate(45deg);
border-left: 40px solid #DBB315;
position: relative;
left: 88%;
bottom: 7.6%;
}
#blah {
position: absolute;
bottom: -14px;
right: 16px;
transform: rotate(45deg);
color: #fff;
}
.btn-right:hover {
cursor: pointer;
}
.page-btn {
height: 50px;
width: 50px;
background-color: #DBB315;
border-radius: 50%;
margin: 0 auto;
box-shadow: -8px 11px 44px -7px rgba(0,0,0,0.75);
margin-bottom: 60px;
}
.page-btn:hover {
box-shadow: -8px 11px 44px -7px rgba(0,0,0,0.45);
}
.ion-more {
color: aliceblue;
margin-left: 17px;
font-size: 1.5em;
position: relative;
top: 25%;
}
.page-btn:hover {
cursor: pointer;
}
footer {
width: 100%;
height: 120px;
display: flex;
justify-content: space-between;
padding-top: 45px
}
#imdb {
color: #BBBBBB;
margin-left: 30px;
font-family: 'Anton', sans-serif;
margin-bottom: 50px;
}
.icons-last i {
font-size: 1.7em;
padding: 30px;
color: #BBBBBB;
}
.icons-last {
margin-left: 140px;
margin-bottom: 50px;
}
#bye {
color: #BBBBBB;
margin-left: 30px;
font-family: 'Quicksand', sans-serif;
font-weight: 500;
margin-bottom: 50px;
font-size: .9em;
letter-spacing: 1px;
}
.last-menu {
text-align: center;
padding: 10px;
color: #DBB315;
font-weight: 500;
font-size: 0.8em;
}
.last-menu p:hover {
cursor: pointer;
}
@media screen and (max-width: 1092px) {
nav a {
text-decoration: none;
color: #e0dfdf;
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
font-size: 55%;
font-weight: 600;
word-spacing: 0px;
}
nav ul li {
display: inline-block;
padding: 10px;
margin-top: 35px;
}
hr {
position: relative;
bottom: 10%;
width: 80%;
left: 10%;
}
last-menu p {
padding: 50px;
}
}
@media screen and (max-width: 1092px) {
nav a {
text-decoration: none;
color: #e0dfdf;
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
font-size: 55%;
font-weight: 600;
word-spacing: 0px;
}
nav ul li {
display: inline-block;
padding: 10px;
margin-top: 35px;
}
hr {
position: relative;
bottom: 10%;
width: 80%;
left: 10%;
}
last-menu p {
padding: 50px;
}
}
@media screen and (max-width: 1167px) {
.movie-nav ul li {
padding: 10px;
margin-top: 35px;
}
.movie-nav a {
font-size: .6em;
font-weight: 700;
color: #333;
}
.active2 a {
color: #DBB315;
}
}
@media screen and (max-width: 910px) {
}
@media screen and (max-width: 1319px) {
.box:nth-child(5),
.box:nth-child(6) {
visibility: hidden;
}
}
@media screen and (max-width: 879px) {
.box:nth-child(3),
.box:nth-child(4) {
visibility: hidden;
}
.container2{
padding-left: 120px;
overflow: hidden;
}
.page-btn {
margin-left: 35%;
}
}
@media screen and (max-height: 610px) {
.container {
font-size: 80%;
}
.movie-details h1 {
margin-right: 85px;
}
.movie-details p {
margin-left: -180px;
}
button {
margin-top: 10px;
}
.movie-details h4 {
margin-top: 50px;
}
.movie-details h3 {
margin-left: -225px;
}
}
</style></head><body>
<html lang="en">
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link rel="stylesheet" href="css/queries.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
</head>
<body>
<section class="container">
<header>
<div class="logo">
<img src="https://static.wixstatic.com/media/d23c6e_5881e03e6b9e4cec82ac67de693d90a6.png" alt="The martian background">
</div>
<nav>
<ul>
<li class="active"><a href="#">Movies</a></li>
<li><a href="#">Celebs & Photos</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
<div class="account-info">
<i class="ion-gear-a icon-setting"> </i>
<img src="https://d3pl14o4ufnhvd.cloudfront.net/v2/uploads/c62df93c-0447-4324-8b89-0817650e0226/df753f21a1aeed4f9ab47f620a17f2592fd506f7_original.jpg" alt="user" >
</div>
</header>
<div class="movie-details">
<h1> The Martian </h1>
<p> Adventure sci-fi thriller</p>
<button> Watch Trailer <i class="ion-android-arrow-dropright-circle play-btn"></i></button>
<h4> In Theaters</h3>
<h3>15 Oct, 2015 (USA)</h2>
</div>
</section> <!-- container-->
<section class="container2">
<div class="movie-nav">
<ul>
<li class="active2"><a>In Theaters</a> </li>
<li><a>Coming Soon</a> </li>
<li><a>Charts</a> </li>
<li><a>Tv series</a> </li>
<li><a>Trailer</a> </li>
<li> <button id="rank"><i class="ion-ios-star star"> </i> 179 </button> </li>
</ul>
<hr>
<img src="https://image.ibb.co/kw6Ea5/scroll_panel.jpg" id="scroll-img">
</div>
<div class="browse-movies">
<div class="box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/fe/1a/26/fe1a265a96793baacd6d4c32a921905f.jpg">
<h3> The Godfather </h3>
<h6>Crime, Drama, Action </h6>
<i class="ion-ios-heart"></i>
<h4>9.2</h4>
<div class="btn-right"><h2 id="blah">+</h2></div>
</div>
<div class="box">
<img src="http://cdn.collider.com/wp-content/uploads/pulp-fiction-poster.jpg">
<h3> Pulp Fiction </h3>
<h6>Crime, Drama </h6>
<i class="ion-ios-heart"> </i>
<h4>8.9</h4>
<div class="btn-right"><h2 id="blah">+</h2></div>
</div>
<div class="box">
<img src="http://www.impawards.com/1991/posters/silence_of_the_lambs_ver2_xlg.jpg">
<h3> The Silence Of The..</h3>
<h6>Crime, Drama, Thriller </h6>
<i class="ion-ios-heart"> </i>
<h4>8.6</h4>
<div class="btn-right"><h2 id="blah">+</h2></div>
</div>
<div class="box">
<img src="https://s3.amazonaws.com/img.auctiva.com/imgdata/1/1/7/9/1/0/1/webimg/559439294_o.jpg">
<h3> The Shawshank Red.. </h3>
<h6>Crime, Drama </h6>
<i class="ion-ios-heart"> </i>
<h4>9.3</h4>
<div class="btn-right"><h2 id="blah">+</h2></div>
</div>
<div class="box">
<img src="https://1.bp.blogspot.com/-_fPu93EHH7I/V0vhv2m9ZtI/AAAAAAABG0k/VrMMAeJ9nVE0-dIv8V_icOlcN_bddMN4wCKgB/s1600/Forrest-Gump-movie_poster.jpg">
<h3> Forrest Gump </h3>
<h6>Comedy, Drama, Romance </h6>
<i class="ion-ios-heart"> </i>
<h4>8.8</h4>
<div class="btn-right"><h2 id="blah">+</h2></div>
</div>
<div class="box">
<img src="https://kaneshorrorblog.files.wordpress.com/2010/12/the_dark_knight_movie_poster.jpg">
<h3> The Dark Knight </h3>
<h6>Crime, Drama, Action </h6>
<i class="ion-ios-heart"> </i>
<h4>9.0</h4>
<div class="btn-right"><h2 id="blah">+</h2></div>
</div>
</div>
<div class="page-btn"><i class="ion-more"></i></div>
</section>
<footer>
<h2 id="imdb">IMDb</h2>
<div class="icons-last">
<i class="ion-social-twitter"></i>
<i class="ion-social-facebook"></i>
<i class="ion-social-instagram"></i>
</div>
<p id="bye">1990-2017 IMDB.COM, INC.</p>
</footer>
<div class="last-menu">
<p id="bottom">Show Menu</p>
</div>
</body>
</html>
</body></html>
