<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Netflix mobile</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<nav>
<i class="fa fa-bars"></i>
<img src="http://boredmommyblog.com/wp-content/uploads/2014/07/logo.png.png" width="120" height="40">
<i class="fa fa-search"></i>
</nav>
<div id="main">
<h4>Spotlight</h4>
<div class="single-item">
<img class="img-responsive" src="https://heavyeditorial.files.wordpress.com/2015/02/house-of-cards-season-3.jpg?quality=65&strip=all">
<img class="img-responsive" src="http://cdn11.ne.be/ckContents/33/images/pablo-escobar-of-narcos.jpg">
<img class="img-responsive" src="http://cdn2us.denofgeek.com/sites/denofgeekus/files/styles/gallery_adv/public/2016/07/the-walking-dead-season-7-rick.jpg?itok=epP_5vHU">
</div>
<h4>My List</h4>
<div class="variable-width">
<a href="#"><img class="img-responsive" src="http://static.comicvine.com/uploads/original/11127/111275613/5054132-20935579.jpg"></a>
<a href="#"><img class="img-responsive" src="https://cdn.europosters.eu/image/1300/22298.jpg"></a>
<a href="#"><img class="img-responsive" src="https://recapworld.files.wordpress.com/2013/09/oitnb.jpg"></a>
<a href="#"><img class="img-responsive" src="https://pmctvline2.files.wordpress.com/2016/06/stranger-things-poster-full.jpg"></a>
<a href="#"><img src="https://static.justwatch.com/poster/502784/s592"></a>
<a href="#"><img src="http://image.tmdb.org/t/p//original/wEp7ec8OudlngZ5dhoqSHJUDFdq.jpg"></a>
</div><!--variable end-->
<h4>Top Picks For You</h4>
<div class="variable-width">
<a href="#"><img class="responsive" src="https://pmctvline2.files.wordpress.com/2016/06/stranger-things-poster-full.jpg"></a>
<a href="#"><img class="responsive" src="http://cdn0.nflximg.net/images/9908/8969908.jpg"></a>
<a href="#"><img class="responsive" src="https://scdn.nflximg.net/ipl/11127/6d046e09e382398b1e60f5f7615307cdaed9530d.jpg"></a>
</div><!--variable end-->
</div><!--main end-->
</div><!--container end-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-J0hn-/netflix-mobile-ZpPNdQ */
*{
margin:0;
padding:0;
}
/*SCROLLBAR*/
::-webkit-scrollbar {
width: 0px;
}
/* ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background:rgb(100,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(100,0,0,0.5);
} */
body{
background:linear-gradient(10deg, grey,black 60%);
height:100vh;
}
.container{
background:rgb(20,20,20);
width:375px;
height:590px;
position:relative;
overflow-Y:scroll;
margin-top:2em;
}
/*
NAV
*/
nav{
position:absolute;
top:0;
left:0;
right:0;
height:3.5em;
background:rgb(0,0,0);
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
color:rgb(250,250,250);
}
.fa-bars{
margin-left:1em;
}
.fa-search{
margin-right:1em;
}
#main{
margin-top:4em;
}
h4{
color:rgb(255,255,255);
}
.single-item img{
height:200px;
}
.single-item{
position:relative;
}
.slick-dots li button:before{
color:white;
opacity:1;
text-shadow:1px 2px 1px black;
}
.slick-dots li.slick-active button:before{
color:white;
opacity:1;
}
ul.slick-dots{
transform:translateY(-35px);
}
.variable-width img{
height:190px;
/* padding-right:5px; */
}
/*Downloaded from https://www.codeseek.co/-J0hn-/netflix-mobile-ZpPNdQ */
$('.single-item').slick({
dots: true,
arrows: false,
mobileFirst: true,
autoplay: true,
// fade: true,
cssEase: 'ease'
});
$('.variable-width').slick({
dots: false,
arrows: false,
infinite: true,
autoplay: true,
speed: 300,
slidesToShow: 3,
centerMode: false,
variableWidth: false,
centerPadding:'50px'
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
Twitter Bootstrap
jQuery
v3.1.0
