Lay-out 1

In this example below you will see how to do a Lay-out 1 with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Lay-out 1</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="row content">
    <div class="col-sm-4 sidenav">
      <img src="http://www.logoground.com/uploads/z2875553Bookstore.jpg" height="110">
      <ul class="nav nav-stacked">
    <li class="active"><a data-toggle="pill" href="#home" id="home-menu">Home</a></li>
    <li><a data-toggle="pill" href="#menu1" id="menu1-menu">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2" id="menu2-menu">Menu 2</a></li>
    <li><a data-toggle="pill" href="#menu3" id="menu3-menu">Menu 3</a></li>
  </ul><br>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>

    <div class="col-sm-8 tab-content">
      <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
    </div>
  </div>


<footer class="footer">
  <p>Footer Text</p>
</footer>

</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/FilipeNowicki/lay-out-1-VPGNbm */
.sidenav {
  text-align: center;
  margin:0;
  padding: 0;
}

footer {
  background-color: #46AD71;
  color: white;
  height: 4em;
  position:fixed;
  bottom:0px;
  width:100%;
  padding: 1em;
  text-align: center;
}
#home, #home-menu{
  background-color: #652D8F;
  padding: 1em;
}
#menu1, #menu1-menu{
  background-color: #EE592C;
  padding: 1em;
}
#menu2, #menu2-menu{
  background-color: #A7D36C;
  padding: 1em;
}
#menu3, #menu3-menu{
  background-color: #4797CC;
  padding: 1em;
}

#menu3 {
  min-height: 30em;
}

Comments