RWD- Mostly Fluid Layout Pattern

In this example below you will see how to do a RWD- Mostly Fluid Layout Pattern with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>RWD- Mostly Fluid Layout Pattern</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container">
  
  
   <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
  
<div class="collapse navbar-collapse myNav" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
  </div>
  
  
  <div class="row">
    <section class="blue col-sm-8 col-sm-push-4 col-md-6 col-md-push-3">
    <div class="row">
      <div class=" purple col-sm-4 col-md-3 col-md-1"></div>
       <div class=" purple col-sm-4 col-md-3 col-md-1"></div>
       <div class=" purple col-sm-4 col-md-3 col-md-1"></div>
       <div class=" purple col-sm-4 col-md-3 col-md-1"></div>
      </div>
    </section>
    <aside class="red col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-6"></aside>
    <aside class="yellow col-sm-12 col-md-3"></aside>

  </div>
  
<footer class="visible-xs row">
    <ul  class=" myNav ">
      <li><a>Link</a></li>
      <li><a>Link</a></li>
    </ul>

  </footer>
  
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/marcocastro/rwd-mostly-fluid-layout-pattern-aBaqLO */
.blue {
  background: blue;
  height: 500px;
}
.red {
  background: red;
  height: 500px;
}
.yellow {
  background: yellow;
  height: 500px;
}
.purple {
  background: purple;
  height: 50px;
  margin: 5px;
}
.myNav ul {
  list-style: none;
}
.myNav ul li {
  background: orange;
  padding: 5px;
  text-align: center;
}
.myNav ul li a:hover {
  background: #cc8400;
}

Comments