hiepht/PresentCorpo
0
0
Fork 0
forked from MinhQuan/PresentCorpo
Code Pull Requests Activity

init

Browse Source
This commit is contained in:
MinhQuan
2026-06-03 01:06:32 +07:00
commit 31d30434d6
72 changed files with 11912 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/homePages/homeMain.html
+712
View File
@@ -0,0 +1,712 @@
<!-- views/homePages/homeMain.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG</title>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
/>
<link href="/components/header/header.css?v=1.1" rel="stylesheet" />
<link rel="stylesheet" href="components/footer/footer.css" />
<link rel="stylesheet" href="homePages/homeMain.css?v=1.8" />
</head>
<body>
<!-- Header Component -->
<div class="top-ribbon">
<div class="container-fluid px-4">
<div class="ribbon-content">
<div class="ribbon-company-info">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="ribbon-logo"
/>
<span class="ribbon-company-name">KỲ LONG</span>
<span>Thắp sáng tương lai, vững bền thành quả</span>
</div>
</div>
</div>
</div>
<!-- Header Section -->
<header class="header py-3">
<div class="container-fluid px-4">
<div class="row align-items-center">
<!-- Logo and Company Info -->
<div class="col-lg-6 col-md-6 col-12">
<div class="d-flex align-items-center">
<button class="mobile-menu-btn me-3">
<i class="bi bi-list"></i>
</button>
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="logo me-3"
/>
<div class="company-info">
<div>
<a
href="/"
title="Công ty TNHH Đầu Tư Thương Mại Dịch Vụ Kỳ Long"
class="company-name"
>
CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
</a>
</div>
<div class="company-slogan">
Thắp sáng tương lai, vững bền thành quả
</div>
<div class="company-year">SINCE 2010</div>
</div>
</div>
</div>
<!-- Contact Info - Horizontal Layout -->
<div class="col-lg-6 col-md-6 col-12 contact-section">
<div class="row g-3">
<!-- Address -->
<div class="col-md-6 col-12">
<div class="d-flex align-items-center">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div class="contact-text">
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
</div>
<!-- Email -->
<div class="col-md-6 col-12">
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div class="contact-text">
<div>Email:</div>
<div class="contact-text">info@kylongtech.com</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Navigation Section -->
<nav class="nav-container">
<div class="container-fluid px-4">
<div class="navbar-nav d-flex flex-row justify-content-around py-3">
<a href="/" class="nav-link" id="home">TRANG CHỦ</a>
<span class="separator"></span>
<a href="/aboutMain" class="nav-link" id="about">GIỚI THIỆU</a>
<span class="separator"></span>
<a href="/productMain" class="nav-link" id="products">SẢN PHẨM</a>
<span class="separator"></span>
<a href="/serviceMain" class="nav-link" id="services">DỊCH VỤ</a>
<span class="separator"></span>
<a href="/newsMain" class="nav-link" id="news">TIN TỨC</a>
<span class="separator"></span>
<a href="/lien-he" class="nav-link" id="contact">LIÊN HỆ</a>
</div>
</div>
</nav>
<!-- Floating Menu Button -->
<button class="floating-menu-btn" id="floatingMenuBtn">
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/lien-he" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!-- BANNER SECTION -->
<div class="banner">
<div class="banner-container">
<!-- Vimeo Video as first item -->
<div class="banner-item">
<div class="video-container">
<iframe
src=""
frameborder="0"
allow="
autoplay;
fullscreen;
picture-in-picture;
clipboard-write;
encrypted-media;
web-share;
"
referrerpolicy="strict-origin-when-cross-origin"
title="FB-4-Cái Mép.mp4"
allowfullscreen
>
</iframe>
</div>
</div>
<!-- Rest of the images -->
<div class="banner-item">
<img
src="https://ik.imagekit.io/1e8470bv5/homeBanner/homeBanner0.png?updatedAt=1760188122555"
alt="Home Banner 0"
/>
</div>
<div class="banner-item">
<img
src="https://ik.imagekit.io/1e8470bv5/homeBanner/homeBanner1.png?updatedAt=1760188224652"
alt="Home Banner 1"
/>
</div>
<div class="banner-item">
<img
src="https://ik.imagekit.io/1e8470bv5/homeBanner/homeBanner2.png?updatedAt=1760188285759"
alt="Home Banner 2"
/>
</div>
<div class="banner-item">
<img
src="https://ik.imagekit.io/1e8470bv5/homeBanner/homeBanner3.png?updatedAt=1760188326796"
alt="Home Banner 3"
/>
</div>
</div>
<!-- Navigation Controls -->
<button class="banner-nav banner-prev">❮</button>
<button class="banner-nav banner-next">❯</button>
<!-- Dot Indicators -->
<div class="banner-controls">
<div class="banner-dot active" data-slide="0"></div>
<div class="banner-dot" data-slide="1"></div>
<div class="banner-dot" data-slide="2"></div>
<div class="banner-dot" data-slide="3"></div>
<div class="banner-dot" data-slide="4"></div>
</div>
</div>
<!----- END OF BANNER SECTION HTML ----->
<!----- PRODUCT SECTION HTML ----->
<section class="products-section">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-title">
••• <span class="flower-icon">✿</span> •••
<br />
SẢN PHẨM
</h2>
</div>
</div>
<div class="row">
<!-- CNG Product -->
<div class="col-lg-4 col-md-6">
<div class="product-card">
<img
src="https://ik.imagekit.io/1e8470bv5/homeProduct/homeProduct0.png?updatedAt=1754333478026"
alt="Khí thiên nhiên nén (CNG)"
class="product-image"
/>
<div class="product-content">
<h3 class="product-title">Khí thiên nhiên nén (CNG)</h3>
<p class="product-description">
CNG (Compressed Natural Gas) là khí thiên nhiên có thành phần
chủ yếu là CH₄ - Methane (88%), không mùi, không màu, không
độc hại.
<br /><br />
Khí thiên nhiên được nén lại áp suất 200 - 250 bar để tiết
kiệm khoảng 97% thể tích, giảm chi phí vận chuyển.
</p>
</div>
</div>
</div>
<!-- LNG Product -->
<div class="col-lg-4 col-md-6">
<div class="product-card">
<img
src="https://ik.imagekit.io/1e8470bv5/homeProduct/homeProduct1.png?updatedAt=1754333513507"
alt="Khí thiên nhiên hóa lỏng (LNG)"
class="product-image"
/>
<div class="product-content">
<h3 class="product-title">Khí thiên nhiên hóa lỏng (LNG)</h3>
<p class="product-description">
LNG (Liquefied Natural Gas) là khí thiên nhiên hóa lỏng có
thành phần chủ yếu là CH₄ - methane được làm lạnh đến nhiệt độ
khoảng -162°C.
<br /><br />
Quá trình làm lạnh giúp giảm 600 lần thể tích và làm cho việc
vận chuyển đến nơi tiêu thụ được dễ vận chuyển hơn.
</p>
</div>
</div>
</div>
<!-- Biogas Product -->
<div class="col-lg-4 col-md-6">
<div class="product-card">
<img
src="https://ik.imagekit.io/1e8470bv5/homeProduct/homeProduct2.png?updatedAt=1754333579166"
alt="Năng lượng tái tạo (Biogas)"
class="product-image"
/>
<div class="product-content">
<h3 class="product-title">Năng lượng tái tạo (Biogas)</h3>
<p class="product-description">
Ngày nay trong sản xuất, sử dụng khí Biogas sẽ mang lại những
lợi ích to lớn trong việc tạo đỡ nguồn nguyên liệu để phục vụ
trong đỡi sống sinh hoạt hàng ngày.
<br /><br />
Khi sinh học Biogas là một trong những sáng kiến mang lại giá
trị và cung cấp lớn cho con người cũng như môi trường sống
hiện nay.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="decorative-bg"></div>
</section>
<!----- END OF PRODUCT SECTION HTML ----->
<!---- ABOUT SECTION HTML ----->
<section class="about-section">
<div class="about-container">
<div class="about-subtitle">GIỚI THIỆU VỀ DOANH NGHIỆP</div>
<h1 class="about-title">
CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
</h1>
<div class="about-title-underline"></div>
<p class="about-description">
<strong>Chào mừng đến với Công ty KỲ LONG</strong>, một công ty năng
lượng uy tín có nhiều kinh nghiệm trong việc cung cấp khí đốt tự nhiên
cho các khách hàng công nghiệp.
</p>
<p class="about-description">
Cam kết mạnh mẽ của chúng tôi trong việc làm hài lòng khách hàng và
thúc đẩy đổi mới đã giúp chúng tôi trở thành một đối tác đáng tin cậy
cho các doanh nghiệp đang tìm kiếm các giải pháp năng lượng đáng tin
cậy.
</p>
<p class="about-description">
Đội ngũ kỹ sư tận tâm của chúng tôi đảm bảo sự tròn trụ và tối ưu hóa
mức tiêu thụ năng lượng cho mọi khách hàng, sử dụng công nghệ tiền
tiến nhất và các phương pháp tiếp cận sáng tạo.
</p>
<p class="about-description">
Hãy tham gia cùng chúng tôi trong nỗ lực thúc đẩy một tương lai sạch
hơn, bền vững hơn và thịnh vượng về kinh tế cho các ngành công nghiệp
khác nhau.
</p>
<div class="about-features-section">
<div class="about-features-title">TẦM NHÌN VÀ SỨ MỆNH</div>
<div class="about-feature-item">
<span class="about-feature-number">1. Sứ Mệnh</span>
<div class="about-feature-text">
Tiến đến mục tiêu tiến bộ công nghệ để tối ưu hóa quy trình và
cung cấp dịch vụ phân phối khí hàng đầu.
</div>
</div>
<div class="about-feature-item">
<div class="about-feature-text">
Dự đoán sự thay đổi của thị trường và thích ứng với các xu hướng
và thách thức mới.
</div>
</div>
</div>
<div class="about-cta-container">
<a href="/aboutMain" class="about-cta-button">
<span>XEM THÊM THÔNG TIN</span>
<span class="arrow">⟶</span>
</a>
</div>
</div>
</section>
<!---- END OF ABOUT SECTION HTML ----->
<!----- PRODUCTS & SERVICES SECTION HTML ----->
<section class="products-services-section">
<div class="ps-container">
<div class="ps-header">
<h2 class="ps-title">SẢN PHẨM - DỊCH VỤ</h2>
<div class="ps-subtitle">Hoạt động chủ lực</div>
</div>
<div class="ps-content">
<!-- First Row - 3 Cards -->
<div class="ps-row">
<div class="ps-card">
<div class="ps-icon">
<i class="fas fa-fill-drip"></i>
</div>
<h3 class="ps-card-title">
<a
href="/productMain#production"
title="Sản xuất sản phẩm dầu mỏ"
>
NHIÊN LIỆU
</a>
</h3>
<p class="ps-card-description">
Sản xuất, sang chiết khí dầu mỏ hoá lỏng (LPG), phân phối khí
dầu mỏ hoá lỏng (LPG) bằng đường ống
</p>
</div>
<div class="ps-card">
<div class="ps-icon">
<i class="fas fa-wrench"></i>
</div>
<h3 class="ps-card-title">
<a
href="/productMain#production"
title="Sản xuất khí đốt và phân phối"
>
SẢN XUẤT
</a>
</h3>
<p class="ps-card-description">
Sản xuất khí đốt, phân phối nhiên liệu khí, sản xuất hơi nước,
nước nóng, điều hoà không khí
</p>
</div>
<div class="ps-card">
<div class="ps-icon">
<i class="fas fa-store"></i>
</div>
<h3 class="ps-card-title">
<a
href="/productMain#wholesale"
title="Bán buôn nhiên liệu và kim loại"
>
BÁN BUÔN
</a>
</h3>
<p class="ps-card-description">
Bán buôn nhiên liệu rắn, lỏng, khí, kim loại, quặng kim loại,
vật liệu xây dựng
</p>
</div>
</div>
<!-- Second Row - 3 Cards -->
<div class="ps-row">
<div class="ps-card">
<div class="ps-icon">
<i class="fas fa-shipping-fast"></i>
</div>
<h3 class="ps-card-title">
<a
href="/serviceMain#van-tai"
title="Dịch vụ vận tải và logistics"
>
VẬN TẢI
</a>
</h3>
<p class="ps-card-description">
Vận tải hàng hóa đường bộ, vận tải hành khách và hoạt động dịch
vụ hỗ trợ vận tải
</p>
</div>
<div class="ps-card">
<div class="ps-icon">
<i class="fas fa-hammer"></i>
</div>
<h3 class="ps-card-title">
<a
href="/serviceMain#xay-dung"
title="Xây dựng và lắp đặt công nghiệp"
>
XÂY DỰNG & LẮP ĐẶT
</a>
</h3>
<p class="ps-card-description">
Xây dựng nhà ở, nhà công nghiệp, lắp đặt hệ thống điện, cấp
thoát nước công nghiệp
</p>
</div>
<div class="ps-card">
<div class="ps-icon">
<i class="fas fa-dolly"></i>
</div>
<h3 class="ps-card-title">
<a
href="/serviceMain#cho-thue"
title="Cho thuê máy móc và thiết bị"
>
CHO THUÊ
</a>
</h3>
<p class="ps-card-description">
Cho thuê xe có động cơ, máy móc thiết bị xây dựng, thiết bị văn
phòng
</p>
</div>
</div>
<!-- Third Row - 2 Cards (Centered) -->
<div class="ps-row ps-row-centered">
<div class="ps-card">
<div class="ps-icon">
<i class="fas fa-file-contract"></i>
</div>
<h3 class="ps-card-title">
<a
href="/serviceMain#tu-van"
title="Tư vấn và nghiên cứu khoa học"
>
TƯ VẤN CHUYÊN NGHIỆP
</a>
</h3>
<p class="ps-card-description">
Tư vấn đầu tư, quản lý, kỹ thuật, giám sát công trình, nghiên
cứu khoa học công nghệ
</p>
</div>
<div class="ps-card">
<div class="ps-icon">
<i class="fas fa-desktop"></i>
</div>
<h3 class="ps-card-title">
<a
href="/serviceMain#cong-nghe"
title="Công nghệ thông tin và phần mềm"
>
CÔNG NGHỆ THÔNG TIN
</a>
</h3>
<p class="ps-card-description">
Lập trình máy vi tính, tư vấn hệ thống CNTT, phát triển phần mềm
theo yêu cầu
</p>
</div>
</div>
</div>
</div>
</section>
<!----- END OF PRODUCTS & SERVICES SECTION HTML ----->
<!-- NEWS BULLETIN SECTION HTML -->
<section class="news-bulletin-section">
<div class="news-container">
<div class="news-header">
<h2 class="news-title">TIN TỨC & THÔNG BÁO</h2>
<div class="news-subtitle">Cập nhật mới nhất từ Kỳ Long</div>
</div>
<div class="news-grid">
<!-- Embedded news items -->
<div class="news-item" data-article-url="/newsArticle1">
<div class="news-thumbnail">
<img
src="https://ik.imagekit.io/1e8470bv5/news-article-1.png?updatedAt=1750348208141"
alt="Tin tức 1"
/>
<div class="news-date">01/03/2025</div>
</div>
<h3 class="news-item-title">
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
</h3>
<div class="news-read-more">Xem chi tiết</div>
</div>
<div class="news-item" data-article-url="/newsArticle2">
<div class="news-thumbnail">
<img
src="https://ik.imagekit.io/1e8470bv5/news-article-2.png?updatedAt=1750348185735"
alt="Tin tức 2"
/>
<div class="news-date">25/02/2025</div>
</div>
<h3 class="news-item-title">
Khí đốt tự nhiên được khai thác từ đâu?
</h3>
<div class="news-read-more">Xem chi tiết</div>
</div>
<div class="news-item" data-article-url="/newsArticle1">
<div class="news-thumbnail">
<img
src="https://ik.imagekit.io/1e8470bv5/news-article-1.png?updatedAt=1750348208141"
alt="Tin tức 3"
/>
<div class="news-date">18/02/2025</div>
</div>
<h3 class="news-item-title">
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
</h3>
<div class="news-read-more">Xem chi tiết</div>
</div>
<div class="news-item" data-article-url="/newsArticle1">
<div class="news-thumbnail">
<img
src="https://ik.imagekit.io/1e8470bv5/news-article-1.png?updatedAt=1750348208141"
alt="Tin tức 4"
/>
<div class="news-date">10/02/2025</div>
</div>
<h3 class="news-item-title">
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
</h3>
<div class="news-read-more">Xem chi tiết</div>
</div>
</div>
<div class="news-view-all">
<a href="/newsMain" class="view-all-button">Xem tất cả tin tức</a>
</div>
</div>
</section>
<!-- END OF NEWS BULLETIN SECTION HTML -->
<!----- PARTNERS SECTION HTML ----->
<section class="partners-section">
<div class="partners-container">
<h2 class="section-title">KHÁCH HÀNG VÀ ĐỐI TÁC</h2>
<div class="partners-logo-container">
<div class="partner-logo">
<img
src="homePages/images/tranquang-logo.png?v=1.0"
alt="Trần Quang"
/>
</div>
<div class="partner-logo">
<img src="homePages/images/dongtam-logo.png?v=1.0" alt="Đồng Tâm" />
</div>
<div class="partner-logo">
<img src="homePages/images/richs-logo.png?v=1.0" alt="Rich's" />
</div>
<div class="partner-logo">
<img src="homePages/images/samsung-logo.png?v=1.0" alt="Samsung" />
</div>
<div class="partner-logo">
<img src="homePages/images/binhan-logo.png?v=1.0" alt="Bình An" />
</div>
<div class="partner-logo">
<img
src="homePages/images/tetrapak-logo.png?v=1.0"
alt="Tetra Pak"
/>
</div>
<div class="partner-logo">
<img
src="homePages/images/petrovietnam-logo.png"
alt="Petro Vietnam"
/>
</div>
<div class="partner-logo">
<img
src="homePages/images/thepnguyenminh-logo.png"
alt="Thép Nguyễn Minh"
/>
</div>
<div class="partner-logo">
<img
src="homePages/images/gassouth-logo.png?v=1.0"
alt="Gas South"
/>
</div>
<div class="partner-logo">
<img src="homePages/images/hongan-logo.png" alt="Hồng An" />
</div>
<div class="partner-logo">
<img src="homePages/images/ciec-logo.png?v=1.0" alt="CIEC" />
</div>
</div>
</div>
</section>
<!-- END OF PARTNERS SECTION HTML -->
<!-- Footer Component -->
<div id="footer"></div>
<script src="homePages/homeMain.js?v=1.1"></script>
<script src="/components/header/header.js"></script>
</body>
</html>