<div class="container">
  <div class="left-container">
    <h1 class="logo">green.</h1>
    <ul class="social">
      <li>
        <a href="#!">fb</a>
      </li>
      <li>
        <a href="#!">in</a>
      </li>
      <li>
        <a href="#!">tw</a>
      </li>
    </ul>
    <h2 class="title">Greenhouse</h2>
  </div>

  <div class="center-container">
    <img src="https://images.unsplash.com/photo-1501004318641-b39e6451bec6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80" alt="">
  </div>

  <div class="right-container">
    <header class="header">
      <button class="toggle"><i></i></button>
      <button class="search"><i></i></button>
    </header>
    <div class="body">
      <div class="card">
        <h2 class="card-title">
          Rubber Plant
        </h2>
        <p class="card-txt">
          Rubber tress can be enjoyed as medium-sized house plants or grown to become beautiful indoor tress.
        </p>
        <button class="card-btn">Discover</button>
      </div>
      <div class="carousel">
        <div class="item">
          <img src="https://images.unsplash.com/photo-1487700160041-babef9c3cb55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1335&q=80" alt="">
        </div>
        <div class="item">
          <img src="https://images.unsplash.com/photo-1466781783364-36c955e42a7f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="">
        </div>
      </div>
      <div class="pagination">
        <div class="arrows">
          <button class="arrow-left"><i></i></button>
          <button class="arrow-right"><i></i></button>
        </div>
        <div class="page">
          03
        </div>
      </div>
    </div>
  </div>
</div>

<a href="https://www.youtube.com/watch?v=-i2bGNL6bO8" target="_blank" title="Watch me speed code this" style="position: fixed; bottom: 10px; right: 10px"><img src="http://co0kie.github.io/codepen/youtube.png" alt=""></a>

