Header-1

Scroll down

We create and design every day for you

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti illo doloremque optio accusamus praesentium odio!

12

html

Pages

3

css

Styles

3267

h

Anything

Show code

<header class="header">

      <div class="header__wavebg"></div>
    
    
      <div class="header__socialnetworks">
    
        <div class="header__socialnetworks__bg"></div>
    
        <div class="header__socialnetworks__icon">
          <a href="#"><i class="fa fa-facebook"></i></a>
        </div>
    
        <div class="header__socialnetworks__icon">
          <a href="#"><i class="fa fa-instagram"></i></a>
        </div>
    
        <div class="header__socialnetworks__icon">
          <a href="#"><i class="fa fa-dribbble"></i></a>
        </div>
    
        <div class="header__socialnetworks__arrow">
          <h5>Scroll down</h5>
          <i class="fa fa-long-arrow-down"></i>
        </div>
    
      </div>
    
      <div class="container">
    
        <div class="row d-flex justify-content-center">
          <div class="col-lg-9">
            <div class="header__welcomeText">

              <h1>We create and design every day for you</h1>

              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
                Deleniti illo doloremque optio accusamus praesentium odio!
              </p>

            </div>
          </div>
        </div>
    
        <div class="row d-flex justify-content-center">

          <div class="col-12 col-sm-6 col-lg-3">
    
            <div class="header__button">
    
              <!-- xlarge button start -->
              <button class="appyBtn is-green-gradient and-large no-mr">Start Free Trial <i class="fa fa-long-arrow-right"></i></button>
              <!-- xlarge button end -->
    
            </div>
    
          </div>

        </div>
    
        <div class="row d-flex justify-content-center">
          <div class="col-lg-10">
            <div class="header__img">
    
              <!-- card start -->
              <div class="header__img__card lax" data-lax-preset="driftLeft zoomOut fadeInOut" id="header__img__card__id-1">
                <div class="header__img__card__num">
                  <h1>12</h1> <span>html</span>
                </div>
                <div class="header__img__card__option">
                  <h5>Pages</h5>
                </div>
              </div>
              <!-- card end -->
    
              <!-- card start -->
              <div class="header__img__card lax" data-lax-preset="driftLeft zoomOut fadeInOut" id="header__img__card__id-2">
                <div class="header__img__card__num">
                  <h1>3</h1> <span>css</span>
                </div>
                <div class="header__img__card__option">
                  <h5>Styles</h5>
                </div>
              </div>
              <!-- card end -->
    
              <!-- card start -->
              <div class="header__img__card lax" data-lax-preset="driftRight zoomOut fadeInOut" id="header__img__card__id-3">
                <div class="header__img__card__num">
                  <h1>3267</h1> <span>h</span>
                </div>
                <div class="header__img__card__option">
                  <h5>Anything</h5>
                </div>
              </div>
              <!-- card end -->
    
              <img src="img/headerMc.png" alt="headerImg">

            </div>
          </div>
        </div>
    
      </div>
    </header>

Header-1

Styles for this element are stored in:

app/sass/componentsStyles/_header-1.sass

Header-2

Make your landing page with AppyKit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet repudiandae minima aperiam officiis corrupti dolore.

How Template Works

Show code

Header-3

Look! this gradient is rotating

If you don’t want the gradient to rotate just don’t include the javascript code, you can also remove the class: gradient360 from the header

Purchase now Watch video

Show code

<header class="header-3">
  
      <div class="header-3__bg gradient360"></div>
  
      <div class="container">
        <div class="row justify-content-center">
  
          <div class="col-lg-7">
  
            <div class="header-3__wlcmContent">
  
              <div class="header-3__wlcmContent__text">
                <h1>Look! this gradient is rotating</h1>
                <p>
                    If you don’t want the gradient to rotate just don’t 
                    include the javascript code, you can 
                    also remove the class: 
                    gradient360 from the header
                </p>
              </div>
  
              <div class="header-3__wlcmContent__buttons">
                <a href="#" class="appyBtn is-dark and-large">Purchase now <i class="fa fa-shopping-cart"></i></a>
                <a href="#" data-lity="" class="appyBtn is-dark and-large no-mr">Watch video <i class="fa fa-play-circle-o"></i></a>
              </div>
  
            </div>
  
          </div>
  
        </div>
      </div>
    </header>


