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-gray-100 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-group-outline">
                  <label class="form-label">Email Here</label>
                  <input type="text" class="form-control mb-sm-0 mb-2">
                </div>
              </div>
              <div class="col-sm-4 ps-0">
                <button type="button" class="btn bg-gradient-warning 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 max-width-300 border-radius-lg mt-n10 d-lg-block d-none shadow-xl" src="../../assets/img/examples/blog2.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 my-auto">
        <div class="row">
          <div class="col-lg-8 col-md-4 col-7">
            <div class="input-group input-group-outline">
              <label class="form-label">Your Email</label>
              <input class="form-control" type="email" >
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-5 text-start ps-0">
            <button type="button" class="btn bg-gradient-primary mb-0">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-gradient-dark position-relative overflow-hidden">
  <img src="../../assets/img/shapes/pattern-lines.svg" alt="pattern-lines" class="position-absolute start-0 top-0 w-100 opacity-4">
  <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 input-group-outline">
              <label class="form-label">Email Here...</label>
              <input class="form-control" 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 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/gray-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/gray-logos/logo-spotify.svg">
      </div>
      <div class="col-lg-2 col-md-4 col-6 mb-4">
        <img class="w-100 opacity-7" src="../../assets/img/logos/gray-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/gray-logos/logo-facebook.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/gray-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">
  <img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute start-0 top-0 w-100 opacity-1">
  <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/bg3.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 ------- -->