RWD- Mostly Fluid Layout Pattern

Tutorials of (Rwd- mostly fluid layout pattern) by Mfcastro

<!DOCTYPE html>
<html >
<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/ */
.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;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( RWD- Mostly Fluid Layout Pattern ) is write by Mfcastro, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Mfcastro