TGT- Start free trial

by pj_js15

HTML

<div class="sample-modal">

  <div class="adv-modal-container">
  
    <div class="join-the-fam">
      <div class="adv-logo">
        &nbsp;
      </div>
      <h3>
        Join the Fam!
      </h3>
      <p>
        Be one of the first to enjoy a range of benefits from Australia's most loved brands
      </p>
      <div class="brands">
        <div class="brand">&nbsp;</div>
        <div class="brand">&nbsp;</div>
        <div class="brand">&nbsp;</div>
        <div class="brand">&nbsp;</div>
        <div class="brand">&nbsp;</div>
      </div>
    </div>  
    
    <div class="start-free-trial">
      <div class="top-section">
        <h2>
          FREE 30 DAY TRIAL
        </h2>
        <p>
          You won't be charged until after your 30-day trial period ends ($X/month), cancel anytime.
        </p>
        <hr class="section-div" />
      </div>
      
      <div class="offerings">
        <div class="offer">
          <div class="image-cont"></div>
          <div class="info">
            <h3>
              Sample Offer Heading
            </h3>
            <p>
              Enjoy free delivery on all eligible items at any of our retailers
            </p>
          </div>
        </div>
        <div class="offer">
          <div class="image-cont"></div>
          <div class="info">
            <h3>
              Sample Offer Heading
            </h3>
            <p>
              Enjoy free delivery on all eligible items at any of our retailers
            </p>
          </div>
        </div>
        
      </div>
      
      <button class="start-trial">Start free trial</button>
      <div class="existing-acct">
        <span>Already have an account?</span>
        <a href="#">Log in</a>
      </div>
      
    </div>
    
    <div class="bottom-section">
      <div class="learn-more-ts-cs">
        <a href="#">Learn more</a> | <a href="#">Terms & Conditions</a>
      </div>
      <a class="not-now" href="#">Not Now</a>
    </div>

  </div>
  
</div>

SCSS

.sample-modal{
  border: 1px solid gray;
  width: 320px;
  padding: 20px;
  
  .adv-modal-container {
    .join-the-fam {
      background-color: #F7F7F7;
      border-radius: 12px;
      padding: 10px;
      max-width: 310px;
      
      .adv-logo {
        border: 1px solid gray;
        height: 50px;
      }
      
      .brands {
        display: flex;
        .brand {
          border: 1px solid gray;
          height: 30px;
          width: 40px;
          margin: 10px;
        }
      }
    }
    
    .start-free-trial {
      border: 2px solid #4A0080;
      border-radius: 12px;
      color: #4A0080;
      margin-top: 24px;
      min-height: 300px;
      text-align: center;
      
      .top-section{
        padding: 20px;
        hr.section-div {
          height: 2px;
          background-color: #4A0080;
          border: none;
        }
      }
      
      .offerings {
        display: inline-flex;

        .offer {
          border: 1px solid red;
          text-align: center;
          width: 50%;
          padding: 10px;
          margin: 0 auto;
          
          .image-cont {
            border: 1px solid gray;
            height: 100px;
            width: 100px;
            margin: 0 auto;
          }
        }
      }
      
      button.start-trial {
        background-color: #00BA7E;
        border-radius: 50px;
        border: none;
        height: 56px;
        max-width: 260px;
        width: 100%;
        color: #FFF;
        font-size: 24px;
      }
      
      .existing-acct {
        color: #999;
        margin-top: 10px;
        
        a {
          color: #000;
        }
      }
      
    }
    
    .bottom-section {
      text-align: center;

      .learn-more-ts-cs {
        margin-top: 24px;
        margin-bottom: 20px;
        a {
          color: #3A006A;
          font-weight: bold;
        }
      }
      
      .not-now {
        text-decoration: none;
      }
    }
    
    
  }
}