update 30/08

This commit is contained in:
2025-08-30 09:11:05 +07:00
parent f272a901b2
commit 732f41595e
23 changed files with 834 additions and 164 deletions

View File

@ -1,164 +1,324 @@
<div class="cfull"> <div class="cfull">
<div class="rSlider"> <div class="rSlider">
<div class="swiper mainSlider"> <div class="swiper mainSlider">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<div class="background" style="background-image: url(@Url.AbsoluteContent("~/images/banner/low-angle-view-cloudscape-against-sky-sunset.jpg"));"> <div class="background" style="background-image: url(@Url.AbsoluteContent("~/images/banner/low-angle-view-cloudscape-against-sky-sunset.jpg"));">
</div> </div>
<div class="con_slider"> <div class="con_slider">
<div class="h-100 d-f a-i-center"> <div class="h-100 d-f a-i-center">
<div class="cfull"> <div class="cfull">
<div class="r-n-g d-f f-c a-i-center banner-content"> <div class="r d-f f-c a-i-center banner-content">
<h1>Air Freight</h1> <h1>Air Freight</h1>
<div class="sec-header"> <div class="sec-header">
<h2>Global air, local care</h2> <h2>Global air, local care</h2>
</div> </div>
<span class="desc"> <span class="desc">
Your cargo, delivered anywhere in the world with confidence, care, and the reliability you can trust Your cargo, delivered anywhere in the world with confidence, care, and the reliability you can trust
</span> </span>
<div class="d-f mt-5"> <div class="d-f mt-5">
<div class="sec-1"> <div class="sec-1">
<button class="btn btn-second">See Details</button> <button class="btn btn-second">See Details</button>
</div> </div>
<div class="sec-2 ml-2"> <div class="sec-2 ml-2">
<button class="btn btn-primary">Quote for Air Freight</button> <button class="btn btn-primary">Quote for Air Freight</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<div class="background"> <div class="background">
<img src="/images/banner/b3.jpg"> <img src="/images/banner/b3.jpg">
</div> </div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<div class="background"> <div class="background">
<img src="/images/banner/b2.jpg"> <img src="/images/banner/b2.jpg">
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-button-next"></div> <div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div> <div class="swiper-button-prev"></div>
</div> </div>
</div> </div>
</div> </div>
<section> <section>
<div class="con"> <div class="con">
<div class="r"> <div class="r-n-g">
<div class="con-feature r-n-g"> <div class="r con-feature j-c-center">
<div class="c-12 c-s-6 c-m-4"> <div class="c-12 c-m-6 c-x-4">
<div class="flex-feature d-f f-c a-i-center"> <div class="flex-feature d-f f-c a-i-center">
<i class="atg a-8x atg-trusted"></i> <i class="atg a-8x atg-trusted"></i>
<h3> <h3>
Trusted Air Partner Trusted Air Partner
</h3> </h3>
<p>Safe, reliable air cargo booking and shipping, ensuring secure, timely, and cost-effective delivery</p> <p>Safe, reliable air cargo booking and shipping, ensuring secure, timely, and cost-effective delivery</p>
</div> </div>
</div> </div>
<div class="c-12 c-s-6 c-m-4"> <div class="c-12 c-m-6 c-x-4">
<div class="flex-feature d-f f-c a-i-center"> <div class="flex-feature d-f f-c a-i-center">
<i class="atg a-8x atg-air-cargo"></i> <i class="atg a-8x atg-air-cargo"></i>
<h3> <h3>
Professional Booking & Live Tracking Professional Booking & Live Tracking
</h3> </h3>
<p>Dedicated teams provide efficient cargo booking and shipping with real-time shipment tracking</p> <p>Dedicated teams provide efficient cargo booking and shipping with real-time shipment tracking</p>
</div> </div>
</div> </div>
<div class="c-12 c-s-6 c-m-4"> <div class="c-12 c-m-6 c-x-4">
<div class="flex-feature d-f f-c a-i-center"> <div class="flex-feature d-f f-c a-i-center">
<i class="atg a-8x atg-support"></i> <i class="atg a-8x atg-support"></i>
<h3>Dedicated Customer Care</h3> <h3>Dedicated Customer Care</h3>
<p>Committed to transparent, devoted service and full support for all customer needs in cargo and passenger transportation</p> <p>Committed to transparent, devoted service and full support for all customer needs in cargo and passenger transportation</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="con section about-section">
<div class="r a-i-center">
<div class="c-m-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-m-12 c-l-6 pl-5 pr-2">
<span class="sub-title">About Our Company</span>
<h2 class="title mb-3">Trusted Logistic Service Provider</h2>
<ul class="order-list primary-color mrb-40">
<li>revolutionary catalysts for chang</li>
<li>catalysts for chang the Seamlessly</li>
<li>business applications through</li>
<li>procedures whereas processes</li>
</ul>
<p class="mrb-40">Distinctively exploit optimal alignments for intuitive business applications through revolutionary catalysts for chang the Seamlessly optimal optimal alignments for intuitive.</p>
<div class="d-inline d-md-flex align-items-center mt-40">
<a href="?page_id=120" class="animate-btn mrr-50 mrb-sm-30">Read More</a>
<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>
<!-- Hero Section --> <!-- Hero Section -->
<section class="pt-5 pb-5"> <section class="pt-5 pb-5">
<div class="con"> <div class="con">
<div class="r j-c-center"> <div class="r j-c-center">
<div class="c-12 c-m-10 text-center"> <div class="c-12 c-m-10 text-center">
<h1 class="mb-3">Welcome to Aviationaly</h1> <h1 class="mb-3">Welcome to Aviationaly</h1>
<p class="mb-4">Start your aviation journey with professional instructors and top-notch facilities.</p> <p class="mb-4">Start your aviation journey with professional instructors and top-notch facilities.</p>
<button class="p-2 bg-white">Get Started</button> <button class="p-2 bg-white">Get Started</button>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Features Section --> <!-- Features Section -->
<!-- Courses Section --> <!-- Courses Section -->
<section class="pt-5 pb-5"> <section class="pt-5 pb-5">
<div class="con"> <div class="con">
<div class="r j-c-center"> <div class="r j-c-center">
<div class="c-12 text-center"> <div class="c-12 text-center">
<h2 class="mb-3">Our Programs</h2> <h2 class="mb-3">Our Programs</h2>
</div> </div>
<div class="r gap-3"> <div class="r gap-3">
<div class="c-12 c-s-6 c-m-4 text-center"> <div class="c-12 c-s-6 c-m-4 text-center">
<h4 class="mb-1">Private Pilot License</h4> <h4 class="mb-1">Private Pilot License</h4>
<p>Learn the fundamentals of flying and become a licensed pilot.</p> <p>Learn the fundamentals of flying and become a licensed pilot.</p>
</div> </div>
<div class="c-12 c-s-6 c-m-4 text-center"> <div class="c-12 c-s-6 c-m-4 text-center">
<h4 class="mb-1">Commercial Pilot License</h4> <h4 class="mb-1">Commercial Pilot License</h4>
<p>Advance your skills and prepare for a professional aviation career.</p> <p>Advance your skills and prepare for a professional aviation career.</p>
</div> </div>
<div class="c-12 c-s-6 c-m-4 text-center"> <div class="c-12 c-s-6 c-m-4 text-center">
<h4 class="mb-1">Flight Instructor Course</h4> <h4 class="mb-1">Flight Instructor Course</h4>
<p>Teach others how to fly and build flight hours simultaneously.</p> <p>Teach others how to fly and build flight hours simultaneously.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Testimonials Section --> <!-- Testimonials Section -->
<section class="pt-5 pb-5 bg-white"> <section class="pt-5 pb-5 bg-white">
<div class="con"> <div class="con">
<div class="r j-c-center"> <div class="r j-c-center">
<div class="c-12 text-center"> <div class="c-12 text-center">
<h2 class="mb-3">What Students Say</h2> <h2 class="mb-3">What Students Say</h2>
</div> </div>
<div class="r gap-3"> <div class="r gap-3">
<div class="c-12 c-s-6 c-m-6"> <div class="c-12 c-s-6 c-m-6">
<p class="mb-1">"Great instructors and hands-on training. I got my PPL in no time!"</p> <p class="mb-1">"Great instructors and hands-on training. I got my PPL in no time!"</p>
<strong>- Alex T.</strong> <strong>- Alex T.</strong>
</div> </div>
<div class="c-12 c-s-6 c-m-6"> <div class="c-12 c-s-6 c-m-6">
<p class="mb-1">"Modern facilities and friendly staff. Highly recommended!"</p> <p class="mb-1">"Modern facilities and friendly staff. Highly recommended!"</p>
<strong>- Maria L.</strong> <strong>- Maria L.</strong>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Contact Section --> <section class="con-parallax">
<section class="pt-5 pb-5"> <div class="parallax" data-dept="0.3" data-src="https://wp.storebuild.shop/portx/wp-content/uploads/2023/07/cta1-bg.jpg"></div>
<div class="con"> <div class="con section section-break" data-content>
<div class="r j-c-center"> <div class="r">
<div class="c-12 c-s-10 c-m-6"> <div class="c-12">
<h2 class="mb-3 text-center">Contact Us</h2> <div class="d-f f-c a-i-center">
<form class="d-f f-c gap-2"> <div class="sub-title">
<input type="text" placeholder="Name" class="p-2"> Get in touch with us anytime
<input type="email" placeholder="Email" class="p-2"> </div>
<textarea rows="4" placeholder="Message" class="p-2"></textarea> <h2 class="title">Looking for the best <br> logistics transport service?</h2>
<button class="p-2 bg-white">Send Message</button> <button class="btn btn-primary mt-4">Read More</button>
</form> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Footer --> <section class="con 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">
<div class="c-12 c-m-6 c-l-4">
<div class="grid">
<a class="grid-image">
<img loading="lazy" decoding="async" width="350" height="227" 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 class="w-100" alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;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="c-12 c-m-6 c-l-4">
<div class="grid">
<a class="grid-image">
<img loading="lazy" decoding="async" width="350" height="227" 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 class="w-100" alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;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="c-12 c-m-6 c-l-4">
<div class="grid">
<a class="grid-image">
<img loading="lazy" decoding="async" width="350" height="227" 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 class="w-100" alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;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>
</section>
<div class="cfull">
<div class="fl-row-content fl-row-full-width fl-node-content">
<div class="fl-col-group fl-node-5a654bcfda4a1" data-node="5a654bcfda4a1">
<div class="fl-col fl-node-5a654bcfda595 fl-col-bg-color" data-node="5a654bcfda595">
<div class="fl-col-content fl-node-content vamtam-show-bg-image">
<div class="fl-module fl-module-vamtam-map fl-node-5a654c23c25fd" data-node="5a654c23c25fd">
<div class="fl-module-content fl-node-content">
<div class="fl-map">
<iframe src="https://maps.google.com/maps?q=New+York+-+1060%2C+Str.+First+Avenue+1&amp;iwloc=near&amp;output=embed" height="605" frameborder="0" style="border:0;width:100%" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@section jsLib { @section jsLib {
<script src="@Url.AbsoluteContent("~/js/ext_libs/swiper-bundle.min.js")" js-lib></script> <script src="@Url.AbsoluteContent("~/js/ext_libs/swiper-bundle.min.js")" js-lib></script>
<script type="module" src="@Url.AbsoluteContent("~/js/js-page/1000.js")" js-lib></script> <script type="module" src="@Url.AbsoluteContent("~/js/js-page/1000.js")" js-lib></script>
} }

