home page prototype

by Richard Hunter

HTML

<div class='container clear-fix'>
    <div class='customer'>
         <h2>customer page</h2>

        <p>lorem ipsum ksks iwkk wiocj wipbhw' fgjfgf</p>
    </div>
    <div class='middle'>
         <h1>Forefront</h1>

        <div class='image-container'>
            <div class='content'>
                <img src='http://localhost:1314/images/home-page-consultant-image.jpg'>
            </div>
            <svg id='bar' viewbox="0 0 150 100" width="100%">
                <polygon class='poly' points="0,0 20,0  0,100" style='fill:white' />
                <polygon class='poly' points="150,0 130,100  150,100" style='fill:white' />
            </svg>
        </div>
    </div>
    <div class='consultant'>
         <h2>consultant page</h2>

        <p>lorem ipsum ksks iwkk wiocj wipbhw' fgjfgf</p>
    </div>
</div>

SCSS

* { box-sizing : border-box; }
img { width : 100%;}
@mixin aspect-ratio($width, $height) {

  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.clear-fix:after{
    content : '';
    clear : both;
    display : block;
}

.middle {
    width : 33.3333%;
    float : left;
    text-align : center;
    h1 {
        font-size : 10px;
    }
    border-left : solid 1px red;
    border-right : solid 1px red;
    .image-container {
        @include aspect-ratio(1.5, 1);
        position : relative;
        background : pink;
        width : 140%;
        margin-left : -20%;
    }
}
svg {
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}
.container {
    width : 70%;
    border : solid 1px black;

}
.customer, .consultant {
    width : 33.33333%;
    text-align : center;
    font-size : 10px;
    padding : 5px 20px;
}
.customer {
    float : left;
}
.consultant {
    float : right;
}