<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 lang='en' 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");
/***************
VARIABLES
****************/
/****************
GLOBAL
*****************/
*, *:before, *:after {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul {
list-style: none;
}
img {
width: 100%;
height: 100%;
}
/****************
WRAPPER
*****************/
#wrapper {
min-width: 1000px;
background-color: whitesmoke;
font-family: 'Poppins', sans-serif;
-webkit-box-shadow: 0 0 15px gray;
box-shadow: 0 0 15px gray;
}
/*************
HEADER & NAV
**************/
header {
height: 600px;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.3)), to(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;
-webkit-box-shadow: 0 5px 15px gray;
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 INPUT
*********************/
#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;
-webkit-box-shadow: 0 2px 5px 1px lightgray;
box-shadow: 0 2px 5px 1px lightgray;
}
::-webkit-input-placeholder {
color: lightgray;
font-style: italic;
letter-spacing: 1px;
}
:-ms-input-placeholder {
color: lightgray;
font-style: italic;
letter-spacing: 1px;
}
::-ms-input-placeholder {
color: lightgray;
font-style: italic;
letter-spacing: 1px;
}
::placeholder {
color: lightgray;
font-style: italic;
letter-spacing: 1px;
}
#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" placeholder="Search Movies...">
<i class="fa fa-search"></i>
</form>
</div><!--forms-->
<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;}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);
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>
