Zapper는 모바일 앱, 스타트업 앱, 다양한 종류의 비즈니스를 위한 원페이지 웹사이트에 적합한 프리미엄 다목적 HTML 소프트웨어 앱 랜딩 페이지 템플릿입니다.
템플릿의 일반적인 구조는 템플릿 전체에 걸쳐 동일합니다. 다음은 일반적인 구조입니다.
<!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>
사이트 헤더에 대한 CSS 스타일입니다.
//
.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; }
}
로딩 요소 및 클래스에 대한 CSS 스타일입니다.
//
.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%); }
이 템플릿과 함께 사용하는 스타일시트 파일 목록입니다. 각 파일을 열어 더 많은 정보를 찾을 수 있습니다.
| 파일 이름 | 설명 |
|---|---|
bootstrap.min.css | 기본 부트스트랩 CSS 파일 |
font-awesome.min.css | Font Awesome 폰트 아이콘 |
swiper.min.css | Swiper Slider CSS 파일 |
style.css | 템플릿 메인 CSS |
이것은 저희 테마에 사용된 모든 jQuery 파일 목록입니다.
| 태그 | 설명 |
|---|---|
bootstrap-min.js | Bootstrap min |
masonry.min.js | Masonry Javascript 파일 |
jquery.min.js | jQuery 라이브러리 |
script.js | 모든 플러그인 초기화 |
이 항목에는 포함된 PSD 파일이 없지만 다음을 클릭하여 별도로 구매할 수 있습니다. 여기.
다음 이미지, 아이콘 또는 기타 파일을 사용했습니다.
다시 한번, 이 템플릿을 구매해 주셔서 감사합니다. 이 테마와 관련하여 질문이 있으시면. 보증은 없지만 최선을 다해 도와드리겠습니다. ThemeForest의 테마에 대한 더 일반적인 질문이 있으시면 포럼을 방문하여 "항목 토론" 섹션에 질문하는 것을 고려해 보세요.