newsletter-cta

Summary

Top row of the dark footer with a two-line "Get Our Latest's News & Updates" headline on the left and a rounded email-input form on the right. Input has an embedded mail-icon span and a circular arrow submit button.

HTML structure (minimal)

<div class="tp-footer__border-bottom">
  <div class="row align-items-center">
    <div class="col-md-6 wow tpfadeUp">
      <div class="tp-footer__top-text">
        <span>Get Our Latest's News <br> & Updates</span>
      </div>
    </div>
    <div class="col-md-6 wow tpfadeUp">
      <div class="tp-footer__input p-relative">
        <form action="#">
          <input type="text" placeholder="Business email adress">
          <span><svg><!-- mail icon --></svg></span>
          <button><svg><!-- arrow icon --></svg></button>
        </form>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-footer {
  &__top-text span {
    font-weight: 700;
    font-size: 36px;
    color: var(--tp-common-white);
    line-height: 1.1;
  }
  &__input input {
    width: 100%;
    height: 60px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding-left: 55px;
    padding-right: 70px;
    color: #fff;
  }
  &__input span {
    position: absolute; top: 50%; left: 24px;
    transform: translateY(-50%);
  }
  &__input button {
    position: absolute; top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--tp-theme-1);
    color: #fff;
  }
  &__border-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
}

Notable details

• Input + submit live as position: absolute children inside the form, so the visual is one continuous pill rather than two separate fields.
• Headline uses <br> to force a two-line break — no JS or CSS clamp needed, but make sure copy length matches if you change it.
• The dark footer container uses tp-gsap-bg so the newsletter row sits on a band that pinches in via ScrollTrigger as you reach it (see tp-gsap-bg highlight).

Use when

• Newsletter sign-up rows that need to feel premium without taking a full hero block.
• Footer-top callouts where the form should feel inline with the headline.
• Dark footers with brand-colored submit buttons.

Caveats

• The form posts to #; replace with your real endpoint or hook into assets/js/ajax-form.js plus assets/mail.php to get the bundled handler.