MinhQuan/PresentCorpo
0
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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/aboutPages/aboutMain.css
+401
View File
@@ -0,0 +1,401 @@
/* views\aboutPage\aboutMain.css */
/* GENERAL STYLES */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
/* Ensure visited links don't turn purple */
a:visited {
color: inherit;
}
/* Optional: Keep hover state consistent */
a:hover {
text-decoration: none;
color: inherit;
}
/* Optional: Keep active state consistent */
a:active {
color: inherit;
}
/* Hero Section */
.hero {
width: 100%;
height: 450px;
overflow: hidden;
position: relative;
}
.hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* About Section */
.about-section {
padding: 40px 5%;
background-color: #f5f5f5;
}
.about-content {
display: flex;
align-items: flex-start;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.about-image {
flex: 0.5;
position: relative;
}
.about-text {
flex: 1;
text-align: left;
}
.page-intro {
font-size: 32px;
color: #e85c41;
margin-bottom: 0;
font-weight: bold;
text-align: left;
}
.sub-intro {
font-size: 28px;
color: #006241;
margin-top: 5px;
margin-bottom: 20px;
font-weight: bold;
}
.about-text p {
margin-bottom: 20px;
font-size: 18px;
color: #006241;
line-height: 1.6;
}
.video-wrapper {
position: relative;
border-radius: 10px;
overflow: hidden;
}
.about-image img {
width: 100%;
display: block;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.play-button i {
font-size: 30px;
color: #e85c41;
}
/* Development History Section */
.history-section {
padding: 40px 5%;
background-color: #fff;
}
.history-content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.section-title {
font-size: 28px;
color: #e85c41;
margin-bottom: 40px;
font-weight: bold;
}
.timeline {
display: flex;
justify-content: space-between;
position: relative;
margin-top: 20px;
}
/* The main horizontal line */
.timeline::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 10px;
height: 2px;
background-color: #e85c41;
z-index: 1;
}
.timeline-item {
position: relative;
flex: 1;
text-align: center;
padding: 0 10px;
padding-top: 30px;
z-index: 2;
}
/* Vertical line marks replacing dots */
.timeline-item::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background-color: #e85c41;
z-index: 3;
}
.timeline-year {
font-size: 20px;
color: #006241;
font-weight: bold;
margin-bottom: 10px;
margin-top: 20px;
}
.timeline-description {
font-size: 16px;
color: #333;
line-height: 1.6;
}
/* Business Culture Section Styles */
.business-culture-section {
padding: 40px 5%;
background-color: #fff;
border: 1px solid #e84e0f;
margin: 40px 5%;
border-radius: 5px;
}
.culture-content {
max-width: 1200px;
margin: 0 auto;
}
.culture-container {
display: flex;
gap: 30px;
}
.culture-left,
.culture-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 25px;
}
.culture-item {
display: flex;
flex-direction: column;
gap: 15px;
}
.culture-title {
font-size: 26px;
color: white;
background-color: #e85c41;
padding: 12px 25px;
border-radius: 20px;
display: inline-block;
text-align: center;
margin: 0 auto;
}
.culture-text {
padding: 0 10px;
}
.culture-text p {
font-size: 18px;
color: #006241;
line-height: 1.7;
margin-bottom: 0;
}
.culture-image {
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: 180px;
}
.culture-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.culture-image img:hover {
transform: scale(1.05);
}
/* Management Team Section Styles */
.management-team-section {
padding: 40px 5%;
background-color: #fff;
margin: 40px 0;
}
.team-content {
max-width: 1200px;
margin: 0 auto;
}
.team-members {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.team-member {
flex: 1;
min-width: 250px;
max-width: 350px;
text-align: center;
padding: 0 15px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.team-member:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background-color: #e0e0e0;
}
.member-image {
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.member-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-info {
width: 100%;
}
.member-name {
font-size: 24px;
color: #333;
margin-bottom: 8px;
font-weight: bold;
}
.member-position {
font-size: 18px;
color: #30875f;
font-weight: normal;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero {
height: 300px;
}
.about-content {
flex-direction: column;
}
.timeline {
flex-direction: column;
align-items: center;
padding: 60px 0 20px;
}
.timeline::before {
display: none;
}
.timeline-item {
margin-bottom: 30px;
}
.timeline-item::before {
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.culture-container {
flex-direction: column;
}
.culture-title {
width: 100%;
text-align: center;
}
.team-members {
flex-direction: column;
align-items: center;
}
.team-member {
max-width: 100%;
margin-bottom: 40px;
}
.team-member:not(:last-child)::after {
display: none;
}
}
views/aboutPages/aboutMain.html
+418
View File
@@ -0,0 +1,418 @@
<!-- views/aboutPages/aboutMain.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 - Giới Thiệu</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="aboutPages/aboutMain.css" />
</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>
<!-- Main Content -->
<div class="hero">
<img
src="https://ik.imagekit.io/1e8470bv5/about-banner.png?updatedAt=1750347696406"
alt="About Banner"
/>
</div>
<!----- ABOUT SECTION HTML ----->
<section class="about-section" id="gioi-thieu">
<div class="about-content">
<div class="about-image">
<div class="video-wrapper">
<img
src="https://i.imgur.com/738wFGw.png"
alt="Kỹ thuật viên Kỳ Long"
/>
<div class="play-button">
<i class="fa fa-play-circle"></i>
</div>
</div>
</div>
<div class="about-text">
<h1 class="page-intro">Công ty TNHH Thương Mại Dịch Vụ Kỳ Long</h1>
<h2 class="sub-intro"></h2>
<p>
Chào mừng bạn đến với Công ty KỲ LONG, một công ty năng lượng uy tín
có nhiều kinh nghiệm trong công việc cung cấp khí đốt tự nhiên cho
các khách hàng công nghiệp.
</p>
<p>
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à
cung cấp đổ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>
Đội ngũ kỹ sư tận tâm của chúng tôi đảm bảo sự mịn màng và tối ưu
hóa năng lượng thụ dưỡ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 tiếp theo.
</p>
<p>
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>
</div>
</section>
<!----- DEVELOPMENT HISTORY SECTION HTML ----->
<section class="history-section" id="lich-su-phat-trien">
<div class="history-content">
<h2 class="section-title">Lịch Sử Phát Triển</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-year">2010</div>
<div class="timeline-description">
Thành lập công ty và bắt đầu hoạt động trong lĩnh vực cung cấp khí
đốt công nghiệp.
</div>
</div>
<div class="timeline-item">
<div class="timeline-year">2011</div>
<div class="timeline-description">
Mở rộng quy mô hoạt động và thiết lập quan hệ đối tác với các nhà
cung cấp lớn.
</div>
</div>
<div class="timeline-item">
<div class="timeline-year">2013</div>
<div class="timeline-description">
Triển khai các dự án lớn và tăng cường năng lực sản xuất.
</div>
</div>
<div class="timeline-item">
<div class="timeline-year">2014</div>
<div class="timeline-description">
Phát triển các giải pháp năng lượng tiên tiến và bền vững.
</div>
</div>
<div class="timeline-item">
<div class="timeline-year">2015</div>
<div class="timeline-description">
Mở rộng thị trường và tăng cường dịch vụ khách hàng.
</div>
</div>
<div class="timeline-item">
<div class="timeline-year">2016</div>
<div class="timeline-description">
Đầu tư vào công nghệ mới và nâng cao chất lượng sản phẩm.
</div>
</div>
<div class="timeline-item">
<div class="timeline-year">2017</div>
<div class="timeline-description">
Khẳng định vị thế là một trong những nhà cung cấp khí đốt hàng đầu
trong khu vực.
</div>
</div>
</div>
</div>
</section>
<!----- BUSINESS CULTURE SECTION HTML ----->
<section class="business-culture-section" id="van-hoa-doanh-nghiep">
<div class="culture-content">
<h2 class="section-title">Văn Hoá Doanh Nghiệp</h2>
<div class="culture-container">
<div class="culture-left">
<div class="culture-item">
<h3 class="culture-title">Tầm Nhìn</h3>
<div class="culture-text">
<p>
Tại <strong>Kỳ Long</strong>, chúng tôi luôn đề cao việc học
hỏi và cải tiến. Bằng việc không ngừng đổi mới, chúng tôi luôn
hướng đến mục tiêu dẫn đầu ngành năng lượng.
</p>
</div>
</div>
<div class="culture-image middle-image">
<img
src="https://i.imgur.com/l5eqS2D.png"
alt="Gas Transport Systems"
/>
</div>
<div class="culture-item">
<h3 class="culture-title">Triết Lý Kinh Doanh</h3>
<div class="culture-text">
<p>
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. 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.
</p>
</div>
</div>
</div>
<div class="culture-right">
<div class="culture-image">
<img
src="https://i.imgur.com/3xts2iI.png"
alt="Industrial Gas Facility"
/>
</div>
<div class="culture-item">
<h3 class="culture-title">Sứ Mệnh</h3>
<div class="culture-text">
<p>
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. 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.
</p>
</div>
</div>
<div class="culture-image">
<img
src="https://i.imgur.com/eOMemEG.png"
alt="Kỹ thuật viên Kỳ Long"
/>
</div>
</div>
</div>
</div>
</section>
<!----- MANAGEMENT TEAM SECTION HTML ----->
<section class="management-team-section" id="doi-ngu-quan-ly">
<div class="team-content">
<h2 class="section-title">Đội ngũ quản lý</h2>
<div class="team-members">
<div class="team-member">
<div class="member-image">
<img
src="https://i.imgur.com/yQz0eeM.png"
alt="Trần Kỳ Phong - Giám đốc điều hành"
/>
</div>
<div class="member-info">
<h3 class="member-name">Trần Kỳ Phong</h3>
<p class="member-position">Giám đốc điều hành</p>
</div>
</div>
<div class="team-member">
<div class="member-image">
<img
src="https://i.imgur.com/miUmz82.jpeg"
alt="Jonas Guiliani - Giám đốc mua hàng"
/>
</div>
<div class="member-info">
<h3 class="member-name">Jonas Guiliani</h3>
<p class="member-position">Giám đốc mua hàng</p>
</div>
</div>
<div class="team-member">
<div class="member-image">
<img
src="https://i.imgur.com/lIeYaAP.png"
alt="Nguyễn Hoàng Long - Giám đốc vận hành"
/>
</div>
<div class="member-info">
<h3 class="member-name">Nguyễn Hoàng Long</h3>
<p class="member-position">Giám đốc vận hành</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer Component -->
<div id="footer"></div>
<!-- Scripts -->
<script src="/components/header/header.js"></script>
<script src="aboutPages/aboutMain.js?v=1.0"></script>
</body>
</html>
views/aboutPages/aboutMain.js
+6
View File
@@ -0,0 +1,6 @@
// Load footer
fetch("components/footer/footer.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("footer").innerHTML = data;
});