View File

@ -1,5 +1,5 @@
<div class="c-footer con"> <div class="c-footer con">
<div class="r"> <div class="r j-c-between">
<div class="c-l-4"> <div class="c-l-4">
<div class="nav-col d-f f-c"> <div class="nav-col d-f f-c">
<div class="c_logo"> <div class="c_logo">
@ -10,6 +10,36 @@
</span> </span>
</div> </div>
</div> </div>
<div class="c-l-1"></div>
<div class="c-l-3">
<div class="d-f">
<div class=""><img class="w-100" src="~/images/layout/element-support.svg" /></div>
<div class="d-f f-c ml-2">
<h3>Call Center</h3>
<p>
24/7 Support<br>
<a href="tel:+ (84) 28 667 34 666" target="_blank" rel="noopener">(84) 28 667 34 666</a>
</p>
</div>
</div>
</div>
<div class="c-l-4">
<div class="d-f">
<img src="~/images/layout/element-map.svg" />
<div class="d-f f-c ml-2">
<h3>Location</h3>
<p>
3rd Floor, Hai Au Building
</p>
<p>
39B
Truong Son Street, Tan Son Nhat Ward, Ho Chi Minh City, Vietnam
</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="c-footer-1 con"> <div class="c-footer-1 con">
@ -37,23 +67,35 @@
<a href="#" class="nav-link">Contacts</a> <a href="#" class="nav-link">Contacts</a>
</div> </div>
</div> </div>
<div class="c-12 c-m-6 c-l-4 c-x-4"> <div class="c-12 c-m-6 c-l-4 c-x-5">
<div class="nav-col d-f f-c"> <div class="nav-col d-f f-c c-newsletter">
<h3 class="title"> <h3 class="title">
Newsletter Newsletter
</h3> </h3>
<div class="newsletter"> <div class="newsletter">
<input type="text" /> <input type="text" placeholder="Your email address"/>
<button class="btn">Subscribe</button> <button class="btn">Subscribe</button>
</div> </div>
<span class="desc">Get aviation insights, market news, and expert updates delivered to your inbox.</span> <span class="desc">Get aviation insights, market news, and expert updates delivered to your inbox.</span>
<div class="d-f c-social f-wrap">
<a href="javascript:void(0)"><i class="atg atg-circle-zalo"></i></a>
<a href="javascript:void(0)"><i class="atg atg-circle-linked"></i></a>
<a href="javascript:void(0)"><i class="atg atg-circle-fb"></i></a>
<a href="javascript:void(0)"><i class="atg atg-circle-yt"></i></a>
<a href="javascript:void(0)"><i class="atg atg-circle-tiktok"></i></a>
</div>
</div> </div>
</div> </div>
<div class="c-12 c-m-6 c-l-3 c-x-4"> <div class="c-12 c-m-6 c-l-3 c-x-3">
<div class="nav-col d-f f-c"> <div class="nav-col d-f f-c">
<h3 class="title">Our Gallery</h3> <h3 class="title">Our Gallery</h3>
<div class="galleríes"> <div class="r-n-g galleries">
<div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g1.jpg" /></a></div>
<div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g2.jpg" /></a></div>
<div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g3.jpg" /></a></div>
<div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g4.jpg" /></a></div>
<div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g5.jpg" /></a></div>
<div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g6.jpg" /></a></div>
</div> </div>
</div> </div>
</div> </div>
@ -61,6 +103,6 @@
</div> </div>
<div class="c-footer-2 con"> <div class="c-footer-2 con">
<div class="r d-f j-c-center"> <div class="r d-f j-c-center">
<span class="m-0">Copyright &copy; 2025 TWA | All rights reserved</span> <span class="m-0">Copyright &copy; 2025 <b>TWA</b> | All rights reserved</span>
</div> </div>
</div> </div>

