<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Android Play Store With Slick Carousel</title>
<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.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="search-bar">
<a href="#" class="toggleNav"><i class="fa fa-bars"></i></a>
<h2>google play</h2>
<i class="fa fa-microphone"></i>
</div><!--search-bar end-->
<div class="categories">
<h4>apps & games</h4>
<h4>movies, music,<br> books</h4>
</div>
</header>
<div class="center">
<div class="slide">
<img src="https://resource.supercheats.com/library/2016/1457457793marvelcontest.png"/>
<div class="badge"><p>1/5</p></div>
</div>
<div class="slide">
<img src="https://lh3.googleusercontent.com/0ETc4XfeWOKiO3jWoAlAJ6juQR3XozG_3vMafHe8gFa78qYlcv_xYHDDSx4mVI5XYyg=h310"/>
<div class="badge"><p>2/5</p></div>
</div>
<div class="slide">
<img src="http://images.designntrend.com/data/images/full/69841/the-walking-dead-road-to-survival-mobile-game.png?w=780"/>
<div class="badge"><p>3/4</p></div>
</div>
<div class="slide">
<img src="http://d.christianpost.com/full/87741/img.jpg"/>
<div class="badge"><p>4/5</p></div>
</div>
<div class="slide">
<img src="http://cdn.iphonehacks.com/wp-content/uploads/2016/07/Pokemon-Go.jpg"/>
<div class="badge"><p>5/5</p></div>
</div>
</div><!--center end-->
<div class="center2">
<a href="#">top charts</a>
<a href="#">games</a>
<a href="#">categories</a>
<a hre="#">early access</a>
<a href="#">family</a>
<a href="#">editor's choice</a>
</div><!--center end-->
<div class="side-nav">
<div class="user-info">
<i class="fa fa-times"></i>
<div class="circle"><h1>j</h1></div>
<h4>john doe</h4>
<h5>john_doe@gmail.com</h5>
</div><!--user-info-->
<section>
<h4><i class="fa fa-android"></i>apps & games</h4>
<h4><i class="fa fa-clone"></i>my apps & games</h4>
<h4><i class="fa fa-cubes"></i>movies, music, books</h4>
</section>
<section>
<h4><i class="fa fa-film"></i>movies & TV</h4>
<h4><i class="fa fa-music"></i>music</h4>
<h4><i class="fa fa-book"></i>books</h4>
<h4><i class="fa fa-newspaper-o"></i>newsstand</h4>
</section>
<section>
<h4><i class="fa fa-user"></i>account</h4>
<h4><i class="fa fa-credit-card"></i>redeem</h4>
<h4><i class="fa fa-gift"></i>send gift</h4>
<h4><i class="fa fa-bookmark"></i>wishlist</h4>
<h4><i class="fa fa-gear"></i>settings</h4>
</section>
<section>
<h4>help & feedback</h4>
<h4>parent guide</h4>
<h4>about google play</h4>
</section>
</div><!--side-nav-->
<div class="flex-this">
<h5>recommended for you</h5>
<h5 class="green">more</h5>
</div><!--flex-this-->
<div class="variable-width">
<div class="card">
<img src="https://lh3.googleusercontent.com/30koN0eGl-LHqvUZrCj9HT4qVPQdvN508p2wuhaWUnqKeCp6nrs9QW8v6IVGvGNauA=w300"/>
<div class="flex">
<h5>minecraft</h5>
<i class="fa fa-ellipsis-v"></i>
</div><!--flex end-->
<div class="flex">
<h5>3.9 <i class="fa fa-star"></i></h5>
<h5 class="price">free</h5>
</div><!--flex end-->
</div><!--card end-->
<div class="card">
<img src="https://lh5.ggpht.com/gSJ1oQ4a5pxvNHEktd21Gh36QbtZMMx5vqFZfe47VDs1fzCEeMCyThqOfg3DsTisYCo=w300"/>
<div class="flex">
<h5>geometry Dash</h5>
<i class="fa fa-ellipsis-v"></i>
</div><!--flex end-->
<div class="flex">
<h5>4.8 <i class="fa fa-star"></i></h5>
<h5 class="price">free</h5>
</div><!--flex end-->
</div><!--card end-->
<div class="card">
<img src="https://lh3.googleusercontent.com/-U3d7wYrZXD7-IFM54131wR46ngztYhZ0cHZ_TUSfB58Vrf_I48jKBQR6_xbA4sh4JUq=w300"/>
<div class="flex">
<h5>animation</h5>
<i class="fa fa-ellipsis-v"></i>
</div><!--flex end-->
<div class="flex">
<h5>4.6 <i class="fa fa-star"></i></h5>
<h5 class="price">free</h5>
</div><!--flex end-->
</div><!--card end-->
<div class="card">
<img src="https://lh3.googleusercontent.com/w4MXonD3mBVlmuZ1mPfpGHj3jBDimbI78W4vJOZchhS3Tv3bLpmSwwgc-DQy9gsbKUI=w300"/>
<div class="flex">
<h5>fruit ninja</h5>
<i class="fa fa-ellipsis-v"></i>
</div><!--flex end-->
<div class="flex">
<h5>4.3 <i class="fa fa-star"></i></h5>
<h5 class="price">free</h5>
</div><!--flex end-->
</div><!--card end-->
<div class="card">
<img src="https://lh3.googleusercontent.com/qodgRiD8cfsKNSdj4pvKt3VVE94CaWIM5-y4PE5VdxPqEEuerhWahDIYCEk5DnMMd7Y=w300"/>
<div class="flex">
<h5>sonic dash</h5>
<i class="fa fa-ellipsis-v"></i>
</div><!--flex end-->
<div class="flex">
<h5>4.4 <i class="fa fa-star"></i></h5>
<h5 class="price">free</h5>
</div><!--flex end-->
</div><!--card end-->
<div class="card">
<img src="https://lh6.ggpht.com/onlNBInQHIZtB2rY24BwrEsUUKwE753ao1BAvvhOw2ePEN1IHIUjaR3gvlGd3jyKTdg=w300"/>
<div class="flex">
<h5>temple run</h5>
<i class="fa fa-ellipsis-v"></i>
</div><!--flex end-->
<div class="flex">
<h5>4.3 <i class="fa fa-star"></i></h5>
<h5 class="price">free</h5>
</div><!--flex end-->
</div><!--card end-->
<div class="card">
<img src="http://downloads.andyroid.net/website/v2//wp-content/uploads/2015/11/angry-birds-2-icon.png"/>
<div class="flex">
<h5>angry birds</h5>
<i class="fa fa-ellipsis-v"></i>
</div><!--flex end-->
<div class="flex">
<h5>4.5 <i class="fa fa-star"></i></h5>
<h5 class="price">free</h5>
</div><!--flex end-->
</div><!--card end-->
</div><!--variable-width end-->
</div><!--wrapper 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.6.0/slick.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-J0hn-/android-play-store-with-slick-carousel-aBrmGz */
*,*:before,*:after{
box-sizing:border-box;
margin:0;
padding:0;
}
::-webkit-scrollbar{
width:0;
}
*:focus{
outline:0;
}
a{
text-decoration:none;
}
body{
font-family:sans-serif;
min-height:100vh;
/* display:flex; */
/* flex-direction:column; */
/* align-items:center; */
background:linear-gradient(0deg,gray,transparent);
}
.wrapper{
margin:0 auto;
padding-bottom:.80em;
width:440px;
/* height:100vh; */
position:relative;
overflow:hidden;
background:rgb(240,240,240);
/* overflow-y:scroll; */
}
header{
height:120px;
background:#009900;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
box-shadow:0 5px 20px -9px black;
}
header .search-bar{
height:50px;
width:95%;
border-radius:3px;
background:white;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 .80em;
}
.search-bar h2{
text-transform:capitalize;
font-weight:500;
color:rgb(170,170,170);
margin-right:auto;
margin-left:1em;
}
.search-bar .fa-bars,.fa-microphone{
font-size:1.3em;
color:rgb(90,90,90);
}
header .categories{
height:35px;
display:flex;
justify-content:space-around;
align-items:center;
flex:1 0 100%;
text-align:center;
text-transform:uppercase;
color:white;
}
header .categories h4{
flex:1 1 100%;
}
header .categories h4:first-child{
border-bottom:solid 3px white;
padding:1em 0;
}
.center{
margin-top:1em;
margin-bottom:1.2em;
}
.center .slide{
height:220px;
margin:auto 5px;
position:relative;
}
.center img{
width:100%;
height:100%;
}
.center .slide:nth-of-type(1){
margin-left:-.30em;
}
.badge{
position:absolute;
top:5px;
right:5px;
color:white;
background:rgba(0,0,0,.5);
padding:.60em 1em;
border-radius:50px;
font-size:.75em;
letter-spacing:1px;
}
.center2{
padding-left:.50em;
}
.center2 a{
background:#009900;
color:white;
text-transform:uppercase;
font-size:.93em;
text-align:center;
padding: .70em 2em;
margin:auto .80em;
border-radius:40px;
}
.center2 a:first-child{
margin-left:3.3em;
}
/* SIDE NAV */
.side-nav{
text-transform:capitalize;
width:330px;
height:100%;
overflow-y:scroll;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:1;
background:white;
transform:translateX(-100%);
}
.side-nav .user-info{
height:150px;
background:url('https://images.pexels.com/photos/368774/pexels-photo-368774.jpeg?h=350&auto=compress&cs=tinysrgb')no-repeat center center;
background-size:cover;
color:white;
line-height:1.9;
padding:1.5em 0 0 .90em;
}
.side-nav .user-info .circle{
background:rgb(150,150,150);
width:60px;
text-align:center;
border-radius:50%;
}
.user-info h5{
text-transform:lowercase;
}
.side-nav section{
border-bottom:solid 1px lightgray;
}
.side-nav section:nth-of-type(1){
margin-top:.40em;
}
.side-nav section:nth-of-type(1) h4:first-child{
color:#009900;
background:rgb(230,230,230);
}
.side-nav section:last-child{
border-bottom:none;
}
.side-nav section h4{
font-weight:200;
padding:1em 0;
cursor:pointer;
}
.side-nav section:nth-of-type(1) h4:nth-child(2){
text-transform:lowercase;
padding-left:1.1em;
}
.side-nav section h4:nth-child(2):first-letter{
text-transform:uppercase;
}
.side-nav section:last-child h4{
padding-left:.80em;
font-size:.90em;
}
.side-nav section .fa{
padding-right:1em;
padding-left:.90em;
}
.side-nav section h4:hover{
background:rgb(230,230,230);
color:#009900;
}
/* ICON COLORS */
.fa-android{
color:limegreen;
}
.fa-clone{
color:gray;
}
.fa-cubes{
color:blueviolet;
}
.fa-film{
color:red;
}
.fa-music{
color:orange;
}
.fa-book{
color:blue;
}
.fa-newspaper-o{
color:purple;
}
.fa-user,.fa-credit-card,.fa-gift,
.fa-bookmark,.fa-gear{
color:rgb(85,85,85);
}
.side-nav .fa-times{
color:white;
font-size:1.3em;
position:absolute;
top:5px;
right:10px;
cursor: pointer;
}
.side-nav .fa-times:hover{
color:lightgray;
}
.wrapper.grey-out:before{
content:'';
background:rgba(0,0,0,.7);
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:100;
}
.flex-this{
margin-top:1.8em;
margin-bottom:1em;
padding:0 1em;
text-transform:uppercase;
display:flex;
justify-content:space-between;
}
.flex-this h5:first-child{
font-weight:200;
}
.flex-this .green{
color:#009900;
cursor:pointer;
}
/* VARIABLE-WIDTH */
.variable-width{
padding-left:.60em;
}
.card{
border:solid 1px gray;
padding:.30em;
margin:auto .20em;
line-height:2;
border-radius:3px;
background:white;
text-transform:capitalize;
}
.card img{
width:105px;
}
.flex{
display:flex;
justify-content:space-between;
align-items:baseline;
}
.card .price{
text-transform:uppercase;
color:green;
}
.card .fa-ellipsis-v,.fa-star{
color:rgb(110,110,110);
}
.card .fa-star{
font-size:.80em;
}
/*Downloaded from https://www.codeseek.co/-J0hn-/android-play-store-with-slick-carousel-aBrmGz */
$(function(){
$('.toggleNav').on('click', function(){
$('.side-nav').css({'transform':'translateX(0)','transition':'.7s','z-index':'200'});
$('.wrapper').not('.side-nav').addClass('grey-out');
});
});
$(function(){
$('.fa-times').on('click', function(){
$('.side-nav').css({'transform':'translateX(-100%)'});
$('.wrapper').removeClass('grey-out');
});
});
$('.center').slick({
arrows: false,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding:'15px',
});
$('.center2').slick({
arrows: false,
dots: false,
slidesToShow: 2,
slidesToScroll: 1,
variableWidth: true,
infinite: false
});
$('.variable-width').slick({
dots: false,
arrows: false,
variableWidth: true,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
jQuery
v3.1.0
