|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<!-- Link Swiper's CSS --> |
|
<link |
|
rel="stylesheet" |
|
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" |
|
/> |
|
|
|
<link href="https://fonts.cdnfonts.com/css/gotham" rel="stylesheet" /> |
|
<!-- <link href="https://fonts.cdnfonts.com/css/better-time" rel="stylesheet" /> --> |
|
|
|
<title>Document</title> |
|
|
|
<!-- <script src="https://cdn.tailwindcss.com"></script> --> |
|
|
|
<style> |
|
@import url("https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"); |
|
|
|
html { |
|
font-family: "Gotham", sans-serif; |
|
font-size: 100% !important; |
|
} |
|
|
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
font-family: "Gotham", sans-serif; |
|
} |
|
|
|
body { |
|
width: 100%; |
|
overflow-x: hidden; |
|
} |
|
|
|
/* #region Scroll */ |
|
.scroller { |
|
/* height: 100vh; |
|
overflow-y: scroll; |
|
scroll-snap-type: y mandatory; */ |
|
} |
|
|
|
.scroller section { |
|
scroll-snap-align: start; |
|
} |
|
/* #endregion */ |
|
|
|
/* #region Swiper */ |
|
.swiper-button-next, |
|
.swiper-button-prev { |
|
color: white; |
|
} |
|
|
|
.swiper-button-next { |
|
padding-right: 65px; |
|
} |
|
|
|
.swiper-button-prev { |
|
padding-left: 65px; |
|
} |
|
|
|
.swiper { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.swiper-slide.swiper-slide-active > img { |
|
transform: scale(1.1); |
|
transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1); |
|
} |
|
.swiper-slide > img { |
|
transform: scale(0.6); |
|
transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1); |
|
} |
|
.swiper-slide { |
|
text-align: center; |
|
font-size: 18px; |
|
|
|
/* Center slide text vertically */ |
|
display: -webkit-box; |
|
display: -ms-flexbox; |
|
display: -webkit-flex; |
|
display: flex; |
|
/* -webkit-box-pack: center; */ |
|
-ms-flex-pack: center; |
|
-webkit-justify-content: center; |
|
justify-content: center; |
|
-webkit-box-align: center; |
|
-ms-flex-align: center; |
|
-webkit-align-items: center; |
|
align-items: center; |
|
outline: none; |
|
} |
|
|
|
.swiper-slide img { |
|
display: block; |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
/* #endregion */ |
|
|
|
.view-more { |
|
margin-top: -70px !important; |
|
} |
|
|
|
.view-more img { |
|
width: 16rem; |
|
height: 16rem; |
|
} |
|
|
|
/* #region Section */ |
|
.section { |
|
height: 100vh; |
|
} |
|
|
|
.section video { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
/* #endregion */ |
|
|
|
/* #region Section 1 */ |
|
.section1 { |
|
background-image: linear-gradient(to bottom, #eef8fd 5%, #3c96d4); |
|
background-image: url("https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/1920x2160.jpg"); |
|
background-size: cover; |
|
background-repeat: no-repeat; |
|
background-position: center; |
|
width: 100%; |
|
min-height: 100vh; |
|
text-align: center; |
|
} |
|
|
|
.section1 .wrapper { |
|
max-width: 1369px; |
|
margin: 0 auto; |
|
} |
|
|
|
.section1 .title { |
|
width: 100%; |
|
} |
|
|
|
.section1 .title img { |
|
width: 70%; |
|
} |
|
|
|
.section1 .title h2 { |
|
font-size: 4.5rem !important; |
|
color: #ffffff; |
|
line-height: 5rem !important; |
|
-webkit-text-stroke-width: 0rem !important; |
|
-webkit-text-stroke-color: #ffffff; |
|
letter-spacing: 0.6px; |
|
} |
|
|
|
.section1 .title h2 span { |
|
font-size: 2.5rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
-webkit-text-stroke-width: 0.1rem; |
|
-webkit-text-stroke-color: #202d5f; |
|
} |
|
|
|
.section1 .title h2 strong { |
|
font-size: 7.5rem; |
|
color: #202d5f; |
|
font-weight: bold; |
|
-webkit-text-stroke-color: #202d5f; |
|
-webkit-text-stroke-width: 0rem !important; |
|
} |
|
/* #endregion */ |
|
|
|
.logo img { |
|
width: 20rem; |
|
height: 6rem; |
|
} |
|
|
|
.slide1 { |
|
margin-top: 5.5rem; |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
#hand { |
|
position: absolute; |
|
top: 109%; |
|
left: 122%; |
|
width: 101px; |
|
height: 101px; |
|
opacity: 0; |
|
} |
|
|
|
.click { |
|
width: 50%; |
|
padding: 1rem 0.1rem; |
|
border: 1px dashed black; |
|
color: black; |
|
text-align: center; |
|
border-radius: 20px; |
|
opacity: 0; |
|
margin-left: 136px; |
|
} |
|
|
|
.sectionSpecial { |
|
width: 100%; |
|
height: 100vh; |
|
position: absolute; |
|
top: -100px; |
|
} |
|
|
|
.slide2 { |
|
width: 100%; |
|
height: 100%; |
|
position: relative; |
|
display: flex; |
|
justify-content: center; |
|
flex-direction: column; |
|
align-items: center; |
|
padding-top: 2rem; |
|
} |
|
|
|
.slide2 > .btn__info { |
|
margin-left: 0; |
|
margin-right: 0; |
|
width: 35rem; |
|
font-size: 3.5rem; |
|
height: 7.5rem; |
|
} |
|
|
|
.slide2 .main-img img { |
|
width: 100%; |
|
height: 80vh; |
|
object-fit: cover; |
|
} |
|
|
|
.product1 { |
|
z-index: 2; |
|
width: 85%; |
|
height: 100%; |
|
object-fit: cover; |
|
position: relative; |
|
transform: translateX(-3%); |
|
} |
|
|
|
.light-1 { |
|
width: 420px; |
|
height: 420px; |
|
position: absolute; |
|
top: -27%; |
|
/* left: 3%; */ |
|
border-radius: 100%; |
|
z-index: 0; |
|
} |
|
|
|
.light-2 { |
|
position: absolute; |
|
z-index: 0; |
|
top: -10%; |
|
left: -47px; |
|
right: 0; |
|
margin-left: auto; |
|
margin-right: auto; |
|
width: 480px; |
|
height: 480px; |
|
} |
|
|
|
.light-1 img { |
|
width: 100%; |
|
object-fit: cover; |
|
} |
|
|
|
.btn__info { |
|
width: 404px; |
|
height: 87px; |
|
border: 0.1rem solid #ffffff; |
|
border-radius: 5rem; |
|
background-image: linear-gradient(to right, #f9f9f9, #c9c9c9, #f9f9f9); |
|
/* box-shadow: 0px 0px 50px 20px #6229e7; */ |
|
font-size: 2.2rem; |
|
margin: 2rem auto; |
|
cursor: pointer; |
|
outline: none; |
|
} |
|
|
|
.btn__info a { |
|
text-decoration: none; |
|
color: #202d5f; |
|
} |
|
|
|
.slide2 .light-1 { |
|
position: absolute; |
|
top: -0%; |
|
left: 50%; |
|
transform: translateX(-60%); |
|
width: 10rem; |
|
height: 10rem; |
|
} |
|
|
|
/* #region Section 2 */ |
|
.section2 { |
|
margin-top: 2rem; |
|
margin: 0 auto; |
|
width: 100%; |
|
opacity: 0; |
|
background-color: #8821aa; |
|
} |
|
/* #endregion */ |
|
|
|
/* #region Section 2 - features */ |
|
.child-img { |
|
position: absolute; |
|
cursor: pointer; |
|
width: 25rem; |
|
opacity: 0; |
|
transition: 0.2s ease-out; |
|
z-index: 2; |
|
} |
|
|
|
.child-img img { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
|
|
.child-img__content { |
|
display: flex; |
|
align-items: flex-start; |
|
position: absolute; |
|
opacity: 0; |
|
visibility: hidden; |
|
transition: 0.5s ease-out; |
|
width: 24rem; |
|
} |
|
|
|
.child-img__content .child-img__content-border { |
|
width: 0.8rem; |
|
background-color: #fff; |
|
height: 100%; |
|
} |
|
|
|
.child-img__content p { |
|
font-size: 1.25rem; |
|
margin-left: 1rem; |
|
margin-top: 1rem; |
|
text-align: left; |
|
line-height: 1.3rem; |
|
color: rgb(255, 255, 255); |
|
font-weight: 300; |
|
height: 100%; |
|
/* text-shadow: 1px 1px #ccc; */ |
|
} |
|
|
|
.child-img:nth-child(2) { |
|
right: 21%; |
|
top: -6%; |
|
cursor: pointer; |
|
} |
|
|
|
.child-img:nth-child(2) > .child-img__content { |
|
top: 85%; |
|
left: 29%; |
|
} |
|
|
|
.child-img:nth-child(2) > .child-img__content .child-img__content-border { |
|
height: 4rem; |
|
} |
|
|
|
.child-img:nth-child(2):hover > .child-img__content { |
|
opacity: 1; |
|
visibility: visible; |
|
} |
|
|
|
.child-img:nth-child(3) { |
|
left: 18%; |
|
top: 4%; |
|
} |
|
|
|
.child-img:nth-child(3) > .child-img__content { |
|
top: 89%; |
|
left: -4%; |
|
} |
|
|
|
.child-img:nth-child(3) > .child-img__content .child-img__content-border { |
|
height: 4rem; |
|
} |
|
|
|
.child-img:nth-child(3):hover > .child-img__content { |
|
opacity: 1; |
|
visibility: visible; |
|
} |
|
|
|
.child-img:nth-child(4) { |
|
right: 19%; |
|
top: 20%; |
|
} |
|
|
|
.child-img:nth-child(4) > .child-img__content { |
|
top: 92%; |
|
left: 24%; |
|
} |
|
|
|
.child-img:nth-child(4) > .child-img__content .child-img__content-border { |
|
height: 4rem; |
|
} |
|
|
|
.child-img:nth-child(4):hover > .child-img__content { |
|
opacity: 1; |
|
visibility: visible; |
|
} |
|
|
|
.child-img:nth-child(5) { |
|
left: 16%; |
|
top: 32%; |
|
} |
|
|
|
.child-img:nth-child(5) > .child-img__content { |
|
top: 85%; |
|
left: 1%; |
|
} |
|
|
|
.child-img:nth-child(5) > .child-img__content .child-img__content-border { |
|
height: 4.5rem; |
|
} |
|
|
|
.child-img:nth-child(5):hover > .child-img__content { |
|
opacity: 1; |
|
visibility: visible; |
|
} |
|
|
|
.child-img:nth-child(6) { |
|
right: 20%; |
|
top: 48%; |
|
} |
|
|
|
.child-img:nth-child(6) > .child-img__content { |
|
top: 92%; |
|
left: 29%; |
|
} |
|
|
|
.child-img:nth-child(6) > .child-img__content .child-img__content-border { |
|
height: 4rem; |
|
} |
|
|
|
.child-img:nth-child(6):hover > .child-img__content { |
|
opacity: 1; |
|
visibility: visible; |
|
} |
|
|
|
.child-img:nth-child(7) { |
|
left: 16%; |
|
top: 58%; |
|
} |
|
|
|
.child-img:nth-child(7) > .child-img__content { |
|
top: 85%; |
|
left: 1%; |
|
} |
|
|
|
.child-img:nth-child(7) > .child-img__content .child-img__content-border { |
|
height: 4rem; |
|
} |
|
|
|
.child-img:nth-child(7):hover > .child-img__content { |
|
opacity: 1; |
|
visibility: visible; |
|
} |
|
/* #endregion */ |
|
|
|
/* #region Section 6 */ |
|
.section6 { |
|
width: 100%; |
|
background-image: linear-gradient( |
|
to bottom, |
|
rgb(100, 52, 172), |
|
rgb(62, 48, 141), |
|
rgb(34, 25, 154) |
|
); |
|
/* padding: 100px 0; */ |
|
} |
|
|
|
.section6 .wrapper { |
|
width: 100%; |
|
max-width: 1369px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin: 0 auto; |
|
padding: 0 106px; |
|
} |
|
/* #endregion */ |
|
|
|
.replaceColumn { |
|
text-align: center; |
|
} |
|
|
|
.replaceColumn .replaceColumn__image { |
|
border: 6px solid #fff; |
|
background-color: rgb(22, 15, 131); |
|
width: 34rem; |
|
height: 25rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.replaceColumn p { |
|
font-size: 1.6rem; |
|
color: #fff; |
|
font-weight: 400; |
|
margin: 2.5rem 0 0; |
|
} |
|
|
|
.replaceColumn .btn__info { |
|
font-size: 1.2rem; |
|
color: #202d5f; |
|
width: 19.2rem; |
|
height: 4rem; |
|
} |
|
|
|
.protectColumn { |
|
text-align: center; |
|
} |
|
|
|
.protectColumn .protectColumn__image { |
|
border: 6px solid #fff; |
|
background-color: rgb(22, 15, 131); |
|
width: 34rem; |
|
height: 25rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.replaceColumn .replaceColumn__image img, |
|
.protectColumn .protectColumn__image img { |
|
width: auto; |
|
} |
|
|
|
.protectColumn .protectColumn__image img { |
|
width: 75%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
|
|
.protectColumn p { |
|
font-size: 2rem; |
|
color: #fff; |
|
font-weight: bold; |
|
margin: 2.5rem 0 0; |
|
} |
|
|
|
.protectColumn .btn__info a { |
|
font-size: 1.2rem; |
|
color: #ffffff; |
|
width: 19.2rem; |
|
height: 4rem; |
|
} |
|
|
|
.protectColumn .btn__info { |
|
font-size: 1.2rem; |
|
background: #202d5f; |
|
width: 19.2rem; |
|
height: 4rem; |
|
border: none; |
|
} |
|
|
|
.replaceColumn .btn__info a { |
|
font-size: 1.2rem; |
|
color: #ffffff; |
|
width: 19.2rem; |
|
height: 4rem; |
|
} |
|
|
|
.replaceColumn .btn__info { |
|
font-size: 1.2rem; |
|
background: #202d5f; |
|
width: 19.2rem; |
|
height: 4rem; |
|
border: none; |
|
} |
|
|
|
.containerSectionSlide { |
|
width: 100vw; |
|
height: 100vh; |
|
overflow-y: scroll; |
|
overflow-x: hidden; |
|
} |
|
|
|
/* #region Section Intro */ |
|
.intro { |
|
width: 100%; |
|
height: 100%; |
|
background-image: linear-gradient( |
|
to bottom, |
|
rgb(136, 25, 166), |
|
rgb(116, 58, 178), |
|
rgb(100, 52, 172) |
|
); |
|
} |
|
|
|
.intro .introContent { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex-direction: column; |
|
width: 100%; |
|
} |
|
|
|
.intro .introContent h2 { |
|
font-size: 1.8rem; |
|
color: #ffffff; |
|
margin-bottom: 0.8rem; |
|
} |
|
|
|
.introContent__color { |
|
padding: 11px 6px; |
|
padding-top: 24px; |
|
height: 45px; |
|
border: 1px solid black; |
|
background-color: #44509e; |
|
color: #eef8fd; |
|
outline: none; |
|
font-size: 1rem; |
|
margin-top: 1rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
box-shadow: none; |
|
} |
|
|
|
.intro .introContent .btn__info { |
|
margin-top: 2.5rem; |
|
width: 250px; |
|
height: 45px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background: #202d5f; |
|
border: none; |
|
box-shadow: none; |
|
} |
|
|
|
.intro .introContent .btn__info a { |
|
font-size: 1.2rem; |
|
color: #fff; |
|
} |
|
/* #endregion */ |
|
|
|
/* #region Animation */ |
|
@keyframes fade { |
|
to { |
|
transform: scale(2); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@keyframes fadeOpacity { |
|
from { |
|
opacity: 0; |
|
} |
|
|
|
to { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
@keyframes transformHand { |
|
0% { |
|
opacity: 0; |
|
} |
|
|
|
10% { |
|
opacity: 0.5; |
|
} |
|
|
|
80% { |
|
top: 51%; |
|
left: 47%; |
|
opacity: 1; |
|
} |
|
|
|
100% { |
|
opacity: 0; |
|
} |
|
} |
|
/* #endregion */ |
|
|
|
/* #region Responsive */ |
|
@media screen and (max-width: 1201px) { |
|
.section video { |
|
object-fit: cover; |
|
} |
|
|
|
.section1 { |
|
height: 1871px !important; |
|
} |
|
|
|
#hand { |
|
width: 5rem !important; |
|
height: 5rem !important; |
|
top: 80%; |
|
left: 80%; |
|
} |
|
|
|
.click { |
|
margin-left: 6rem !important; |
|
width: 70% !important; |
|
padding: 0.8rem 0.1rem !important; |
|
font-size: 1.5rem !important; |
|
} |
|
|
|
.section1 .wrapper { |
|
max-width: 1100px !important; |
|
} |
|
|
|
.logo img { |
|
width: 20rem !important; |
|
height: 4.9rem !important; |
|
} |
|
|
|
.section1 .title h2 { |
|
font-size: 3.5rem !important; |
|
line-height: 4.5rem !important; |
|
-webkit-text-stroke-width: 0rem !important; |
|
} |
|
|
|
.section1 .title h2 span { |
|
font-size: 2rem !important; |
|
} |
|
|
|
.section1 .title h2 strong { |
|
font-size: 6rem !important; |
|
} |
|
|
|
.slide1 { |
|
margin-top: 6rem !important; |
|
} |
|
|
|
.light-1 { |
|
width: 350px !important; |
|
height: 350px !important; |
|
top: -15% !important; |
|
/* left: 4% !important; */ |
|
} |
|
|
|
.light-2 { |
|
top: -8% !important; |
|
left: -36px !important; |
|
} |
|
|
|
.main-img img { |
|
width: 380px !important; |
|
height: 1324px !important; |
|
} |
|
|
|
.slide2 { |
|
margin-top: 2rem !important; |
|
display: flex !important; |
|
flex-direction: column !important; |
|
align-items: center !important; |
|
justify-content: center !important; |
|
} |
|
|
|
.child-img img { |
|
width: 23rem !important; |
|
} |
|
|
|
.child-img__content p { |
|
font-size: 1rem; |
|
text-shadow: 0.8px 0.8px rgba(204, 204, 204, 0.53); |
|
} |
|
|
|
.child-img:nth-child(2) { |
|
top: -8% !important; |
|
right: 12% !important; |
|
} |
|
|
|
.child-img:nth-child(3) { |
|
top: 6% !important; |
|
left: 13% !important; |
|
} |
|
|
|
.child-img:nth-child(3) > .child-img__content { |
|
top: 89%; |
|
left: 4%; |
|
} |
|
|
|
.child-img:nth-child(3) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 4.3rem; |
|
} |
|
|
|
.child-img:nth-child(4) { |
|
right: 13% !important; |
|
top: 20% !important; |
|
} |
|
|
|
.child-img:nth-child(4) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 4.3rem; |
|
} |
|
|
|
.child-img:nth-child(5) { |
|
left: 11% !important; |
|
top: 33% !important; |
|
} |
|
|
|
.child-img:nth-child(5) > .child-img__content { |
|
top: 85%; |
|
left: 2%; |
|
} |
|
|
|
.child-img:nth-child(5) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 4.3rem; |
|
} |
|
|
|
.child-img:nth-child(6) { |
|
right: 16% !important; |
|
top: 50% !important; |
|
} |
|
|
|
.child-img:nth-child(6) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 3.5rem; |
|
} |
|
|
|
.child-img:nth-child(6) > .child-img__content { |
|
top: 92%; |
|
left: 17%; |
|
} |
|
|
|
.child-img:nth-child(7) { |
|
left: 11% !important; |
|
top: 60% !important; |
|
} |
|
|
|
.btn__info { |
|
width: 22rem !important; |
|
height: 6rem !important; |
|
font-size: 2rem !important; |
|
margin: 3rem auto !important; |
|
} |
|
|
|
.child-img:nth-child(7) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 3.5rem !important; |
|
} |
|
|
|
.child-img:nth-child(7) > .child-img__content { |
|
top: 85% !important; |
|
left: 3% !important; |
|
} |
|
|
|
.intro .introContent h2 { |
|
font-size: 1.3rem !important; |
|
} |
|
|
|
.intro .introContent .btn__info { |
|
width: 220px !important; |
|
height: 50px !important; |
|
margin-top: 1rem !important; |
|
} |
|
|
|
.section6 { |
|
width: 101% !important; |
|
} |
|
|
|
.section6 .wrapper { |
|
width: 1100px !important; |
|
} |
|
|
|
.protectColumn, |
|
.replaceColumn { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.protectColumn .protectColumn__image, |
|
.replaceColumn .replaceColumn__image { |
|
width: 30.5rem !important; |
|
height: 27.3rem !important; |
|
} |
|
|
|
.replaceColumn .replaceColumn__image img { |
|
width: 80% !important; |
|
} |
|
|
|
.protectColumn .protectColumn__image img { |
|
width: 50% !important; |
|
} |
|
|
|
.replaceColumn p, |
|
.protectColumn p { |
|
font-size: 1.8rem !important; |
|
margin: 1.8rem 0 1rem !important; |
|
} |
|
|
|
.replaceColumn .btn__info, |
|
.protectColumn .btn__info { |
|
font-size: 1.5rem !important; |
|
width: 18rem !important; |
|
height: 4rem !important; |
|
margin: 2.5rem auto !important; |
|
} |
|
|
|
.intro .introContent { |
|
top: 100% !important; |
|
left: 50% !important; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 1025px) { |
|
.swiper-button-next { |
|
padding-right: 30px; |
|
} |
|
|
|
.swiper-button-prev { |
|
padding-left: 30px; |
|
} |
|
|
|
.section1 { |
|
height: 1640px !important; |
|
} |
|
|
|
.section1 .wrapper { |
|
max-width: 960px !important; |
|
} |
|
|
|
.logo img { |
|
width: 24rem !important; |
|
height: 6rem !important; |
|
} |
|
|
|
#hand { |
|
width: 4.5rem !important; |
|
height: 4.5rem !important; |
|
top: 80%; |
|
left: 80%; |
|
} |
|
|
|
.click { |
|
margin-left: 4rem !important; |
|
width: 87% !important; |
|
padding: 0.5rem 0.1rem !important; |
|
font-size: 1.2rem !important; |
|
} |
|
|
|
.section1 .title h2 { |
|
font-size: 3.8rem !important; |
|
line-height: 4rem !important; |
|
} |
|
|
|
.btn__info { |
|
width: 19rem !important; |
|
height: 4rem !important; |
|
font-size: 1.5rem !important; |
|
margin: 3rem auto !important; |
|
} |
|
|
|
.section1 .title h2 span { |
|
font-size: 2rem !important; |
|
} |
|
|
|
.section1 .title h2 strong { |
|
font-size: 5.5rem !important; |
|
} |
|
|
|
.slide1 { |
|
margin-top: 4rem !important; |
|
max-width: 960px !important; |
|
margin: 4rem auto 0 !important; |
|
} |
|
|
|
.child-img { |
|
width: 19rem !important; |
|
} |
|
|
|
.child-img img { |
|
width: 100% !important; |
|
} |
|
|
|
.child-img__content p { |
|
font-size: 1.2rem !important; |
|
line-height: 1.3rem !important; |
|
} |
|
|
|
.child-img:nth-child(2) { |
|
top: -6% !important; |
|
right: 16% !important; |
|
} |
|
|
|
.child-img:nth-child(3) { |
|
top: 3% !important; |
|
left: 16% !important; |
|
} |
|
|
|
.child-img:nth-child(4) { |
|
right: 16% !important; |
|
top: 14rem !important; |
|
} |
|
|
|
.child-img:nth-child(5) { |
|
left: 14% !important; |
|
top: 31% !important; |
|
} |
|
|
|
.child-img:nth-child(6) { |
|
right: 18% !important; |
|
top: 49% !important; |
|
} |
|
|
|
.child-img:nth-child(7) { |
|
left: 14% !important; |
|
top: 57% !important; |
|
} |
|
|
|
.child-img:nth-child(7) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 4.4rem !important; |
|
} |
|
|
|
.section6 { |
|
width: 100% !important; |
|
} |
|
|
|
.section6 .wrapper { |
|
width: 100% !important; |
|
max-width: 960px !important; |
|
padding: 10rem 0rem !important; |
|
} |
|
|
|
.replaceColumn, |
|
.protectColumn { |
|
text-align: center !important; |
|
width: calc(50% - 15px) !important; |
|
} |
|
|
|
.protectColumn .protectColumn__image, |
|
.replaceColumn .replaceColumn__image { |
|
width: 100% !important; |
|
} |
|
|
|
.intro .introContent { |
|
top: 100% !important; |
|
left: 50% !important; |
|
} |
|
|
|
.light-1 { |
|
width: 250px !important; |
|
height: 250px !important; |
|
} |
|
|
|
.light-2 { |
|
/* width: 195px !important; */ |
|
/* height: 195px !important; */ |
|
top: -5% !important; |
|
left: -28px !important; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 870px) { |
|
.section1 { |
|
height: 1380px !important; |
|
} |
|
|
|
#hand { |
|
width: 4rem !important; |
|
height: 4rem !important; |
|
top: 80%; |
|
left: 80%; |
|
} |
|
|
|
.click { |
|
margin-left: 3rem !important; |
|
font-size: 0.9rem !important; |
|
width: 80% !important; |
|
padding: 0.5rem 0.1rem !important; |
|
font-size: 1rem !important; |
|
} |
|
|
|
.section1 .wrapper { |
|
max-width: 780px !important; |
|
} |
|
|
|
.logo img { |
|
width: 19rem !important; |
|
height: 5rem !important; |
|
} |
|
|
|
.section1 .title h2 { |
|
font-size: 3rem !important; |
|
line-height: 4rem !important; |
|
} |
|
|
|
.section1 .title h2 span { |
|
font-size: 1.8rem !important; |
|
} |
|
|
|
.section1 .title h2 strong { |
|
font-size: 5rem !important; |
|
} |
|
|
|
.child-img { |
|
width: 17rem !important; |
|
} |
|
|
|
.child-img__content { |
|
width: 16rem; |
|
} |
|
|
|
.child-img__content p { |
|
font-size: 0.8rem !important; |
|
} |
|
|
|
.child-img:nth-child(2) { |
|
right: 16% !important; |
|
} |
|
|
|
.child-img:nth-child(3) { |
|
left: 12% !important; |
|
} |
|
|
|
.child-img:nth-child(4) { |
|
right: 13% !important; |
|
top: 10rem !important; |
|
} |
|
|
|
.child-img:nth-child(5) { |
|
left: 10% !important; |
|
top: 29% !important; |
|
} |
|
|
|
.child-img:nth-child(6) { |
|
right: 16% !important; |
|
top: 46% !important; |
|
} |
|
|
|
.child-img:nth-child(7) { |
|
left: 10% !important; |
|
top: 56% !important; |
|
} |
|
|
|
.section6 .wrapper { |
|
max-width: 780px !important; |
|
} |
|
|
|
.protectColumn .protectColumn__image, |
|
.replaceColumn .replaceColumn__image { |
|
width: 23.5rem !important; |
|
height: 22.3rem !important; |
|
} |
|
|
|
.replaceColumn p, |
|
.protectColumn p { |
|
font-size: 1.4rem !important; |
|
margin: 1.8rem 0 1rem !important; |
|
} |
|
|
|
.light-1 { |
|
width: 181px !important; |
|
height: 181px !important; |
|
} |
|
|
|
.light-2 { |
|
top: -4% !important; |
|
/* left: 38% !important; */ |
|
} |
|
} |
|
|
|
@media screen and (max-width: 780px) { |
|
.product1 { |
|
width: 100%; |
|
min-height: 43.75rem; |
|
} |
|
|
|
.section1 { |
|
height: 1163px !important; |
|
} |
|
|
|
.section1 .wrapper { |
|
max-width: 650px !important; |
|
} |
|
|
|
.logo img { |
|
width: 15rem !important; |
|
height: 4.5rem !important; |
|
} |
|
|
|
#hand { |
|
width: 6rem !important; |
|
height: 6rem !important; |
|
top: 80%; |
|
left: 80%; |
|
} |
|
|
|
.click { |
|
margin-left: 8rem !important; |
|
font-size: 0.9rem !important; |
|
width: 60% !important; |
|
padding: 0.5rem 0.1rem !important; |
|
font-size: 1.4rem !important; |
|
} |
|
|
|
.section1 .title h2 { |
|
font-size: 2.5rem !important; |
|
line-height: 3rem !important; |
|
} |
|
|
|
.section1 .title h2 strong { |
|
font-size: 4rem !important; |
|
} |
|
|
|
.section1 .title h2 span { |
|
font-size: 1.5rem !important; |
|
} |
|
|
|
#hand { |
|
width: 3rem !important; |
|
height: 3rem !important; |
|
} |
|
|
|
.click { |
|
margin-left: 3rem !important; |
|
font-size: 0.7rem !important; |
|
} |
|
|
|
.btn__info { |
|
width: 18rem !important; |
|
height: 4rem !important; |
|
font-size: 1.5rem !important; |
|
margin: 1.8rem auto !important; |
|
} |
|
|
|
.child-img { |
|
width: 14rem !important; |
|
} |
|
|
|
.child-img .child-img__content p { |
|
line-height: 1rem !important; |
|
font-size: 0.8rem !important; |
|
} |
|
|
|
.child-img:nth-child(2) { |
|
right: 16% !important; |
|
top: -6% !important; |
|
} |
|
|
|
.child-img:nth-child(3) { |
|
left: 13% !important; |
|
top: 6% !important; |
|
} |
|
|
|
.child-img:nth-child(4) { |
|
right: 13% !important; |
|
top: 10rem !important; |
|
} |
|
|
|
.child-img:nth-child(5) { |
|
left: 10% !important; |
|
top: 30% !important; |
|
} |
|
|
|
.child-img:nth-child(6) { |
|
right: 15% !important; |
|
top: 44% !important; |
|
} |
|
|
|
.child-img:nth-child(7) { |
|
left: 9% !important; |
|
top: 56% !important; |
|
} |
|
|
|
.child-img__content p { |
|
line-height: 1.5rem !important; |
|
font-size: 1.2rem !important; |
|
} |
|
|
|
.intro .introContent h2 { |
|
font-size: 1rem !important; |
|
} |
|
|
|
.section6 .wrapper { |
|
max-width: 650px !important; |
|
flex-direction: column !important; |
|
} |
|
|
|
.replaceColumn, |
|
.protectColumn { |
|
width: 100% !important; |
|
} |
|
|
|
.protectColumn .protectColumn__image, |
|
.replaceColumn .replaceColumn__image { |
|
width: 70% !important; |
|
margin: 0 auto !important; |
|
height: 25.3rem !important; |
|
} |
|
|
|
.replaceColumn p, |
|
.protectColumn p { |
|
font-size: 2rem !important; |
|
margin: 2rem 0 1rem !important; |
|
} |
|
|
|
.replaceColumn .btn__info, |
|
.protectColumn .btn__info { |
|
font-size: 1.5rem !important; |
|
width: 25.2rem !important; |
|
height: 4.1rem !important; |
|
margin: 1rem auto 2rem !important; |
|
} |
|
|
|
.slide1 { |
|
margin-top: 5rem !important; |
|
} |
|
|
|
.sectionChange .wrapper .section3__main-img { |
|
padding: 62% 0 0 0 !important; |
|
} |
|
|
|
.light-1 { |
|
width: 222px !important; |
|
height: 220px !important; |
|
/* top: -19% !important; */ |
|
/* left: 3% !important; */ |
|
} |
|
|
|
.light-2 { |
|
top: -7% !important; |
|
left: -4% !important; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 585px) { |
|
.swiper-button-next { |
|
padding-right: 5px; |
|
} |
|
|
|
.swiper-button-prev { |
|
padding-left: 5px; |
|
} |
|
|
|
.section1 .wrapper { |
|
max-width: 500px !important; |
|
} |
|
|
|
.logo img { |
|
width: 13rem !important; |
|
height: 3.5rem !important; |
|
} |
|
|
|
.slide1 { |
|
margin-top: 2.5rem !important; |
|
} |
|
|
|
.section1 .title h2 { |
|
font-size: 2.2rem !important; |
|
line-height: 3rem !important; |
|
-webkit-text-stroke-width: 0rem !important; |
|
} |
|
|
|
.section1 .title h2 strong { |
|
font-size: 3.5rem !important; |
|
} |
|
|
|
.section1 .title h2 span { |
|
font-size: 1.2rem !important; |
|
} |
|
|
|
.btn__info { |
|
width: 14rem !important; |
|
height: 3rem !important; |
|
font-size: 1rem !important; |
|
margin: 1.8rem auto 3.8rem !important; |
|
} |
|
|
|
#hand { |
|
width: 2rem !important; |
|
height: 2rem !important; |
|
top: 80%; |
|
left: 80%; |
|
} |
|
|
|
.click { |
|
margin-left: 3rem !important; |
|
font-size: 0.6rem !important; |
|
width: 70% !important; |
|
padding: 0.5rem 0.1rem !important; |
|
} |
|
|
|
.child-img { |
|
width: 12rem !important; |
|
} |
|
|
|
.child-img__content p { |
|
line-height: 1rem !important; |
|
font-size: 0.8rem !important; |
|
} |
|
|
|
.child-img:nth-child(2) { |
|
right: 10% !important; |
|
top: -4% !important; |
|
} |
|
|
|
.child-img:nth-child(3) { |
|
left: 10% !important; |
|
top: 8% !important; |
|
} |
|
|
|
.child-img:nth-child(4) { |
|
right: 8% !important; |
|
top: 19% !important; |
|
} |
|
|
|
.child-img:nth-child(3) > .child-img__content { |
|
top: 90% !important; |
|
left: 3% !important; |
|
} |
|
|
|
.child-img:nth-child(5) { |
|
left: 5% !important; |
|
top: 32% !important; |
|
} |
|
|
|
.child-img:nth-child(6) { |
|
right: 10% !important; |
|
top: 46% !important; |
|
} |
|
|
|
.child-img:nth-child(4) > .child-img__content { |
|
top: 92% !important; |
|
left: 7% !important; |
|
} |
|
|
|
.child-img:nth-child(5) > .child-img__content { |
|
top: 85% !important; |
|
left: 6% !important; |
|
} |
|
|
|
.child-img:nth-child(7) { |
|
left: 5% !important; |
|
top: 58% !important; |
|
} |
|
|
|
.child-img:nth-child(2) > .child-img__content { |
|
top: 85% !important; |
|
left: 15% !important; |
|
} |
|
|
|
.section1 { |
|
height: 950px !important; |
|
} |
|
|
|
.intro video { |
|
height: auto !important; |
|
} |
|
|
|
.intro .introContent { |
|
top: 100% !important; |
|
left: 50% !important; |
|
} |
|
|
|
.intro .introContent h2 { |
|
font-size: 0.9rem !important; |
|
} |
|
|
|
.intro .introContent .btn__info { |
|
width: 180px !important; |
|
height: 40px !important; |
|
margin-top: 1rem !important; |
|
} |
|
|
|
.intro .introContent .btn__info a { |
|
font-size: 0.8rem !important; |
|
} |
|
|
|
.protectColumn .protectColumn__image, |
|
.replaceColumn .replaceColumn__image { |
|
width: 90% !important; |
|
} |
|
|
|
.light-1 { |
|
width: 180px !important; |
|
height: 180px !important; |
|
/* top: -15% !important; */ |
|
/* left: 4% !important; */ |
|
} |
|
|
|
.light-2 { |
|
/* width: 151px !important; |
|
height: 151px !important; */ |
|
top: -4% !important; |
|
left: -2.5% !important; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 450px) { |
|
.section1 { |
|
height: 1200px !important; |
|
} |
|
|
|
.btn__info { |
|
margin-top: 3rem auto !important; |
|
} |
|
|
|
.section1 .wrapper { |
|
max-width: 400px !important; |
|
} |
|
|
|
.logo img { |
|
width: 11rem !important; |
|
height: 3.5rem !important; |
|
} |
|
|
|
#hand { |
|
width: 3rem !important; |
|
height: 3rem !important; |
|
top: 80%; |
|
left: 80%; |
|
} |
|
|
|
.click { |
|
margin-left: 2rem !important; |
|
font-size: 0.7rem !important; |
|
width: 91% !important; |
|
padding: 0.5rem 0.1rem !important; |
|
} |
|
|
|
.slide1 .btn__info#btn_main { |
|
margin: 2rem auto 3rem !important; |
|
} |
|
|
|
.light-1 { |
|
width: 135px !important; |
|
height: 135px !important; |
|
top: -20% !important; |
|
/* left: 2% !important; */ |
|
} |
|
|
|
.light-2 { |
|
top: -2% !important; |
|
/* left: 33% !important; */ |
|
} |
|
|
|
.section1 .title h2 { |
|
font-size: 1.5rem !important; |
|
line-height: 2rem !important; |
|
} |
|
|
|
.section1 .title h2 strong { |
|
font-size: 2.5rem !important; |
|
} |
|
|
|
.section1 .title h2 span { |
|
font-size: 0.7rem !important; |
|
} |
|
|
|
.child-img { |
|
width: 10rem !important; |
|
} |
|
|
|
.child-img__content .child-img__content-border { |
|
width: 0.2rem !important; |
|
} |
|
|
|
.child-img:nth-child(2) { |
|
right: 7% !important; |
|
top: -3% !important; |
|
} |
|
|
|
.child-img:nth-child(2) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 5rem !important; |
|
} |
|
|
|
.child-img:nth-child(3) { |
|
left: 5% !important; |
|
top: 66px !important; |
|
} |
|
|
|
.child-img:nth-child(4) { |
|
right: 1% !important; |
|
top: 13.1rem !important; |
|
} |
|
|
|
.child-img:nth-child(4) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 4rem !important; |
|
} |
|
|
|
.child-img:nth-child(5) > .child-img__content { |
|
top: 85% !important; |
|
left: 9% !important; |
|
} |
|
|
|
.child-img:nth-child(5) { |
|
left: -3% !important; |
|
top: 29% !important; |
|
} |
|
|
|
.child-img:nth-child(6) { |
|
right: -1.5% !important; |
|
top: 45% !important; |
|
} |
|
|
|
.child-img:nth-child(6) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 3.2rem !important; |
|
} |
|
|
|
.child-img:nth-child(7) { |
|
left: -3% !important; |
|
top: 57% !important; |
|
} |
|
|
|
.child-img:nth-child(7) > .child-img__content { |
|
top: 85% !important; |
|
left: 10% !important; |
|
} |
|
|
|
.child-img .child-img__content p { |
|
margin-left: 0.3rem !important; |
|
line-height: 0.9rem !important; |
|
font-size: 0.6rem !important; |
|
max-width: 125px !important; |
|
} |
|
|
|
.child-img:nth-child(3) > .child-img__content { |
|
top: 89% !important; |
|
left: 14% !important; |
|
} |
|
|
|
.child-img:nth-child(3) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 4.8rem !important; |
|
} |
|
|
|
.child-img:nth-child(5) > .child-img__content { |
|
top: 85% !important; |
|
left: 27% !important; |
|
} |
|
|
|
.child-img:nth-child(6) > .child-img__content { |
|
top: 92% !important; |
|
left: 8% !important; |
|
} |
|
|
|
.intro .introContent { |
|
top: 93% !important; |
|
} |
|
|
|
.intro video { |
|
height: 660px !important; |
|
padding-top: 100px; |
|
} |
|
|
|
.intro .introContent h2 { |
|
font-size: 0.65rem !important; |
|
line-height: 1rem; |
|
} |
|
|
|
.intro .introContent .btn__info { |
|
width: 207px !important; |
|
height: 37px !important; |
|
margin-top: 0.5rem !important; |
|
margin-bottom: 10px !important; |
|
} |
|
|
|
.replaceColumn .replaceColumn__image, |
|
.protectColumn .protectColumn__image { |
|
height: 22.3rem !important; |
|
} |
|
|
|
.replaceColumn p, |
|
.protectColumn p { |
|
font-size: 1.5rem !important; |
|
} |
|
|
|
.replaceColumn .btn__info, |
|
.protectColumn .btn__info { |
|
font-size: 1rem !important; |
|
width: 18.2rem !important; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 380px) { |
|
.section1 .title h2 { |
|
font-size: 1.25rem !important; |
|
line-height: 2rem !important; |
|
-webkit-text-stroke-width: 0rem !important; |
|
} |
|
|
|
.section1 .title h2 strong { |
|
font-size: 2.5rem !important; |
|
-webkit-text-stroke-width: 0.2rem !important; |
|
} |
|
|
|
.section1 .title h2 span { |
|
font-size: 0.8rem !important; |
|
-webkit-text-stroke-width: 0rem !important; |
|
} |
|
|
|
#hand { |
|
width: 3rem !important; |
|
height: 3rem !important; |
|
top: 80%; |
|
left: 80%; |
|
} |
|
|
|
.click { |
|
margin-left: 0.5rem !important; |
|
font-size: 0.6rem !important; |
|
width: 80% !important; |
|
padding: 0.5rem 0.1rem !important; |
|
} |
|
|
|
.child-img { |
|
width: 9rem !important; |
|
} |
|
|
|
.child-img:nth-child(2) { |
|
right: 6% !important; |
|
top: -2% !important; |
|
} |
|
|
|
.child-img:nth-child(3) { |
|
left: 5% !important; |
|
top: 68px !important; |
|
} |
|
|
|
.child-img:nth-child(4) { |
|
right: 0% !important; |
|
top: 13.1rem !important; |
|
} |
|
|
|
.child-img:nth-child(4) |
|
> .child-img__content |
|
.child-img__content-border { |
|
height: 4rem !important; |
|
} |
|
|
|
.child-img:nth-child(5) { |
|
left: -2% !important; |
|
top: 30% !important; |
|
} |
|
|
|
.child-img:nth-child(6) { |
|
right: -1.5% !important; |
|
top: 47% !important; |
|
} |
|
|
|
.child-img__content p { |
|
max-width: 110px !important; |
|
} |
|
|
|
.child-img:nth-child(7) { |
|
left: -2% !important; |
|
top: 61% !important; |
|
} |
|
|
|
.child-img:nth-child(5) > .child- img__content { |
|
top: 85% !important; |
|
left: 10% !important; |
|
} |
|
|
|
.light-1 { |
|
width: 116px !important; |
|
height: 116px !important; |
|
} |
|
|
|
.light-2 { |
|
/* width: 116px !important; |
|
height: 116px !important; */ |
|
top: -3% !important; |
|
/* left: 33% !important; */ |
|
} |
|
|
|
.slide1 .btn__info#btn_main { |
|
margin: 1.5rem auto 3rem !important; |
|
font-size: 1rem !important; |
|
} |
|
|
|
.btn__color { |
|
width: 14.4rem !important; |
|
height: 5rem !important; |
|
font-size: 1.5rem !important; |
|
} |
|
|
|
.intro .introContent { |
|
top: 88% !important; |
|
} |
|
|
|
.intro video { |
|
height: 601px !important; |
|
} |
|
|
|
.intro .introContent h2 { |
|
margin-bottom: 8px; |
|
} |
|
|
|
.replaceColumn .replaceColumn__image, |
|
.protectColumn .protectColumn__image { |
|
height: 20.3rem !important; |
|
} |
|
|
|
.replaceColumn p, |
|
.protectColumn p { |
|
font-size: 1.3rem; |
|
} |
|
|
|
.section1 { |
|
height: 1086px !important; |
|
} |
|
|
|
.intro .introContent h2 { |
|
font-size: 0.65rem !important; |
|
line-height: 1rem; |
|
} |
|
} |
|
/* #endregion */ |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div class="scroller"> |
|
<section class="section"> |
|
<video autoplay loop playsinline muted> |
|
<source |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/oliver.mp4" |
|
type="video/mp4" |
|
/> |
|
</video> |
|
</section> |
|
|
|
<section class="section1"> |
|
<div class="wrapper"> |
|
<div class="logo"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/logo.png" |
|
alt="" |
|
/> |
|
</div> |
|
|
|
<div class="title"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/tagline.png" |
|
alt="heading" |
|
/> |
|
</div> |
|
|
|
<div class="slide1"> |
|
<img |
|
class="product1" |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/banchai.png" |
|
alt="" |
|
/> |
|
|
|
<div class="child-img" id="child-img-1"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/increase10.png" |
|
alt="" |
|
/> |
|
|
|
<div class="child-img__content"> |
|
<div class="child-img__content-border"></div> |
|
<p> |
|
33.000 nhịp chải mỗi phút gấp 1,5 lần so với bàn chải điện |
|
thông thường, cho hiệu quả làm sạch tối ưu |
|
</p> |
|
</div> |
|
|
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/7.png" |
|
alt="" |
|
id="hand" |
|
class="hand" |
|
/> |
|
|
|
<div class="click">Chạm để trải nghiệm</div> |
|
</div> |
|
|
|
<div class="child-img" id="child-img-2"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/tech.png" |
|
alt="" |
|
/> |
|
|
|
<div class="child-img__content"> |
|
<div class="child-img__content-border"></div> |
|
<p> |
|
Tạo nên các hạt siêu bọt Microbubble, làm sạch mảng bám tới 10 |
|
lần so với bàn chải thông thường |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="child-img" id="child-img-3"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/2minute.png" |
|
alt="" |
|
/> |
|
|
|
<div class="child-img__content"> |
|
<div class="child-img__content-border"></div> |
|
<p> |
|
Thiết bị ngừng rung sau mỗi 30s để nhắc bạn thay đổi vùng răng |
|
và ngừng sau 2 phút chải răng |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="child-img" id="child-img-4"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/water.png" |
|
alt="" |
|
/> |
|
|
|
<div class="child-img__content"> |
|
<div class="child-img__content-border"></div> |
|
<p> |
|
Tiêu chuẩn IPX-7 bảo vệ thiết bị khỏi tác dộng của việc ngâm |
|
nước lên đến 1m trong 30 phút |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="child-img" id="child-img-5"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/option.png" |
|
alt="" |
|
/> |
|
|
|
<div class="child-img__content"> |
|
<div class="child-img__content-border"></div> |
|
<p> |
|
3 chế độ chải răng linh hoạt: Sạch Sâu, Chăm Sóc Nướu, Trắng |
|
răng |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="child-img" id="child-img-6"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/battery.png" |
|
alt="" |
|
/> |
|
|
|
<div class="child-img__content"> |
|
<div class="child-img__content-border"></div> |
|
<p> |
|
30 ngày sử dụng chỉ với 1 lần sạc. Cổng sạc USB tiện lợi, dễ |
|
dàng cắm sạc ở bất cứ đâu |
|
</p> |
|
</div> |
|
</div> |
|
|
|
<div class="light-1 light-2"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/water-bg.png" |
|
alt="" |
|
/> |
|
</div> |
|
|
|
<a |
|
class="view-more" |
|
target="_blank" |
|
href="https://www.psvietnam.vn/san-pham/ban-chai-dien.html" |
|
> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/view-more.png" |
|
alt="more" |
|
/> |
|
</a> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<section class="sketchfab-embed-wrapper section2"> |
|
<iframe |
|
style="width: 100%; height: 600px" |
|
title="PS visual" |
|
frameborder="0" |
|
allowfullscreen |
|
mozallowfullscreen="true" |
|
webkitallowfullscreen="true" |
|
allow="fullscreen; autoplay; vr" |
|
xr-spatial-trackingexecution-while-out-of-viewport |
|
execution-while-not-rendered |
|
web-share |
|
src="https://sketchfab.com/models/27449c6ac72c464eb3bf35bcd442bdb9/embed" |
|
></iframe> |
|
</section> |
|
|
|
<section class="intro"> |
|
<div class="swiper mySwiper"> |
|
<div class="swiper-wrapper"> |
|
<div class="swiper-slide"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/pack-ultra-violet.png" |
|
alt="" |
|
/> |
|
</div> |
|
|
|
<div class="swiper-slide"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/ombre.png" |
|
alt="" |
|
/> |
|
</div> |
|
|
|
<div class="swiper-slide"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/BLACK.png" |
|
alt="" |
|
/> |
|
</div> |
|
|
|
<div class="swiper-slide"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/white.png" |
|
alt="" |
|
/> |
|
</div> |
|
</div> |
|
|
|
<div class="swiper-button-next"></div> |
|
|
|
<div class="swiper-button-prev"></div> |
|
</div> |
|
|
|
<div class="introContent"> |
|
<h2>3 MÀU SẮC CHO SỰ LỰA CHỌN</h2> |
|
|
|
<div class="introContent__color">ULTRA VIOLET</div> |
|
|
|
<button class="btn__info"> |
|
<a |
|
target="_blank" |
|
href="https://www.psvietnam.vn/san-pham/ban-chai-dien/ban-chai-dien-p-s-xanh-ombre.html" |
|
>TRẢI NGHIỆM NGAY |
|
</a> |
|
</button> |
|
</div> |
|
</section> |
|
|
|
<section class="section6"> |
|
<div class="wrapper"> |
|
<div class="replaceColumn"> |
|
<div class="replaceColumn__image"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/asset/image/bot/san-pham-dau-ban-chai.png" |
|
alt="" |
|
/> |
|
</div> |
|
|
|
<p>ĐẦU BÀN CHẢI THAY THẾ</p> |
|
|
|
<button class="btn__info"> |
|
<a |
|
target="_blank" |
|
href="https://www.psvietnam.vn/san-pham/dau-ban-chai-dien.html" |
|
>TRẢI NGHIỆM NGAY</a |
|
> |
|
</button> |
|
</div> |
|
|
|
<div class="protectColumn"> |
|
<div class="protectColumn__image"> |
|
<img |
|
src="https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/khien.png" |
|
alt="" |
|
/> |
|
</div> |
|
|
|
<p>BẢO HÀNH 1 ĐỔI 1</p> |
|
|
|
<button class="btn__info"> |
|
<a |
|
target="_blank" |
|
href="https://www.psvietnam.vn/ban-chai-dien-s100-pro/dang-ky-bao-hanh-1-doi-1.html" |
|
>TRẢI NGHIỆM NGAY</a |
|
> |
|
</button> |
|
</div> |
|
</div> |
|
</section> |
|
</div> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/ScrollTrigger.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/ScrollToPlugin.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> |
|
|
|
<script> |
|
const image = document.querySelector(".product1"); |
|
const wrapper = document.querySelector(".slide1"); |
|
const product1 = wrapper.querySelector(".product1"); |
|
const childImgs = document.querySelectorAll(".child-img"); |
|
const Imgs = document.querySelectorAll(".child-img img"); |
|
const ele2 = document.querySelector(".containerSectionSlide"); |
|
const intro = document.querySelector(".intro"); |
|
const hand = document.querySelector("#hand"); |
|
const click = document.querySelector(".click"); |
|
const light1 = document.querySelector(".light-1"); |
|
const buttonLink = document.querySelector( |
|
".intro .introContent .btn__info a" |
|
); |
|
const buttonColor = document.querySelector(".introContent__color"); |
|
var vid = document.getElementById("video"); |
|
var h = document.getElementById("video"); |
|
var scrollPos = 0; |
|
var lastPos = scrollPos; |
|
const video = document.querySelector("#video"); |
|
const sizeDevice = window.innerWidth; |
|
|
|
window.addEventListener("scroll", (event) => { |
|
let scroll = this.scrollY; |
|
let handPosition = hand.style.top; |
|
if (scroll > 1) { |
|
childImgs.forEach((ele) => { |
|
ele.style.display = "block"; |
|
}); |
|
|
|
wrapper.style.display = "flex"; |
|
wrapper.style.alignItems = "center"; |
|
wrapper.style.flexDirection = "column"; |
|
} else { |
|
childImgs.forEach((ele) => { |
|
ele.style.display = "none"; |
|
}); |
|
light1.style.top; |
|
} |
|
}); |
|
|
|
function checkIfImageExists(url, callback) { |
|
const img = new Image(); |
|
img.src = url; |
|
if (img.complete) { |
|
callback(true); |
|
} else { |
|
img.onload = () => { |
|
callback(true); |
|
}; |
|
img.onerror = () => { |
|
callback(false); |
|
}; |
|
} |
|
} |
|
|
|
let showText = setInterval(function () { |
|
if (hand.style.top <= "55%") { |
|
click.style.opacity = 1; |
|
} else { |
|
click.style.opacity = 0; |
|
} |
|
}, 1.5); |
|
Imgs.forEach((child) => { |
|
child.onmouseenter = function () { |
|
hand.style.display = "none"; |
|
click.style.display = "none"; |
|
clearInterval(showText); |
|
}; |
|
}); |
|
let tl = gsap.timeline(); |
|
|
|
tl.to("#child-img-1", { |
|
opacity: 1, |
|
duration: 1, |
|
scrollTrigger: { trigger: "#child-img-1", start: "35% 30%" }, |
|
}) |
|
.to("#hand", { |
|
top: "51%", |
|
left: "47%", |
|
opacity: 1, |
|
repeat: -1, |
|
duration: 1.5, |
|
delay: 1, |
|
}) |
|
.to("#child-img-2", { |
|
opacity: 1, |
|
scrollTrigger: { trigger: "#child-img-2", start: "center 30%" }, |
|
}) |
|
.to("#child-img-3", { |
|
opacity: 1, |
|
scrollTrigger: { trigger: "#child-img-3", start: "center 30%" }, |
|
}) |
|
.to("#child-img-4", { |
|
opacity: 1, |
|
scrollTrigger: { trigger: "#child-img-4", start: "center 30%" }, |
|
}) |
|
.to("#child-img-5", { |
|
opacity: 1, |
|
scrollTrigger: { trigger: "#child-img-5", start: "center 30%" }, |
|
}) |
|
.to("#child-img-6", { |
|
opacity: 1, |
|
scrollTrigger: { |
|
trigger: "#child-img-6", |
|
start: "center 20%", |
|
snap: 200, |
|
}, |
|
}); |
|
|
|
gsap.to(".section2", { |
|
opacity: 1, |
|
duration: 0.3, |
|
scrollTrigger: { trigger: ".section2", start: "30% center" }, |
|
}); |
|
|
|
gsap.to(".section6", { |
|
scrollTrigger: { trigger: ".section6", start: "top top" }, |
|
}); |
|
|
|
gsap.from(".replaceColumn", { |
|
x: -1000, |
|
scrollTrigger: { trigger: ".replaceColumn", start: "top 50% " }, |
|
}); |
|
|
|
gsap.from( |
|
".protectColumn", |
|
{ |
|
x: 1000, |
|
scrollTrigger: { trigger: ".protectColumn", start: "top 40% " }, |
|
}, |
|
"+=1" |
|
); |
|
|
|
var swiper = new Swiper(".mySwiper", { |
|
slidesPerView: 3, |
|
spaceBetween: 30, |
|
loop: true, |
|
effect: "slide", |
|
centeredSlides: true, |
|
navigation: { |
|
nextEl: ".swiper-button-next", |
|
prevEl: ".swiper-button-prev", |
|
}, |
|
}); |
|
|
|
console.log("🚀 ~ file: index.html ~ line 2203 ~ swiper", swiper); |
|
|
|
const buttonSlideObject = { |
|
2: { |
|
link: "https://www.psvietnam.vn/san-pham/ban-chai-dien/ban-chai-dien-p-s-trang-sang.html", |
|
text: "WHITE", |
|
}, |
|
3: { |
|
link: "https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/pack-ultra-violet.png", |
|
text: "ULTRA VIOLET", |
|
}, |
|
4: { |
|
link: "https://www.psvietnam.vn/san-pham/ban-chai-dien/ban-chai-dien-p-s-xanh-ombre.html", |
|
text: "XANH OMBRE", |
|
}, |
|
5: { |
|
link: "https://www.psvietnam.vn/san-pham/ban-chai-dien/ban-chai-dien-p-s-den-nham.html", |
|
text: "BLACK", |
|
}, |
|
6: { |
|
link: "https://www.psvietnam.vn/san-pham/ban-chai-dien/ban-chai-dien-p-s-trang-sang.html", |
|
text: "WHITE", |
|
}, |
|
7: { |
|
link: "https://prime-storage.sgp1.digitaloceanspaces.com/ps/ps-2/pack-ultra-violet.png", |
|
text: "ULTRA VIOLET", |
|
}, |
|
}; |
|
|
|
swiper.on("slideChange", function (swiper) { |
|
const targetButton = buttonSlideObject[swiper.activeIndex]; |
|
buttonLink.href = targetButton.link; |
|
buttonColor.innerText = targetButton.text; |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|