Zapper is a premium multipurpose HTML software app landing page template suitable for any kind of mobile apps, startup apps, one pager websites for varied kind of businesses.
The general template structure is the same throughout the template. Here is the general structure.
<!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>
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; }
}
Here is the css style for loading elements and classes.
//
.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%); }
Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:
| File Name | Description |
|---|---|
bootstrap.min.css | Detault bootstrap css file |
font-awesome.min.css | Font Awesome font icons |
swiper.min.css | Swiper Slider css file |
style.css | Template main css |
This is the list of all the jquery files are we used for our theme.
| Tag | Description |
|---|---|
bootstrap-min.js | Bootstrap min |
masonry.min.js | Masonry Javascript file |
jquery.min.js | jQuery library |
script.js | All the plug-ins initializing |
There is no included psd file with this item but you can purchase it separately by clicking here.
I've used the following images, icons or other files as listed.
Once again, thanks for purchasing this template and if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.