DigiBooks

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

Forked from Ayoub's Pen DigiBooks.

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

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>DigiBooks</title>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="full" id="mainback">
<header>
<ul id="mainm">
  <a href="#"><li>Home</li></a>
  <a href="#"><li>Browse</li></a>
 
  <a href="#"><li>About us</li></a>
  <a href="#"><li>Join / Login</li></a>
</ul>
  
  <div id="mobilem-btn" class="fa fa-bars"></div>
  <div id="mobile-logo"></div>
  
  <ul id="mobilem">
  <a href="#"><li>Home</li></a>
  <a href="#"><li>Browse</li></a>
  <a href="#"><li>About us</li></a>
  <a href="#"><li>Join / Login</li></a>
  </ul>
  
  
</header>
<div id="content-wrapper">
  <div id="content">
    <div id="logo"></div>
    <h2>Welcome to DigiBooks!</h2>
    <p>Description about the site, what it does and what it is made for goes here.... text text text text text text text text text text text text text text text text text text text text text text.</p>
  </div>
  </div>
  <div id="godown" class="fa fa-chevron-circle-down"></div>
  </div>


  <div id="book-list">
    <h2>Popular Books</h2>
   
        <div class="item"><img src="https://37.media.tumblr.com/tumblr_ltbpin2W3Z1qjhzvpo1_500.jpg"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/8xop6jx5z-AC?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/nv9lZM_0RI4C?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/5NomkK4EV68C?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/mFMG1eUXyfcC?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/w38DX0cxwagC?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/1iRcTDvPlQsC?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/ISsOIrR44MkC?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/RCxPAgAAQBAJ?fife=w300-rw"></div>

         <div class="item"><img src="https://37.media.tumblr.com/tumblr_ltbpin2W3Z1qjhzvpo1_500.jpg"></div>

         <div class="item"><img src="https://37.media.tumblr.com/tumblr_ltbpin2W3Z1qjhzvpo1_500.jpg"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/w38DX0cxwagC?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/1iRcTDvPlQsC?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/ISsOIrR44MkC?fife=w300-rw"></div>

         <div class="item"><img src="https://encrypted.google.com/books/images/frontcover/RCxPAgAAQBAJ?fife=w300-rw"></div>


           <div id="space"></div>

  </div>
<footer>Copyrights - DigiBooks 2014</footer>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/usahana/digibooks-mLKCv */
body,html {
  margin:0;
  background: #EEE;
    height:100%;
}

html>body .full {
height: auto;
}

.full {
height: 100%;
min-height: 100%;
}

#mainback {
    background: url('https://css-tricks.com/wp-content/csstricks-uploads/transpBlack50.png') center center, url('http://christiannaths.com/code/admin-interface/dots.png') center center fixed, url('http://albumarium.com/media/W1siZiIsIjUzMDI3ODJkNzY3MDczNzQxZTFhMDAwMCJdLFsicCIsInRodW1iIiwiMTkyMHgxOTIwXHUwMDNFIl1d?sha=6847e27b') center center no-repeat fixed;
  background-size: auto, auto, cover;
}
header {
  background: #fff;
  background: #fff;
position: fixed;
top: 0;
right: 0;
left: 0;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
}

header #mainm {
  font-family:arial;
list-style: none;
margin: 0;
background: #fff;
width: 600px;
height: 40px;
color: #444;
}


header #mobilem-btn {
  padding: 12px;
  float: right;
  font-size: 22px;
  display:none;
  cursor: pointer;
}

header #mobile-logo {
  background: #fff;
  border:solid 1px #999;
  height: 60px;
  width: 60px;
  float: left;
  border-radius: 100%;
  position: absolute;
    display:none;
}

header #mobilem {
  display:none;
  list-style: none;
  margin:0;
  padding: 0;
  font-family:arial;
  font-size: 13px;
  margin-top: 55px;

  -webkit-box-shadow: 0px 27px 30px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    0px 27px 30px 0px rgba(50, 50, 50, 0.5);
box-shadow:         0px 27px 30px 0px rgba(50, 50, 50, 0.5);
}
  
  
header #mobilem li {
margin-right: 10px;
background: #fff;
padding: 11px;
    border-bottom: solid 1px #F0F0F0;
}

header #mobilem a {
text-decoration: none;
color: #333;
}
  

header #mainm li {
float: left;
background: #fff;
padding: 12px;
padding-top: 16px;
border-bottom: solid 5px #FFFFFF;
}

header #mainm a {
text-decoration: none;
color: #333;
}

header #mainm li:hover {
background: #F0F0F0;
border-bottom: solid 5px #FFDA44;
}

#content {
width: 70%;
height: 200px;
margin: 0 auto;
padding-top: 100px;
border-bottom: #999;
}

#content-wrapper {
  overflow:hidden;
  height:560px;
  width:100%;
}

#logo {
  background: #fff;
  height: 200px;
  width: 200px;
  border-radius:100%;
  float:left;
  text-align:center;
  background-image: url(http://www.ostraining.com/cdn/images/ostrainingcom/ostraining-logo.png);
background-size: 63%;
background-position: center;
background-repeat: no-repeat;
}

#content p {
color: #fff;
font-family: arial;
width: 60%;
float: left;
margin-left: 30px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

#content h2 {
color: #fff;
font-family: arial;
font-size: 30px;
width: 60%;
float: left;
  margin-top: 40px;
  margin-bottom: 0px;
margin-left: 30px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

#godown {
width: 37px;
height: 50px;
font-size: 40px;
margin: auto auto;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
border-radius: 100%;
display: block;
  cursor:pointer;
}

#godown:hover {
color: #fff;
}

div#book-list {
width: 73%;
margin: 0 auto;
color: #fff;
font-family: arial;
  color:#444;
}

.item {
width: 168px;
height: 250px;
background: #777;
float: left;
margin: 8px;
overflow: hidden;
cursor: pointer;
border: 1px solid #DDD;
}

.item img {
  max-width:100%;
}

#space {
  height: 20px;
  width: 200px;
  float: right;
}
footer {
  background: #444;
  clear:both;
  padding: 10px;
  text-align: center;
  color:#999;
  font-family: arial;
  font-size: 10px;
}

@media (max-width: 821px) and (min-width: 370px) {

#content p {
width: 50%;
}

#content h2 {
width: 50%;
}

#logo {
  width: 150px;
  height: 150px;
}
  
}

@media only screen and (max-width: 370px) {

#logo {
  display:none;
}
  
#mainm {
  display: none;
}
  

  header #mobilem-btn {
  display:block;
}
  
  header #mobile-logo {
    display: block;
}
  
}

/*Downloaded from https://www.codeseek.co/usahana/digibooks-mLKCv */
$( "#mobilem-btn" ).click(function() {
  $( "#mobilem" ).slideToggle( "slow", function() {
  });
});

Comments