<div class="container">
  <h1><strong>Subscribe</strong> to our newsletter</h1>
  <form action="">
    <input type="email" name="email" id="email" placeholder="example@example.com" />
    <input type="submit" name="submit" value="subscribe">
  </form>
</div>

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,600');

$inputHeight: 70px;
$primaryColor: #F53A54;

body {
  background: $primaryColor;
  color: white;
  font-family: 'Poppins', 'Helvetica Neue', 'Lucida Grande', Arial, Verdana, sans-serif;
  padding: 30vh 0 0;
  text-align: center;
}

.container {
  margin: 0 auto;
  width: 650px;
}

h1 {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.025em;
  
  strong {
    font-weight: 400;
  }
}

form {
  position: relative;
  display: block;
  height: $inputHeight;
  border-radius: 0.5*$inputHeight;
  background: white;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  overflow: hidden;
  
  input {
    line-height: $inputHeight;
    padding: 0;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 300;
    background: #eee;
    letter-spacing: 0.02em;
    
    &:not([type=submit]) {
      width: 100%;
      display: block;
      padding: 0 150px 0 30px;
    }
    
    &:not([type=email]) {
      position: absolute;
      height: $inputHeight - 20px;
      line-height: $inputHeight - 20px;
      top: 10px;
      right: 10px;
      border-radius: 0.5*($inputHeight - 20px);
      padding: 0 25px;
      background: lighten($primaryColor, 5%);
      color: white;
      cursor: pointer;
      
      &:hover {
        background: darken($primaryColor, 10%);
      }
    }
    
    &:focus {
      outline: none;
      background: white;
    }
  }
}