A simple mobile website

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

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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;
	});
  
});

Comments