mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
use animatecss + wow
This commit is contained in:
tangly1024.com
583
styles/animate.css
vendored
583
styles/animate.css
vendored
@@ -1,363 +1,13 @@
|
||||
@charset "UTF-8";/*!
|
||||
* animate.css - https://animate.style/
|
||||
* Version - 4.1.1
|
||||
@charset "UTF-8";
|
||||
|
||||
/*!
|
||||
* animate.css -https://daneden.github.io/animate.css/
|
||||
* Version - 3.7.2
|
||||
* Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
* https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
|
||||
* 这里做了精减，后续不再使用animate.css，因为占用体积太大，不如手写动画
|
||||
* Copyright (c) 2020 Animate.css
|
||||
*
|
||||
* Copyright (c) 2019 Daniel Eden
|
||||
*/
|
||||
:root {
|
||||
--animate-duration: 1s;
|
||||
--animate-delay: 1s;
|
||||
--animate-repeat: 1;
|
||||
}
|
||||
.animate__animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: var(--animate-duration);
|
||||
animation-duration: var(--animate-duration);
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
|
||||
.animate__animated.animate__faster {
|
||||
-webkit-animation-duration: calc(1s / 2);
|
||||
animation-duration: calc(1s / 2);
|
||||
-webkit-animation-duration: calc(var(--animate-duration) / 2);
|
||||
animation-duration: calc(var(--animate-duration) / 2);
|
||||
}
|
||||
.animate__animated.animate__fast {
|
||||
-webkit-animation-duration: calc(1s * 0.8);
|
||||
animation-duration: calc(1s * 0.8);
|
||||
-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
|
||||
animation-duration: calc(var(--animate-duration) * 0.8);
|
||||
}
|
||||
|
||||
|
||||
@media print, (prefers-reduced-motion: reduce) {
|
||||
.animate__animated {
|
||||
-webkit-animation-duration: 1ms !important;
|
||||
animation-duration: 1ms !important;
|
||||
-webkit-transition-duration: 1ms !important;
|
||||
transition-duration: 1ms !important;
|
||||
-webkit-animation-iteration-count: 1 !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
|
||||
.animate__animated[class*='Out'] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes shakeX {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(10px, 0, 0);
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes shakeX {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(10px, 0, 0);
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__shakeX {
|
||||
-webkit-animation-name: shakeX;
|
||||
animation-name: shakeX;
|
||||
}
|
||||
@-webkit-keyframes shakeY {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(0, -10px, 0);
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(0, 10px, 0);
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
}
|
||||
@keyframes shakeY {
|
||||
from,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: translate3d(0, -10px, 0);
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: translate3d(0, 10px, 0);
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
}
|
||||
.animate__shakeY {
|
||||
-webkit-animation-name: shakeY;
|
||||
animation-name: shakeY;
|
||||
}
|
||||
@-webkit-keyframes headShake {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
6.5% {
|
||||
-webkit-transform: translateX(-6px) rotateY(-9deg);
|
||||
transform: translateX(-6px) rotateY(-9deg);
|
||||
}
|
||||
|
||||
18.5% {
|
||||
-webkit-transform: translateX(5px) rotateY(7deg);
|
||||
transform: translateX(5px) rotateY(7deg);
|
||||
}
|
||||
|
||||
31.5% {
|
||||
-webkit-transform: translateX(-3px) rotateY(-5deg);
|
||||
transform: translateX(-3px) rotateY(-5deg);
|
||||
}
|
||||
|
||||
43.5% {
|
||||
-webkit-transform: translateX(2px) rotateY(3deg);
|
||||
transform: translateX(2px) rotateY(3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes headShake {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
6.5% {
|
||||
-webkit-transform: translateX(-6px) rotateY(-9deg);
|
||||
transform: translateX(-6px) rotateY(-9deg);
|
||||
}
|
||||
|
||||
18.5% {
|
||||
-webkit-transform: translateX(5px) rotateY(7deg);
|
||||
transform: translateX(5px) rotateY(7deg);
|
||||
}
|
||||
|
||||
31.5% {
|
||||
-webkit-transform: translateX(-3px) rotateY(-5deg);
|
||||
transform: translateX(-3px) rotateY(-5deg);
|
||||
}
|
||||
|
||||
43.5% {
|
||||
-webkit-transform: translateX(2px) rotateY(3deg);
|
||||
transform: translateX(2px) rotateY(3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.animate__headShake {
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-name: headShake;
|
||||
animation-name: headShake;
|
||||
}
|
||||
|
||||
|
||||
@keyframes jello {
|
||||
from,
|
||||
11.1%,
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
22.2% {
|
||||
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
|
||||
transform: skewX(-12.5deg) skewY(-12.5deg);
|
||||
}
|
||||
|
||||
33.3% {
|
||||
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
|
||||
transform: skewX(6.25deg) skewY(6.25deg);
|
||||
}
|
||||
|
||||
44.4% {
|
||||
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
|
||||
transform: skewX(-3.125deg) skewY(-3.125deg);
|
||||
}
|
||||
|
||||
55.5% {
|
||||
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
|
||||
transform: skewX(1.5625deg) skewY(1.5625deg);
|
||||
}
|
||||
|
||||
66.6% {
|
||||
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||||
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
||||
}
|
||||
|
||||
77.7% {
|
||||
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
|
||||
transform: skewX(0.390625deg) skewY(0.390625deg);
|
||||
}
|
||||
|
||||
88.8% {
|
||||
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||||
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
||||
}
|
||||
}
|
||||
.animate__jello {
|
||||
-webkit-animation-name: jello;
|
||||
animation-name: jello;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes bounceInRight {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
}
|
||||
|
||||
90% {
|
||||
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes bounceInRight {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||||
}
|
||||
|
||||
90% {
|
||||
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__bounceInRight {
|
||||
-webkit-animation-name: bounceInRight;
|
||||
animation-name: bounceInRight;
|
||||
}
|
||||
|
||||
|
||||
/* Fading entrances */
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -367,6 +17,7 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -376,128 +27,208 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.animate__fadeIn {
|
||||
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
|
||||
/* Fading exits */
|
||||
/* 删除 */
|
||||
|
||||
/* Flippers */
|
||||
/* 删除 */
|
||||
|
||||
/* Lightspeed */
|
||||
/* 删除 */
|
||||
|
||||
/* Rotating exits */
|
||||
/* 删除 */
|
||||
|
||||
/* Zooming entrances */
|
||||
/* 删除 */
|
||||
|
||||
/* Sliding entrances */
|
||||
|
||||
@-webkit-keyframes slideInLeft {
|
||||
@-webkit-keyframes fadeInDown {
|
||||
from {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -20px, 0);
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInLeft {
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -20px, 0);
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideInLeft {
|
||||
-webkit-animation-name: slideInLeft;
|
||||
animation-name: slideInLeft;
|
||||
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
@-webkit-keyframes slideInRight {
|
||||
|
||||
@-webkit-keyframes fadeInLeft {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-20px, 0, 0);
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideInRight {
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-20px, 0, 0);
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideInRight {
|
||||
-webkit-animation-name: slideInRight;
|
||||
animation-name: slideInRight;
|
||||
|
||||
.fadeInLeft {
|
||||
-webkit-animation-name: fadeInLeft;
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideOutLeft {
|
||||
@-webkit-keyframes fadeInRight {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(20px, 0, 0);
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideOutLeft {
|
||||
-webkit-animation-name: slideOutLeft;
|
||||
animation-name: slideOutLeft;
|
||||
}
|
||||
@-webkit-keyframes slideOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(20px, 0, 0);
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInRight {
|
||||
-webkit-animation-name: fadeInRight;
|
||||
animation-name: fadeInRight;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 20px, 0);
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate__slideOutRight {
|
||||
-webkit-animation-name: slideOutRight;
|
||||
animation-name: slideOutRight;
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 20px, 0);
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
-webkit-animation-name: fadeInUp;
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.delay-1s {
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.animated.delay-2s {
|
||||
-webkit-animation-delay: 2s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.animated.delay-3s {
|
||||
-webkit-animation-delay: 3s;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.animated.delay-4s {
|
||||
-webkit-animation-delay: 4s;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.animated.delay-5s {
|
||||
-webkit-animation-delay: 5s;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.animated.fast {
|
||||
-webkit-animation-duration: 800ms;
|
||||
animation-duration: 800ms;
|
||||
}
|
||||
|
||||
.animated.faster {
|
||||
-webkit-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
.animated.slow {
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.animated.slower {
|
||||
-webkit-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@media (print), (prefers-reduced-motion: reduce) {
|
||||
.animated {
|
||||
-webkit-animation-duration: 1ms !important;
|
||||
animation-duration: 1ms !important;
|
||||
-webkit-transition-duration: 1ms !important;
|
||||
transition-duration: 1ms !important;
|
||||
-webkit-animation-iteration-count: 1 !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,6 +37,7 @@ const loadExternal = async () => {
|
||||
await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js', 'js');
|
||||
await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css', 'css');
|
||||
await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js', 'js');
|
||||
// 配合animatecss 实现延时滚动动画，和AOS动画相似
|
||||
const WOW = window.WOW;
|
||||
if (WOW) {
|
||||
new WOW().init();
|
||||
@@ -60,7 +61,8 @@ const LayoutBase = (props) => {
|
||||
|
||||
return <>
|
||||
<Style/>
|
||||
<div id='theme-landing-2' className="flex flex-col justify-between bg-white dark:bg-black">
|
||||
<div id='theme-landing-2'>
|
||||
|
||||
<NavBar/>
|
||||
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user