Learn how-to create a newsletter subscribe card using HTML and Sass.

HTML

    <div class="sub">
      <div class="sub-text">
        <h2>Newsletter</h2>
        <p>Get weekly updates right in your inbox!</p>
      </div>
      <div class="sub-form">
        <div class="field">
          <input
            type="email"
            placeholder="Enter your e-mail address"
            value=""
          />
        </div>
        <div class="field">
          <a
            href="#"
            role="button"
          >
            <i class="far fa-bell"></i>
            <span>Subscribe now</span>
          </a>
        </div>
      </div>
    </div>

Sass

@use "sass:math";

:root {
  --font-size: 16px;
  @for $i from 1 through 16 {
    --n-#{$i}: #{0.25 * $i}rem;
  }
  --button-color: #84bd00;
  --button-color-light: #84bd00;
  --button-color-dark: #009f4d;
}

body {
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: rgb(0,133,173);
background: linear-gradient(90deg, rgba(0,133,173,1) 0%, rgba(72,169,197,1) 100%);
}

.sub {
  --width: calc(100vw - var(--n-16));
  background-image: linear-gradient(20deg, #00205b, #005670);
  width: var(--width);
  height: var(--height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: var(--n-4);
  box-shadow: 0 var(--n-3) var(--n-5) rgba(#000000, 0.3);
  box-sizing: border-box;
}

.sub-text, .sub-form {
  width: 100%;
  box-sizing: border-box;
}

.sub-text {
  padding: var(--n-8);
  padding-bottom: var(--n-2);
  h2 {
    font-size: var(--n-8);
  }
  h2, p {
    margin: 0;
    margin-bottom: var(--n-4);
    color: #fff;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.sub-form {
  padding: var(--n-2) 0 var(--n-6);
  .field {
    padding: var(--n-2) var(--n-8);
    input[type="email"], a {
      font-family: inherit;
      font-size: inherit;
      width: 100%;
      padding: var(--n-3);
      border: 0;
      margin: 0;
      outline: none;
      border-radius: var(--n-2);
      box-sizing: border-box;
    }
    input[type="email"] {
      background-color: #ffffff;
    }
    a {
      color: #5c4400;
      text-align: center;
      text-decoration: none;
      background-color: var(--button-color);
      display: inline-block;
      transition: all 128ms ease-out;
      &:hover {
        background-color: var(--button-color-light);
      }
      &:active {
        background-color: var(--button-color-dark);
      }
      &:focus {
        box-shadow: 0 0 0 var(--n-1) rgba(#fff059, 0.6);
      }
      span {
        margin-left: var(--n-1);
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .sub {
    --width: 720px;
    width: var(--width);
    max-width: var(--width);
    max-height: var(--width);
    flex-direction: row;
  }

  .sub-text {
    flex-shrink: 1;
    padding-bottom: var(--n-8);
  }

  .sub-form {
    width: 360px;
    padding: var(--n-6) 0;
    flex-shrink: 0;
  }
}