function gradinet360() {

  'use strict';

  var header = doc.querySelectorAll('.gradient360');
  
  for( let i = 0; i<header.length; i++) {

    var hs = header[i].style;
    hs.width = '100%';
    hs.height = '100%';
    hs.position = 'absolute';
    hs.top = '0';
    hs.opacity = '0.9';
  
    // paste your color here
    var firstColor = '#ae3be3'; //$baseColor
    var secondColor = '#4747fe'; // pink
    var deg = 0;
  
    function move() {
        deg++; //rotate speed
        if (deg == 360) deg = 0;
        header[i].style.background = 
        `linear-gradient(${deg}deg, ${firstColor} 0%, ${secondColor} 100%)`;
        requestAnimationFrame(move)
    }
    move()
  }

  
  
}
gradinet360();

Header-3

If you don’t want the gradient to rotate just don’t include the javascript code

Styles for this element are stored in:

app/sass/componentsStyles/_header-3.sass

Header-4

Make your landing page with Appy

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti possimus eveniet quos quidem. Saepe, eligendi?

Purchase now Watch video

Show code

Header-5

AppyKit

Make your page with AppyKit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi corporis delectus

Show code

Header-6

Awesome Apple Imac Pro

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio ratione laudantium totam exercitationem corporis, dolorum laboriosam deleniti iusto. Labore, voluptatibus!

Watch Video

Show code

Header-7

AppyKit

We are Startup Creative Agency

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt nostrum in, quas perferendis magnam omnis?

Show code

Header-8

Make your landing page with AppyKit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi ut incidunt veniam eligendi, quas nulla, laudantium, sint dolorum quod optio error. Aliquid, ut.

Show code

<header class="header-8">

      <div class="header-8-bg"></div>
      <div class="header-8-wave">
        <!--?xml version="1.0" encoding="utf-8"?-->
        <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 150" style="enable-background:new 0 0 1920 150;" xml:space="preserve">
          <style type="text/css">
            .st0 {
              fill: var(--color-bodyColor);
            }
          </style>
          <path class="st0" d="M0,0c277.6,47.2,580.4,114.1,960,112c352.5-2,697.2-67.3,960-112v150H0V0z"></path>
        </svg>
      </div>
    
      <div class="container">
        <div class="row d-flex justify-content-center">
    
          <div class="col-lg-10">
    
            <!-- content -->
            <div class="header-8__content">
    
              <!-- text -->
              <div class="header-8__content__text">
                <h1>Make your landing page with AppyKit</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                  Modi ut incidunt veniam eligendi, quas nulla, 
                  laudantium, sint dolorum quod optio error. Aliquid, ut.
                </p>
              </div>
              <!-- /text -->
    
              <!-- form -->
              <div class="row d-flex justify-content-center">
                <div class="col-12 col-sm-8 col-lg-7">
    
                  <form action="#" class="header-8__content__form">
                    <input type="text" placeholder="Email">
                    <button type="submit"><span>Get Started</span> <i class="fa fa-paper-plane"></i></button>
                  </form>
    
                </div>
              </div>
              <!-- /form -->
    
              <!-- img -->
              <div class="header-8__content__img"> 
                <img src="img/webApp.png" alt="img">
              </div>
              <!-- /img -->
    
            </div>
            <!-- /content -->
    
          </div>
    
        </div>
      </div>
    </header>

Header-8

Styles for this element are stored in:

app/sass/componentsStyles/_header-8.sass

Header-9

Lorem, ipsum dolor.

Make your landing page with AppyKit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam ipsam rerum ullam nihil cum magnam eaque iusto?

Show code

Header-10

Hello :)

Make your landing page with AppyKit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non ab ipsa odio dolorem, expedita facere est atque quibusdam? Saepe?

Purchase now Components

Show code

