"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: