Item: Netflix mobile
Rating: 3.4
Author: -J0hn-

2 Downloads
183 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!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'
});

Comments

More from -J0hn-

Netflix mobile

In this example below you will see how to do a Netflix mobile with some HTML / CSS and Javascript

Technologies

Comments

More from -J0hn-

A Pen by John

Simple Responsive nav

Nav scroll animation

Title Case a Sentence

You Might Also Like

RSS feed with jQuery

manes winchester

River flow with canvas and requestAnimationFrame

A Pen by Josh Holladay

A Pen by Rima

Backbone Event Handler

Responsive Navigation Demo w/ Kube

Jerry Garcia