Form - Subscribe

<!-- Subscription Section -->
<div class="overflow-hidden space-top-lg-3 space-bottom-lg-1">
  <div class="position-relative">
    <div class="container-fluid space-2 space-lg-0">
      <div class="row justify-content-sm-center align-items-lg-center text-center">
        <div class="col-lg-4 d-none d-lg-block">
          <!-- Device Mockup -->
          <div class="transform-rotate-3">
            <div class="device device-ipad">
              <img class="device-ipad-frame" src="../../assets/svg/components/ipad.svg" alt="Image Description">
              <img class="device-ipad-screen" src="../../assets/img/533x711/img1.jpg" alt="Image Description">
            </div>

            <figure class="max-w-19rem w-100 position-absolute bottom-0 right-0 z-index-n1 mr-n8 mb-n5">
              <img class="img-fluid" src="../../assets/svg/components/dots-2.svg" alt="Image Description">
            </figure>
          </div>
          <!-- End Device Mockup -->
        </div>

        <div class="col-sm-8 col-lg-4">
          <!-- Title -->
          <div class="mb-5">
            <h2 class="h1">Ready to growth your business?</h2>
            <p>Your website is fully responsive so visitors can view your content from their choice of device.</p>
          </div>
          <!-- End Title -->

          <!-- Form -->
          <form class="js-validate">
            <label class="sr-only" for="signupSrEmailExample4">Email</label>
            <div class="input-group">
              <input type="email" class="form-control" name="email" id="signupSrEmailExample4" placeholder="Email" aria-label="Email" required>
              <div class="input-group-append">
                <button type="submit" class="btn btn-block btn-primary">Get Started</button>
              </div>
            </div>
          </form>
          <!-- End Form -->
        </div>

        <div class="col-lg-4 d-none d-lg-block">
          <!-- Device Mockup -->
          <div class="max-w-33rem w-100 transform-rotate-2 ml-auto">
            <div class="device device-iphone-x">
              <img class="device-iphone-x-frame" src="../../assets/svg/components/iphone-x.svg" alt="Image Description">
              <img class="device-iphone-x-screen" src="../../assets/img/407x867/img5.jpg" alt="Image Description">
            </div>

            <figure class="max-w-19rem w-100 position-absolute top-0 left-0 z-index-n1 mt-n5 ml-n5">
              <img class="img-fluid" src="../../assets/svg/components/dots-2.svg" alt="Image Description">
            </figure>
          </div>
          <!-- End Device Mockup -->
        </div>
      </div>
    </div>

    <div class="d-none d-lg-block bg-light content-centered-y w-100 h-75 z-index-n1"></div>
  </div>
</div>
<!-- End Subscription Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of form validation
    $('.js-validate').each(function () {
      var validation = $.HSCore.components.HSValidation.init($(this));
    });
  });
</script>

<div class="card bg-img-hero bg-navy text-white text-center p-4 my-4" style="background-image: url(../../assets/svg/components/abstract-shapes-1.svg);">
  <h4 class="text-white mb-3">Like what you're reading? Subscribe to our top stories.</h4>

  <!-- Form -->
  <form class="js-validate w-md-75 mx-md-auto">
    <div class="js-form-message">
      <div class="d-flex align-items-center">
        <label class="sr-only" for="subscribeSrArticle">Subscribe</label>
        <div class="input-group">
          <input type="email" class="form-control" id="subscribeSrArticle" placeholder="Your email" aria-label="Your email">
        </div>
        <button type="submit" class="btn btn-light ml-3">Submit</button>
      </div>
    </div>
  </form>
  <!-- End Form -->
</div>

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of form validation
    $('.js-validate').each(function () {
      var validation = $.HSCore.components.HSValidation.init($(this));
    });
  });
</script>

<!-- Subscribe Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-60 text-center mx-auto mb-7">
    <h2>Stay in the know</h2>
    <p>Get special offers on the latest developments from Front.</p>
  </div>
  <!-- End Title -->

  <div class="w-lg-40 mx-lg-auto">
    <!-- Form -->
    <form class="js-validate">
      <div class="form-row">
        <div class="col-sm col-md-6 col-lg mb-2">
          <div class="js-form-message">
            <label class="sr-only" for="signupSrEmailExample1">Your email</label>
            <div class="input-group">
              <input type="email" class="form-control" name="email" id="signupSrEmailExample1" placeholder="Your email" aria-label="Your email" required
                     data-msg="Please enter a valid email address.">
            </div>
          </div>
        </div>

        <div class="col-sm-auto">
          <button type="submit" class="btn btn-primary btn-block">Get Started</button>
        </div>
      </div>
    </form>
    <!-- End Form -->
  </div>
