1003–Implement a minimal float-based layout

Background

We are building a website using a row-column-based layout. The development team has built the HTML and they want you to implement the CSS grid so the elements can be laid out correctly.

Here is the given HTML code.

    <div class="row">
      <div class="small-12 col">Float based layout</div>  
    </div>
    <nav class="row">
      <div class="small-4 col">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>  
    </nav> 
    <div class="row">
      <main class="small-4 medium-3 col">
        <h1>Headnig of main content</h1>
        <p>Main content goes here.</p>
        <p>Main content goes here.</p>
        <p>Main content goes here.</p>
        <p>Main content goes here.</p>
      </main>
      <aside class="small-4 medium-1 col">
        <p>Aside content goes here.</p>
        <img src="http://placehold.it/500x300" alt="placeholder">
        <img src="http://placehold.it/500x300" alt="placeholder">
      </aside>
    </div>
    <footer>
      <div class="row">
        <div class="small-12 col">
          <p>This is a test project created by <a href="http://makzan.net">Makzan</a>.</p>
        </div>
      </div>
    </footer>

Requirement

You need to make the layout looks the same as the following:

When wider than 600px:

When in narrow screen:

Help

❓ Show help content