<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A simple mobile website</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<nav>
<button class="fa fa-bars"></button>
<ul id="main">
<li>
<div>girls<i class="fa fa-plus"></i></div>
<ul class="extra">
<li>new arrivals</li>
<li>tops</li>
<li>bottoms</li>
</ul>
</li>
<li>
<div>guys<i class="fa fa-plus"></i></div>
<ul class="extra">
<li>new arrivals</li>
<li>tops</li>
<li>bottoms</li>
</ul>
</li>
<li>
<div>active<i class="fa fa-plus"></i></div>
<ul class="extra">
<li>tops</li>
<li>bottoms</li>
<li>intimates</li>
<li>accessories</li>
<li>sleep</li>
</ul>
</li>
<li>
<div>clearance<i class="fa fa-plus"></i></div>
<ul class="extra">
<li>clearance tops</li>
<li>clearance bottoms</li>
<li>clearance accessories</li>
</ul>
</li>
</ul>
</nav>
<div id="content">
<section>
<img src="https://images.pexels.com/photos/175687/pexels-photo-175687.jpeg?h=350&auto=compress"/>
<div class="gradient">
<h2>sweaters</h2>
<button>shop now</button>
</div>
</section>
<section>
<img src="https://images.pexels.com/photos/30609/pexels-photo.png?h=350&auto=compress">
<div class="gradient">
<h2>polos</h2>
<button>shop now</button>
</div>
</section>
<section>
<img src="https://images.pexels.com/photos/41146/pexels-photo-41146.jpeg?h=350&auto=compress&cs=tinysrgb">
<div class="gradient">
<h2>hoodies</h2>
<button>shop now</button>
</div>
</section>
<section>
<img src="https://images.pexels.com/photos/169729/pexels-photo-169729.jpeg?h=350&auto=compress&cs=tinysrgb">
<div class="gradient">
<h2>jeans</h2>
<button>shop now</button>
</div>
</section>
</div>
<!--content end-->
<div id="social-links">
<h4>follow us on</h4>
<div>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
<footer>
<ul id="footer-info">
<li>customer service</li>
-
<li>company info</li>
-
<li>gift cards</li>
</ul>
</footer>
</div>
<!--wrap end-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-J0hn-/a-simple-mobile-website-wJaBBK */
body{
font-family:sans-serif;
/* height:100vh; */
}
::-webkit-scrollbar{
width:0;
}
button:focus{
outline:0;
}
#wrap{
width:420px;
height:100vh;
margin:0 auto;
padding:0;
box-shadow:2px 4px 10px gray;
overflow:scroll;
overflow-x:hidden;
position:relative;
}
ul{
list-style:none;
padding:0;
}
nav{
padding:.80em 1em .80em 0;
position:relative;
}
nav button{
background:none;
border:0;
color:red;
cursor:pointer;
}
.fa-bars{
font-size:1.5em;
}
#main{
list-style:none;
margin:0;
text-transform:capitalize;
background:white;
height:200vh;
position:absolute;
width:50%;
top:100%;
overflow:hidden;
z-index:100;
transition:.50s;
border:groove 1px;
border-left:none;
border-right:none;
transform:translateX(-100%);
}
#main.slide{
transform:translateX(0);
}
#main li{
cursor:pointer;
}
#main li:last-child{
border-bottom:none;
}
#main div{
padding:.70em 1em;
display:flex;
justify-content:space-between;
}
#main div:hover{
background:red;
color:white;
}
#main div:hover .fa{
color:white;
}
li .fa{
color:red;
}
.extra{
display:none;
}
.extra li{
padding:.50em .90em .50em 1.5em;
color:gray;
}
.extra li:hover{
background:red;
color:white;
}
section img{
width:100%;
height:100%;
padding:0;
margin:0;
}
#content section{
height:280px;
}
section{
position:relative;
}
.gradient{
position:absolute;
z-index:1;
top:0;
bottom:0;
left:0;
right:0;
background:linear-gradient(0deg,rgba(76,80,160,.4),rgba(0,0,250,.5));
display:flex;
justify-content:center;
align-items:center;
}
.gradient button{
background:white;
border:0;
padding:1.5em 2.5em;
text-transform:uppercase;
color:blue;
font-weight:bold;
cursor:pointer;
}
.gradient h2{
writing-mode: vertical-rl;
text-orientation: upright;
position:absolute;
top:5%;
left:0;
text-transform:uppercase;
color:white;
font-weight:200;
}
section:nth-of-type(2) .gradient{
background:linear-gradient(0deg,rgba(0,200,0,.4),rgba(0,100,0,.4));
}
section:nth-of-type(2) .gradient button{
color:green;
}
section:nth-of-type(2) .gradient h2{
right:0;
}
section:nth-of-type(3) .gradient button{
color:rgb(0,150,230);
}
section:nth-of-type(4) .gradient{
background:linear-gradient(0deg,rgba(200,200,0,.4),rgba(190,190,0,.4));
}
section:nth-of-type(4) .gradient h2{
right:0;
}
section:nth-of-type(4) .gradient button{
color:yellow;
}
/*SOCIAL LINKS*/
#social-links{
display:flex;
align-items:baseline;
background:black;
color:gray;
padding:0 1em;
}
#social-links h4{
text-transform:uppercase;
font-weight:200;
flex:1;
}
#social-links div{
flex:1;
display:flex;
justify-content:space-around;
}
#social-links div i{
cursor:pointer;
margin:0 .40em;
text-align:center;
flex:1;
}
#social-links div i:hover{
color:lightgray;
}
/* footer */
#footer-info{
display:flex;
flex-direction:column;
align-items:center;
text-transform:uppercase;
color:lightgray;
}
#footer-info li{
cursor:pointer;
}
#footer-info li:hover{
color:gray;
}
/*Downloaded from https://www.codeseek.co/-J0hn-/a-simple-mobile-website-wJaBBK */
$(document).ready(function(){
$('nav').on('click','button',function(){
$('#main').toggleClass('slide');
});
$('#main').on('click','li',function(){
$(this).find('.extra').slideToggle();
$(this).find('.fa-plus').toggleClass('fa-minus');
});
$('#wrap').scroll(function(){
if ($(this).scrollTop() > 250) {
$('.toggleUp').fadeIn();
} else {
$('.toggleUp').fadeOut();
}
});
//scroll to top
$('.toggleUp').click(function(){
$('#wrap').animate({scrollTop : 0},'slow');
return false;
});
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
jQuery
v3.1.1