<header class="header-10">
      <div class="container">
        <div class="row d-flex justify-content-center align-items-center">

          <!-- col -->
          <div class="col-lg-8">
            <div class="header-10__content">

              <h3>Hello :)</h3>

              <h1>Make your landing page with AppyKit</h1>

              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Non ab ipsa odio dolorem, expedita facere est atque quibusdam? Saepe?
              </p>

              <!-- buttons -->
              <a href="#" class="appyBtn is-purple and-medium">Purchase now <i class="fa fa-shopping-cart"></i></a>
              <a href="#" class="appyBtn is-purple-border and-medium no-mr">Components <i class="fa fa-cog fa-spin"></i></a>
              <!-- /buttons -->

            </div>
          </div>
          <!-- /col -->

          <!-- col -->
          <div class="col-lg-8">

            <div class="header-10__media">

              <a href="#" data-lity="" class="header-10__media__playBtn">
                <i class="fa fa-play"></i>
              </a>

              <div class="header-10__media__headImg">
                <img src="img/appykitGif.gif" alt="img">
              </div>

              <div class="header-10__media__cardImg">
              
                    <!-- path to images here -->
                <img src="img/webApp.png" class="header-10__parallax lax" data-lax-preset="fadeOut" data-offset="45" alt="img">
                <img src="img/webApp.png" class="header-10__parallax lax" data-lax-preset="fadeOut" data-offset="120" alt="img">
                <img src="img/webApp.png" class="header-10__parallax lax" data-lax-preset="fadeOut" data-offset="50" alt="img">
                <img src="img/webApp.png" class="header-10__parallax lax" data-lax-preset="fadeOut" data-offset="65" alt="img">
                <img src="img/webApp.png" class="header-10__parallax lax" data-lax-preset="fadeOut" data-offset="90" alt="img">
                <img src="img/webApp.png" class="header-10__parallax lax" data-lax-preset="fadeOut" data-offset="30" alt="img">
              
              </div>

              
            </div>

          </div>
          <!-- /col -->

        </div>
      </div>
    </header>

Header-10

Styles for this element are stored in:

app/sass/componentsStyles/_header-10.sass

Header-11

Make your landing page with AppyKit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, magnam reiciendis

Let`s do this

Something interesting

Fuly responsive

Customizable

Unlimited variation

Show code

<header class="header-11">
      <div class="container">
        <div class="row d-flex justify-content-center align-items-center">

          <!-- col -->
          <div class="col-lg-5">

            <!-- header text -->
            <div class="header-11__content appyContent">

              <h1>
                Make your landing page with AppyKit
              </h1>

              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Voluptatum, magnam reiciendis 
              </p>

              <div class="appyContent__buttons">
                <a href="#" class="appyBtn is-purple and-large">
                  Let`s do this <i class="fa fa-long-arrow-right"></i>
                </a>
              </div>

            </div>
            <!-- /header text -->
            
          </div>
          <!-- /col -->

          <!-- col -->
          <div class="col-lg-6 ml-auto">
            <!-- img -->
            <div class="appyContent">
              <img src="img/webApp.png" alt="img">
            </div>
            <!-- /img -->
          </div>
          <!-- /col -->

          <!-- cards -->
          <div class="col-12">
            <div class="row d-flex justify-content-center">

              <!-- card -->
              <div class="col-sm-6 col-lg-3">
                <div class="header-11__card">

                  <div class="header-11__card__icon">
                    <i class="fa fa-cube"></i>
                  </div>
                  
                  <h5>Something interesting</h5>

                </div>
              </div>
              <!-- /card -->

              <!-- card -->
              <div class="col-sm-6 col-lg-3">
                <div class="header-11__card">

                  <div class="header-11__card__icon">
                    <i class="fa fa-cube"></i>
                  </div>
                  
                  <h5>Fuly responsive</h5>

                </div>
              </div>
              <!-- /card -->

              <!-- card -->
              <div class="col-sm-6 col-lg-3">
                <div class="header-11__card">

                  <div class="header-11__card__icon">
                    <i class="fa fa-cube"></i>
                  </div>
                  
                  <h5>Customizable</h5>

                </div>
              </div>
              <!-- /card -->

              <!-- card -->
              <div class="col-sm-6 col-lg-3">
                <div class="header-11__card">

                  <div class="header-11__card__icon">
                    <i class="fa fa-cube"></i>
                  </div>
                  
                  <h5>Unlimited variation</h5>

                </div>
              </div>
              <!-- /card -->

            </div>
          </div>
          <!-- /cards -->

        </div>
      </div>
    </header>

Header-11

