update redirect page
This commit is contained in:
@ -1 +1,234 @@
|
|||||||
<span>Hello Page About Us</span>
|
<section class="con section about-section">
|
||||||
|
<div class="r a-i-center">
|
||||||
|
<div class="c-12 c-l-6">
|
||||||
|
<div class="about-image-box mr-0 mr-x-5">
|
||||||
|
<div class="about-image1 d-n d-x-b">
|
||||||
|
<img class="w-100" src="/images/1000/about-section/cargoload.png" alt="">
|
||||||
|
</div>
|
||||||
|
<img class="w-100" src="/images/1000/about-section/cusser.png" alt="">
|
||||||
|
<div class="experience">
|
||||||
|
<h1 class="mb-3">30+</h1>
|
||||||
|
<p>We have more than years of experience</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="c-12 c-l-6 block-about">
|
||||||
|
|
||||||
|
<span class="sub-title">About Our Company</span>
|
||||||
|
|
||||||
|
<h2 class="title mb-3">Trusted Logistic Service Provider</h2>
|
||||||
|
|
||||||
|
<ul class="order-list mb-4">
|
||||||
|
<li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i> revolutionary catalysts for chang</li>
|
||||||
|
<li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i>catalysts for chang the Seamlessly</li>
|
||||||
|
<li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i>business applications through</li>
|
||||||
|
<li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i>procedures whereas processes</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p class="desc mb-4">Distinctively exploit optimal alignments for intuitive business applications through revolutionary catalysts for chang the Seamlessly optimal optimal alignments for intuitive.</p>
|
||||||
|
|
||||||
|
<div class="d-f a-i-center mt-4">
|
||||||
|
|
||||||
|
<button class="btn btn-primary mr-5">Read More</button>
|
||||||
|
|
||||||
|
<div class="signature">
|
||||||
|
<img decoding="async" src="https://shtheme.org/demosd/logistek/wp-content/uploads/2021/04/signature.png" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="con-parallax con-perf-section">
|
||||||
|
<div class="bg-wrapper parallax" data-dept="0.4">
|
||||||
|
<img src="/images/1000/passenger-planes.jpg" alt="Background" class="bg-img">
|
||||||
|
</div>
|
||||||
|
<div class="con section perf-section section-break" data-content>
|
||||||
|
<div class="r">
|
||||||
|
<div class="r-n-g">
|
||||||
|
<div class="c-6 c-l-3">
|
||||||
|
<div class="d-f f-c a-i-center grid">
|
||||||
|
<div class="icon-wrap d-f j-c-center a-i-center">
|
||||||
|
<i class="atg a-8x atg-air-cargo"></i>
|
||||||
|
</div>
|
||||||
|
<span>Cargo Tonnage</span>
|
||||||
|
<h1 CountNumber prefix="+" num-max="100000" num-min="1">0</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-6 c-l-3">
|
||||||
|
<div class="d-f f-c a-i-center grid">
|
||||||
|
<div class="icon-wrap d-f j-c-center a-i-center">
|
||||||
|
<i class="atg a-8x atg-client"></i>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
Satisfied Clients
|
||||||
|
</span>
|
||||||
|
<h1 CountNumber prefix="+" num-max="1000" num-min="1">+0</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-6 c-l-3">
|
||||||
|
<div class="d-f f-c a-i-center grid">
|
||||||
|
<div class="icon-wrap d-f j-c-center a-i-center">
|
||||||
|
<i class="atg a-8x atg-ticket-air-thin"></i>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
Ticket Sales
|
||||||
|
</span>
|
||||||
|
<h1 CountNumber num-max="20000" num-min="1">0</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-6 c-l-3">
|
||||||
|
<div class="d-f f-c a-i-center grid">
|
||||||
|
<div class="icon-wrap d-f j-c-center a-i-center">
|
||||||
|
<i class="atg a-8x atg-revenue"></i>
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
Annual Revenue
|
||||||
|
</span>
|
||||||
|
<h1 CountNumber prefix="$" num-max="10000000" num-min="1">$0</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="con section blog-section">
|
||||||
|
<div class="r j-c-center">
|
||||||
|
<div class="d-f f-c a-i-center">
|
||||||
|
<div class="sub-title">Blog Post</div>
|
||||||
|
<h2 class="title">Our Latest Blog Post</h2>
|
||||||
|
<div class="container">
|
||||||
|
<div class="line"></div>
|
||||||
|
<span class="dot dot1"></span>
|
||||||
|
<span class="dot dot2"></span>
|
||||||
|
<span class="dot dot3"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="r j-c-center">
|
||||||
|
<div class="r-n-g">
|
||||||
|
<div class="c-12">
|
||||||
|
<div class="swiper ourBlogSwiper1">
|
||||||
|
<div class="swiper-wrapper a-i-center">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="grid">
|
||||||
|
<a class="grid-image">
|
||||||
|
<img loading="lazy" src="/images/1000/blog-section/introduction-to-air-cargo-operation.jpg" class="img-fluid wp-post-image" alt="">
|
||||||
|
</a>
|
||||||
|
<div class="grid-body d-f f-c">
|
||||||
|
<div class="blog-author d-f a-i-center">
|
||||||
|
<div class="blog-author-img mr-10">
|
||||||
|
<img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&d=mm&r=g">
|
||||||
|
</div>
|
||||||
|
<div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
|
||||||
|
</div>
|
||||||
|
<span class="sub-title">Logistics</span>
|
||||||
|
<h3 class="title">
|
||||||
|
<a href="">5 Ways To Get The Most Out Of Your Logistics</a>
|
||||||
|
</h3>
|
||||||
|
<div class="d-f j-c-between a-i-center">
|
||||||
|
<div class="blog-meta d-f a-i-center">
|
||||||
|
<i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
|
||||||
|
</div>
|
||||||
|
<div class="blog-meta">
|
||||||
|
<a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="grid">
|
||||||
|
<a class="grid-image">
|
||||||
|
<img loading="lazy" src="/images/1000/blog-section/seaport.jpg" class="img-fluid wp-post-image" alt="">
|
||||||
|
</a>
|
||||||
|
<div class="grid-body d-f f-c">
|
||||||
|
<div class="blog-author d-f a-i-center">
|
||||||
|
<div class="blog-author-img mr-10">
|
||||||
|
<img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&d=mm&r=g">
|
||||||
|
</div>
|
||||||
|
<div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
|
||||||
|
</div>
|
||||||
|
<span class="sub-title">Logistics</span>
|
||||||
|
<h3 class="title">
|
||||||
|
<a href="">The Top 5 Changes That Occur With AI in Logistics</a>
|
||||||
|
</h3>
|
||||||
|
<div class="d-f j-c-between a-i-center">
|
||||||
|
<div class="blog-meta d-f a-i-center">
|
||||||
|
<i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
|
||||||
|
</div>
|
||||||
|
<div class="blog-meta">
|
||||||
|
<a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="grid">
|
||||||
|
<a class="grid-image">
|
||||||
|
<img loading="lazy" src="/images/1000/blog-section/introduction-to-air-cargo-operation.jpg" class="img-fluid wp-post-image" alt="">
|
||||||
|
</a>
|
||||||
|
<div class="grid-body d-f f-c">
|
||||||
|
<div class="blog-author d-f a-i-center">
|
||||||
|
<div class="blog-author-img mr-10">
|
||||||
|
<img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&d=mm&r=g">
|
||||||
|
</div>
|
||||||
|
<div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
|
||||||
|
</div>
|
||||||
|
<span class="sub-title">Logistics</span>
|
||||||
|
<h3 class="title">
|
||||||
|
<a href="">5 Ways To Get The Most Out Of Your Logistics</a>
|
||||||
|
</h3>
|
||||||
|
<div class="d-f j-c-between a-i-center">
|
||||||
|
<div class="blog-meta d-f a-i-center">
|
||||||
|
<i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
|
||||||
|
</div>
|
||||||
|
<div class="blog-meta">
|
||||||
|
<a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="grid">
|
||||||
|
<a class="grid-image">
|
||||||
|
<img loading="lazy" src="/images/1000/blog-section/obooks-for-logistics.png" class="img-fluid wp-post-image" alt="">
|
||||||
|
</a>
|
||||||
|
<div class="grid-body d-f f-c">
|
||||||
|
<div class="blog-author d-f a-i-center">
|
||||||
|
<div class="blog-author-img mr-10">
|
||||||
|
<img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&d=mm&r=g">
|
||||||
|
</div>
|
||||||
|
<div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
|
||||||
|
</div>
|
||||||
|
<span class="sub-title">Logistics</span>
|
||||||
|
<h3 class="title">
|
||||||
|
<a href="">Supply Chain And Logistics Trends That Could Be Big</a>
|
||||||
|
</h3>
|
||||||
|
<div class="d-f j-c-between a-i-center">
|
||||||
|
<div class="blog-meta d-f a-i-center">
|
||||||
|
<i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
|
||||||
|
</div>
|
||||||
|
<div class="blog-meta">
|
||||||
|
<a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="swiper-button-prev" aria-label="previous"></div>
|
||||||
|
<div class="swiper-button-next" aria-label="next"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|||||||
@ -1 +1,64 @@
|
|||||||
<span>Hello Page Our Team</span>
|
<div class="con-masthead">
|
||||||
|
<video class="bg-video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"><source src="/images/wait-section/bg.mp4" type="video/mp4" /></video>
|
||||||
|
<!-- Masthead-->
|
||||||
|
|
||||||
|
<div class="masthead">
|
||||||
|
<div class="cfull">
|
||||||
|
<div class="r">
|
||||||
|
<div class="c-12">
|
||||||
|
<div class="masthead-content ">
|
||||||
|
<div class="cfull px-4 px-lg-0">
|
||||||
|
<h2 class="fst-italic lh-1 mb-4">We’re creating content for this section</h2>
|
||||||
|
<p class="mb-5">
|
||||||
|
Content for the provincial pages is being prepared and will be updated soon. Please leave your email to receive updates and be notified when it goes live.
|
||||||
|
</p>
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- * * SB Forms Contact Form * *-->
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- This form is pre-integrated with SB Forms.-->
|
||||||
|
<!-- To make this form functional, sign up at-->
|
||||||
|
<!-- https://startbootstrap.com/solution/contact-forms-->
|
||||||
|
<!-- to get an API token!-->
|
||||||
|
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
|
||||||
|
<!-- Email address input-->
|
||||||
|
<div class="d-f input-group-newsletter">
|
||||||
|
<div class="c"><input class="form-control h-100" id="email" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div>
|
||||||
|
<div class="c-a"><button class="btn btn-primary disabled ml-2 h-100" id="submitButton" type="submit">Notify Me!</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="invalid-feedback mt-2 d-n" data-sb-feedback="email:required">An email is required.</div>
|
||||||
|
<div class="invalid-feedback mt-2 d-n" data-sb-feedback="email:email">Email is not valid.</div>
|
||||||
|
<!-- Submit success message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when the form-->
|
||||||
|
<!-- has successfully submitted-->
|
||||||
|
<div class="d-n" id="submitSuccessMessage">
|
||||||
|
<div class="text-center mb-3 mt-2">
|
||||||
|
<div class="fw-bolder">Form submission successful!</div>
|
||||||
|
To activate this form, sign up at
|
||||||
|
<br />
|
||||||
|
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Submit error message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when there is-->
|
||||||
|
<!-- an error submitting the form-->
|
||||||
|
<div class="d-n" id="submitErrorMessage"><div class="text-center text-danger mb-3 mt-2">Error sending message!</div></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Social Icons-->
|
||||||
|
<!-- For more icon options, visit https://fontawesome.com/icons?d=gallery&p=2&s=brands-->
|
||||||
|
<div class="social-icons">
|
||||||
|
<div class="d-f f-r f-l-c j-c-center a-i-center h-100 mt-3 mt-l-0">
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-facebook"></i></a>
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-circle-yt"></i></a>
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-circle-tiktok"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
64
TWA-App/Data/page/2003.html
Normal file
64
TWA-App/Data/page/2003.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<div class="con-masthead">
|
||||||
|
<video class="bg-video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"><source src="/images/wait-section/bg.mp4" type="video/mp4" /></video>
|
||||||
|
<!-- Masthead-->
|
||||||
|
|
||||||
|
<div class="masthead">
|
||||||
|
<div class="cfull">
|
||||||
|
<div class="r">
|
||||||
|
<div class="c-12">
|
||||||
|
<div class="masthead-content ">
|
||||||
|
<div class="cfull px-4 px-lg-0">
|
||||||
|
<h2 class="fst-italic lh-1 mb-4">We’re creating content for this section</h2>
|
||||||
|
<p class="mb-5">
|
||||||
|
Content for the provincial pages is being prepared and will be updated soon. Please leave your email to receive updates and be notified when it goes live.
|
||||||
|
</p>
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- * * SB Forms Contact Form * *-->
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- This form is pre-integrated with SB Forms.-->
|
||||||
|
<!-- To make this form functional, sign up at-->
|
||||||
|
<!-- https://startbootstrap.com/solution/contact-forms-->
|
||||||
|
<!-- to get an API token!-->
|
||||||
|
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
|
||||||
|
<!-- Email address input-->
|
||||||
|
<div class="d-f input-group-newsletter">
|
||||||
|
<div class="c"><input class="form-control h-100" id="email" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div>
|
||||||
|
<div class="c-a"><button class="btn btn-primary disabled ml-2 h-100" id="submitButton" type="submit">Notify Me!</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="invalid-feedback mt-2 d-n" data-sb-feedback="email:required">An email is required.</div>
|
||||||
|
<div class="invalid-feedback mt-2 d-n" data-sb-feedback="email:email">Email is not valid.</div>
|
||||||
|
<!-- Submit success message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when the form-->
|
||||||
|
<!-- has successfully submitted-->
|
||||||
|
<div class="d-n" id="submitSuccessMessage">
|
||||||
|
<div class="text-center mb-3 mt-2">
|
||||||
|
<div class="fw-bolder">Form submission successful!</div>
|
||||||
|
To activate this form, sign up at
|
||||||
|
<br />
|
||||||
|
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Submit error message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when there is-->
|
||||||
|
<!-- an error submitting the form-->
|
||||||
|
<div class="d-n" id="submitErrorMessage"><div class="text-center text-danger mb-3 mt-2">Error sending message!</div></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Social Icons-->
|
||||||
|
<!-- For more icon options, visit https://fontawesome.com/icons?d=gallery&p=2&s=brands-->
|
||||||
|
<div class="social-icons">
|
||||||
|
<div class="d-f f-r f-l-c j-c-center a-i-center h-100 mt-3 mt-l-0">
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-facebook"></i></a>
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-circle-yt"></i></a>
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-circle-tiktok"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
64
TWA-App/Data/page/2004.html
Normal file
64
TWA-App/Data/page/2004.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<div class="con-masthead">
|
||||||
|
<video class="bg-video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"><source src="/images/wait-section/bg.mp4" type="video/mp4" /></video>
|
||||||
|
<!-- Masthead-->
|
||||||
|
|
||||||
|
<div class="masthead">
|
||||||
|
<div class="cfull">
|
||||||
|
<div class="r">
|
||||||
|
<div class="c-12">
|
||||||
|
<div class="masthead-content ">
|
||||||
|
<div class="cfull px-4 px-lg-0">
|
||||||
|
<h2 class="fst-italic lh-1 mb-4">We’re creating content for this section</h2>
|
||||||
|
<p class="mb-5">
|
||||||
|
Content for the provincial pages is being prepared and will be updated soon. Please leave your email to receive updates and be notified when it goes live.
|
||||||
|
</p>
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- * * SB Forms Contact Form * *-->
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- This form is pre-integrated with SB Forms.-->
|
||||||
|
<!-- To make this form functional, sign up at-->
|
||||||
|
<!-- https://startbootstrap.com/solution/contact-forms-->
|
||||||
|
<!-- to get an API token!-->
|
||||||
|
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
|
||||||
|
<!-- Email address input-->
|
||||||
|
<div class="d-f input-group-newsletter">
|
||||||
|
<div class="c"><input class="form-control h-100" id="email" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div>
|
||||||
|
<div class="c-a"><button class="btn btn-primary disabled ml-2 h-100" id="submitButton" type="submit">Notify Me!</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="invalid-feedback mt-2 d-n" data-sb-feedback="email:required">An email is required.</div>
|
||||||
|
<div class="invalid-feedback mt-2 d-n" data-sb-feedback="email:email">Email is not valid.</div>
|
||||||
|
<!-- Submit success message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when the form-->
|
||||||
|
<!-- has successfully submitted-->
|
||||||
|
<div class="d-n" id="submitSuccessMessage">
|
||||||
|
<div class="text-center mb-3 mt-2">
|
||||||
|
<div class="fw-bolder">Form submission successful!</div>
|
||||||
|
To activate this form, sign up at
|
||||||
|
<br />
|
||||||
|
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Submit error message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when there is-->
|
||||||
|
<!-- an error submitting the form-->
|
||||||
|
<div class="d-n" id="submitErrorMessage"><div class="text-center text-danger mb-3 mt-2">Error sending message!</div></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Social Icons-->
|
||||||
|
<!-- For more icon options, visit https://fontawesome.com/icons?d=gallery&p=2&s=brands-->
|
||||||
|
<div class="social-icons">
|
||||||
|
<div class="d-f f-r f-l-c j-c-center a-i-center h-100 mt-3 mt-l-0">
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-facebook"></i></a>
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-circle-yt"></i></a>
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-circle-tiktok"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
64
TWA-App/Data/page/2005.html
Normal file
64
TWA-App/Data/page/2005.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<div class="con-masthead">
|
||||||
|
<video class="bg-video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"><source src="/images/wait-section/bg.mp4" type="video/mp4" /></video>
|
||||||
|
<!-- Masthead-->
|
||||||
|
|
||||||
|
<div class="masthead">
|
||||||
|
<div class="cfull">
|
||||||
|
<div class="r">
|
||||||
|
<div class="c-12">
|
||||||
|
<div class="masthead-content ">
|
||||||
|
<div class="cfull px-4 px-lg-0">
|
||||||
|
<h2 class="fst-italic lh-1 mb-4">We’re creating content for this section</h2>
|
||||||
|
<p class="mb-5">
|
||||||
|
Content for the provincial pages is being prepared and will be updated soon. Please leave your email to receive updates and be notified when it goes live.
|
||||||
|
</p>
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- * * SB Forms Contact Form * *-->
|
||||||
|
<!-- * * * * * * * * * * * * * * *-->
|
||||||
|
<!-- This form is pre-integrated with SB Forms.-->
|
||||||
|
<!-- To make this form functional, sign up at-->
|
||||||
|
<!-- https://startbootstrap.com/solution/contact-forms-->
|
||||||
|
<!-- to get an API token!-->
|
||||||
|
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
|
||||||
|
<!-- Email address input-->
|
||||||
|
<div class="d-f input-group-newsletter">
|
||||||
|
<div class="c"><input class="form-control h-100" id="email" type="email" placeholder="Enter email address..." aria-label="Enter email address..." data-sb-validations="required,email" /></div>
|
||||||
|
<div class="c-a"><button class="btn btn-primary disabled ml-2 h-100" id="submitButton" type="submit">Notify Me!</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="invalid-feedback mt-2 d-n" data-sb-feedback="email:required">An email is required.</div>
|
||||||
|
<div class="invalid-feedback mt-2 d-n" data-sb-feedback="email:email">Email is not valid.</div>
|
||||||
|
<!-- Submit success message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when the form-->
|
||||||
|
<!-- has successfully submitted-->
|
||||||
|
<div class="d-n" id="submitSuccessMessage">
|
||||||
|
<div class="text-center mb-3 mt-2">
|
||||||
|
<div class="fw-bolder">Form submission successful!</div>
|
||||||
|
To activate this form, sign up at
|
||||||
|
<br />
|
||||||
|
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Submit error message-->
|
||||||
|
<!---->
|
||||||
|
<!-- This is what your users will see when there is-->
|
||||||
|
<!-- an error submitting the form-->
|
||||||
|
<div class="d-n" id="submitErrorMessage"><div class="text-center text-danger mb-3 mt-2">Error sending message!</div></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Social Icons-->
|
||||||
|
<!-- For more icon options, visit https://fontawesome.com/icons?d=gallery&p=2&s=brands-->
|
||||||
|
<div class="social-icons">
|
||||||
|
<div class="d-f f-r f-l-c j-c-center a-i-center h-100 mt-3 mt-l-0">
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-facebook"></i></a>
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-circle-yt"></i></a>
|
||||||
|
<a class="btn btn-primary m-3" href="#!"><i class="atg a-2x atg-circle-tiktok"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -23,6 +23,19 @@
|
|||||||
<None Update="Data\page\2002.html">
|
<None Update="Data\page\2002.html">
|
||||||
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
|
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
|
||||||
</None>
|
</None>
|
||||||
|
<None Update="Data\page\2003.html">
|
||||||
|
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
|
||||||
|
</None>
|
||||||
|
<None Update="Data\page\2004.html">
|
||||||
|
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
|
||||||
|
</None>
|
||||||
|
<None Update="Data\page\2005.html">
|
||||||
|
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
|
||||||
|
</None>
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<Folder Include="wwwroot\images\wait-section\" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@ -1,5 +1,17 @@
|
|||||||
@Html.Raw(ViewBag.Content)
|
<section class="con-parallax con-page-section">
|
||||||
|
<div class="bg-wrapper parallax" data-dept="0.1">
|
||||||
|
<img src="https://morz.vamtam.com/wp-content/uploads/2018/01/Shop-2.jpg" alt="Background" class="bg-img">
|
||||||
|
</div>
|
||||||
|
<div class="con section page-section section-break" data-content>
|
||||||
|
<div class="r">
|
||||||
|
<h1 class="title">@ViewData["Title"]</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
@Html.Raw(ViewBag.Content)
|
||||||
|
|
||||||
@section jsLib {
|
@section jsLib {
|
||||||
|
<script src="@Url.AbsoluteContent("~/js/ext_libs/swiper-bundle.min.js")" js-lib></script>
|
||||||
<script type="module" src="@Url.AbsoluteContent("~/js/js-page/2000.js")" js-lib></script>
|
<script type="module" src="@Url.AbsoluteContent("~/js/js-page/2000.js")" js-lib></script>
|
||||||
|
<script type="module" src="@Url.AbsoluteContent("~/js/js-page/" + ViewData["PageID"] + ".js")" js-lib></script>
|
||||||
}
|
}
|
||||||
@ -571,8 +571,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-12 c-l-6">
|
<div class="c-12 c-l-6">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -593,6 +591,125 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="con-parallax">
|
||||||
|
<div class="bg-wrapper parallax" data-dept="0.3">
|
||||||
|
<img src="~/images/1000/customer-section/review-cust.jpg " alt="Background" class="bg-img">
|
||||||
|
</div>
|
||||||
|
<div class="con section customer-section section-break" data-content>
|
||||||
|
<div class="r">
|
||||||
|
<div class="c-12 d-f f-c a-i-center">
|
||||||
|
<span class="sub-title">
|
||||||
|
Testimonials
|
||||||
|
</span>
|
||||||
|
<h2 class="title">
|
||||||
|
What People and Clients Think About Us?
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="r mt-3">
|
||||||
|
<div class="c-12">
|
||||||
|
<div class="swiper custSwiper">
|
||||||
|
<div class="swiper-wrapper a-i-center">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="cust-reviews d-f f-c">
|
||||||
|
<div class="quote">
|
||||||
|
<img decoding="async" src="https://codeskdhaka.com/wp/volport/wp-content/themes/volport/assets/img/icon/quote-2.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<ul class="star">
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Service is some of the best we have ever volport Logistics International customer
|
||||||
|
had with ocean forwarders we like to
|
||||||
|
ship as much as possible with you
|
||||||
|
</p>
|
||||||
|
<div class="cust-body">
|
||||||
|
<div class="cust-image d-f j-c-center a-i-center">
|
||||||
|
<a href="#" tabindex="0"><img decoding="async" src="https://codeskdhaka.com/wp/volport/wp-content/uploads/2021/12/test-img-01.png" alt="img"></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-f f-c ml-4">
|
||||||
|
<h4 class="cust-title"><a href="#" tabindex="0">Disen Mac Hoor </a></h4>
|
||||||
|
<span class="cust-sub">
|
||||||
|
Founder, Volport Co
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="cust-reviews d-f f-c">
|
||||||
|
<div class="quote">
|
||||||
|
<img decoding="async" src="https://codeskdhaka.com/wp/volport/wp-content/themes/volport/assets/img/icon/quote-2.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<ul class="star">
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Service is some of the best we have ever volport Logistics International customer
|
||||||
|
had with ocean forwarders we like to
|
||||||
|
ship as much as possible with you
|
||||||
|
</p>
|
||||||
|
<div class="cust-body">
|
||||||
|
<div class="cust-image d-f j-c-center a-i-center">
|
||||||
|
<a href="#" tabindex="0"><img decoding="async" src="https://codeskdhaka.com/wp/volport/wp-content/uploads/2021/12/test-img-01.png" alt="img"></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-f f-c ml-4">
|
||||||
|
<h4 class="cust-title"><a href="#" tabindex="0">Disen Mac Hoor </a></h4>
|
||||||
|
<span class="cust-sub">
|
||||||
|
Founder, Volport Co
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div class="cust-reviews d-f f-c">
|
||||||
|
<div class="quote">
|
||||||
|
<img decoding="async" src="https://codeskdhaka.com/wp/volport/wp-content/themes/volport/assets/img/icon/quote-2.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<ul class="star">
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
<li><i class="atg a-2x atg-solid-star"></i></li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Service is some of the best we have ever volport Logistics International customer
|
||||||
|
had with ocean forwarders we like to
|
||||||
|
ship as much as possible with you
|
||||||
|
</p>
|
||||||
|
<div class="cust-body">
|
||||||
|
<div class="cust-image d-f j-c-center a-i-center">
|
||||||
|
<a href="#" tabindex="0"><img decoding="async" src="https://codeskdhaka.com/wp/volport/wp-content/uploads/2021/12/test-img-01.png" alt="img"></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-f f-c ml-4">
|
||||||
|
<h4 class="cust-title"><a href="#" tabindex="0">Disen Mac Hoor </a></h4>
|
||||||
|
<span class="cust-sub">
|
||||||
|
Founder, Volport Co
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="swiper-button-prev" aria-label="previous"></div>
|
||||||
|
<div class="swiper-button-next" aria-label="next"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="con section blog-section">
|
<section class="con section blog-section">
|
||||||
<div class="r j-c-center">
|
<div class="r j-c-center">
|
||||||
@ -608,7 +725,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="r j-c-center">
|
<div class="r j-c-center">
|
||||||
<div class="r-n-g c-12">
|
<div class="r-n-g">
|
||||||
|
<div class="c-12">
|
||||||
<div class="swiper ourBlogSwiper">
|
<div class="swiper ourBlogSwiper">
|
||||||
<div class="swiper-wrapper a-i-center">
|
<div class="swiper-wrapper a-i-center">
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
@ -726,6 +844,7 @@
|
|||||||
<div class="swiper-button-next" aria-label="next"></div>
|
<div class="swiper-button-next" aria-label="next"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -399,3 +399,7 @@
|
|||||||
.atg-mess-question1:before {
|
.atg-mess-question1:before {
|
||||||
content: '\a054'
|
content: '\a054'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.atg-solid-star:before{
|
||||||
|
content: '\a055'
|
||||||
|
}
|
||||||
@ -2652,8 +2652,7 @@ h3 {
|
|||||||
transition: width .3s ease-in;
|
transition: width .3s ease-in;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 2px;
|
height: 2px
|
||||||
background: var(--primary)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ico-menu div:first-child {
|
.ico-menu div:first-child {
|
||||||
|
|||||||
@ -56,6 +56,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.f-header {
|
.f-header {
|
||||||
|
z-index: 10000;
|
||||||
top: -65px
|
top: -65px
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -71,13 +72,10 @@
|
|||||||
background-color: var(--text-color-dark) !important
|
background-color: var(--text-color-dark) !important
|
||||||
}
|
}
|
||||||
|
|
||||||
.f-header.show.ios{
|
.f-header.ios{
|
||||||
position: absolute;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rSlider{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, h7, p, span, div {
|
h1, h2, h3, h4, h5, h6, h7, p, span, div {
|
||||||
user-select: none; /* Ngăn không cho bôi đen copy text */
|
user-select: none; /* Ngăn không cho bôi đen copy text */
|
||||||
@ -114,8 +112,13 @@ a {
|
|||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color:inherit;
|
color:inherit;
|
||||||
cursor: pointer
|
cursor: pointer !important
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a * {
|
||||||
|
cursor: pointer !important
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
|
-moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
|
||||||
@ -239,7 +242,7 @@ body[page="1000"] .hblock1 {
|
|||||||
transition: color .3s ease-in-out
|
transition: color .3s ease-in-out
|
||||||
}
|
}
|
||||||
|
|
||||||
body[page="1000"] .navmain .nav-item:hover, body[page="1000"] .navmain .nav-item.active, body[page="1000"] .navmain [data-dropdown].active .nav-item, .f-header .navmain .nav-item:hover, .f-header .navmain .nav-item.active, .f-header .navmain [data-dropdown].active .nav-item {
|
body[page="1000"] #header .navmain .nav-item:hover, body[page="1000"] #header .navmain .nav-item.active, body[page="1000"] #header .navmain [data-dropdown].active .nav-item, .f-header .navmain .nav-item:hover, .f-header .navmain .nav-item.active, .f-header .navmain [data-dropdown].active .nav-item {
|
||||||
color: var(--text-color-lW1)
|
color: var(--text-color-lW1)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -268,12 +271,6 @@ body[page="1000"] .navmain .nav-item:hover, body[page="1000"] .navmain .nav-item
|
|||||||
border-bottom: 1px solid var(--border-color-2)
|
border-bottom: 1px solid var(--border-color-2)
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-header .nav-mainmenu [data-dropdown] .sub-item {
|
|
||||||
position: relative;
|
|
||||||
top: 0 !important;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
font-size: .92rem;
|
font-size: .92rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -292,7 +289,7 @@ body[page="1000"] .sub-item .nav-link, .sub-item .nav-link {
|
|||||||
color: var(--text-color-dark)
|
color: var(--text-color-dark)
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover{
|
.nav-link:hover, .nav-link.active{
|
||||||
color: var(--color-primary) !important;
|
color: var(--color-primary) !important;
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
background: var(--color-1)
|
background: var(--color-1)
|
||||||
@ -300,7 +297,7 @@ body[page="1000"] .sub-item .nav-link, .sub-item .nav-link {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
.navmain [data-dropdown].active .nav-item::after, .navmain .nav-item::after, .navmain [data-dropdown].active .nav-item::before, .navmain .nav-item::before {
|
.navmain .nav-item::before, .navmain .nav-item::after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -309,33 +306,31 @@ body[page="1000"] .sub-item .nav-link, .sub-item .nav-link {
|
|||||||
right: 49%;
|
right: 49%;
|
||||||
left: 49%;
|
left: 49%;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 3px;
|
height: 2px;
|
||||||
background: var(--color-primary);
|
background: var(--color-primary);
|
||||||
transform: scaleX(0);
|
transform: scaleX(0);
|
||||||
transition: transform .4s ease-in-out
|
transition: transform .4s ease-in-out
|
||||||
}
|
}
|
||||||
|
|
||||||
.navmain [data-dropdown].active .nav-item::after, .navmain .nav-item::after, .navmain .nav-item.active::after {
|
.navmain .nav-item::after {
|
||||||
transform-origin: center right;
|
transform-origin: center right;
|
||||||
border-top-left-radius: 3px;
|
border-top-left-radius: 3px;
|
||||||
border-bottom-left-radius: 3px;
|
border-bottom-left-radius: 3px;
|
||||||
left: 5%;
|
left: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navmain [data-dropdown].active .nav-item::before, .navmain .nav-item::before, .navmain .nav-item.active::before {
|
.navmain .nav-item::before {
|
||||||
transform-origin: center left;
|
transform-origin: center left;
|
||||||
border-top-right-radius: 3px;
|
border-top-right-radius: 3px;
|
||||||
border-bottom-right-radius: 3px;
|
border-bottom-right-radius: 3px;
|
||||||
right: 5%;
|
right: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navmain [data-dropdown].active .nav-item::after, .navmain .nav-item:hover::after, .navmain .nav-item.active::after {
|
.navmain [data-dropdown].active .nav-item::after, .navmain .nav-item:hover::after, .navmain .nav-item.active::after, .navmain .activeM .nav-item::after {
|
||||||
|
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navmain [data-dropdown].active .nav-item::before, .navmain .nav-item:hover::before, .navmain .nav-item.active::before {
|
.navmain [data-dropdown].active .nav-item::before, .navmain .nav-item:hover::before, .navmain .nav-item.active::before, .navmain .activeM .nav-item::before {
|
||||||
|
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -352,7 +347,10 @@ body[page="1000"] .sub-item .nav-link, .sub-item .nav-link {
|
|||||||
width: var(--mNav-width);
|
width: var(--mNav-width);
|
||||||
box-shadow: 0 2px 3px rgba(96, 96, 96, .4);
|
box-shadow: 0 2px 3px rgba(96, 96, 96, .4);
|
||||||
transition: left .6s ease-out;
|
transition: left .6s ease-out;
|
||||||
padding: 35px 30px
|
}
|
||||||
|
|
||||||
|
.m-header .c_logo{
|
||||||
|
margin: 35px 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-header.show {
|
.m-header.show {
|
||||||
@ -365,19 +363,25 @@ body[page="1000"] .sub-item .nav-link, .sub-item .nav-link {
|
|||||||
top: 20px;
|
top: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
}
|
}
|
||||||
|
.m-header .nav-mainmenu [data-dropdown] .sub-item {
|
||||||
|
position: relative;
|
||||||
.m-header .navmain {
|
top: 0 !important;
|
||||||
margin: 20px 0;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-header .navmain .nav-item.active::after, .m-header .navmain .nav-item:hover::after, .m-header .navmain .nav-i.active .nav-item::after, .m-header .navmain .nav-i.activeM .nav-item::after {
|
.m-header .navmain {
|
||||||
|
height: calc(100% - 120px);
|
||||||
|
padding: 0 35px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-header .navmain .nav-item:hover::after, .m-header .navmain .nav-i.active .nav-item::after, .m-header .navmain .activeM .nav-item::after {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 50%;
|
right: 50%;
|
||||||
width: 50%
|
width: 50%
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-header .navmain .nav-item.active::before, .m-header .navmain .nav-item:hover::before, .m-header .navmain .nav-i.active .nav-item::before, .m-header .navmain .nav-i.activeM .nav-item::before {
|
.m-header .navmain .nav-item:hover::before, .m-header .navmain .nav-i.active .nav-item::before, .m-header .navmain .activeM .nav-item::before {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
@ -388,21 +392,53 @@ body[page="1000"] .sub-item .nav-link, .sub-item .nav-link {
|
|||||||
height: auto !important;
|
height: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.m-header .navmain a.active, .m-header .navmain .nav-item:hover {
|
||||||
|
color: var(--color-second)
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-header .navmain .sub-item .nav-link.active, .m-header .navmain .sub-item .nav-link:hover {
|
||||||
|
padding-left: 15px;
|
||||||
|
color: var(--color-primary);
|
||||||
|
background: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-header .navmain .sub-item .nav-link{
|
||||||
|
padding-left: 10px
|
||||||
|
}
|
||||||
|
|
||||||
.m-header .navmain a {
|
.m-header .navmain a {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
color:var(--text-color-dark)
|
||||||
|
|
||||||
.m-header .navmain .nav-item{
|
|
||||||
color:#000
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-header .navmain [data-dropdown] .sub-item {
|
.m-header .navmain [data-dropdown] .sub-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0 !important;
|
top: 0 !important;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.m-header .sub-nav-full {
|
||||||
|
width: 100% !important;
|
||||||
|
left: 0;
|
||||||
|
transform: none
|
||||||
|
}
|
||||||
|
.m-header .sub-nav-full .cfull{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.m-header .sub-nav-full .r-n-g > div
|
||||||
|
{
|
||||||
|
flex: 0 0 100%;
|
||||||
|
max-width: 100% !important
|
||||||
|
}
|
||||||
|
.m-header .sub-nav-full .nav-col {
|
||||||
|
margin:5px 10px
|
||||||
|
}
|
||||||
|
.m-header .sub-nav-full .title {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-bottom: 10px
|
||||||
|
}
|
||||||
|
|
||||||
.rSlider {
|
.rSlider {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@ -641,12 +677,16 @@ div[class*=sec]{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ico-menu span {
|
.ico-menu span {
|
||||||
background-color: var(--text-color-white) !important;
|
background-color: var(--text-color-dark);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
height: 2px !important;
|
height: 2px !important;
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body[page="1000"] .ico-menu span {
|
||||||
|
background-color: var(--text-color-white)
|
||||||
|
}
|
||||||
|
|
||||||
.ico-menu:hover div:first-child span, .ico-menu.active div:first-child span {
|
.ico-menu:hover div:first-child span, .ico-menu.active div:first-child span {
|
||||||
animation: down-rotate 0.6s ease-in-out forwards;
|
animation: down-rotate 0.6s ease-in-out forwards;
|
||||||
}
|
}
|
||||||
@ -1116,6 +1156,64 @@ div[class*=sec]{
|
|||||||
}
|
}
|
||||||
/***End Section**/
|
/***End Section**/
|
||||||
|
|
||||||
|
/**********Customer Section**********/
|
||||||
|
.customer-section{
|
||||||
|
padding: 80px 0 60px
|
||||||
|
}
|
||||||
|
.cust-reviews {
|
||||||
|
padding: 40px 35px
|
||||||
|
}
|
||||||
|
|
||||||
|
.cust-reviews .quote {
|
||||||
|
opacity: .3;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.cust-body{
|
||||||
|
display: flex;
|
||||||
|
margin-top: 30px;
|
||||||
|
color: white
|
||||||
|
}
|
||||||
|
|
||||||
|
.cust-image {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border: 2px solid white;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cust-image img {
|
||||||
|
width: 54px;
|
||||||
|
height: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.cust-reviews .star {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cust-reviews .star li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cust-reviews .star li i {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.cust-reviews p {
|
||||||
|
color: var(--text-color-white);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/************End Section***********************/
|
||||||
|
|
||||||
/***Our Service Section***/
|
/***Our Service Section***/
|
||||||
.our-section {
|
.our-section {
|
||||||
padding:0
|
padding:0
|
||||||
@ -1334,10 +1432,13 @@ div[class*=sec]{
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.blog-section .swiper-slide {
|
||||||
|
padding: 0 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.blog-section .grid{
|
.blog-section .grid{
|
||||||
margin:0;
|
margin: 0;
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
.blog-author {
|
.blog-author {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -1513,7 +1614,7 @@ div[class*=sec]{
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
background: rgb(86 83 96 / 0.32);
|
background: rgb(86 83 96 / 0.32);
|
||||||
width: 100vh;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-aoverlay {
|
.c-aoverlay {
|
||||||
@ -1725,3 +1826,139 @@ div[class*=sec]{
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*********End************/
|
/*********End************/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********Page Section***********/
|
||||||
|
.page-section .title{
|
||||||
|
padding: 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con-page-section {
|
||||||
|
margin-bottom:40px
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
video.bg-video {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
object-fit: cover;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con-masthead{
|
||||||
|
overflow:hidden;
|
||||||
|
margin-top: -40px;
|
||||||
|
height: 90vh
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead {
|
||||||
|
color:white;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead .masthead-content {
|
||||||
|
position: relative;
|
||||||
|
max-width: 40rem;
|
||||||
|
padding-top: 5rem;
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
}
|
||||||
|
.masthead-content h2{
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-size: 2.5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead-content p {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 2
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.masthead .masthead-content .input-group-newsletter input {
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead .masthead-content .input-group-newsletter button {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
padding: calc(1rem + 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.masthead {
|
||||||
|
padding: 60px 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 75vw;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead:before {
|
||||||
|
transform: skewX(-9deg);
|
||||||
|
transform-origin: top right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead .masthead-content {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.masthead {
|
||||||
|
width: 65vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons .btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
height: 4rem;
|
||||||
|
width: 4rem;
|
||||||
|
border-radius: 100rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.social-icons {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
right: 2.5rem;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
TWA-App/wwwroot/images/1000/customer-section/review-cust.jpg
Normal file
BIN
TWA-App/wwwroot/images/1000/customer-section/review-cust.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
BIN
TWA-App/wwwroot/images/wait-section/bg.mp4
Normal file
BIN
TWA-App/wwwroot/images/wait-section/bg.mp4
Normal file
Binary file not shown.
@ -20,15 +20,21 @@ function updateActiveSlideShow(swiperInstance) {
|
|||||||
window.L1000 = function () {
|
window.L1000 = function () {
|
||||||
const swiper = new Swiper('.mainSlider', {
|
const swiper = new Swiper('.mainSlider', {
|
||||||
loop: true,
|
loop: true,
|
||||||
effect: 'fade',
|
effect: 'creative',
|
||||||
fadeEffect: {
|
creativeEffect: {
|
||||||
crossFade: true, // ảnh cũ mờ dần, ảnh mới xuất hiện
|
limitProgress: 1,
|
||||||
|
prev: { translate: ['-40%', 0, -1], opacity: 0, shadow: true },
|
||||||
|
next: { translate: ['40%', 0, -1], opacity: 0, shadow: true }
|
||||||
},
|
},
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 5000, // 5s
|
delay: 5000, // 5s
|
||||||
disableOnInteraction: false, // không dừng khi hover hay click
|
disableOnInteraction: false, // không dừng khi hover hay click
|
||||||
},
|
},
|
||||||
loop: true, // bật loop để chạy liên tục
|
loop: true, // bật loop để chạy liên tục
|
||||||
|
allowTouchMove: true,
|
||||||
|
simulateTouch: true,
|
||||||
|
followFinger: true,
|
||||||
|
threshold: 0,
|
||||||
speed: 1000,
|
speed: 1000,
|
||||||
navigation: {
|
navigation: {
|
||||||
nextEl: ".swiper-button-next",
|
nextEl: ".swiper-button-next",
|
||||||
@ -114,7 +120,7 @@ window.L1000 = function () {
|
|||||||
});
|
});
|
||||||
const swiper2 = new Swiper('.ourBlogSwiper', {
|
const swiper2 = new Swiper('.ourBlogSwiper', {
|
||||||
slidesPerView: 1,
|
slidesPerView: 1,
|
||||||
spaceBetween: 40,
|
spaceBetween: 0,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 2000, // 5s
|
delay: 2000, // 5s
|
||||||
disableOnInteraction: true,
|
disableOnInteraction: true,
|
||||||
@ -134,7 +140,26 @@ window.L1000 = function () {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const swiper3 = new Swiper(".custSwiper", {
|
||||||
|
slidesPerView: 1,
|
||||||
|
spaceBetween: 40,
|
||||||
|
autoplay: {
|
||||||
|
delay: 2000, // 5s
|
||||||
|
disableOnInteraction: true,
|
||||||
|
},
|
||||||
|
loop: true, // bật loop để chạy liên tục
|
||||||
|
speed: 1000,
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next",
|
||||||
|
prevEl: ".swiper-button-prev",
|
||||||
|
},
|
||||||
|
loopedSlides: 5, // số slide duplicate
|
||||||
|
breakpoints: {
|
||||||
|
992: { slidesPerView: 3 }, // màn hình ≥1200px
|
||||||
|
576: { slidesPerView: 2 }, // ≥768px=
|
||||||
|
0: { slidesPerView: 1 } // <576px
|
||||||
|
},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
function animateCount(el) {
|
function animateCount(el) {
|
||||||
const rect = el.getBoundingClientRect();
|
const rect = el.getBoundingClientRect();
|
||||||
|
|||||||
@ -1,5 +1,61 @@
|
|||||||
window.L2000 = function () {
|
window.runParalax = function () {
|
||||||
|
|
||||||
|
const parallaxEls = document.querySelectorAll('.con-page-section .parallax');
|
||||||
|
let ticking = false;
|
||||||
|
parallaxEls.forEach(el => {
|
||||||
|
const parent = el.closest(".con-parallax");
|
||||||
|
if (parent) {
|
||||||
|
parent.style.height = parent.querySelector("[data-content]").offsetHeight + "px";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.app.on("App_Scrolling", (t) => {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
updateParallax(t, parallaxEls);
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateParallax(t, parallaxEls) {
|
||||||
|
parallaxEls.forEach(el => {
|
||||||
|
const section = el.closest('.con-parallax');
|
||||||
|
if (!section) return;
|
||||||
|
|
||||||
|
const rect = section.getBoundingClientRect();
|
||||||
|
const sectionHeight = section.offsetHeight;
|
||||||
|
|
||||||
|
// Chỉ xử lý khi section trong khung nhìn
|
||||||
|
const inView = rect.bottom > 0 && rect.top < window.innerHeight;
|
||||||
|
if (!inView) return;
|
||||||
|
|
||||||
|
// Set height parent 1 lần
|
||||||
|
const content = section.querySelector('[data-content]');
|
||||||
|
if (content && !section.dataset.heightSet) {
|
||||||
|
section.style.height = content.offsetHeight + 'px';
|
||||||
|
section.dataset.heightSet = 'true'; // đánh dấu đã set height
|
||||||
|
}
|
||||||
|
|
||||||
|
const img = el.querySelector('.bg-img');
|
||||||
|
if (!img) return;
|
||||||
|
|
||||||
|
const imgHeight = img.offsetHeight;
|
||||||
|
const depth = parseFloat(el.dataset.depth ?? 1); // 1 = chạy hết, <1 = chạy ít hơn
|
||||||
|
|
||||||
|
// progress: 0 khi section top chạm viewport top, 1 khi section bottom chạm viewport bottom
|
||||||
|
const progress = (window.innerHeight - rect.top) / (window.innerHeight + sectionHeight);
|
||||||
|
const clamped = Math.min(1, Math.max(0, progress));
|
||||||
|
|
||||||
|
// scrollable = toàn bộ quãng đường ảnh có thể chạy
|
||||||
|
const scrollable = imgHeight - sectionHeight;
|
||||||
|
|
||||||
|
// offset Y
|
||||||
|
const offsetY = -clamped * scrollable * depth;
|
||||||
|
img.style.transform = `translate(-50%, ${offsetY}px)`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
window.AScript.set("2000", true);
|
window.AScript.set("2000", true);
|
||||||
133
TWA-App/wwwroot/js/js-page/2001.js
Normal file
133
TWA-App/wwwroot/js/js-page/2001.js
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
window.L2001 = function () {
|
||||||
|
if (window["runParalax"] !== undefined) {
|
||||||
|
window["runParalax"]();
|
||||||
|
}
|
||||||
|
const swiper2 = new Swiper('.ourBlogSwiper1', {
|
||||||
|
slidesPerView: 1,
|
||||||
|
spaceBetween: 0,
|
||||||
|
autoplay: {
|
||||||
|
delay: 2000, // 5s
|
||||||
|
disableOnInteraction: true,
|
||||||
|
},
|
||||||
|
loop: true, // bật loop để chạy liên tục
|
||||||
|
speed: 1000,
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next",
|
||||||
|
prevEl: ".swiper-button-prev",
|
||||||
|
},
|
||||||
|
loopedSlides: 5, // số slide duplicate
|
||||||
|
breakpoints: {
|
||||||
|
1400: { slidesPerView: 4 },
|
||||||
|
992: { slidesPerView: 3 }, // màn hình ≥1200px
|
||||||
|
576: { slidesPerView: 2 }, // ≥768px=
|
||||||
|
0: { slidesPerView: 1 } // <576px
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const parallaxEls = document.querySelectorAll('.con-perf-section .parallax');
|
||||||
|
let ticking = false;
|
||||||
|
parallaxEls.forEach(el => {
|
||||||
|
const parent = el.closest(".con-parallax");
|
||||||
|
if (parent) {
|
||||||
|
parent.style.height = parent.querySelector("[data-content]").offsetHeight + "px";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const countNum = document.querySelectorAll('[CountNumber]');
|
||||||
|
let tickingC = false;
|
||||||
|
window.app.on("App_Scrolling", (t) => {
|
||||||
|
if (!ticking) {
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
updateParallax(t, parallaxEls);
|
||||||
|
ticking = false;
|
||||||
|
});
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
if (!tickingC) {
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
countNum.forEach((el) => {
|
||||||
|
animateCount(el);
|
||||||
|
})
|
||||||
|
tickingC = false;
|
||||||
|
});
|
||||||
|
tickingC = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
function animateCount(el) {
|
||||||
|
const rect = el.getBoundingClientRect();
|
||||||
|
const inView = rect.bottom > 0 && rect.top < window.innerHeight;
|
||||||
|
if (el.hasAttribute("render")) {
|
||||||
|
if (!inView) {
|
||||||
|
el.removeAttribute("render");
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (inView) {
|
||||||
|
el.setAttribute("render", "");
|
||||||
|
const min = parseInt(el.getAttribute("num-min") ?? 0);
|
||||||
|
const max = parseInt(el.getAttribute("num-max") ?? 1);
|
||||||
|
const prefix = el.getAttribute("prefix") ?? "";
|
||||||
|
const duration = parseInt(el.getAttribute("duration") ?? 1000); // ms
|
||||||
|
const interval = 10; // ms mỗi tick
|
||||||
|
|
||||||
|
const steps = duration / interval;
|
||||||
|
const stepValue = Math.ceil((max - min) / steps);
|
||||||
|
|
||||||
|
let current = min;
|
||||||
|
let tickCount = 0;
|
||||||
|
|
||||||
|
function tick() {
|
||||||
|
current = Math.min(min + stepValue * tickCount, max);
|
||||||
|
el.textContent = prefix + current.toLocaleString("en-US");
|
||||||
|
tickCount++;
|
||||||
|
|
||||||
|
if (tickCount <= steps) {
|
||||||
|
window.requestTimeout(tick, interval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tick(); // khởi chạy
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateParallax(t, parallaxEls) {
|
||||||
|
parallaxEls.forEach(el => {
|
||||||
|
const section = el.closest('.con-parallax');
|
||||||
|
if (!section) return;
|
||||||
|
|
||||||
|
const rect = section.getBoundingClientRect();
|
||||||
|
const sectionHeight = section.offsetHeight;
|
||||||
|
|
||||||
|
// Chỉ xử lý khi section trong khung nhìn
|
||||||
|
const inView = rect.bottom > 0 && rect.top < window.innerHeight;
|
||||||
|
if (!inView) return;
|
||||||
|
|
||||||
|
// Set height parent 1 lần
|
||||||
|
const content = section.querySelector('[data-content]');
|
||||||
|
if (content && !section.dataset.heightSet) {
|
||||||
|
section.style.height = content.offsetHeight + 'px';
|
||||||
|
section.dataset.heightSet = 'true'; // đánh dấu đã set height
|
||||||
|
}
|
||||||
|
|
||||||
|
const img = el.querySelector('.bg-img');
|
||||||
|
if (!img) return;
|
||||||
|
|
||||||
|
const imgHeight = img.offsetHeight;
|
||||||
|
const depth = parseFloat(el.dataset.depth ?? 1); // 1 = chạy hết, <1 = chạy ít hơn
|
||||||
|
|
||||||
|
// progress: 0 khi section top chạm viewport top, 1 khi section bottom chạm viewport bottom
|
||||||
|
const progress = (window.innerHeight - rect.top) / (window.innerHeight + sectionHeight);
|
||||||
|
const clamped = Math.min(1, Math.max(0, progress));
|
||||||
|
|
||||||
|
// scrollable = toàn bộ quãng đường ảnh có thể chạy
|
||||||
|
const scrollable = imgHeight - sectionHeight;
|
||||||
|
|
||||||
|
// offset Y
|
||||||
|
const offsetY = -clamped * scrollable * depth;
|
||||||
|
img.style.transform = `translate(-50%, ${offsetY}px)`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.AScript.set("2001", true);
|
||||||
7
TWA-App/wwwroot/js/js-page/2002.js
Normal file
7
TWA-App/wwwroot/js/js-page/2002.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
window.L2002 = function () {
|
||||||
|
if (window["runParalax"] !== undefined) {
|
||||||
|
window["runParalax"]();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.AScript.set("2002", true);
|
||||||
7
TWA-App/wwwroot/js/js-page/2003.js
Normal file
7
TWA-App/wwwroot/js/js-page/2003.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
window.L2002 = function () {
|
||||||
|
if (window["runParalax"] !== undefined) {
|
||||||
|
window["runParalax"]();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.AScript.set("2003", true);
|
||||||
7
TWA-App/wwwroot/js/js-page/2004.js
Normal file
7
TWA-App/wwwroot/js/js-page/2004.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
window.L2002 = function () {
|
||||||
|
if (window["runParalax"] !== undefined) {
|
||||||
|
window["runParalax"]();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.AScript.set("2004", true);
|
||||||
7
TWA-App/wwwroot/js/js-page/2005.js
Normal file
7
TWA-App/wwwroot/js/js-page/2005.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
window.L2002 = function () {
|
||||||
|
if (window["runParalax"] !== undefined) {
|
||||||
|
window["runParalax"]();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.AScript.set("2005", true);
|
||||||
@ -21,7 +21,7 @@ class AsyncLayout extends ALayout {
|
|||||||
<i class="atg atg-x"></i>
|
<i class="atg atg-x"></i>
|
||||||
</a>
|
</a>
|
||||||
</a>
|
</a>
|
||||||
<div class="navmain d-f f-c">
|
<div class="navmain d-f f-c scroll-header" data-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>`;
|
</div>`;
|
||||||
@ -102,6 +102,15 @@ class AsyncLayout extends ALayout {
|
|||||||
this.listAObject.add(a1);
|
this.listAObject.add(a1);
|
||||||
var a2 = new AMenu("#fHeader .navmain", null, null);
|
var a2 = new AMenu("#fHeader .navmain", null, null);
|
||||||
this.listAObject.add(a2);
|
this.listAObject.add(a2);
|
||||||
|
var sOption = {
|
||||||
|
damping: (window.getOS() == "Android") ? .06 : .04,
|
||||||
|
thumbMinSize: 25,
|
||||||
|
renderByPixel: true,
|
||||||
|
alwaysShowTracks: true,
|
||||||
|
continuousScrolling: true
|
||||||
|
};
|
||||||
|
this.scroll = window.Scrollbar.init(document.querySelector('.m-header .scroll-header[data-scrollbar]'), sOption);
|
||||||
|
|
||||||
const idE1 = window.app.on("redirect_page", (e) => {
|
const idE1 = window.app.on("redirect_page", (e) => {
|
||||||
a1.changeActive();
|
a1.changeActive();
|
||||||
a2.changeActive();
|
a2.changeActive();
|
||||||
|
|||||||
@ -9,6 +9,7 @@ export default class Dropdown extends window.AObject {
|
|||||||
if (window.dropdown == null) {
|
if (window.dropdown == null) {
|
||||||
this.initGlobalVar();
|
this.initGlobalVar();
|
||||||
}
|
}
|
||||||
|
this.scrollTrack = false;
|
||||||
}
|
}
|
||||||
initGlobalVar() {
|
initGlobalVar() {
|
||||||
var f = function (ev) {
|
var f = function (ev) {
|
||||||
@ -42,7 +43,7 @@ export default class Dropdown extends window.AObject {
|
|||||||
if (window.isValidPointerClick(ev)) return;
|
if (window.isValidPointerClick(ev)) return;
|
||||||
this.onClick.call(this, ev);
|
this.onClick.call(this, ev);
|
||||||
}.bind(this);
|
}.bind(this);
|
||||||
this.addSystemEvent(this.eventName, e, f, p);
|
this.addSystemEvent(this.eventName, e, f, p, true);
|
||||||
}
|
}
|
||||||
document_onClick(e) {
|
document_onClick(e) {
|
||||||
this.checkRelease(e);
|
this.checkRelease(e);
|
||||||
@ -51,6 +52,11 @@ export default class Dropdown extends window.AObject {
|
|||||||
if (this.isLock) {
|
if (this.isLock) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (this.scrollTrack) {
|
||||||
|
e.stopImmediatePropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
var t1 = e.currentTarget;
|
var t1 = e.currentTarget;
|
||||||
var p = t1.closest('[data-dropdown]');
|
var p = t1.closest('[data-dropdown]');
|
||||||
var p1 = e.target.closest(".noopen");
|
var p1 = e.target.closest(".noopen");
|
||||||
|
|||||||
@ -45,17 +45,17 @@ export default class AMenu extends window.AObject {
|
|||||||
this.initDropDown();
|
this.initDropDown();
|
||||||
this.initNav(this.navD);
|
this.initNav(this.navD);
|
||||||
if (this.isMDiffD) {
|
if (this.isMDiffD) {
|
||||||
this.initNav(this.navM);
|
this.initNav(this.navM, "M");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initNav(ele) {
|
initNav(ele, type = "D") {
|
||||||
let arr = ele.querySelectorAll(".nav-i.has-sub .nav-link, .nav-mainmenu > .nav-i:not(.has-sub) a");
|
let arr = ele.querySelectorAll(".nav-i.has-sub .nav-link, .nav-mainmenu > .nav-i:not(.has-sub) a");
|
||||||
Array.from(arr).forEach(el => {
|
Array.from(arr).forEach(el => {
|
||||||
var f = function (evt) {
|
var f = function (evt) {
|
||||||
if (window.isValidPointerClick(evt)) return;
|
if (window.isValidPointerClick(evt)) return;
|
||||||
|
|
||||||
this.addEventClick.call(this, evt);
|
this.addEventClick.call(this, evt, type);
|
||||||
}.bind(this);
|
}.bind(this);
|
||||||
el.addEventListener(this.eventName, f);
|
el.addEventListener(this.eventName, f);
|
||||||
var f1 = function (evt) {
|
var f1 = function (evt) {
|
||||||
@ -124,8 +124,14 @@ export default class AMenu extends window.AObject {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
addEventClick(e) {
|
addEventClick(e, t) {
|
||||||
window.app.initNavApp(e.currentTarget.getAttribute("href"), e.currentTarget.hasAttribute("isflexpage"));
|
window.app.initNavApp(e.currentTarget.getAttribute("href"), e.currentTarget.hasAttribute("isflexpage"));
|
||||||
|
if (t == "M") {
|
||||||
|
this.overlay.removeOverlay();
|
||||||
|
this.listIco.forEach(el => {
|
||||||
|
el.classList.remove("active");
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
closeExpandMenu() {
|
closeExpandMenu() {
|
||||||
Array.from(this.navM.querySelectorAll(".nav-i.has-sub")).forEach(el => {
|
Array.from(this.navM.querySelectorAll(".nav-i.has-sub")).forEach(el => {
|
||||||
|
|||||||
@ -415,13 +415,13 @@ window.AObject = class {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
addSystemEvent(eventName, element, callback, parent = null) {
|
addSystemEvent(eventName, element, callback, parent = null, capture = false) {
|
||||||
if (!this.systemEvents.has(element)) {
|
if (!this.systemEvents.has(element)) {
|
||||||
this.systemEvents.set(element, new Map());
|
this.systemEvents.set(element, new Map());
|
||||||
}
|
}
|
||||||
const eventMap = this.systemEvents.get(element);
|
const eventMap = this.systemEvents.get(element);
|
||||||
eventMap.set(eventName, { callback, parent });
|
eventMap.set(eventName, { callback, parent });
|
||||||
element.addEventListener(eventName, callback, false);
|
element.addEventListener(eventName, callback, capture);
|
||||||
if (parent) {
|
if (parent) {
|
||||||
if (!this.parentEventMap.has(parent)) {
|
if (!this.parentEventMap.has(parent)) {
|
||||||
this.parentEventMap.set(parent, new Set());
|
this.parentEventMap.set(parent, new Set());
|
||||||
@ -622,7 +622,7 @@ class AApp extends window.AObject {
|
|||||||
} else {
|
} else {
|
||||||
|
|
||||||
var sOption = {
|
var sOption = {
|
||||||
damping: (window.getOS() == "Android") ? .1 : .04,
|
damping: (window.getOS() == "Android") ? .08 : .04,
|
||||||
thumbMinSize: 25,
|
thumbMinSize: 25,
|
||||||
renderByPixel: true,
|
renderByPixel: true,
|
||||||
alwaysShowTracks: true,
|
alwaysShowTracks: true,
|
||||||
@ -1007,36 +1007,43 @@ class CacheStorage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_initDB() {
|
_initDB() {
|
||||||
|
|
||||||
|
const openDB = () => {
|
||||||
|
console.log("Renew Database");
|
||||||
const req = indexedDB.open(`${this.prefix}_db`, 1);
|
const req = indexedDB.open(`${this.prefix}_db`, 1);
|
||||||
req.onupgradeneeded = (e) => {
|
req.onupgradeneeded = (e) => {
|
||||||
let store;
|
const db = e.target.result;
|
||||||
if (!e.target.result.objectStoreNames.contains("cache")) {
|
if (!db.objectStoreNames.contains("cache")) {
|
||||||
store = e.target.result.createObjectStore("cache", { keyPath: "key" });
|
db.createObjectStore("cache", { keyPath: "key" });
|
||||||
}
|
}
|
||||||
if (!e.target.result.objectStoreNames.contains("fpCache")) {
|
if (!db.objectStoreNames.contains("fpCache")) {
|
||||||
e.target.result.createObjectStore("fpCache", { keyPath: "key" });
|
db.createObjectStore("fpCache", { keyPath: "key" });
|
||||||
}
|
}
|
||||||
try {
|
|
||||||
store.add({ id: 1, value: "test data" });
|
|
||||||
store.delete("1");
|
|
||||||
} catch (e) {
|
|
||||||
this.ready = true;
|
|
||||||
this.db = null;
|
|
||||||
this.useIndexedDB = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
};
|
||||||
req.onsuccess = (event) => {
|
req.onsuccess = () => {
|
||||||
this.db = req.result;
|
this.db = req.result;
|
||||||
this.ready = true;
|
this.ready = true;
|
||||||
this._flushQueue();
|
this._flushQueue();
|
||||||
};
|
};
|
||||||
req.onerror = () => {
|
req.onerror = () => {
|
||||||
console.warn("IndexedDB failed, fallback to localStorage");
|
console.warn("IndexedDB open failed, fallback to localStorage");
|
||||||
this.ready = true;
|
|
||||||
this.db = null;
|
this.db = null;
|
||||||
|
this.ready = true;
|
||||||
this._flushQueue();
|
this._flushQueue();
|
||||||
};
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const del = indexedDB.deleteDatabase(`${this.prefix}_db`);
|
||||||
|
del.onsuccess = () => openDB();
|
||||||
|
del.onerror = () => {
|
||||||
|
console.warn("deleteDatabase failed, continue opening fresh");
|
||||||
|
openDB();
|
||||||
|
};
|
||||||
|
del.onblocked = () => {
|
||||||
|
console.warn("deleteDatabase blocked (tab khác đang giữ kết nối)");
|
||||||
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
_flushQueue() {
|
_flushQueue() {
|
||||||
while (this.queue.length) {
|
while (this.queue.length) {
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
// Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
|
|
||||||
// for details on configuring this project to bundle and minify static web assets.
|
|
||||||
|
|
||||||
// Write your JavaScript code.
|
|
||||||
Reference in New Issue
Block a user