"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/-J0hn-/pen/RpGLwB" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Poppins"); *, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; } ul { list-style: none; } img { width: 100%; height: 100%; } #wrapper { min-width: 1000px; background-color: whitesmoke; font-family: 'Poppins', sans-serif; box-shadow: 0 0 15px gray; } /************* HEADER & NAV **************/ header { height: 600px; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://68.media.tumblr.com/37aa774749579b5a20e35fd40fc269e7/tumblr_ob7vuzk7qP1uwbmnzo4_1280.jpg") no-repeat center center; background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://68.media.tumblr.com/37aa774749579b5a20e35fd40fc269e7/tumblr_ob7vuzk7qP1uwbmnzo4_1280.jpg") no-repeat center center; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } header nav { padding: .40em 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header nav .logo { width: 4.8em; height: 4.8em; cursor: pointer; } header nav .nav { text-transform: uppercase; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } header nav .nav li { font-size: .90em; padding: 0 1em; cursor: pointer; -webkit-transition: color .25s ease; transition: color .25s ease; } header nav .nav li:hover { color: #dcbe00; } header nav .nav .active { color: #dcbe00; } header nav .user { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 80px; } header nav .user .user-settings { color: #cccccc; cursor: pointer; } header nav .user .user-settings:hover { color: #737373; } header nav .user .user-icon { width: 50px; border-radius: 50px; cursor: pointer; } header .movie-info { margin-top: auto; margin-bottom: auto; text-transform: uppercase; color: white; width: 400px; margin-left: 10em; } header .movie-info h1 { font-size: 3.8em; line-height: 1.2; } header .movie-info .genre { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 1.5em; } header .movie-info .genre li { padding-right: .90em; padding-left: .80em; font-size: .75em; } header .movie-info button { cursor: pointer; border: 0; padding: 1em 1.5em; border-radius: 20px; background: #dcbe00; text-transform: uppercase; font-weight: 600; font-size: .75em; margin-bottom: 8.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header .movie-info button .fa-play-circle-o { font-size: 1.7em; margin-left: .50em; } header .movie-info h3, header .movie-info h4 { font-weight: 200; } header .movie-info h3 { text-transform: initial; } header .movie-info h4 { color: #dcbe00; } /********************** MAIN (MOVIES) ***********************/ main { width: 800px; background: whitesmoke; margin: auto; -webkit-transform: translateY(-5%); transform: translateY(-5%); border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 1.5em 2em; } main .options { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; text-transform: uppercase; } main .options .active { color: #dcbe00; border-bottom: solid 2px #dcbe00; } main .options li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-bottom: 1em; border-bottom: solid 1px lightgray; font-weight: 600; font-size: .80em; color: #737373; cursor: pointer; } main .options li:hover { color: #dcbe00; border-bottom-color: #dcbe00; border-bottom-width: 2px; } main #movies { min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } main #movies figure { background-color: white; width: 14em; margin: .50em; box-shadow: 0 5px 15px gray; overflow: hidden; position: relative; } main #movies figure img { height: 21em; } main #movies figure figcaption { line-height: 2; padding: 0 .80em; height: 90px; } main #movies figure figcaption h5 { text-transform: uppercase; font-weight: 600; color: #737373; } main #movies figure figcaption p { text-transform: capitalize; font-size: .70em; font-weight: 600; color: #dcbe00; } main #movies figure figcaption .rating { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } main #movies figure figcaption .rating .fa-heart { color: #fa5050; margin: .50em .50em .50em 0; } main #movies figure figcaption button { border: 0; font-size: 17px; cursor: pointer; color: #dcbe00; background-color: white; position: absolute; bottom: 0; right: 0; padding: 8px; } /************ LOADING ICON ************/ .loading { background-color: #dcbe00; color: white; font-size: 1.3em; width: 50px; height: 50px; border-radius: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 1.2em auto; } /************ FOOTER ************/ footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: white; } footer div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1em; color: silver; } footer div h3 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } footer div .social-links i { padding: 0 .80em; font-size: 1.3em; cursor: pointer; } footer div .social-links i:hover { color: #5a5a5a; } footer div p { text-transform: uppercase; font-size: .90em; text-align: right; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } footer a { text-decoration: none; color: #dcbe00; text-transform: uppercase; font-size: .70em; border-top: solid 1px #f3f3f3; text-align: center; padding: .50em; } /* RANGE & SEARCH FORM */ #forms { padding: 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #forms .buttons { margin-right: 10px; -ms-flex-item-align: end; align-self: flex-end; } #forms .buttons .fa-navicon, #forms .buttons .fa-th { padding: 8px; color: lightgray; font-size: 18px; } #range-form { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 5px; } #range-form p { letter-spacing: 1px; font-size: 12px; font-weight: bold; color: #4d4d4d; } #range-form .group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #range-form .group #range { -webkit-appearance: none; cursor: pointer; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 10px; } #range-form .group #range::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #dcbe00; position: absolute; z-index: -1; } #range-form .group #results { width: 28px; text-align: center; font-size: 13px; padding: 2px 4px; border-radius: 4px; background: white; box-shadow: 0 2px 5px 1px lightgray; } #search-form { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } #search-form #search { width: 100%; background: none; border: none; border-bottom: solid 2px lightgray; padding: 5px 20px 5px 10px; color: gray; -webkit-transition: border-bottom-color .3s; transition: border-bottom-color .3s; } #search-form #search:focus { outline: none; border-bottom-color: #dcbe00; } #search-form .fa-search { color: lightgray; position: absolute; right: 0; padding-right: 8px; transform: rotate(95deg); -webkit-transform: rotate(95deg); -ms-transform: rotate(95deg); padding: 0; } /* CUSTOM SLIDER */ #forms #range-form .group #range { -webkit-appearance: none; outline: none; background: #dcbe00; height: 3px; border-radius: 5px; } #forms #range-form .group #range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #dcbe00; } /* FIREFOX */ #range::-moz-range-thumb { border: none; height: 14px; width: 14px; border-radius: 50%; background: #dcbe00; cursor: pointer; } #range::-moz-range-track { width: 100%; height: 3px; cursor: pointer; background: #dcbe00; border-radius: 5px; } </style></head><body> <div id="wrapper"> <header> <nav> <img class="logo" src="https://ia.media-imdb.com/images/M/MV5BMTczNjM0NDY0Ml5BMl5BcG5nXkFtZTgwMTk1MzQ2OTE@._V1_.png" /> <ul class="nav"> <li class="active">movies</li> <li>celebs & photos</li> <li>community</li> <li>news</li> </ul> <div class="user"> <i class="fa fa-gear user-settings"></i> <img class="user-icon" src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"/> </div><!--user end--> </nav> <div class="movie-info"> <h1>the martian</h1> <ul class="genre"> <li>adventure</li> <li>sci-fi</li> <li>thriller</li> </ul><!--genre--> <button>watch trailer <i class="fa fa-play-circle-o"></i></button> <h3>In theaters</h3> <h4>15 Oct, 2015 (USA)</h4> </div><!--movie-info end--> </header> <main> <ul class="options"> <li class="active">in theaters</li> <li>coming soon</li> <li>charts</li> <li>tv series</li> <li>trailers</li> <li>more</li> </ul> <div id="forms"> <div class="buttons"> <i class="fa fa-navicon"></i> <i class="fa fa-th"></i> </div> <form id="range-form"> <p>IMDb Rating</p> <div class="group"> <input id="range" type="range" min="6.0" max="8.3" step="0.1" value="6"> <p id="results">6</p> </div> </form> <form id="search-form"> <input id="search" type="search" results="5"> <i class="fa fa-search"></i> </form> </div> <section id="movies"> </section> </main><!--container end--> <div class="loading"><i class="fa fa-spinner"></i></div> <footer> <div> <h3>IMDb</h3> <div class="social-links"> <i class="fa fa-twitter"></i> <i class="fa fa-facebook"></i> <i class="fa fa-instagram"></i> </div><!--social-links end--> <p>1990-2017 imdb.com, inc</p> </div> <a href="#">show menu</a> </footer> </div><!--wrapper end--> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >// Design Concept by George Vasyagin: https://dribbble.com/shots/2266601-IMDb-design-concept/attachments/425192 let movies = [ { title: 'Mad Max: Fury Road', genre : ['Action', 'Adventure', 'Sci-Fi'], rating: 8.3, poster: 'https://s-media-cache-ak0.pinimg.com/originals/ce/0c/93/ce0c93d50ae68922d1f4f6667c95e1a8.jpg' }, { title: 'The Hunger Games: Mockingjay Part 1', genre: ['Adventure', 'Sci-Fi', 'Thriller'], rating: 6.8, poster: 'https://1.bp.blogspot.com/-Ds0sudZmSq4/Vgxrr75E77I/AAAAAAAAREo/sZkZW5YMDTw/s1600/Mockingjay%2BPart%2B1.jpg' }, { title: 'Jurassic World', genre: ['Action', 'Adventure', 'Sci-Fi'], rating: 7.2, poster: 'https://s-media-cache-ak0.pinimg.com/736x/0b/ab/9a/0bab9a9c671dbb7aa8626eec44a0195f.jpg' }, { title: 'Everest', genre: ['Adventure', 'Drame', 'Thriller'], rating: 7.4, poster: 'http://www.impawards.com/2015/posters/everest_ver4.jpg' }, { title: 'Insurgent', genre: ['Adventure', 'Sci-Fi', 'Thriller'], rating: 6.4, poster: 'http://cdn2-www.comingsoon.net/assets/uploads/2015/01/FIN16_Insurgent_Guns_1Sht_Trim-1422379653-mtv-14224534611.jpg' }, { title: 'Sicario', genre: ['Action', 'Crime', 'Drama'], rating: 8, poster: 'https://s-media-cache-ak0.pinimg.com/564x/7f/a1/5c/7fa15c26aa2cb48562ea37bbc177be74.jpg' } ]; const results = document.getElementById('results'); const range_form = document.getElementById('range-form'); const search_form = document.getElementById('search-form'); const movieSection = document.querySelector('#movies'); /* FUNCTIONS */ const search_filter = function(e) { e.preventDefault(); const search_value = this.querySelector('#search').value.toUpperCase(); const movieList = document.querySelectorAll('figure'); for(let i = 0; i < movieList.length; i++) {if (window.CP.shouldStopExecution(1)){break;} const movie_title = movieList[i].querySelector('h5').textContent; const movie_genre = movieList[i].querySelector('p').textContent; if(movie_title.toUpperCase().indexOf(search_value) > -1) { movieList[i].style.display = ''; } else { movieList[i].style.display = 'none'; } } window.CP.exitedLoop(1); }; const rating_filter = function() { const rating_value = +this.querySelector('#range').value; results.textContent = rating_value; const movieList = document.querySelectorAll('figure'); const rating_results = movies.filter(m => m.rating === rating_value) .map(m => ` <figure> <img src="${m.poster}" /> <figcaption> <h5>${text_truncate(m.title, 26)}</h5> <p>${m.genre.join(', ')}</p> <div class="rating"> <i class="fa fa-heart"></i> <h4>${m.rating}</h4> </div> <button> <i class="fa fa-plus"></i> </button> </figcaption> </figure>`); movieSection.innerHTML = rating_results; } // SHORTEN MOVIE TITLE IF LENGTH IS MORE THEN 26 CHARACTERS const text_truncate = function(str, length, ending) { if (length == null) { length = 100; } if (ending == null) { ending = '...'; } if (str.length > length) { return str.substring(0, length - ending.length) + ending; } else { return str; } }; // LOOP THROUGH ARRAY & CREATE A TEMPLATE let template = ''; movies.forEach((movie) => { template += ` <figure> <img src="${movie.poster}" /> <figcaption> <h5>${text_truncate(movie.title, 26)}</h5> <p>${movie.genre.join(', ')}</p> <div class="rating"> <i class="fa fa-heart"></i> <h4>${movie.rating}</h4> </div> <button> <i class="fa fa-plus"></i> </button> </figcaption> </figure>`; }); movieSection.innerHTML = template; // FILTER THROUGH MOVIES BY TITLE & GENRE search_form.addEventListener('input', search_filter); // FILTER MOVIES BY RATING range_form.addEventListener('input', rating_filter); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: