updated 9-9-2025

This commit is contained in:
2025-09-09 08:32:58 +07:00
parent 732f41595e
commit e44fe5dcf8
15 changed files with 698 additions and 169 deletions

View File

@ -98,14 +98,6 @@
<ExcludeFromSingleFile>true</ExcludeFromSingleFile> <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory> <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content> </Content>
<Content Include="wwwroot\font\atgfont-Regular.woff">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
<Content Include="wwwroot\font\atgfont-Regular.woff2">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
<Content Include="wwwroot\font\ATGIcon-Regular.woff"> <Content Include="wwwroot\font\ATGIcon-Regular.woff">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile> <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory> <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>

View File

@ -45,7 +45,6 @@ namespace AppLibs.Libs
public IHtmlContent ToFlexPageAttribute() public IHtmlContent ToFlexPageAttribute()
{ {
Console.WriteLine(IsFlexPage.ToString());
if (IsFlexPage.HasValue && IsFlexPage.Value) if (IsFlexPage.HasValue && IsFlexPage.Value)
{ {

View File

@ -0,0 +1,13 @@
{
"version": 1,
"isRoot": true,
"tools": {
"dotnet-ef": {
"version": "9.0.8",
"commands": [
"dotnet-ef"
],
"rollForward": false
}
}
}

View File

@ -1,13 +1,31 @@
using AppLibs.Libs; using AppLibs.Libs;
using Microsoft.AspNetCore.HttpOverrides;
using Microsoft.AspNetCore.Server.Kestrel.Core;
await WSNavigation.LoadJson(); await WSNavigation.LoadJson();
var builder = WebApplication.CreateBuilder(args); var builder = WebApplication.CreateBuilder(args);
// Add services to the container. // Add services to the container.
#if (!DEBUG)
builder.Services.Configure<ForwardedHeadersOptions>(options =>
{
options.ForwardedHeaders =
ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
// Nếu muốn an toàn hơn, chỉ trust proxy cụ thể:
// options.KnownProxies.Add(IPAddress.Parse("127.0.0.1"));
});
builder.WebHost.UseKestrel(o =>
{
o.ListenAnyIP(5111, lo =>
{
lo.Protocols = HttpProtocols.Http1;
});
});
builder.Services.AddControllersWithViews();
#else
builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation(); builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();
#endif
var app = builder.Build(); var app = builder.Build();
// Configure the HTTP request pipeline. // Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment()) if (!app.Environment.IsDevelopment())
{ {
@ -15,7 +33,13 @@ if (!app.Environment.IsDevelopment())
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts(); app.UseHsts();
} }
app.UseForwardedHeaders();
app.Use(async (ctx, next) =>
{
Console.WriteLine("X-Forwarded-Proto: " + ctx.Request.Headers["X-Forwarded-Proto"]);
Console.WriteLine("Scheme: " + ctx.Request.Scheme);
await next();
});
app.UseHttpsRedirection(); app.UseHttpsRedirection();
app.UseRouting(); app.UseRouting();

View File

@ -48,32 +48,30 @@
</div> </div>
<section> <section>
<div class="con"> <div class="con">
<div class="r-n-g"> <div class="r con-feature j-c-center">
<div class="r con-feature j-c-center"> <div class="c-12 c-m-6 c-x-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 class="c-12 c-m-6 c-x-4"> </div>
<div class="flex-feature d-f f-c a-i-center"> <div class="c-12 c-m-6 c-x-4">
<i class="atg a-8x atg-air-cargo"></i> <div class="flex-feature d-f f-c a-i-center">
<h3> <i class="atg a-8x atg-air-cargo"></i>
Professional Booking & Live Tracking <h3>
</h3> Professional Booking & Live Tracking
<p>Dedicated teams provide efficient cargo booking and shipping with real-time shipment tracking</p> </h3>
</div> <p>Dedicated teams provide efficient cargo booking and shipping with real-time shipment tracking</p>
</div> </div>
<div class="c-12 c-m-6 c-x-4"> </div>
<div class="flex-feature d-f f-c a-i-center"> <div class="c-12 c-m-6 c-x-4">
<i class="atg a-8x atg-support"></i> <div class="flex-feature d-f f-c a-i-center">
<h3>Dedicated Customer Care</h3> <i class="atg a-8x atg-support"></i>
<p>Committed to transparent, devoted service and full support for all customer needs in cargo and passenger transportation</p> <h3>Dedicated Customer Care</h3>
</div> <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>
@ -83,7 +81,7 @@
<section class="con section about-section"> <section class="con section about-section">
<div class="r a-i-center"> <div class="r a-i-center">
<div class="c-m-12 c-l-6"> <div class="c-12 c-l-6">
<div class="about-image-box mr-0 mr-x-5"> <div class="about-image-box mr-0 mr-x-5">
<div class="about-image1 d-n d-x-b"> <div class="about-image1 d-n d-x-b">
<img class="w-100" src="~/images/1000/about-section/cargoload.png" alt=""> <img class="w-100" src="~/images/1000/about-section/cargoload.png" alt="">
@ -96,24 +94,24 @@
</div> </div>
</div> </div>
<div class="c-m-12 c-l-6 pl-5 pr-2"> <div class="c-12 c-l-6 block-about">
<span class="sub-title">About Our Company</span> <span class="sub-title">About Our Company</span>
<h2 class="title mb-3">Trusted Logistic Service Provider</h2> <h2 class="title mb-3">Trusted Logistic Service Provider</h2>
<ul class="order-list primary-color mrb-40"> <ul class="order-list mb-4">
<li>revolutionary catalysts for chang</li> <li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i> revolutionary catalysts for chang</li>
<li>catalysts for chang the Seamlessly</li> <li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i>catalysts for chang the Seamlessly</li>
<li>business applications through</li> <li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i>business applications through</li>
<li>procedures whereas processes</li> <li class="d-f a-i-center"><i class="atg atg-radiobutton a-2x"></i>procedures whereas processes</li>
</ul> </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> <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-inline d-md-flex align-items-center mt-40"> <div class="d-f a-i-center mt-4">
<a href="?page_id=120" class="animate-btn mrr-50 mrb-sm-30">Read More</a> <button class="btn btn-primary mr-5">Read More</button>
<div class="signature"> <div class="signature">
<img decoding="async" src="https://shtheme.org/demosd/logistek/wp-content/uploads/2021/04/signature.png" alt=""> <img decoding="async" src="https://shtheme.org/demosd/logistek/wp-content/uploads/2021/04/signature.png" alt="">
@ -125,62 +123,187 @@
</div> </div>
</section> </section>
<!-- Hero Section --> <section class="con-parallax con-perf-section">
<section class="pt-5 pb-5"> <div class="bg-wrapper parallax" data-dept="0.4" >
<div class="con"> <img src="/images/1000/passenger-planes.jpg" alt="Background" class="bg-img">
<div class="r j-c-center"> </div>
<div class="c-12 c-m-10 text-center"> <div class="con perf-section section-break" data-content>
<h1 class="mb-3">Welcome to Aviationaly</h1> <div class="r">
<p class="mb-4">Start your aviation journey with professional instructors and top-notch facilities.</p> <div class="r-n-g w-n w-s-100">
<button class="p-2 bg-white">Get Started</button> <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="cert-section section">
<div class="con block1">
<div class="r">
<div class="c-s-12 c-m-6 pr-0 pr-m-5">
<span class="sub-title">Certified & Trusted Logistics Provider</span>
<h2>Our Prestigious Certifications and Awards</h2>
</div>
<div class="c-s-12 c-m-6">
<p class="desc pl-5">
We take great pride in our unwavering commitment to the highest standards of quality, safety, and operational excellence. The following certifications and international memberships highlight and recognize our outstanding performance and reliability in providing world-class logistics services
</p>
</div> </div>
</div> </div>
</div> </div>
</section> <div class="con block2">
<div class="r">
<div class="block-content r-n-g a-i-end">
<div class="c-12 c-m-6">
<div class="r-n-g">
<div class="c-12 c-s-6 c-m-12 c-x-6">
<div class="grid d-f f-c">
<i class="atg a-5x atg-cert mb-3"></i>
<h3 class="title">
IATA GSSA Certified Company
</h3>
<p>
Officially recognized by the International Air Transport Association as a General Sales & Service Agent
</p>
</div>
<!-- Features Section --> </div>
<!-- Courses Section --> <div class="c-12 c-s-6 c-m-12 c-x-6">
<section class="pt-5 pb-5"> <div class="grid d-f f-c">
<div class="con"> <i class="atg a-5x atg-cup mb-3"></i>
<div class="r j-c-center"> <h3 class="title">
<div class="c-12 text-center"> Member of TIACA - FEDAGSA
<h2 class="mb-3">Our Programs</h2> </h3>
</div> <p>
<div class="r gap-3"> Proud member of leading global cargo and air logistics associations
<div class="c-12 c-s-6 c-m-4 text-center"> </p>
<h4 class="mb-1">Private Pilot License</h4> </div>
<p>Learn the fundamentals of flying and become a licensed pilot.</p> </div>
</div>
</div> </div>
<div class="c-12 c-s-6 c-m-4 text-center"> <div class="c-12 c-m-6">
<h4 class="mb-1">Commercial Pilot License</h4> <div class="grid-image">
<p>Advance your skills and prepare for a professional aviation career.</p> <img class="w-100 feather-img" src="~/images/1000/cert-section/cGSSA.jpg" />
</div> </div>
<div class="c-12 c-s-6 c-m-4 text-center">
<h4 class="mb-1">Flight Instructor Course</h4>
<p>Teach others how to fly and build flight hours simultaneously.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="our-section section">
<div class="con block1">
<div class="r">
<div class="c-l-5">
<div class="d-f f-c a-i-end">
<span class="sub-title">All Our Services</span>
<h2>
Service We Offer
</h2>
</div>
</div>
<div class="c-l-1 pl-3 pr-3 j-c-center d-f "><div class="sep"></div> </div>
<div class="c-l-5">
<p class="desc">orem ipsum dolor sit amet, consectetur adipisicing elit. Eos aperiam porro reiciendis dolore doloribus repellendus tempora vitae quia voluptas ipsum eligend.</p>
</div>
</div>
</div>
<div class="con block2">
<div class="r">
<div class="r-n-g">
<div class="c-l-4">
<div class="grid">
<div class="service-item-thumb">
<img class="w-100" src="https://shtheme.org/demosd/logistek/wp-content/themes/logistek/assets/images/service/service1.jpg" alt="">
<div class="service-item-icon">
<i class="atg atg-airline a-2x"></i>
</div>
</div>
<div class="grid-body">
<a href=""><h3 class="title">Air Freight</h3></a>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet similique ipsum reprehenderit sed.</p>
<!-- Testimonials Section --> <a class="mt-3" href="">Read More</a>
<section class="pt-5 pb-5 bg-white"> </div>
</div>
</div>
<div class="c-l-4">
<div class="grid">
<div class="service-item-thumb">
<img class="w-100" src="https://shtheme.org/demosd/logistek/wp-content/themes/logistek/assets/images/service/service1.jpg" alt="">
<div class="service-item-icon">
<i class="atg atg-ticket-air a-2x"></i>
</div>
</div>
<div class="grid-body">
<a href=""><h3 class="title">Air Freight</h3></a>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet similique ipsum reprehenderit sed.</p>
<a class="mt-3" href="">Read More</a>
</div>
</div>
</div>
<div class="c-l-4">
<div class="grid">
<div class="service-item-thumb">
<img class="w-100" src="https://shtheme.org/demosd/logistek/wp-content/themes/logistek/assets/images/service/service1.jpg" alt="">
<div class="service-item-icon">
<i class="atg atg-warehouse a-2x"></i>
</div>
</div>
<div class="grid-body">
<a href=""><h3 class="title">Air Freight</h3></a>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet similique ipsum reprehenderit sed.</p>
<a class="mt-3" href="">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="con"> <div class="con">
<div class="r j-c-center"> <div class="r j-c-center mt-2 mb-5">
<div class="c-12 text-center"> <h3 class="d-f-i f-wrap j-c-center">Do You Want To explore more services just <a href="" class="text-primary-color ml-2">click here</a></h3>
<h2 class="mb-3">What Students Say</h2>
</div>
<div class="r gap-3">
<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>
<strong>- Alex T.</strong>
</div>
<div class="c-12 c-s-6 c-m-6">
<p class="mb-1">"Modern facilities and friendly staff. Highly recommended!"</p>
<strong>- Maria L.</strong>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -201,10 +324,10 @@
</div> </div>
</div> </div>
</section> </section>
<section class="con section"> <section class="con section blog-section">
<div class="r j-c-center"> <div class="r j-c-center">
<div class="d-f f-c a-i-center"> <div class="d-f f-c a-i-center">
<div class="sub-title">BLOG POST</div> <div class="sub-title">Blog Post</div>
<h2 class="title">Our Latest Blog Post</h2> <h2 class="title">Our Latest Blog Post</h2>
<div class="container"> <div class="container">
<div class="line"></div> <div class="line"></div>

View File

@ -346,4 +346,44 @@
.atg-message:before { .atg-message:before {
content: '\a048' content: '\a048'
}
.atg-radiobutton:before {
content: '\a049'
}
.atg-cert:before {
content: '\a04a'
}
.atg-cup:before {
content: '\a04b'
}
.atg-airline:before {
content: '\a04c'
}
.atg-ticket-air:before {
content: '\a04d'
}
.atg-warehouse:before {
content: '\a04e'
}
.atg-revenue:before{
content: '\a04f'
}
.atg-revenue:before {
content: '\a04f'
}
.atg-ticket-air-thin:before {
content: '\a050'
}
.atg-client:before {
content: '\a051'
} }

View File

@ -108,7 +108,11 @@ h1, h2, h3, h4, h5, h6, p {
} }
.w-100 { .w-100 {
width: 100%; width: 100% !important
}
.w-n{
width:none !important
} }
.cfull, .con { .cfull, .con {
@ -124,6 +128,14 @@ h1, h2, h3, h4, h5, h6, p {
.cfull .r, .con .r { .cfull .r, .con .r {
max-width: 100%; max-width: 100%;
} }
.w-s-100{
width: 100% !important
}
.w-s-n{
width: none !important
}
} }
@media (min-width:768px) { @media (min-width:768px) {
@ -181,12 +193,12 @@ h1, h2, h3, h4, h5, h6, p {
margin-left: 0; margin-left: 0;
} }
.r > .c, .r > [class^=c-] { .r > .c {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
.r-n-g > [class^=c-], .r > [class^=c-] { .r-n-g > [class^=c-] {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 1px; min-height: 1px;
@ -298,6 +310,10 @@ h1, h2, h3, h4, h5, h6, p {
display: flex !important; display: flex !important;
} }
.d-f-i {
display: inline-flex !important;
}
.f-r { .f-r {
-webkit-box-orient: horizontal !important; -webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important; -webkit-box-direction: normal !important;
@ -1326,6 +1342,9 @@ h1, h2, h3, h4, h5, h6, p {
.pr-m-5 { .pr-m-5 {
padding-right: 3rem !important; padding-right: 3rem !important;
} }
.pr-m-4 {
padding-right: 1.5rem !important;
}
.gap-m-0 { .gap-m-0 {
gap: 0 !important; gap: 0 !important;
@ -2463,6 +2482,13 @@ h3 {
--input-padding: 7px; --input-padding: 7px;
} }
@media (min-width: 576px){
:root{
--margin-base: 50px
}
}
.m-gap { .m-gap {
margin: 0 var(--margin-gap); margin: 0 var(--margin-gap);
} }

View File

@ -39,8 +39,12 @@
--mNav-width: 340px !important; --mNav-width: 340px !important;
} }
} }
.feather-img {
/* Feather viền 5px */
-webkit-mask-image: linear-gradient(to top, transparent 0px, black 10px), linear-gradient(to right, transparent 0px, black 10px), linear-gradient(to bottom, transparent 0px, black 10px), linear-gradient(to left, transparent 0px, black 10px);
-webkit-mask-composite: intersect;
mask-composite: intersect;
}
.f-header{ .f-header{
@ -48,13 +52,17 @@
} }
.f-header.show.ios{ .f-header.show.ios{
position: sticky; position: absolute;
} }
.rSlider{ .rSlider{
margin: 0; margin: 0;
} }
h1, h2, h3, h4, h5, h6, h7, p, span, div {
user-select: none; /* Ngăn không cho bôi đen copy text */
cursor: default
}
@media (min-width: 996px) { @media (min-width: 996px) {
:root { :root {
@ -148,7 +156,7 @@ body {
} }
#header { #header {
position: fixed; position: absolute;
width: 100%; width: 100%;
z-index: 1000; z-index: 1000;
} }
@ -380,22 +388,14 @@ body {
.con-feature { .con-feature {
position: relative; position: relative;
top: 0;
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px
width: 100%
} }
@media (min-width: 768px){ @media (min-width: 768px){
.con-feature { .con-feature {
position: absolute; margin-top: -140px
left: 50%;
z-index: 100;
transform: translateX(-50%);
margin-top: 0;
margin-bottom: 0;
top: -140px
} }
} }
@ -603,13 +603,20 @@ div[class*=sec]{
} }
.section { .section {
font-size: 1rem;
padding: 100px 0 70px padding: 100px 0 70px
} }
.desc {
line-height: 1.8
}
.section .sub-title { .section .sub-title {
color: var(--color-primary); color: var(--color-primary);
text-transform: uppercase;
text-transform: capitalize;
font-weight: 700; font-weight: 700;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 1.2rem font-size: 1.2rem
@ -621,10 +628,11 @@ div[class*=sec]{
.grid { .grid {
margin: 0 20px; margin: 0 20px;
overflow:hidden; overflow: hidden;
border-radius: var(--radius); border-radius: var(--radius);
margin-bottom: 40px; margin-bottom: 40px;
word-wrap: break-word; word-wrap: break-word;
border: 1px solid #f1f1f1;
box-shadow: rgb(158 158 158 / .1) 0 8px 11px 4px; box-shadow: rgb(158 158 158 / .1) 0 8px 11px 4px;
} }
@ -632,11 +640,16 @@ div[class*=sec]{
width: 100% width: 100%
} }
.grid-image{
background-color:transparent;
overflow:hidden;
border-radius: var(--radius)
}
.grid-body { .grid-body {
position: relative; position: relative;
padding: 35px 40px; padding: 35px 40px;
padding-right: 32px; padding-right: 32px;
border: 1px solid #f1f1f1;
border-top: none border-top: none
} }
.grid-body .sub-title{ .grid-body .sub-title{
@ -770,11 +783,12 @@ div[class*=sec]{
margin-top: 0; margin-top: 0;
} }
.order-list li { .order-list li {
display: inherit; display: inherit;
position: relative; position: relative;
padding-left: 30px; padding-left: 30px;
margin: 12px 0px; margin: 4px 0px;
} }
.section-break{ .section-break{
@ -791,9 +805,7 @@ div[class*=sec]{
opacity: .4; opacity: .4;
} }
.section-break .sub-title{ .section-break .sub-title{
text-transform: capitalize; margin-bottom: 10px
margin-bottom: 10px;
color: var(--color-primary)
} }
.section-break .title{ .section-break .title{
text-align:center; text-align:center;
@ -804,25 +816,36 @@ div[class*=sec]{
.about-section { .about-section {
transition: .3s padding ease-in-out; transition: .3s padding ease-in-out;
padding-top: 0 padding-top: 20px;
padding-bottom: 30px
} }
@media (min-width: 768px) { .block-about {
.about-section { padding: 80px 0 0
padding-top: 620px }
}
.about-section .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: 40px;
border-right: 3px solid #FF4800;
bottom: -60px;
padding: 20px 30px
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.about-section {
padding-top: 550px .block-about {
padding-top: 0;
padding-left: 100px
} }
} .about-section .experience {
right: -50px
@media (min-width: 1200px) {
.about-section {
padding-top: 300px
} }
} }
@ -841,19 +864,20 @@ div[class*=sec]{
transform: scale(1.1); transform: scale(1.1);
} }
.experience { .about-section .order-list .atg {
border-radius: var(--radius); color: var(--color-primary);
background-color: #fff; left: -30px;
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;
} }
.about-section .order-list .atg:before {
margin-bottom: 4px;
}
.signature img {
width: 125px;
}
.experience p { .experience p {
font-size: 1.2rem; font-size: 1.2rem;
margin: 0 0 20px; margin: 0 0 20px;
@ -873,9 +897,221 @@ div[class*=sec]{
left: -130px; left: -130px;
} }
} }
/**End Section**/
/**Perfomance Section**/
.con-perf-section{
margin-top: 25px;
}
@media (min-width: 992px){
.con-perf-section {
margin-top: 100px
}
}
.perf-section{
padding: 80px 0;
color: #fff
}
.perf-section .r-n-g{
margin: 0 -20px
}
.perf-section .grid {
border: none;
box-shadow: none;
margin: 20px
}
.perf-section span {
text-align: center;
font-size: 1.2rem;
font-weight: 500
}
.perf-section h1 {
font-size: 1.6rem;
}
@media (min-width: 576px) {
.perf-section h1 {
font-size: 2rem;
}
}
@media (min-width: 992px){
.perf-section h1 {
font-size: 2.5rem;
}
}
/***End Section***/
/**Cert Section***/
.cert-section {
padding-top:0;
padding-bottom: 60px
}
.cert-section .block1{
background: var(--text-color-lW3);
padding: 100px 0;
}
.cert-section .block2{
z-index: 100;
margin-top: -100px
}
@media (min-width: 1200px){
.cert-section .block2 {
margin-top: -140px
}
}
.cert-section .desc {
border-left: 3px solid var(--color-primary);
margin: 30px 0
}
.cert-section .grid {
background: var(--color-primary);
transition: all .3s ease-in-out;
margin-bottom: 0;
margin-top: 40px;
height: calc(100% - 40px);
padding: 20px;
color:white
}
.cert-section .grid-image {
margin: 40px 20px 0
}
.cert-section .grid:hover {
background: var(--text-color-dark);
transform: translateY(-5px);
}
.cert-section .block-content{
margin-left: -20px;
margin-right: -20px
}
/***End Section**/
/***Our Service Section***/
.our-section {
padding:0
}
.our-section .desc{
margin-top: 0
}
.our-section .sep {
width: 8px;
border-radius: 5px;
height: 100%;
background: #FF4800
}
.our-section .block1 .sub-title{
color:white
}
.our-section .block1{
padding-top: 100px;
padding-bottom: 140px;
background: var(--color-primary);
color:white
}
.our-section .block2{
margin-top: -80px
}
.our-section .block2 .r-n-g{
margin: 0 -20px;
}
.our-section .grid{
border:none
}
.our-section .grid-body:after {
transform: scale(0.8) rotate(-90deg);
content: "\a028";
position: absolute;
font-family: 'atg-admin-font';
right: -60px;
bottom: -100px;
font-size: 9rem;
color: #FF4800;
opacity: 0.06;
transition: all 400ms ease-out 0s;
}
.our-section .service-item-thumb:before {
z-index: 1;
background: #03324d;
border-radius: 8px 8px 0 0;
position: absolute;
height: 0;
opacity: 0;
width: 100%;
left: 0;
top: 0;
transition: all .4s ease-out 0s;
content: "";
}
.our-section .grid:hover .service-item-thumb:before {
height: 100%;
opacity: 0.4;
}
.our-section .grid:hover .grid-body:after {
transform: scale(1.2) rotate(90deg);
right: 30px;
bottom: 0;
}
.our-section .grid:hover .service-item-icon {
transform: translateY(30px)
}
.our-section .grid:hover .service-item-icon i {
transform: rotateY(360deg);
}
.service-item-icon {
transform: translateY(20px);
position: absolute;
right: 20px;
background: var(--color-primary);
color: #fff;
padding: 16px 20px;
bottom: 0;
border-radius: 5px;
z-index: 1;
transition: all .4s ease-out 0s;
}
.service-item-icon i {
transition: 0.6s linear;
}
/**End Section*/
/**Blog Section*/ /**Blog Section*/
.blog-section .title{
text-align: center
}
.blog-author { .blog-author {
position: absolute; position: absolute;
@ -1016,24 +1252,27 @@ div[class*=sec]{
/**Parallax Plugin**/ /**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 { .con-parallax {
position: relative; position: relative;
overflow: hidden overflow: hidden
}
.bg-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
}
.bg-img {
position: absolute;
top: 0; /* bắt đầu từ trên */
left: 50%;
height: 100%;
width: 100%;
transform: translateX(-50%) translateY(0); /* chỉ dịch ngang center */
transition: transform 0.1s linear;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 854 KiB

View File

@ -43,23 +43,95 @@ window.L1000 = function () {
} }
} }
}); });
document.querySelectorAll('.parallax').forEach(el => { const parallaxEls = document.querySelectorAll('.parallax');
let ticking = false;
parallaxEls.forEach(el => {
const parent = el.closest(".con-parallax"); const parent = el.closest(".con-parallax");
if (parent) { if (parent) {
parent.style.height = parent.offsetHeight + "px"; 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) => { window.app.on("App_Scrolling", (t) => {
document.querySelectorAll('.parallax').forEach(el => { if (!ticking) {
window.requestAnimationFrame(() => {
updateParallax(t, parallaxEls);
ticking = false;
});
ticking = true;
}
});
const countNum = document.querySelectorAll('[CountNumber]');
let tickingC = false;
window.app.on("App_Scrolling", (t) => {
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 rect = el.getBoundingClientRect();
const inView = rect.bottom > 0 && rect.top < window.innerHeight;
if (inView) {
const depth = parseFloat(el.dataset.depth || 0.5); const depth = parseFloat(el.dataset.depth || 0.5);
const yPos = -(t * depth); const progress = rect.top / window.innerHeight;
el.style.backgroundPosition = `center ${yPos}px`; const img = el.querySelector('.bg-img');
}); if (el && img) {
// vị trí ban đầu wrapper
const wrapperOffset = -el.offsetHeight + (el.offsetHeight / 2); // top: -100% + translateY(50%)
// offset parallax
const parallaxOffset = progress * depth * el.offsetHeight;
// áp dụng vào image
img.style.transform = `translate(-50%, ${wrapperOffset + parallaxOffset}px)`;
}
}
}); });
} }
window.AScript.set("1000", true); window.AScript.set("1000", true);

View File

@ -7,13 +7,14 @@ import ADropDown from '/js/libs/js-ADropDown.js'
// '/css/atg-font/atg-admin-font.css' // '/css/atg-font/atg-admin-font.css'
//]; //];
//window.app.loadCSS(asyncStyleSheets); //window.app.loadCSS(asyncStyleSheets);
/**/
/*<img src="/images/logo/logo.jpg" />*/
//
class AsyncLayout extends ALayout { class AsyncLayout extends ALayout {
constructor() { constructor() {
super(); super();
this.layMNav = `<div class="m-header"> this.layMNav = `<div class="m-header">
<a app-nav href="${window.GetAbsoluteURL("/")}" class="c_logo d-f a-i-center c-a"> <a app-nav href="${window.GetAbsoluteURL("/")}" class="c_logo d-f a-i-center c-a">
<img src="/images/logo/logo.jpg" />
<span class="d-f no-wrap ml-2"><b class="lg">VIN</b> <b class="lg lg1">FONT</b></span> <span class="d-f no-wrap ml-2"><b class="lg">VIN</b> <b class="lg lg1">FONT</b></span>
<a href="javascript:void(0)" class="hd-close"> <a href="javascript:void(0)" class="hd-close">
<i class="atg atg-x"></i> <i class="atg atg-x"></i>