Box Layout

box layout

by gentou

HTML

<body>
  <div class="container">
    <span>ukryty span</span>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div class="content-area">
        <h2>Lorem Ipsum</h2>
        <h3>CZYTAJ WIĘCEJ</h3>
      </div>
    </div>
    <div>
      <div...

SCSS

$first-color: #878787;
$second-color: #ffc239;
$third-color: #01b5b6;
$fourth-color: #acce5e;
$fifth-color: #f3654f;
$sixth-color: #92d6e9;
$seventh-color: #fdc74d;
$eighth-color: #01b5b6;
$ninth-color: #878787;
$tenth-color: #e84259;
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200); 

@mixin block($width, $width-percentage-to-height){
    width: $width;
    &:after{
      content: "";
      display: block;
      padding-bottom: $width-percentage-to-height;
    }
}


body{
    font-family: 'Source Sans Pro', sans-serif;
    color: #fff;
    margin:0;
    padding: 0;
    width: 100%;
}

h2{
    font-size: 32px;
    margin: 0;
    text-transform: capitalize;
}

h3{
    font-size: 20px;
    margin: 0;
    text-transform: uppercase;
}

h3:after{
    display: inline-block;
    content: "";
    width: 31px;
    height: 12px;
    background-image: url('http://s29.postimg.org/849471qo3/icon_arrow.png');
    background-repeat: no-repeat;
    background-position: right center;
}

.content-area{
    position:  absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    margin: auto;
    height: 62px;
    width:90%;

}

.container{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;

    span{
        display: none;
    }
    >div{
        position: relative;
        &:nth-of-type(10n+1){
            background-color: $first-color;
        }
        &:nth-of-type(10n+2){
            background-color: $second-color;
        }
        &:nth-of-type(10n+3){
            background-color: $third-color;
        }
        &:nth-of-type(10n+4){
            background-color: $fourth-color;
        }
        &:nth-of-type(10n+5){
            background-color: $fifth-color;
        }
        &:nth-of-type(10n+6){
            background-color: $sixth-color;
        }
        &:nth-of-type(10n+7){
            background-color: $seventh-color;
        }
        &:nth-of-type(10n+8){
            background-color: $eighth-color;
        }        
      ...