View File

@ -11,7 +11,7 @@
<div class="nav-i"><a href="#" class="nav-link"><span>Cambodia</span></a></div> <div class="nav-i"><a href="#" class="nav-link"><span>Cambodia</span></a></div>
</div> </div>
</div> </div>
<a class="btn btn-signin ml-4">Sign in</a> <a class="btn btn-signin ml-4 d-n d-s-b">Sign in</a>
</div> </div>
</div> </div>

View File

@ -319,4 +319,31 @@
} }
.atg-support:before { .atg-support:before {
content: '\a041' content: '\a041'
}
.atg-circle-fb:before {
content: '\a042'
}
.atg-circle-yt:before {
content: '\a043'
}
.atg-circle-linked:before {
content: '\a044'
}
.atg-circle-zalo:before {
content: '\a045'
}
.atg-circle-tiktok:before {
content: '\a046'
}
.atg-calendar-1:before {
content: '\a047'
}
.atg-message:before {
content: '\a048'
} }

View File

@ -4,7 +4,7 @@
--radius: 8px; --radius: 8px;
--swiper-navigation-size: 24px !important; --swiper-navigation-size: 24px !important;
--swiper-theme-color: #09205C !important; --swiper-theme-color: #09205C !important;
--border-color: #E0E1E3; --border-color: #e0e0e0;
--text-color-primary: #444C61; --text-color-primary: #444C61;
--mNav-width: 100%; --mNav-width: 100%;
--text-heading-main: #000000; --text-heading-main: #000000;
@ -25,9 +25,11 @@
--text-color-lW1: #dfdfdf; --text-color-lW1: #dfdfdf;
--text-color-lW2: #4E4E4E; --text-color-lW2: #4E4E4E;
--text-color-lW3:#f8f8f8; --text-color-lW3:#f8f8f8;
--text-color-lW4: #e0e0e0;
--text-color-lW5: #999999;
--text-color-dark: #3f485d; --text-color-dark: #3f485d;
--text-color-d1: #8591ae;
--border-color-1:rgba(255, 255, 255, .2); --border-color-1:rgba(255, 255, 255, .2);
--border-color-2:#EDEDED --border-color-2:#EDEDED
@ -81,8 +83,9 @@
a { a {
display: block; display: block;
position: relative; position: relative;
cursor: pointer; text-decoration: none;
color: var(--color-primary) color:inherit;
cursor: pointer
} }
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -372,9 +375,32 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.con-feature { .con-feature {
top: -100px; position: relative;
width: 100%; top: 0;
margin-top: 30px;
margin-bottom: 30px;
width: 100%
}
@media (min-width: 768px){
.con-feature {
position: absolute;
left: 50%;
z-index: 100;
transform: translateX(-50%);
margin-top: 0;
margin-bottom: 0;
top: -140px
}
}
.con-feature > div{
margin: 20px 0
} }
.flex-feature { .flex-feature {
@ -410,6 +436,7 @@ body {
} }
.banner-content h1 { .banner-content h1 {
text-align:center;
font-size: 6rem; font-size: 6rem;
opacity: 0; opacity: 0;
transition: 2s opacity cubic-bezier(0.65, 0, 0.35, 1); transition: 2s opacity cubic-bezier(0.65, 0, 0.35, 1);
@ -426,6 +453,7 @@ body {
} }
.banner-content h2 { .banner-content h2 {
text-align:center;
opacity: 0; opacity: 0;
font-size: 3.6rem; font-size: 3.6rem;
line-height: 5rem; line-height: 5rem;
@ -575,19 +603,389 @@ div[class*=sec]{
} }
.section {
padding: 100px 0 70px
}
.section .sub-title {
color: var(--color-primary);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
font-size: 1.2rem
}
.section .title {
margin-bottom: 15px;
}
.grid {
margin: 0 20px;
overflow:hidden;
border-radius: var(--radius);
margin-bottom: 40px;
word-wrap: break-word;
box-shadow: rgb(158 158 158 / .1) 0 8px 11px 4px;
}
.grid-image img{
width: 100%
}
.grid-body {
position: relative;
padding: 35px 40px;
padding-right: 32px;
border: 1px solid #f1f1f1;
border-top: none
}
.grid-body .sub-title{
color: var(--text-color-lW2);
font-size: .87rem;
margin-bottom: 5px;
text-transform: capitalize;
}
.grid-body .title{
color: var(--text-color-dark);
font-family: 'Mulish';
padding-bottom: 0;
margin-bottom: 15px
}
.container {
display: flex;
align-items: center;
gap: 3px;
margin-bottom: 60px
}
/* Line */
.line {
width: 50px;
height: 3px;
background: var(--color-primary);
border-radius: 3px;
order: 1;
animation: moveLine 4.8s infinite alternate linear;
animation-direction: alternate
}
/* Dots */
.dot {
width: 3px;
height: 3px;
background: var(--color-primary);
border-radius: 50%;
transform: scale(1);
}
.dot1 {
order:2;
animation: dotPulse1 4.8s infinite alternate linear;
}
.dot2 {
order: 3;
animation: dotPulse2 4.8s infinite alternate linear;
}
.dot3 {
order:4;
animation: dotPulse3 4.8s infinite alternate linear;
}
/* Line di chuyển order qua lại */
@keyframes moveLine {
0%{
order: 1
}
25%{
order: 2;
}
50%
{
order: 3;
}
75%{
order: 4;
}
}
/* Dot nhấp nháy */
@keyframes dotPulse1 {
0% {
order: 2;
}
25% {
order: 3;
}
50% {
order: 4;
}
75% {
order: 1;
}
}
@keyframes dotPulse2 {
0% {
order: 3;
}
25% {
order: 4;
}
50% {
order: 1;
}
75% {
order: 2;
}
}
@keyframes dotPulse3 {
0% {
order: 4;
}
25% {
order: 1;
}
50% {
order: 2;
}
75% {
order: 3;
}
}
.order-list li {
color: var(--text-color-dark);
text-transform: capitalize;
font-weight: 500;
}
.order-list li:first-child {
margin-top: 0;
}
.order-list li {
display: inherit;
position: relative;
padding-left: 30px;
margin: 12px 0px;
}
.section-break{
padding: 150px 0
}
.section-break::before {
content: "";
top:0;
position:absolute;
width: 100%;
height: 100%;
background-color: #070613;
opacity: .4;
}
.section-break .sub-title{
text-transform: capitalize;
margin-bottom: 10px;
color: var(--color-primary)
}
.section-break .title{
text-align:center;
color:#fff
}
/**About Section**/
.about-section {
transition: .3s padding ease-in-out;
padding-top: 0
}
@media (min-width: 768px) {
.about-section {
padding-top: 620px
}
}
@media (min-width: 992px) {
.about-section {
padding-top: 550px
}
}
@media (min-width: 1200px) {
.about-section {
padding-top: 300px
}
}
.about-image1 {
position: absolute;
left: -220px;
width: 310px;
top: 60px;
z-index: 100;
overflow:hidden;
border-radius: var(--radius);
border: 2px solid #f6f6f6
}
.about-image1 img {
transform: scale(1.1);
}
.experience {
border-radius: var(--radius);
background-color: #fff;
box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
max-width: 335px;
z-index: 1;
position: absolute;
right: -50px;
bottom: -60px;
padding: 20px 30px;
border-right: 3px solid #FF4800;
}
.experience p {
font-size: 1.2rem;
margin: 0 0 20px;
}
@media (max-width: 1440px) {
.about-image-box .about-image1 {
left: -105px;
}
}
@media (min-width: 1440px) {
.about-image-box .about-image1 {
width:380px;
top: 120px;
left: -130px;
}
}
/**Blog Section*/
.blog-author {
position: absolute;
top: -25px;
right: 40px;
padding: 10px;
background: #ffffff;
border-radius: 25px;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06);
}
.blog-author-content span{
color: var(--text-color-lW5)
}
.blog-author-content a{
font-weight: 600;
}
.blog-author-img {
margin-right: 10px
}
.blog-author-img img {
width: 30px;
height: 30px
}
.blog-meta{
color: var(--text-color-lW5)
}
/**Footer Section*/ /**Footer Section*/
#footer{ #footer{
color: var(--text-color-dark) color: var(--text-color-dark)
} }
.c-newsletter {
padding-right:0;
}
@media (min-width: 1200px) {
.c-newsletter {
padding-right: 40px;
}
}
.newsletter {
margin-top: 10px;
display: flex;
align-content: space-between;
overflow: hidden;
border-radius: var(--radius);
border: 1px solid var(--text-color-lW1);
transition: all .3s ease-in-out
}
.newsletter input::placeholder{
color: var(--text-color-dark)
}
.newsletter:hover, .newsletter:has(input:focus){
border-color: var(--color-primary)
}
.newsletter:hover .btn, .newsletter input:focus ~ .btn {
background-color: var(--color-primary);
color: #fff
}
.newsletter .btn{
margin-right: -8px;
font-size: .9rem;
font-weight: 500;
background: var(--text-color-lW1)
}
.newsletter input{
padding: 0 20px;
width: 100%
}
.c-social a{
color: var(--text-color-dark);
font-size: 3.4rem;
margin-right: 10px;
transition: .3s color ease-in-out
}
.c-social a:hover{
color: var(--color-primary)
}
.galleries {
margin: 8px -2px
}
.galleries .item {
border-radius: var(--radius);
overflow:hidden;
margin: 2px;
}
.c-footer { .c-footer {
border-top: 1px solid #E0E1E3; background: var(--text-color-lW3);
padding: 20px 0; padding: 20px 0;
border-bottom: 1px solid #E0E1E3;
} }
.c-footer-1 { .c-footer-1 {
background: var(--text-color-white);
padding-top: 50px; padding-top: 50px;
padding-bottom: 80px padding-bottom: 80px
} }
@ -603,16 +1001,39 @@ div[class*=sec]{
padding-left: 0 !important padding-left: 0 !important
} }
.c-footer .c_logo img{
height: 60px
.c-footer-1 .c_logo img{
height: 45px
} }
.c-footer-2{ .c-footer-2{
background: var(--text-color-lW3) opacity: .55;
background: var(--text-color-lW1)
} }
.c-footer-2 span { .c-footer-2 span {
padding: 15px 0; padding: 15px 0;
}
/**Parallax Plugin**/
.parallax {
position: relative;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.parallax::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
background-attachment: fixed;
z-index: 0;
}
.con-parallax {
position: relative;
overflow: hidden
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 341 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 645 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 661 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -0,0 +1 @@
<svg width="62" height="78" xmlns="http://www.w3.org/2000/svg"><path d="M19.69 3.632a1.755 1.755 0 0 1 1.113.434 1.79 1.79 0 0 1 .573 1.653 1.766 1.766 0 0 1-1.133 1.333A25.956 25.956 0 0 0 3.5 31.354c0 7.54 3.199 14.31 8.303 19.059.21.196.37.444.467.716.092.273.12.565.075.851l-2.23 14.34 27.4 7.179 1.314-10.107a1.747 1.747 0 0 1 1.407-1.502c.24-.048.488-.04.728.01l8.193 1.875 1.404-8.605a1.76 1.76 0 0 1 .597-1.057 1.737 1.737 0 0 1 1.14-.417h5.83L54.83 37.975a1.947 1.947 0 0 1-.037-.424l.302-9.035c-1.033-9.538-7.215-17.522-15.696-21.105a1.707 1.707 0 0 1-.577-.383 1.808 1.808 0 0 1-.387-.575 1.776 1.776 0 0 1 .39-1.94 1.764 1.764 0 0 1 1.26-.502c.234.003.464.055.677.148 9.676 4.089 16.708 13.217 17.841 24.105.007.08.01.162.007.242l-.302 8.948 3.7 17.64a1.763 1.763 0 0 1-1.716 2.129h-6.504l-1.463 8.98A1.758 1.758 0 0 1 50.2 67.64l-8.134-1.86-1.321 10.169a1.76 1.76 0 0 1-1.445 1.508 1.778 1.778 0 0 1-.738-.03L7.695 69.336a1.78 1.78 0 0 1-1.023-.74 1.754 1.754 0 0 1-.264-1.24l2.337-15.009C3.353 46.998 0 39.562 0 31.36 0 18.753 7.901 7.961 19.019 3.76a1.74 1.74 0 0 1 .686-.121l-.014-.006zM34.55 0c.23 0 .474.048.688.137.213.09.389.224.55.385.163.161.297.336.386.55.09.212.138.456.138.686V27.66c3.612 2.019 6.06 5.871 6.06 10.273 0 3.715-1.725 7.042-4.435 9.202l4.105 7.114c.12.2.19.402.22.632.031.23.031.491-.027.714a1.694 1.694 0 0 1-.303.604c-.141.186-.324.35-.524.467-.203.117-.43.19-.66.22-.231.031-.466.01-.69-.055a1.8 1.8 0 0 1-.633-.302 1.74 1.74 0 0 1-.44-.522l-4.105-7.086a11.682 11.682 0 0 1-4.298.796c-6.504 0-11.817-5.298-11.817-11.783 0-4.402 2.448-8.254 6.06-10.274V1.758c0-.23.049-.473.138-.686.09-.213.224-.388.386-.55.162-.161.337-.295.55-.384.214-.09.459-.138.69-.138h7.96zm-3.968 29.692c-4.6 0-8.291 3.664-8.291 8.24a8.253 8.253 0 0 0 8.291 8.268c4.59 0 8.264-3.68 8.264-8.268 0-4.576-3.674-8.24-8.264-8.24z" fill="#E6E8EB" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

View File

@ -43,5 +43,23 @@ window.L1000 = function () {
} }
} }
}); });
document.querySelectorAll('.parallax').forEach(el => {
const parent = el.closest(".con-parallax");
if (parent) {
parent.style.height = parent.offsetHeight + "px";
const content = parent.querySelector("[data-content]");
(content) ? content.style = "position:absolute; top:0; left:0" : "";
}
el.style.height = "100vh";
const src = el.getAttribute('data-src');
el.style.backgroundImage = `url(${src})`;
});
window.app.on("App_Scrolling", (t) => {
document.querySelectorAll('.parallax').forEach(el => {
const depth = parseFloat(el.dataset.depth || 0.5);
const yPos = -(t * depth);
el.style.backgroundPosition = `center ${yPos}px`;
});
});
} }
window.AScript.set("1000", true); window.AScript.set("1000", true);