<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Infant:400i,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <aside class="side-content">
      <h2 class="logo">
        EO/
      </h2>
      <i id="toggle-btn" class="fa fa-chevron-down fa-lg" aria-label="menu-button" role="button" onclick="toggleMenu()"></i>
      <nav id="nav-menu-js" class="nav-menu">
        <a href="#" class="nav-link">About</a>
        <a href="#" class="nav-link">News</a>
        <a href="#" class="nav-link">Shop</a>
        <a href="#" class="nav-link">Contact</a>
      </nav>       
      <nav id="mobile-menu-js" class="mobile-menu" style="display: none;">
        <a href="#" class="nav-link">About</a>
        <a href="#" class="nav-link">News</a>
        <a href="#" class="nav-link">Shop</a>
        <a href="#" class="nav-link">Contact</a>
      </nav>
      <div id="categories-js" class="categories">
        <h2 class="category">Fashion</h2>
        <h2 class="category">Beauty</h2>
        <h2 class="category">Print</h2>
        <h2 class="category">Branding</h2>
        <h2 class="category">Digital</h2>
        <h2 class="category">Pattern</h2>
        <h2 class="category">Music</h2>
      </div>
    </aside>

    <main class="main-content">
      <div class="column-one column">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--9ezO-iN5--/q_jpegmini:1/v1527069128/photo-1482263448015-c6b14d636e0a_fbcwdn_sstr93.jpg" alt="Two women walking past each other" class="image">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--MvWW7YXW--/q_jpegmini:1/v1527069132/photo-1492633342445-8408e4c17712_awp3mp_vz3cc5.jpg" alt="Girl with a flower crown" class="image">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--iGqqJkvI--/q_jpegmini:1/v1527069132/photo-1499013819532-e4ff41b00669_gcjl4y_nmpeyk.jpg" alt="A pair of beige trainers" class="image">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--TuYf6wQo--/q_jpegmini:1/v1527069128/paper-3146952_960_720_a7lglm_yrwuhi.jpg" alt="Notepads and pens" class="image">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--XQGQ4-3K--/q_jpegmini:1/v1527069130/pexels-photo-893896_q6vqn4_qv9ord.jpg" alt="A laptop, notepads, memo pad and cactus on a blue desk" class="image">
      </div>
      <div class="column-two column">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--D0jb7ZfY--/q_jpegmini:1/v1527069129/pexels-photo-838423_hriono_zbxhbw.jpg" alt="Pink tiles" class="image">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--tSiWDSOy--/q_jpegmini:1/v1527069132/photo-1519763421920-f2d769e01a37_qnr50f_tuptz8.jpg" alt="A girl wearing glasses sitting on stairs" class="image">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--LKnlDFz7--/q_jpegmini:1/v1527069132/photo-1506976802331-7f6a56eee0f0_utyk5p_ofxbxb.jpg" alt="Girl in red cap standing in front of yellow and blue wall" class="image">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--PFh8MQ4B--/q_jpegmini:1/v1527069130/photo-1505204144504-0a48bd7862ee_ihdjtk_zcdupl.jpg" alt="Girl in smart attire standing in front of striped wall" class="image">
      </div>
      <div class="column-three column">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--Tlgn-5DV--/q_jpegmini/v1527069132/photo-1518382473172-c5b406fe7efd_nh5gqu_ae944m.jpg" alt="Black girl with an afro" class="image">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--zQ5McgQs--/q_jpegmini:1/v1527069130/photo-1492707892479-7bc8d5a4ee93_nrhzb7_sg2808.jpg" alt="Beauty products spilling out of a black sidebag" class="image">
        <img src="http://res.cloudinary.com/dm7uillhl/image/upload/s--_sFt8kAZ--/q_jpegmini:1/v1527069130/photo-1496775162873-064fc81ef366_iieixm_lcm9p0.jpg" alt="Vogue magazines on top of white bedsheets" class="image">
      </div>
    </main>

  </div>
</body>

</html>
//Screen size
$tablet-width: 590px;

//Media query
@mixin tablet {
  @media (max-width: #{$tablet-width}) {
    @content;
  }
}

//Animation
@keyframes animate {
  0% {
    top: -3px;
  }
  50% {
    top: 3px;
  }
  100% {
    top: -3px;
  }
}

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: auto;
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  .side-content {
    width: 250px;
    height: 600px;
    position: fixed;
    top: 0;
    left: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    #toggle-btn {
      display: none;
    }
    .logo {
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: normal;
      font-family: Impact;
      font-size: 40px;
    }
    .nav-menu {
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: space-between;
      font-family: sans-serif;
      font-weight: bold;
      .nav-link {
        padding: 2px 0;
        text-decoration: none;
        color: black;
        font-size: 80%;
        &:hover {
          color: #757575;
        }
      }
    }
    .categories {
      margin-top: 5px;
      padding-left: 2px;
      .category {
        width: calc(100% - 15px);
        margin-bottom: 0;
        margin-top: 0;
        font-size: 42px;
        font-family: "Cormorant Infant", serif;
        font-weight: 600;
        cursor: pointer;
        position: relative;
        left: 0;
        transition: left 0.7s;
        &:hover {
          text-decoration: underline;
          left: 15px;
        }
      }
    }
  }
  .main-content {
    width: calc(100% - 270px);
    min-width: 300px;
    height: auto;
    margin-left: 270px;
    align-self: flex-end;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: stretch;
    .column {
      min-width: 300px;
      flex: 1;
      height: 100%;
      padding-top: 25px;
    }
    .column-one {
      .image {
        width: calc(100% - 30px);
        margin: 15px 15px 15px 0;
      }
    }
    .column-two {
      .image {
        width: calc(100% - 30px);
        margin: 15px 15px 15px 0;
      }
    }
    .column-three {
      .image {
        width: calc(100% - 30px);
        margin: 15px 15px 15px 0;
      }
    }
  }
}

@include tablet {
  .wrapper {
    flex-direction: column !important;
    align-items: center !important;
  }
  .side-content {
    width: 100% !important;
    height: 70px !important;
    order: 1;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap;
    flex: 2;
    background-color: white;
    position: relative;
    z-index: 500;
  }
  .logo {
    padding-left: 0px !important;
    flex: 0.7;
    font-size: 32px !important;
  }
  .fa-chevron-down {
    display: block !important;
    flex: 0.23;
    padding-top: 10px;
    padding-right: 20px;
    position: relative;
    top: -5px;
    text-align: right;
    font-size: 28px;
    cursor: pointer;
    animation: animate 0.9s 2s ease-in infinite alternate;
    &:hover {
      animation: none;
    }
  }
  .categories {
    display: none;
  }
  .nav-menu {
    display: none !important;
  }
  .mobile-menu { 
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    height: 0px;
    margin-right: 21px !important;
    margin-left: -19px;
    margin-top: -8px;
    padding-top: 10px;
    text-align: right;
    background-color: white;
    overflow: hidden;
    transition: height 0.5s ease-out;
  }
  .nav-link {
    padding-right: 30px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    position: relative;
    right: 0 !important;
    font-size: 90% !important;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    color: black;
    transition: right 0.25s ease-in-out;
    &:hover {
      right: 10px !important;
      color: #757575;
    }
  }
  .main-content {
    width: calc(100% - 30px) !important;
  }
}
View Compiled
//Toggle button
function toggleMenu() {
  var navMenu = document.getElementById("mobile-menu-js");
  if (navMenu.style.height == "0px") {
    navMenu.style.height = "134px";     
  } else {
    navMenu.style.height = "0px";                  
  }
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.