Skip to content

Choose AppStrap!

When your backs against the wall!


or find out more below

Header Bottom

To have the header at the bottom of the sceen on page load simply set/remove the following on the following elements:

  • 1 Above the #header region add the following HTML, alter it as needed: View code example
    <div id="highlighted">
      <!--
      Image Banner:
      Use the the data-bg-img functionality to create a simple image banner
      Use spacer classes to make the banner larger with padding, allows for easy responsive changes too
      see: elements-ctas.htm
      
      To make the banner full height/screen add the attributes:
      data-toggle="full-height" data-offset="#header"
      -->
      <div class="bg-white overlay overlay-primary overlay-op-7 text-center px-3 py-5 py-lg-10 flex-valign"
           data-bg-img="assets/img/backgrounds/young-man-standing-in-front-of-concrete-wall-picjumbo-com.jpg" 
           data-css='{"background-position": "right bottom"}'
           data-toggle="full-height" data-offset="#header">
        <h2 class="display-4 text-white" data-animate="fadeIn" data-animate-delay="0.2">Choose <span class="font-weight-bold">AppStrap!</span></h2>
        <h3 class="text-grey font-weight-normal" data-animate="fadeIn" data-animate-delay="0.35">When your backs against the wall! </h3>
        <hr class="hr-inverse hr-lg w-20 mx-auto my-4 mb-5" data-animate="fadeIn" data-animate-delay="0.45" />
        <div class="col-md-6 mx-auto">
          <form id="callback-form" action="#" role="form">
            <div class="input-group input-group-lg">
              <label class="sr-only" for="callback-number">Your Number</label>
              <input type="tel" class="form-control" id="callback-number" placeholder="Your Number">
              <span class="input-group-append">
                <button class="btn btn-dark rounded-0" type="button"><i class="fa fa-phone mr-md-1"></i> <span class="d-none d-lg-inline-block">Get Callback</span></button>
              </span>
            </div>
            <small>or <a href="#content" data-toggle="scroll-link">find out more below</a></small>
          </form>
        </div>
      </div>    
    </div>
  • 2 If you want to header to not be visible at the bottom of the screen simply remove data-offset="#header" from the data-toggle="full-height" element.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page