Newsletter Subscription

By Rafi

F6 Line Created with Sketch.
signup button flexbox
How do I use This?

A signup form section with rounded inputs.

HTML
<section class="newsletter-subscribe">
  <div class="newsletter-subscribe-inner">
    <p class="subheader">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, officiis! Laudantium tenetur modi, voluptatum placeat illo, nisi aliquam nam dolore  reiciendis vel.</p>

  <form action="">
    <div class="input-group">
      <input class="input-group-field" type="email" placeholder="Enter your email for Yeti live streaming">
      <div class="input-group-button">
        <input type="submit" class="button" value="Submit">
      </div>
    </div>
  </form>
</section>


$newsletter-subscribe-bg: $white;
$newsletter-subscribe-height: 200px;
$newsletter-subscribe-button-width: 25vw; // % of wiewport width

.newsletter-subscribe {
  background: $newsletter-subscribe-bg;
  height: $newsletter-subscribe-height;
  display: flex;
  align-items: center;
  padding: 0 1rem;

  .input-group-field {
    border-radius: 5000px 0 0 5000px;
    position: relative;
    transform: translateX(0.5rem);
  }

  .input-group {
    margin-bottom: 0;
  }

  .newsletter-subscribe-inner {
    text-align: center;
  }

  .input-group-button .button{
    border-radius: 5000px;
    position: relative;
    transform: translateX(-0.5rem);
    min-width: $newsletter-subscribe-button-width;
  }

  @include breakpoint(medium) {
    padding: 0 3rem;
  }

  @include breakpoint(large) {
    padding: 0 6rem;
  }
}



.newsletter-subscribe {
  background: #fefefe;
  height: 200px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 1rem;
}

.newsletter-subscribe .input-group-field {
  border-radius: 5000px 0 0 5000px;
  position: relative;
  -webkit-transform: translateX(0.5rem);
      -ms-transform: translateX(0.5rem);
          transform: translateX(0.5rem);
}

.newsletter-subscribe .input-group {
  margin-bottom: 0;
}

.newsletter-subscribe .newsletter-subscribe-inner {
  text-align: center;
}

.newsletter-subscribe .input-group-button .button {
  border-radius: 5000px;
  position: relative;
  -webkit-transform: translateX(-0.5rem);
      -ms-transform: translateX(-0.5rem);
          transform: translateX(-0.5rem);
  min-width: 25vw;
}

@media print, screen and (min-width: 40em) {
  .newsletter-subscribe {
    padding: 0 3rem;
  }
}

@media print, screen and (min-width: 64em) {
  .newsletter-subscribe {
    padding: 0 6rem;
  }
}
JS

Similar Building Blocks

forms

Input Number Incrementer

F6
by Rafi
Page 1 Created with Sketch.
forms

Rounded Input Group

F6
by Rafi
Page 1 Created with Sketch.
forms

Contact Section Footer

F6
by Rafi
Page 1 Created with Sketch.