Styles for this element are stored in:

app/sass/componentsStyles/_header-11.sass

Header-12

App Landing Page

Make your landing page with AppyKit

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus quis odit optio distinctio voluptate esse.

Get started - it`s free Watch video

Show code

<header class="header-12">
      <div class="container">
        <div class="row d-flex align-items-center">

          <!-- col -->
          <div class="col-lg-6">
            <div class="header-12__content appyContent">

              <div class="header-12__content__card">
                <h6><span>App Landing Page</span></h6>
              </div>

              <h1>Make your landing page with AppyKit</h1>

              <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                Repellendus quis odit optio 
                distinctio voluptate esse.
              </p>

              <div class="appyContent__buttons">

                <a href="#" class="appyBtn is-purple and-large">
                  Get started - it`s free
                  <i class="fa fa-long-arrow-right"></i>
                </a>

                <a href="https://www.youtube.com/watch?v=9hUIxyE2Ns8" data-lity="" class="appyBtn is-purple-border and-medium">
                  Watch video 
                  <i class="fa fa-play-circle-o"></i>
                </a>

              </div>

            </div>
          </div>
          <!-- /col -->

          <!-- col -->
          <div class="col-lg-4 ml-auto">
            <div class="header-12__img header-12__greyCube appyContent">
              
              <div class="header-12__img__top lax" data-lax-preset="driftLeft">
                <img src="img/haeder-12-top.png" alt="img">
              </div>
              
              <!-- base image (device) -->
              <div class="header-12__img__base">
                <img src="img/white-device.png" alt="img">
              </div>
              <!-- base image -->

              <div class="header-12__img__bottom lax" data-lax-preset="driftRight fadeOut">
                <img src="img/haeder-12-bot.png" alt="img">
              </div>

            </div>
          </div>
          <!-- /col -->

        </div>
      </div>
    </header>

Header-12

Styles for this element are stored in:

app/sass/componentsStyles/_header-12.sass

Header-13

Shaping a vision, delivering software, creating world class experiences

Start your 14 days free trial right now

Show code

<header class="header-13">

      <div class="header-13-bg"></div>
    
      <div class="container">
        <div class="row d-flex justify-content-center">
    
          <!-- content -->
          <div class="col-lg-9">
    
            <div class="header-13__content">
    
              <div class="header-13__content__logo">
                <img src="img/logo.png" alt="img">
              </div>
    
              <div class="header-13__content__text">
    
                <h2>
                  Shaping a vision, delivering software, 
                  creating world class experiences
                </h2>
    
                <p>
                  Start your 14 days free trial right now
                </p>
    
              </div>
    
              <!-- form -->
              <div class="row d-flex justify-content-center">
                <div class="col-lg-8">
    
                  <form class="appyForm is-light and-default form-fs-s" action="#">
                    <input type="text" placeholder="Your mail here">
                    <button type="submit" class="appyBtn is-purple and-medium">
                      Go
                      <i class="fa fa-long-arrow-right"></i>
                    </button>
                  </form>
    
                </div>
              </div>
              <!-- /form -->
    
            </div>
    
          </div>
          <!-- /content -->
    
          <!-- img -->
          <div class="col-lg-9">
            <div class="header-13__img">
    
              <!-- base iamge -->
              <div class="header-13__img__base">
                <img src="img/webApp2.png" alt="img">
              </div>
    
              <!-- left top image -->
              <div class="header-13__img__leftTop lax" data-lax-preset="driftLeft">
                <img src="img/graphicCard.png" alt="img">
              </div>
    
              <!-- left bottom image -->
              <div class="header-13__img__leftBot lax" data-lax-preset="driftLeft">
                <img src="img/haeder-12-top.png" alt="img">
              </div>
    
              <!-- right middle image -->
              <div class="header-13__img__rightMid lax" data-lax-preset="driftRight">
                <img src="img/haeder-12-bot.png" alt="img">
              </div>
    
            </div>
          </div>
          <!-- /img -->
    
        </div>
      </div>
    </header>

Header-13

Styles for this element are stored in:

app/sass/componentsStyles/_header-13.sass

Header-14

Make your landing page with AppyKit

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam dolore accusantium, obcaecati ratione ipsum iusto!

App Store Play Market