RWD- Mostly Fluid Layout Pattern

What is a rwd- mostly fluid layout pattern How do you make a rwd- mostly fluid layout pattern? This script and codes were developed by Mfcastro on 25 March 2022, Friday.

How do I make an rwd- mostly fluid layout pattern?
  1. RWD- Mostly Fluid Layout Pattern Previews
  2. RWD- Mostly Fluid Layout Pattern HTML Codes
  3. RWD- Mostly Fluid Layout Pattern CSS Codes
RWD- Mostly Fluid Layout Pattern Previews

RWD- Mostly Fluid Layout Pattern HTML Codes

<!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>

RWD- Mostly Fluid Layout Pattern CSS Codes

.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;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.