@mixin bp($bp,
  $min-max: min-width){
    $em: $bp/16;
    @media(#{$min-max}: #{$em}em){
      @content;
    }
}
$bg: gainsboro;
$textColor: #111;
$textColor-hover: #106213;
*{
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    color: $textColor;
}
html{
    overflow-x: hidden;
    overflow-y: scroll;
}
body{
    margin: 0;
    padding: 0;
    background-color: $bg;
    @include bp(768){
        height: 100vh;
        display: flex;
    }
}
a:hover{
    color: $textColor-hover;
}
::selection{
    background-color: $textColor-hover;
    color: white;
}
.container{
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: white;
    @include bp(768){
        margin-top: auto;
        margin-bottom: auto;
        display: flex;
    }
    @include bp(1200){
        padding-left: 30px;
        padding-right: 30px;
    }
}
.left-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row wrap;
    > .title{
        flex: 1 100%;
        margin: 70px 0 50px;
        @include bp(768){
            margin: 0;
            flex: none;
            transform: rotate(-90deg);
            font-size: 30px;
        }
    }
    @include bp(768){
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 150px;
    }
    @include bp(1200){
        max-width: 210px;
    }
}
.logo{
    font-size: 20px;
    @include bp(768){
        margin: 0;
        font-size: 18px;
    }
}
.social{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 30%;
    padding: 0;
    list-style: none;
    display: flex;
    > * + *{
        margin-left: 20px;
    }
    > li > a{
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
        @include bp(768){
            font-size: 12px;
        }
    }
    @include bp(768){
        margin-right: 0;
        order: 1;
    }
}
.center-container{
    > img{
        width: 100%;
        max-width: 600px;
        height: 100%;
        object-fit: cover;
    }
    @include bp(768){
        margin-top: -30px;
        margin-bottom: -30px;
        display: flex;
        align-items: flex-end;
        background-color: $bg;
    }
}
.right-container{
    margin-top: 50px;
    .header{
        position: absolute;
        top: 47px;
        right: 20px;
        > button{
            background-color: transparent;
            width: 30px;
            height: 20px;
            position: relative;
            border: 0;
            outline: 0;
            @include bp(768){
                height: 15px;
            }
        }
        @include bp(768){
            position: static;
            display: flex;
            justify-content: space-between;
            margin-bottom: 90px;
        }
        @include bp(1200){
            padding-right: 50px;
        }
    }
    .toggle > i{
        &::before,
        &::after{
            content: '';
            position: absolute;
            left: 0;
            margin: auto;
            right: 0;
            height: 2px;
            background-color: $textColor;
            width: 78%;
            transition: 200ms;
        }
        &::before{
            top: 0;
            .open &{
                transform: rotate(45deg);
                bottom: 0;
            }
        }
        &::after{
            bottom: 0;
            .open &{
                transform: rotate(-45deg);
                top: 0;
            }
        }
    }
    .search > i{
        &::before,
        &::after{
            content: '';
            position: absolute;
            left: 0;
            margin: auto;
            right: 0;
            border-color: $textColor;
            border-width: 2px;
            border-style: solid;
        }
        &::before{
            top: 0;
            bottom: 0;
            border-radius: 50%;
            width: 12px;
            height: 12px;
        }
        &::after{
            bottom: 1px;
            border: 0;
            width: 5px;
            height: 2px;
            background: black;
            transform: rotate(45deg);
            right: -19px;
        }
    }
    @include bp(768){
        margin-top: 0;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 30px;
    }
    @include bp(1200){
        padding-left: 120px;
    }
}
.card{
    &-title{
        margin-top: 0;
        margin-bottom: 0;
        font-weight: 300;
        position: relative;
        &::before{
            content: '';
            position: absolute;
            width: 30px;
            height: 2px;
            background-color: lightgray;
            bottom: -15px;
        }
        @include bp(768){
            font-size: 30px;
            font-weight: 700;
        }
    }
    &-txt{
        color: darkgray;
        line-height: 1.8;
        font-size: 14px;
        margin: 30px 0;
    }
    &-btn{
        padding: 15px 40px;
        font-weight: 700;
        border: 1px solid $bg;
        background-color: white;
        &:hover{
            border-color: $textColor-hover;
            color: $textColor-hover;
        }
    }
    @include bp(1200){
        width: 70%;
    }
}
.carousel{
    display: flex;
    margin-top: 70px;
    > * + *{
        margin-left: 20px;
    }
    > .item{
        > img{
            width: 100%;
            max-width: 300px;
        }
    }
    @include bp(1200){
        margin-right: -30px;
    }
}
.pagination{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .arrows{
        > button{
            width: 30px;
            height: 15px;
            background-color: transparent;
            border: 0;
            outline: 0;
            position: relative;
            > i{
                &::before,
                &::after{
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
                &::before{
                    width: 20px;
                    height: 2px;
                    background-color: black;
                }
                &::after{
                    top: 1px;
                    width: 10px;
                    height: 10px;
                    border-width: 2px;
                    border-style: solid;
                    border-color: transparent transparent black black;
                    transform: rotate(45deg);
                    bottom: 0;
                    margin: auto;
                }
            }
        }
        .arrow-left{
            > i{
                &::before{
                    left: 0;
                }
                &::after{
                    left: 0;
                    transform: rotate(45deg);
                }
            }
        }
        .arrow-right{
            > i{
                &::before{
                    right: 0;
                }
                &::after{
                    right: 0;
                    transform: rotate(-135deg);
                }
            }
        }
    }
    .page{
        position: relative;
        font-size: 22px;
        font-weight: 700;
        &::before{
            content: '';
            position: absolute;
            width: 30px;
            height: 1px;
            background-color: darkgray;
            top: 0;
            bottom: 0;
            margin: auto;
            left: calc(-100% - 15px);
        }
    }
    @include bp(1200){
        padding-right: 50px;
    }
}

// Original design - [Givi Dautashvili] - https://dribbble.com/shots/6981862-Greenhouse/attachments