Call to action - section

This section can be use to incite the user to take action, such as clicking on a buy button (to watch video or to go to app store) or subscribing to a mailing list.

home page

CODE

Here is the HTML code to obtain it. Embed it within the main tag with class page-main.

HTML Subscription section
<div class="section section-description fp-auto-height-responsive bg-secondary bg-gradient-secondary landing-cta" data-section="calltoaction"
  id="download">
  <!-- Begin of section wrapper -->
  <div class="section-wrapper padding-top padding-bottom">
    <!-- title -->
    <div class="section-title text-center">
      <h2 class="display-4 display-title">Download now</h2>
      <p>Here are sample items that you can embed within a call to action section: Play icon, regular buttons, play store &amp;
        app store official buttons and subscription form.</p>
    </div>

    <!-- content -->
    <div class="section-content anim text-center">
      <!-- Action icon -->
      <div class="btns-action-icon mt-4 sr-zoomin-td1">
        <a class="btn cta-icon with-margin" href="//youtube.com" target="_blank">
          <span class="icon ring">
            <span class="icon-5 fix-center">
              <i class="fa fa-play text-primary text-gradient-secondary"></i>
            </span>
          </span>
          <span class="text">Watch Demo</span>
        </a>
      </div>

      <!-- Action buttons -->
      <div class="btns-action mt-4 sr-zoomin-td2">
        <a class="btn btn-icon normal btn-white icon-left btn-round btn-shadow" href="">
          <span class="text">See Demo</span>
          <span class="icon">
            <i class="fa fa-play"></i>
          </span>
        </a>
        <a class="btn btn-icon normal btn-white icon-left btn-round btn-shadow" href="">
          <span class="text">Download</span>
          <span class="icon">
            <i class="fa fa-download"></i>
          </span>
        </a>
      </div>

      <!-- App Store / Play Store buttons -->
      <div class="btns-action mt-4 sr-zoomin-td3">
        <a href="#">
          <img src="img/btns/app-store.png" alt="Download App store">
        </a>
        <a href="#">
          <img src="img/btns/play-store.png" alt="Download Play store">
        </a>
      </div>

      <!-- registration form -->
      <div class="row align-items-center justify-content-center sr-zoomin-td4">
        <div class="col-12 col-md-8 col-lg-6">
          <!-- Registration form container-->
          <form class="send_email_form form-container form-container-transparent form-container-white form-small" method="post" action="#"
            novalidate="novalidate">
            <div class="form-desc">
              <p class="invite">Don't miss any updates, register now!</p>
            </div>
            <div class="form-input">
              <div class="form-group form-success-gone">
                <!--<label for="reg-email-action">Email</label>-->
                <input id="reg-email-action" name="email" class="form-control form-control-line form-control-white" type="email" required=""
                  placeholder="[email protected]" data-validation-type="email" aria-required="true">
              </div>
              <div class="form-group form-btn-right">
                <button id="submit-email" class="email_b btn btn btn-transp-icon btn-white icon-only" name="submit_email">
                  <span class="icon">
                    <i class="ion ion-android-send"></i>
                  </span>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <!-- Another Action icon -->
      <div class="btns-action-icon mt-4 sr-zoomin-td1">
        <a class="btn cta-icon with-margin" href="#">
          <span class="icon ring">
            <span class="icon-5">
              <i class="fa fa-download text-primary text-gradient-secondary"></i>
            </span>
          </span>
          <span class="text">Download</span>
        </a>
      </div>

    </div>

  </div>
  <!-- End of section wrapper -->
</div>

Here are sample items that you can embed within a call to action section :
Play icon, regular buttons, play store & app store official buttons and subscription form.

Play and download icons

An icon of this design is embeded within a tag with class cta-icon.

Add class text-primary to change its color to primary color, or text-white for white color. If not precised, it will use default section text color

Class fix-center of the tag with class icon-5 (the play button) adjust the icon position by adding to it a small margin. Other icon do not require it (such as the download icon)

HTML Icon Buttons
<!-- Action icon -->
<div class="btns-action-icon mt-4 sr-zoomin-td1">
  <a class="btn cta-icon with-margin" href="//youtube.com" target="_blank">
    <span class="icon ring">
      <span class="icon-5 fix-center">
        <i class="fa fa-play text-primary text-gradient-secondary"></i>
      </span>
    </span>
    <span class="text">Watch Demo</span>
  </a>
</div>

<!-- Another Action icon -->
<div class="btns-action-icon mt-4 sr-zoomin-td1">
  <a class="btn cta-icon with-margin" href="#">
    <span class="icon ring">
      <span class="icon-5">
        <i class="fa fa-download text-primary text-gradient-secondary"></i>
      </span>
    </span>
    <span class="text">Download</span>
  </a>
</div>

Regular buttons

Here are a sample code adding regular buttons to the CTA section

HTML Buttons
<!-- Action buttons -->
<div class="btns-action mt-4 sr-zoomin-td2">
  <a class="btn btn-icon normal btn-white icon-left btn-round btn-shadow" href="">
    <span class="text">See Demo</span>
    <span class="icon">
      <i class="fa fa-play"></i>
    </span>
  </a>
  <a class="btn btn-icon normal btn-white icon-left btn-round btn-shadow" href="">
    <span class="text">Download</span>
    <span class="icon">
      <i class="fa fa-download"></i>
    </span>
  </a>
</div>

Store official buttons

Here are a sample code adding store official buttons to the CTA section. Place buttons images inside img/btns folder.

HTML Official Buttons
<!-- App Store / Play Store buttons -->
<div class="btns-action mt-4 sr-zoomin-td3">
  <a href="#">
    <img src="img/btns/app-store.png" alt="Download App store">
  </a>
  <a href="#">
    <img src="img/btns/play-store.png" alt="Download Play store">
  </a>
</div>

Subscription form

The form tag with class send_email_form handles email registration. Here are the corresponding HTML code :

HTML Form
<!-- Registration form container-->
<form class="send_email_form form-container form-container-transparent form-container-white form-small" method="post" action="#"
  novalidate="novalidate">
  <div class="form-desc">
    <p class="invite">Don't miss any updates, register now!</p>
  </div>
  <div class="form-input">
    <div class="form-group form-success-gone">
      <!--<label for="reg-email-action">Email</label>-->
      <input id="reg-email-action" name="email" class="form-control form-control-line form-control-white" type="email" required=""
        placeholder="[email protected]" data-validation-type="email" aria-required="true">
    </div>
    <div class="form-group form-btn-right">
      <button id="submit-email" class="email_b btn btn btn-transp-icon btn-white icon-only" name="submit_email">
        <span class="icon">
          <i class="ion ion-android-send"></i>
        </span>
      </button>
    </div>
  </div>
</form>

Tag with class invite represents the default text which asks for a subscription. And tag with class email-ok will be the text which will be shown when the user registration is a success.

Sample server to handles email registration are provided with the template. Note that, they works only if you use a PHP based web server and require that it allows you to send email, and to write files. Check out here to learn more.