Tget - Adv

by pj_js15

HTML

<div class="modal-container">
  <div class="adv-banner">
    <div class="banner-label">
      Tgt | Advantage
    </div>
  </div>
  <div class="body">
    <div class="title">
      We have noticed you already have an account... Please link it now
    </div>
    <div class="desc">
      Lorem ipsum sit dolar, Integer elit ante, congue site amet sodales in, aliquet quis nulla.
    </div>
    <div class="btn-link-containers">
      <button>
        Link Account
      </button>
      <div class="link ts-and-cs">
        <a href="#">Terms and Conditions</a>
      </div>
      <div class="link not-now">
        <a href="#">Not Now</a>
      </div>
      
    </div>
  </div>
</div>

SCSS

.modal-container{
  border: 1px solid gray;
  height: 600px;
  width: 400px;
  
  .adv-banner{
    border: 1px solid red;
    position: relative;
    min-height: 200px;
    text-align: center;
    
    .banner-label{
      background-color: red;
      color: #FFF;
      font-weight: bold;
      position: absolute;
      bottom: -20px; 
      vertical-align: bottom;
      text-align: center;
      padding: 10px;
      width: 75%;
      margin-left: 10%;
      margin-right: 10%;
    }
  }
  
  .body{
    border: 1px solid blue;
    margin-top: 25px;
    padding: 15px;
    text-align: center;
    
    .btn-link-containers{
      padding: 20px 0 20px 0;

      .link{
        margin-top: 10px;
        
        &.not-now{
          margin-top: 20px;
        }
      }
    }
  }
}