This commit is contained in:
annv
2023-05-09 14:41:18 +07:00
parent 23cbfd5326
commit 492feb64bd
40 changed files with 3386 additions and 0 deletions

View File

@@ -0,0 +1,30 @@
//SWIPER SLIDER SHOWCASE
function swiperBannerHome() {
const swiperAnimation = new SwiperAnimation();
new Swiper(".swiperBannerHomepage", {
slidesPerView: 1,
spaceBetween: 12,
centeredSlides: true,
loop: true,
speed: 2000,
autoplay: {
delay: 4000,
pauseOnMouseEnter: false,
disableOnInteraction: true,
},
lazy: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
init: function () {
swiperAnimation.init(this).animate();
},
slideChange: function () {
swiperAnimation.init(this).animate();
},
},
});
}
swiperBannerHome();

Binary file not shown.

After

Width:  |  Height:  |  Size: 812 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 678 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 337 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 562 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 610 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 699 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 818 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

View File

@@ -0,0 +1,409 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thai cuc quyen</title>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./library.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<header>
<div class="box-header box-header-pc">
<div class=" container d-flex justify-content-between align-items-center">
<div class="header-left d-flex align-items-center">
<img src="./img/logo.png" alt="logo" class="logo">
<p class="title">CLB Thái Cực Quyền <br> Dương Thị Uông Mạch Hà Nội </p>
</div>
<div class="header-right">
<a href="/">Home</a>
<a href="gioi-thieu">Giới thiệu</a>
<a href="#">Địa điểm</a>
<a href="">Thư viện ảnh</a>
<a href="">Bài viết</a>
<a href="">Liên hệ</a>
<a href="https://www.facebook.com/thaicucquyenduongthi/"><i class="fa-brands fa-facebook"></i></a>
</div>
</div>
</div>
<div class="box-header-mobile justify-content-between align-items-center">
<a href="javascript:void(0)" class="fa-solid fa-bars" onclick="_showMenu()"></a>
<div class="header-center-mobile d-flex align-items-center">
<img src="./img/logo-mobile.png" alt="logo" class="logo">
<p class="title">CLB Thái Cực Quyền <br> Dương Thị Uông Mạch Hà Nội </p>
</div>
<a href="https://www.facebook.com/thaicucquyenduongthi/" class="header-mobile-right"><i class="fa-brands fa-facebook"></i></a>
</div>
</header>
<section class="homepage ">
<div class="box-home-banner">
<div class="banner-home swiper swiperBannerHomepage">
<div class="swiper-wrapper">
<div class="item swiper-slide">
<a href="#" class="img">
<img src="./img/banner-home.jpg" alt="banner-homepage" class="swiper-lazy lazy">
</a>
<div class="container banner-content">
<div class="" data-swiper-animation="animate__fadeInUp"
data-duration="2s"
data-swiper-out-animation="animate__fadeOutDown"
data-out-duration=".2s">
<div class="title" >
<h2>Thái Cực Quyền Dương Thị Uông Mạch</h2>
</div>
<div class="title">
<h2>Mang Thái Cực Quyền đến với cộng đồng</h2>
</div>
<div class="btn-banner">
<a href="#" class="btn-register-banner font-weight-700">Đăng ký</a>
</div>
</div>
</div>
</div>
<div class="item swiper-slide">
<a href="#" class="img">
<img src="./img/banner-home.jpg" alt="banner-homepage" class="swiper-lazy lazy">
</a>
<div class="container banner-content">
<div class="" data-swiper-animation="animate__fadeInUp"
data-duration="2s"
data-swiper-out-animation="animate__fadeOutDown"
data-out-duration=".2s">
<div class="title">
<h2 >Thái Cực Quyền Dương Thị Uông Mạch</h2>
</div>
<div class="title">
<h2>Mang Thái Cực Quyền đến với cộng đồng</h2>
</div>
<div class="btn-banner">
<a href="#" class="btn-register-banner font-weight-700">Đăng ký</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="box-main-hompage">
<div class="box-descreption-home container">
<h2 class="title font-weight-700">Công viên Bách Thảo và 25 Giang Văn Minh</h2>
<p class="text">Tham gia với chúng tôi tại Công viên Bách Thảo và 25 Giang Văn Minh để tham gia các lớp Thái Cực Quyền Dương Thị Uông Mạch</p>
<h3>CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội đã và đang quảng bá những lợi ích của thái cực quyền thông qua nhận thức cộng đồng, hướng dẫn và đào tạo cá nhân, và phục vụ cộng đồng.</h3>
<div class="list-descreption-home grid grid--3-cols">
<div class="item-descreption-home">
<div class="item-title d-flex align-items-center justify-content-between">
<div class="underline"></div>
<div class="title-center">
<h4 class="font-weight-600">Nhận thức</h4>
</div>
<div class="underline"></div>
</div>
<div class="item-text">
Bằng cách nâng cao nhận thức cộng đồng, chúng tôi khuyến khích mọi người cải thiện chất lượng cuộc sống và đóng góp cho một cộng đồng hài hòa hơn.
</div>
</div>
<div class="item-descreption-home">
<div class="item-title d-flex align-items-center justify-content-between">
<div class="underline"></div>
<div class="title-center">
<h4 class="font-weight-600">Đào tạo</h4>
</div>
<div class="underline"></div>
</div>
<div class="item-text">
Thông qua việc đào tạo đúng cách cho các cá nhân và người hướng dẫn, chúng tôi thúc đẩy các tiêu chuẩn cao nhất và nâng cao những lợi ích lớn nhất của thái cực quyền.
</div>
</div>
<div class="item-descreption-home">
<div class="item-title d-flex align-items-center justify-content-between">
<div class="underline"></div>
<div class="title-center">
<h4 class="font-weight-600">DỊCH VỤ</h4>
</div>
<div class="underline"></div>
</div>
<div class="item-text">
Thông qua dịch vụ cộng đồng, chúng tôi cung cấp những người hướng dẫn để đào tạo các cá nhân và nhóm muốn học thái cực quyền, nhưng những người không đủ tài chính hoặc không thể tham dự.
</div>
</div>
</div>
</div>
<div class="box-banner-about-home">
<div class="banner-about-home-pc">
<a href="#" class="img">
<img src="./img/banner-about-us.png" alt="banner-about-homepage" class="swiper-lazy lazy">
</a>
</div>
<div class="banner-about-home-mobile">
<a href="#" class="img">
<img src="./img/banner-about-mb.png" alt="banner-about-homepage" class="swiper-lazy lazy">
</a>
</div>
<div class="content-banner-about-home">
<h2>Tham gia cùng chúng tôi</h2>
<div class="btn-home">
<a href="#">TÌM HIỂU THÊM</a>
</div>
</div>
</div>
<div class="text-about-trust-home container">
Chúng tôi tin vào sức mạnh của Thái Cực Quyền để thay đổi cuộc sống và cộng đồng tốt đẹp hơn. Chúng tôi cố gắng mỗi ngày.
</div>
<div class="box-support-home">
<div class="container">
<p class="text">Nếu bạn biết ơn tất cả những gì CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội đã làm cho cuộc sống của bạn, vui lòng cân nhắc hỗ trợ hoạt động tiếp cận cộng đồng của chúng tôi. Chúng tôi hoan nghênh sự đóng góp của bất kỳ số lượng nào và đánh giá cao sự hỗ trợ liên tục của bạn.</p>
<div class="btn-home">
<a href="#">HỖ TRỢ</a>
</div>
</div>
</div>
<div class="box-bottom-home grid grid--2-cols container">
<div class="item-text-left">
Nếu bạn biết ơn tất cả những gì CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội đã làm cho cuộc sống của bạn, vui lòng cân nhắc hỗ trợ hoạt động tiếp cận cộng đồng của chúng tôi. Chúng tôi hoan nghênh sự đóng góp của bất kỳ số lượng nào và đánh giá cao sự hỗ trợ liên tục của bạn. Nếu bạn biết ơn tất cả những gì CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội đã làm cho cuộc sống của bạn, vui lòng cân nhắc hỗ trợ hoạt động tiếp cận cộng đồng của chúng tôi. Chúng tôi hoan nghênh sự đóng góp của bất kỳ số lượng nào và đánh giá cao sự hỗ trợ liên tục của bạn.
</div>
<div class="item-text-right">
Nếu bạn biết ơn tất cả những gì CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội đã làm cho cuộc sống của bạn, vui lòng cân nhắc hỗ trợ hoạt động tiếp cận cộng đồng của chúng tôi. Chúng tôi hoan nghênh sự đóng góp của bất kỳ số lượng nào và đánh giá cao sự hỗ trợ liên tục của bạn. Nếu bạn biết ơn tất cả những gì CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội đã làm cho cuộc sống của bạn, vui lòng cân nhắc hỗ trợ hoạt động tiếp cận cộng đồng của chúng tôi. Chúng tôi hoan nghênh sự đóng góp của bất kỳ số lượng nào và đánh giá cao sự hỗ trợ liên tục của bạn.
</div>
</div>
</div>
</section>
<section class="about-us-page hide">
<div class="box-content-page d-flex justify-content-between container">
<div class="box-content-page-left">
<h2 class="title font-weight-600">
CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội là một tổ chức nhằm nâng cao sức khỏe về thể chất, trí óc và tinh thần thông qua việc luyện tập thái cực quyền và các nghệ thuật liên quan.
</h2>
<p style="margin-bottom: 12px;">Các hoạt động chính của chúng tôi có liên quan đến nhau và kéo dài</p>
<h3 class="font-weight-700">Chương trình sức khỏe người cao tuổi </h3>
<p>Chúng tôi đã đạt được thành công to lớn với một chương trình giảng dạy được phát triển đặc biệt, phù hợp với mọi trình độ thể dục và dễ học. Vui lòng liên hệ với chúng tôi để biết thông tin về việc tham gia, để nhận các lớp học về sức khỏe người cao tuổi hoặc để tình nguyện</p>
<h3 class="font-weight-700">Phát triển chương trình giảng dạy</h3>
<p>Là một hệ thống rèn luyện năng lượng đơn giản được sinh ra để luyện tập và dạy võ thuật cấp cao, được phát triển đặc biệt cho người cao niên như một bộ bài tập dễ học để tăng sức mạnh, tính linh hoạt, sự cân bằng và năng lượng mà ngay cả những người có thể chất hạn chế hoặc mức độ thể lực giảm cũng có thể tiếp cận được. Tuy nhiên, năng lượng tác động thấp và hiệu ứng liên kết cũng khiến các bài tập trở thành một hình thức tập luyện phổ biến cho mọi người ở mọi lứa tuổi, đặc biệt là những người bị căng thẳng hoặc dành nhiều thời gian ngồi trước máy tính. Vui lòng liên hệ với chúng tôi để biết thông tin về các lớp CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội</p>
<div class="btn-content-page btn-content-page-left">
<a href="#">ĐĂNG KÝ</a>
</div>
</div>
<div class="box-content-page-right">
<img src="./img/about-us.png" alt="about-us">
<div class="btn-content-page btn-content-page-right">
<a href="#">ĐĂNG KÝ</a>
</div>
</div>
</div>
</section>
<section class="location-page hide">
<div class="box-content-page d-flex justify-content-between container" style="gap: 40px;">
<div class="box-content-page-left">
<h2 class="title font-weight-600">
CLB Thái Cực Quyền Dương Thị Uông Mạch Tại Công Viên Bách Thảo
</h2>
<p style="margin-bottom: 12px;">Các hoạt động chính của chúng tôi có liên quan đến nhau và kéo dài</p>
<h3 class="font-weight-700">Chương trình sức khỏe người cao tuổi </h3>
<p>Chúng tôi đã đạt được thành công to lớn với một chương trình giảng dạy được phát triển đặc biệt, phù hợp với mọi trình độ thể dục và dễ học. Vui lòng liên hệ với chúng tôi để biết thông tin về việc tham gia, để nhận các lớp học về sức khỏe người cao tuổi hoặc để tình nguyện</p>
<h3 class="font-weight-700">Phát triển chương trình giảng dạy</h3>
<p>Là một hệ thống rèn luyện năng lượng đơn giản được sinh ra để luyện tập và dạy võ thuật cấp cao, được phát triển đặc biệt cho người cao niên như một bộ bài tập dễ học để tăng sức mạnh, tính linh hoạt, sự cân bằng và năng lượng mà ngay cả những người có thể chất hạn chế hoặc mức độ thể lực giảm cũng có thể tiếp cận được. Tuy nhiên, năng lượng tác động thấp và hiệu ứng liên kết cũng khiến các bài tập trở thành một hình thức tập luyện phổ biến cho mọi người ở mọi lứa tuổi, đặc biệt là những người bị căng thẳng hoặc dành nhiều thời gian ngồi trước máy tính. Vui lòng liên hệ với chúng tôi để biết thông tin về các lớp CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội</p>
</div>
<div class="box-content-page-right">
<img src="./img/location 1.png" alt="about-us">
</div>
</div>
<div class="btn-content-page">
<a href="#">TÌM HIỂU THÊM</a>
</div>
<div class="box-content-page d-flex justify-content-between container">
<div class="box-content-page-left">
<h2 class="title font-weight-600">
CLB Thái Cực Quyền Dương Thị Uông Mạch Tại 25 Giang văn Minh.
</h2>
<p style="margin-bottom: 12px;">Các hoạt động chính của chúng tôi có liên quan đến nhau và kéo dài</p>
<h3 class="font-weight-700">Chương trình sức khỏe người cao tuổi </h3>
<p>Chúng tôi đã đạt được thành công to lớn với một chương trình giảng dạy được phát triển đặc biệt, phù hợp với mọi trình độ thể dục và dễ học. Vui lòng liên hệ với chúng tôi để biết thông tin về việc tham gia, để nhận các lớp học về sức khỏe người cao tuổi hoặc để tình nguyện</p>
<h3 class="font-weight-700">Phát triển chương trình giảng dạy</h3>
<p>Là một hệ thống rèn luyện năng lượng đơn giản được sinh ra để luyện tập và dạy võ thuật cấp cao, được phát triển đặc biệt cho người cao niên như một bộ bài tập dễ học để tăng sức mạnh, tính linh hoạt, sự cân bằng và năng lượng mà ngay cả những người có thể chất hạn chế hoặc mức độ thể lực giảm cũng có thể tiếp cận được. Tuy nhiên, năng lượng tác động thấp và hiệu ứng liên kết cũng khiến các bài tập trở thành một hình thức tập luyện phổ biến cho mọi người ở mọi lứa tuổi, đặc biệt là những người bị căng thẳng hoặc dành nhiều thời gian ngồi trước máy tính. Vui lòng liên hệ với chúng tôi để biết thông tin về các lớp CLB Thái Cực Quyền Dương Thị Uông Mạch Hà Nội</p>
<div class="btn-content-page">
<a href="#">TÌM HIỂU THÊM</a>
</div>
</div>
<div class="box-content-page-right">
<img src="./img/location 2.png" alt="about-us">
</div>
</div>
</section>
<section class="photos-images-page hide">
<div class="box-list-photos-images container d-flex align-items-center flex-wrap">
<div class="item-photos-image">
<a href="#" class="item-img">
<img src="./img/photos.png" alt="item-photos">
<div class="time-item-img">
<p class="font-weight-700">06</p>
<span>TH04</span>
</div>
</a>
<p class="title">Khoảnh khắc 2023</p>
</div>
<div class="item-photos-image">
<a href="#" class="item-img">
<img src="./img/photos.png" alt="item-photos">
<div class="time-item-img">
<p class="font-weight-700">06</p>
<span>TH04</span>
</div>
</a>
<p class="title">Khoảnh khắc 2023</p>
</div>
<div class="item-photos-image">
<a href="#" class="item-img">
<img src="./img/photos.png" alt="item-photos">
<div class="time-item-img">
<p class="font-weight-700">06</p>
<span>TH04</span>
</div>
</a>
<p class="title">Khoảnh khắc 2023</p>
</div>
<div class="item-photos-image">
<a href="#" class="item-img">
<img src="./img/photos.png" alt="item-photos">
<div class="time-item-img">
<p class="font-weight-700">06</p>
<span>TH04</span>
</div>
</a>
<p class="title">Khoảnh khắc 2023</p>
</div>
<div class="item-photos-image">
<a href="#" class="item-img">
<img src="./img/photos.png" alt="item-photos">
<div class="time-item-img">
<p class="font-weight-700">06</p>
<span>TH04</span>
</div>
</a>
<p class="title">Khoảnh khắc 2023</p>
</div>
</div>
</section>
<section class="contact-page hide">
<div class="box-contact container d-flex justify-content-between">
<div class="box-contact-left">
<div class="box-title d-flex justify-content-between align-items-center">
<div class="item-title d-flex align-items-center">
<img src="./img/email-contact.png" alt="email">
<div class="text">
<p>Email</p>
<p>nguyen.dinh.khue.tj@gmail.com</p>
</div>
</div>
<div class="item-title d-flex align-items-center">
<img src="./img/adress-contact.png" alt="email">
<div class="text">
<p>Địa chỉ</p>
<p>25 Giang Văn Minh</p>
</div>
</div>
<div class="item-title d-flex align-items-center">
<img src="./img/phone-contact.png" alt="email">
<div class="text">
<p>Số điện thoại</p>
<p>097 594 36 86</p>
</div>
</div>
</div>
<div class="img-contact">
<img src="./img/img-contact.png" alt="">
</div>
</div>
<div class="box-contact-right">
<p>Họ và tên</p>
<input type="text" placeholder="Nhập họ và tên" id="contact_name" />
<p>Email</p>
<input type="text" placeholder="Nhập Email" id="contact_email" />
<p>Số điện thoại</p>
<input type="text" placeholder="Nhập số điện thoại" id="contact_tel" />
<p>Lời nhắn</p>
<textarea placeholder="Nhập lời nhắn" id="contact_message" ></textarea>
<div class="btn-contact">
<a href="javascript:void(0)" class="submit-form d-block m-auto font-600 bg-red text-white" onclick="check_form_contact_detail()"> ĐĂNG KÝ </a>
</div>
</div>
</div>
</section>
<section class="arrticle-page hide">
<div class="box-article-home container">
<div class="box-list-arrticle d-flex flex-wrap align-items-center justify-content-between">
<div class="item-arrticle">
<div class="img-item">
<img src="./img/news-item.png" alt="article">
</div>
<a href="#" class="title-item font-weight-600">Offline tháng 3 (26/3/2023)</a>
<span class="time-item">Đăng tải | 16.10.2022</span>
<p class="text line-clamp-3 font-weight-500">Buổi offline tháng 7 của câu lạc bộ đa số là những thành viên mới tham gia clb với nhiều thắc mắc trong khi tập. Đây là cơ hội tốt để mọi người cùng trao đổi</p>
</div>
<div class="item-arrticle">
<div class="img-item">
<img src="./img/news-item.png" alt="article">
</div>
<a href="#" class="title-item font-weight-600">Offline tháng 3 (26/3/2023)</a>
<span class="time-item">Đăng tải | 16.10.2022</span>
<p class="text line-clamp-3 font-weight-500">Buổi offline tháng 7 của câu lạc bộ đa số là những thành viên mới tham gia clb với nhiều thắc mắc trong khi tập. Đây là cơ hội tốt để mọi người cùng trao đổi</p>
</div>
<div class="item-arrticle">
<div class="img-item">
<img src="./img/news-item.png" alt="article">
</div>
<a href="#" class="title-item font-weight-600">Offline tháng 3 (26/3/2023)</a>
<span class="time-item">Đăng tải | 16.10.2022</span>
<p class="text line-clamp-3 font-weight-500">Buổi offline tháng 7 của câu lạc bộ đa số là những thành viên mới tham gia clb với nhiều thắc mắc trong khi tập. Đây là cơ hội tốt để mọi người cùng trao đổi</p>
</div>
<div class="item-arrticle">
<div class="img-item">
<img src="./img/news-item.png" alt="article">
</div>
<a href="#" class="title-item font-weight-600">Offline tháng 3 (26/3/2023)</a>
<span class="time-item">Đăng tải | 16.10.2022</span>
<p class="text line-clamp-3 font-weight-500">Buổi offline tháng 7 của câu lạc bộ đa số là những thành viên mới tham gia clb với nhiều thắc mắc trong khi tập. Đây là cơ hội tốt để mọi người cùng trao đổi</p>
</div>
</div>
</div>
</section>
<footer>
<div class="box-footer">
<p>Copyright 2023 Duong Thi Uong Mach Ha Noi | Copyright Registered.</p>
</div>
<div class="global-fixed-right">
<a href="javascript:window.scrollTo({ top: 0, behavior: 'smooth' });" class="scroll-top-btn d-flex align-items-center justify-content-center" title="Di chuyển lên đầu trang!" style="display: flex;"></a>
</div>
</footer>
<script src="./library.js"></script>
<script src="./homepage.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff