Call to Action

Prefooter 1

Copy
<!-- -------- START PRE-FOOTER 1 w/ SUBSCRIBE BUTTON AND IMAGE ------- -->
<section class="py-7 mt-1">
  <div class="container-fluid px-0">
    <div class="row justify-content-center text-center">
      <div class="col-12 position-relative">
        <div class="row bg-info-now bottom-0 py-7">
          <div class="col-xl-6 text-start ms-auto">
            <h4>Be the first to see the news</h4>
            <p class="mb-4">
              Your company may not be in the software business,
              but eventually, a software company will be in your business.
            </p>
            <div class="row">
              <div class="col-sm-5">
                <div class="input-group">
                  <input type="text" class="form-control mb-sm-0 mb-2" placeholder="Email Here...">
                </div>
              </div>
              <div class="col-sm-4">
                <button type="button" class="btn bg-gradient-info mb-0 h-100 position-relative z-index-2">Subscribe</button>
              </div>
            </div>
          </div>

          <div class="col-xl-4 position-relative">
            <img class="w-100 border-radius-lg border-top-end-radius-0 border-bottom-end-radius-0 end-0 position-absolute max-width-400 mt-n10 d-xl-block d-none" src="../../assets/img/project18.jpg" alt="image">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- -------- END PRE-FOOTER 1 w/ SUBSCRIBE BUTTON AND IMAGE ------- -->

Prefooter 2

Copy
<!-- -------   START PRE-FOOTER 2 - simple social line w/ title & 3 buttons    -------- -->
<div class="py-11">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h4 class="mb-1">Thank you for your support!</h4>
        <p class="lead mb-0">Delivering the best products</p>
      </div>
      <div class="col-lg-6 d-flex align-items-center">
        <a href="javascript:;" class="btn btn-twitter mb-0 me-2">
          <i class="fab fa-twitter me-1"></i> Twitter
        </a>
        <a href="javascript:;" class="btn btn-facebook mb-0 me-2">
          <i class="fab fa-facebook-square me-1"></i> Facebook
        </a>
        <a href="javascript:;" class="btn btn-tumblr mb-0 me-2">
          <i class="fab fa-tumblr me-1"></i> Tumblr
        </a>
        <a href="javascript:;" class="btn btn-dribbble mb-0">
          <i class="fab fa-dribbble me-1"></i> Dribbble
        </a>
      </div>
    </div>
  </div>
</div>
<!-- -------   END PRE-FOOTER 2 - simple social line w/ title & 3 buttons    -------- -->

Prefooter 3

Copy
<!-- -------- START PRE-FOOTER 3 w/ SOCIAL BUTTONS ------- -->
<section class="my-11">
  <div class="container bg-gradient-dark border-radius-lg">
    <div class="row py-4">
      <div class="col-md-2 col-sm-4 col-6 text-center my-auto mb-md-0 mb-4 border-end-md">
        <a href="javascript:;" class="btn btn-link btn-icon mb-0">
          <i class="fab fa-twitter text-white text-lg"></i>
        </a>
      </div>
      <div class="col-md-2 col-sm-4 col-6 text-center my-auto mb-md-0 mb-4 border-end-md">
        <a href="javascript:;" class="btn btn-link btn-icon mb-0">
          <i class="fab fa-facebook text-white text-lg"></i>
        </a>
      </div>
      <div class="col-md-2 col-sm-4 col-6 text-center my-auto mb-md-0 mb-4 border-end-md">
        <a href="javascript:;" class="btn btn-link btn-icon mb-0">
          <i class="fab fa-pinterest text-white text-lg"></i>
        </a>
      </div>
      <div class="col-md-2 col-sm-4 col-6 text-center my-auto border-end-md">
        <a href="javascript:;" class="btn btn-link btn-icon mb-0">
          <i class="fab fa-dribbble text-white text-lg"></i>
        </a>
      </div>
      <div class="col-md-2 col-sm-4 col-6 text-center my-auto border-end-md">
        <a href="javascript:;" class="btn btn-link btn-icon mb-0">
          <i class="fab fa-youtube text-white text-lg"></i>
        </a>
      </div>
      <div class="col-md-2 col-sm-4 col-6 text-center my-auto">
        <a href="javascript:;" class="btn btn-link btn-icon mb-0">
          <i class="fab fa-instagram text-white text-lg"></i>
        </a>
      </div>
    </div>
  </div>
</section>
<!-- -------- END PRE-FOOTER 3 w/ SOCIAL BUTTONS ------- -->

Prefooter 4

Copy
<!-- -------   START PRE-FOOTER 4 - title & description and input    -------- -->
<div class="py-11">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 text-start">
        <h4>Get tips & tricks every week</h4>
        <p class="mb-0">The latest news, articles and resources sent to your inbox weekely.</p>
      </div>
      <div class="col-lg-5 ms-auto text-end mt-4 mt-lg-0">
        <div class="row">
          <div class="col-lg-8 col-md-4 col-7">
            <div class="form-group mb-0">
              <div class="input-group">
                <div class="input-group">
                  <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                  <input class="form-control" placeholder="Your Email" type="email" >
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-5 text-start">
            <button type="button" class="btn bg-gradient-primary mb-0 h-100">Subscribe</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- -------   END PRE-FOOTER 4 - title & description and input    -------- -->

Prefooter 5

Copy
<!-- -------- START PRE-FOOTER 5 w/ DARK BACKGROUND ------- -->
<section class="my-9 py-5 bg-dark position-relative overflow-hidden">
  <div class="container position-relative z-index-2">
    <div class="row">
      <div class="col-lg-6 col-md-8 m-auto text-center">
        <h5 class="text-white">Be the first to see the news</h5>
        <p class="mb-5 text-white">
          Your company may not be in the software business,
          but eventually, a software company will be in your business.
        </p>
        <div class="row">
					<div class="col-sm-8 pe-sm-0 mb-sm-0 mb-2">
            <div class="input-group">
              <span class="input-group-text border-end-0"><i class="ni ni-email-83"></i></span>
              <input class="form-control" placeholder="Email Here..." type="email" >
            </div>
					</div>
					<div class="col-sm-4 ps-sm-0">
						<button type="button" class="btn bg-gradient-primary mb-0 ms-sm-3 me-auto h-100 w-100 d-block">Subscribe</button>
					</div>
				</div>
      </div>
    </div>
  </div>
</section>
<!-- -------- END PRE-FOOTER 5 w/ DARK BACKGROUND ------- -->

Prefooter 6

Copy
<!-- -------   START PRE-FOOTER 6 - title & description and input    -------- -->
<div class="py-8">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mx-auto text-center">
        <h3>Our products are built on top</h3>
        <p class="lead">Very nice logos here on this page, you can check more on our social profiles.</p>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-lg-2 col-md-4 col-6 mb-4 ms-auto">
        <img class="w-100 opacity-7" src="../../assets/img/logos/medium-logos/logo-apple.svg">
      </div>
      <div class="col-lg-2 col-md-4 col-6 mb-4">
        <img class="w-100 opacity-7" src="../../assets/img/logos/medium-logos/logo-mailchimp.svg">
      </div>
      <div class="col-lg-2 col-md-4 col-6 mb-4">
        <img class="w-100 opacity-7" src="../../assets/img/logos/medium-logos/logo-behance.svg">
      </div>
      <div class="col-lg-2 col-md-4 col-6 mb-4">
        <img class="w-100 opacity-7" src="../../assets/img/logos/medium-logos/logo-mailchimp.svg">
      </div>
      <div class="col-lg-2 col-md-4 col-6 mb-4 me-auto">
        <img class="w-100 opacity-7" src="../../assets/img/logos/medium-logos/logo-nasa.svg">
      </div>
    </div>
  </div>
</div>
<!-- -------   END PRE-FOOTER 6 - title & description and input    -------- -->

Prefooter 7

Copy
<!-- -------- START PRE-FOOTER 7 w/ TEXT AND 2 BUTTONS ------- -->
<section class="my-10 py-5 bg-gradient-dark position-relative overflow-hidden">
  <div class="container position-relative z-index-2">
    <div class="row">
      <div class="col-lg-5 col-md-8 m-auto text-start">
        <h5 class="text-white mb-lg-0 mb-5">
          Your company may not be in the software business,
          but eventually, a software company will be in your business.
        </h5>
      </div>
      <div class="col-lg-6 m-auto">
        <div class="row">
          <div class="col-sm-4 col-6 ps-sm-0 ms-auto">
						<button type="button" class="btn bg-gradient-primary mb-0 ms-lg-3 ms-sm-2 mb-sm-0 mb-2 me-auto w-100 d-block">Start Now</button>
					</div>
					<div class="col-sm-4 col-6 ps-sm-0 me-lg-0 me-auto">
						<button type="button" class="btn btn-white mb-0 ms-lg-3 ms-sm-2 mb-sm-0 mb-2 me-auto w-100 d-block">Our Story</button>
					</div>
				</div>
      </div>
    </div>
  </div>
</section>
<!-- -------- END PRE-FOOTER 7 w/ TEXT AND 2 BUTTONS ------- -->

Prefooter 8

Copy
<!-- -------- START PRE-FOOTER 8 w/ TEXT, BG IMAGE AND 2 BUTTONS ------- -->
<section class="my-10 py-5 bg-gradient-dark position-relative" style="background-image:url(../../assets/img/bg45.jpg)">
  <span class="mask bg-gradient-dark opacity-8"></span>
  <div class="container position-relative z-index-2">
    <div class="row">
      <div class="col-lg-5 col-md-8 m-auto text-start">
        <h5 class="text-white mb-lg-0 mb-5">
          For being a bright color. For standing out. But the time is now to be okay to be the greatest you.
        </h5>
      </div>
      <div class="col-lg-6 m-auto">
        <div class="row">
          <div class="col-sm-4 col-6 ps-sm-0 ms-auto">
						<button type="button" class="btn bg-gradient-warning mb-0 ms-lg-3 ms-sm-2 mb-sm-0 mb-2 me-auto w-100 d-block">Start Now</button>
					</div>
				</div>
      </div>
    </div>
  </div>
</section>
<!-- -------- END PRE-FOOTER 8 w/ TEXT, BG IMAGE AND 2 BUTTONS ------- -->