<div class="fluid__container">
  <div class="inner__container">
    <div class="close__btn" id="close__btn">
      <img src="https://www.dropbox.com/s/kmgqf0bjhntn68n/close.svg?raw=1" alt="close button" title="close button">
    </div>
    <div class="text">
      <h6>today only</h6>
      <h1>amazon echo</h1>
      <p>
        amazon echo is designed around your voice, it's hands-free and always on, with seven microphones and beam-forming technology, echo can hear you from across the room-even while music is playing.
      </p>
    </div>
    <div class="image__product">
      <img src="https://www.dropbox.com/s/zloqutcrzygrcxz/amazon_echo.png?raw=1" alt="amazon echo" title="amazon echo">
    </div>
    <div class="cta__buttons">
      <button class="btn__outline">
        learn more about echo
      </button>
      <button class="btn__primary">
        get one
      </button>
    </div>
  </div>
  <div class="social__media">
    <span>follow me on : &nbsp;</span> 
    <ul>
      <li><a href="http://dribbble.com/chouaibblgn45"><i class="fab fa-dribbble"></i></li>
      <li>
        <a href="https://www.behance.net/geek30">
          <i class="fab fa-behance"></i>
        </a>
      </li>
      <li>
        <a href="http://twitter.com/chouaibblgn45">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
      <li>
        <a href="https://codepen.io/chouaibblgn45">
          <i class="fab fa-codepen"></i>
        </a>
      </li>
    </ul>
  </div>
</div>
//fonts
@import url('https://fonts.googleapis.com/css?family=Montserrat:500,700|PT+Serif&display=swap');

//colors
$bg-color : #fafaf9;
$typo-color : #ffffff;
$gradient-color-01 : #176ce8;
$gradient-color-02 : #229bf4;
$btn-color : #414142;
$outline-btn-color : #9297a1;


*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: 'PT Serif', serif;
  font-size: 16px;
  background-color:#fafaf9;
}

.fluid__container{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  &::before,
  &::after{
    content:"";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    z-index: 1;
  }
  &::before{
    border-top: 380px solid $gradient-color-01;
    border-right: 380px solid transparent;
    top:0;
    left:0; 
  }
  &::after{
    border-bottom: 100px solid $btn-color;
    border-left: 100px solid transparent;
    bottom:0;
    right:0;
  }
  .inner__container{
    padding:20px;
    display: flex;
    flex-direction:row-reverse;
    justify-content:center;
    align-items:center;
    position: relative;
    z-index: 3;
    width: 700px;
    height: 380px;
    background: rgb(18,93,204);
background: linear-gradient(60deg, rgba(18,93,204,1) 0%, rgba(34,155,244,1) 79%);  
    box-shadow:1px 1px 50px rgba(0,0,0,.4);
    .text{
      display: block;
      width: 100%;
      transform:translate(-30px,-50px);
      color:$typo-color;
      h1,h6{
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        letter-spacing:1px;
      }
      h1{
        margin:0 0 15px 0;
        font-weight: 700;
      }
      h6{
        font-weight: 500;
        margin:0;
      }
      p{
        font-size: .8rem;
        text-align:left;
        line-height: 1.8;
      }
    }
    .image__product{
      display: block;
      width: 500px;
      height: 400px;
      transform:translateY(-50px);
      position: relative;
      overflow: visible;
      &::before{
        content:"";
        display: block;
        width: 40%;
        height:20px;
        border-radius:50%;
        background: transparent;
        box-shadow: 0 0px 20px 20px rgba(0,0,0,.4);
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        overflow: visible;
      }
      img{
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        object-fit:cover;
        object-position:center;
      }
    }
    .close__btn{
      display: block;
      width:18px;
      height: 18px;
      position: absolute;
      top:20px;
      right:20px;
      z-index: inherit;
      overflow: hidden;
      cursor: pointer;
      img{
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        object-fit:cover;
        object-position:center;
      }
    }
    .cta__buttons{
      position: absolute;
      bottom:20px;
      left:50%;
      transform: translateX(-50%);
      display: flex;
      align-items:center;
      justify-content: flex-end;
      width:660px;
      height: 90px;
      background: $typo-color;
      z-index: -1;
      overflow: hidden;
      button{
        margin:0 20px 0 0;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: .7rem;
        border:none;
        cursor: pointer;
        height: 50px;
        width: 180px;
        text-transform: uppercase;
        &.btn__primary{
          background: #414142;
          color:$typo-color;          
        }
        &.btn__outline{
          background: transparent;
          border:1px solid rgba($outline-btn-color,.7);
          width: 200px;
        }
      }
    }
  }
  .social__media{
    display: flex;
    position: absolute;
    bottom:0;
    border-radius:0 15px 0 0;
    left:0;
    background: #5f27cd;
    padding:10px;
    span{
      text-transform:capitalize;
      font-family: 'Montserrat', sans-serif;
      color: $typo-color;
    }
    ul{
      display: flex;
      list-style: none;
      justify-content: center;
      li{
        display: block;
        width: 20px;
        height: 20px;
        margin:0 6px;
        a{
          text-decoration: none;
          color: $typo-color;
        }
      }
    }
  }
}

@media screen and (max-width:576px){
  .fluid__container{
    overflow-y:auto;
    .inner__container{
      width:90%;
      height: 90%;
      .image__product{
        width: 200px;
        height: 200px;
        transform: translateY(0);
      }
      .text{
        transform: translateY(0);
      }
      .cta__buttons{
        width:90%;
        height: auto;
        justify-content:space-between;
        background: transparent;
        button{
           margin:0;
          &.btn__outline{
            border-color:$typo-color;
            color:$typo-color;
          }
        }  
      }
    }
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.