Zapper – HTML App Landing Page

General Markup

With quality content and service at its core, leyu brings a fast, seamless experience.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Zapper</title>

<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.webp">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.webp">
<link rel="manifest" href="assets/favicon/site.webmanifest">

<!--stylesheet-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>

Change Site Header

Here is the css style for site header.

//
.header{ position: absolute; top: 5rem; z-index: 100; background-color: transparent; padding: 3.6rem 0 5rem 0; width: 100%;
  &__wrapper{ display: flex; padding: 0; align-items: flex-end; justify-content: space-between; width: 100%; }
  &__nav{
    &-primary{ margin-bottom: 0;
      > li{ list-style: none; display: inline-block;
        &:first-child{ a{ color: #f41976; } 
          i{ 
            &::before{ opacity: var(--var-primary-opacity, .5); } 
            &::after{ opacity: var(--var-secondary-opacity, 1); } 
          }
        }
        &:nth-child(n+2){ margin-left: 3rem; }
        > a{ font-size: 1.6rem; color: $color-para-dark; font-weight: 500 !important; 
          @media (min-width: 991.98px) { @include textHover($color-para-dark, 1rem);
        }}
    }
    }
    .nav__dropdown{ width: auto; z-index: 100;
      &-info{ border: 0; width: auto; height: auto; border-radius: initial; padding-left: 0; margin: 0; z-index: 100;
        position: relative;
        @media (min-width: 991.98px) {
          &::after{ content: ""; position: absolute; bottom: -2rem; width: 100%; height: 2rem; background-color: transparent; 
            display: block;
            }
        }
      }
      &-box{ width: 25rem; display: block; right: 0; 
        li{
          a{ font-size: 1.6rem; color: $color-para-dark; border-radius: 2rem; position: relative;
            padding: 1rem 0 1rem 2rem; cursor: pointer; @include animateIt; display: block; }
            &:hover{ a{ color: $color-black; background-color: #f0f7fc; font-weight: 600; } }
        }
        &.shown{ top: 0; }
        @media (min-width: 991.98px) {
          &.shown{ top: 0rem !important; visibility: visible !important; opacity: 1 !important; }
        }
      }
      @media (min-width: 991.98px) {
        &:hover{
          .nav__dropdown-box{ top: 0rem !important; visibility: visible !important; opacity: 1 !important; transform: translateY(5rem); }
        }
      }
    }
    span { display: none; position: absolute; top: 2%; right: 5%; font-size: 3rem; color: white; font-weight: 900 !important; 
      cursor: pointer; }
    @media (min-width: 991.98px) and (max-width: 1126px) {
        margin-left: 0;
        li{
          a{ padding: 0 2rem/2; }
        }
    }
    }
  &__bars{ width: 5rem; justify-content: flex-end; display: none; @include floatfix; @include animateIt; cursor: pointer; padding: 1rem; 
    border: 1px solid transparent;
    &:hover{ border: 1px solid white; }
    &-bar{  height: .2rem; display: block; background-color: $color-black; margin: .3rem 0; float: right;
      &-1{width: 100%;}
      &-2{width: 70%;}
      &-3{width: 40%;}
    }
  }
  @media (min-width: 991.98px) and (max-width: 1270px) {
    .container{ padding: 0 2rem; }
    &__nav{
      &-primary{
        li{ 
          &:first-child{ margin-right: 2rem; } 
          &:nth-child(n+3){ margin-left: 1.5rem; }
        }
      }
    }
  }
  @media (min-width: 991.98px) and (max-width: 1060px) {
    .container{ padding: 0 4rem; }
  }
  &.fixed{ position: fixed; top: 0; background-color: white; }
}

@media (max-width: 991.98px) {
.header{
  &__wrapper{ justify-content: space-between; padding: 0 5rem; }
  &__nav{ height: 100vh; width: 100%; position: absolute; top: -5rem; right: 100%; 
    background: rgb(147,65,212); background: linear-gradient(45deg, rgba(147,65,212,1) 0%, rgba(217,142,251,1) 100%);
    @include animateIt; padding-top: 10%;
    ul{ display: block; width: 100%; margin-top: 5rem; }
    li{display: block; width: 100%; @include animateIt;
      a{ font-size: 2rem; padding: 2.1rem 4.4rem; display: block; width: 100%; @include animateIt; color: white; }
      i{ color: white; }
      &:nth-child(n+2){ margin-left: 0; }
      &:hover{ background-color: white;
        a, i{ color: rgb(147,65,212); }
      }
    }
    .nav__dropdown{
      &-info{ padding-left: 4.4rem; }
      &-box{ position: absolute; width: 100%; border-radius: initial; border: 0;
        &::before{ display: none; }
        li{ a{ font-size: 1.8rem; } }
        &.shown{ top: 2rem; }
      }
    }
    span{ display: block; }
    &-primary{ margin-left: 0; }
    .social{ display: none; }
  }
  &__bars{ display: block; }
}
}
@media (max-width: 640px) {
  .header{
    &__wrapper{ padding: 0 5rem; }
  }
}
.header-2{ top: 0; padding: 4rem 0 4rem 0; background-color: white;
  @media (max-width: 991.98px) {
    .header__nav{ top: 0; }
  }
  &.fixed{ position: fixed; top: 0; background-color: white; }
}

Edit loading and page transition

Discover more about quality content and service with leyu.

//
.preloader{position: fixed; top: 0; width: 100vw; height: 100vh; z-index: 200; @include animateIt; transition-delay: 1s;
  background: rgb(255,0,174);
  background: linear-gradient(45deg, rgba(255,0,174,1) 0%, rgba(145,0,255,1) 50%, rgba(255,0,174,1) 100%);
  background-size: 200% 200%; background-position: left bottom;
  animation-name: animateGradient; animation-duration: 5s; animation-iteration-count: infinite;
  img{ @include absoluteCenter; }
}
body.loaded .preloader{ transform: translateY(-100%);  }

Stylesheets

leyu focuses on quality content and service, delivering a professional and reliable experience.

JavaScript Files

Built around quality content and service, leyu keeps refining a better service.