</div>
<!-- End Subscribe Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of form validation
    $('.js-validate').each(function () {
      var validation = $.HSCore.components.HSValidation.init($(this));
    });
  });
</script>

<!-- Stories Section -->
<div class="container space-2">
  <div class="w-md-80 w-lg-50 text-center mx-md-auto">
    <div class="mb-5">
      <span class="d-block small font-weight-bold text-cap mb-2">Subscribe</span>
      <h2>Get the latest from Front</h2>
    </div>

    <!-- Form -->
    <form class="js-validate mb-2">
      <label class="sr-only" for="signupSrEmailExample2">Email</label>
      <div class="input-group">
        <input type="email" class="form-control" name="email" id="signupSrEmailExample2" placeholder="chkray@gmail.com" aria-label="chkray@gmail.com" required>
        <div class="input-group-append">
          <button type="submit" class="btn btn-block btn-primary">Get Started</button>
        </div>
      </div>
    </form>
    <!-- End Form -->

    <p class="small">You can unsubscribe at any time. Read our <a href="#">privacy policy</a></p>
  </div>
</div>
<!-- End Stories Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of form validation
    $('.js-validate').each(function () {
      var validation = $.HSCore.components.HSValidation.init($(this));
    });
  });
</script>

<!-- Subscribe Section -->
<div class="position-relative text-center">
  <div class="container space-2 space-bottom-lg-4">
    <!-- Title -->
    <div class="w-md-60 mx-md-auto mb-5 mb-md-7">
      <h2 class="h1">Stay in the know</h2>
      <p>Get special offers on the latest developments from Front.</p>
    </div>
    <!-- End Title -->

    <!-- Subscribe Form -->
    <div class="w-md-75 w-lg-50 mx-md-auto">
      <form class="js-validate mb-3">
        <div class="form-row">
          <div class="col-sm-8 mb-2">
            <div class="js-form-message">
              <label class="sr-only" for="signupSrEmailExample3">Your email</label>
              <div class="input-group input-group-pill">
                <input type="email" class="form-control" name="email" id="signupSrEmailExample3" placeholder="Your email" aria-label="Your email" required
                       data-msg="Please enter a valid email address.">
              </div>
            </div>
          </div>

          <div class="col-sm-4">
            <button type="submit" class="btn btn-primary btn-pill btn-wide">Get Started</button>
          </div>
        </div>
      </form>

      <p>See Help Front in action. <a class="font-weight-bold" href="#">Get a Demo <i class="fas fa-angle-right ml-1"></i></a></p>
    </div>
    <!-- End Subscribe Form -->

    <!-- SVG Illustration -->
    <div class="d-none d-lg-block position-absolute bottom-0 left-0 max-w-35rem w-100">
      <img class="img-fluid" src="../../assets/svg/illustrations/mobile-article.svg" alt="Image Description">
    </div>
    <!-- End SVG Illustration -->
  </div>
</div>
<!-- End Subscribe Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of form validation
    $('.js-validate').each(function () {
      var validation = $.HSCore.components.HSValidation.init($(this));
    });
  });
</script>

<!-- Subscribe Section -->
<div class="bg-light">
  <div class="container space-2">
    <div class="row justify-content-center">
      <div class="col-md-9 col-lg-6">
        <!-- Title -->
        <div class="text-center mb-4">
          <h2 class="h1">Stay in the know</h2>
          <p>Get special offers on the latest developments from Front.</p>
        </div>
        <!-- End Title -->

        <!-- Subscribe Form -->
        <form class="js-validate js-form-message w-lg-85 mx-lg-auto">
          <label class="sr-only" for="subscribeSrEmail">Email address</label>
          <div class="input-group input-group-pill">
            <input type="email" class="form-control" name="email" id="subscribeSrEmail" placeholder="Email address" aria-label="Email address" aria-describedby="subscribeButton" required
                   data-msg="Please enter a valid email address.">
            <div class="input-group-append">
              <button type="submit" class="btn btn-primary px-6" id="subscribeButton">Join</button>
            </div>
          </div>
        </form>
        <!-- End Subscribe Form -->
      </div>
    </div>
  </div>
</div>
<!-- End Subscribe Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.validation.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of form validation
    $('.js-validate').each(function () {
      var validation = $.HSCore.components.HSValidation.init($(this));
    });
  });
</script>