cu-ski

cu-ski.markdown

cu-ski

A Pen by Bitcollage on CodePen.

License.

index.html

<div class="header">Header</div>
<div class="subheader">Subheader</div>
<div class="mainarea">
    <div class="sidebar">
      <div class="search" style="height: 800px; background-color: yellow">

      </div>
    </div>
    <div class="controlbar"></div>
    <div class="content">
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
      <img style="display:block; margin-left: 20px; margin-bottom: 5px;" src=" http://lorempixel.com/700/200/" />
    </div>
</div>

style.stylus

* {
  font-size: 12px;
}
.header {
  background-color: gray;
  height: 10vh;
}
.subheader {
  background-color: darkgray;
  height: 5vh;
}
.mainarea {
    
    display:flex;
    flex-direction: row;
    position:absolute;
    width: 100%;
  
    .sidebar {
      background-color: blue;
      width: 15%;
    }
    .controlbar {
      background-color: green;
      width: 3%;
    }
    .content {
      background-color: pink;
      flex:1;
    }
  
}