|
|
<!DOCTYPE html> |
|
|
<html lang="vi"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Bida Sang Trọng - Trang Chủ</title> |
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-dark: #0a0a0a; |
|
|
--secondary-dark: #1a1a1a; |
|
|
--accent-gold: #d4af37; |
|
|
--accent-red: #c1272d; |
|
|
--text-light: #f0f0f0; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: var(--primary-dark); |
|
|
color: var(--text-light); |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.navbar { |
|
|
background-color: rgba(10, 10, 10, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border-bottom: 1px solid var(--accent-gold); |
|
|
} |
|
|
|
|
|
.navbar-brand { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-weight: 900; |
|
|
color: var(--accent-gold) !important; |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
color: var(--text-light) !important; |
|
|
font-weight: 500; |
|
|
position: relative; |
|
|
margin: 0 10px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover, .nav-link.active { |
|
|
color: var(--accent-gold) !important; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background-color: var(--accent-gold); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after, .nav-link.active::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.banner { |
|
|
height: 100vh; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.banner-video { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.banner-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.9)); |
|
|
z-index: 0; |
|
|
} |
|
|
|
|
|
.banner-content { |
|
|
text-align: center; |
|
|
z-index: 1; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.banner-title { |
|
|
font-size: 4rem; |
|
|
font-weight: 900; |
|
|
color: var(--accent-gold); |
|
|
text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.banner-subtitle { |
|
|
font-size: 1.5rem; |
|
|
max-width: 800px; |
|
|
margin: 0 auto 30px; |
|
|
font-weight: 300; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
position: relative; |
|
|
text-align: center; |
|
|
margin-bottom: 50px; |
|
|
padding-bottom: 20px; |
|
|
} |
|
|
|
|
|
.section-title::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 100px; |
|
|
height: 3px; |
|
|
background: var(--accent-gold); |
|
|
} |
|
|
|
|
|
.event-card { |
|
|
background: var(--secondary-dark); |
|
|
border: 1px solid rgba(212, 175, 55, 0.3); |
|
|
border-radius: 0; |
|
|
overflow: hidden; |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.event-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.3); |
|
|
border-color: var(--accent-gold); |
|
|
} |
|
|
|
|
|
.event-img { |
|
|
height: 200px; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.event-date { |
|
|
background: var(--accent-gold); |
|
|
color: var(--primary-dark); |
|
|
font-weight: bold; |
|
|
padding: 5px 15px; |
|
|
display: inline-block; |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.player-card { |
|
|
background: var(--secondary-dark); |
|
|
border: 1px solid rgba(212, 175, 55, 0.3); |
|
|
border-radius: 0; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s ease; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.player-card:hover { |
|
|
transform: scale(1.03); |
|
|
border-color: var(--accent-gold); |
|
|
} |
|
|
|
|
|
.player-img { |
|
|
height: 300px; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.player-name { |
|
|
color: var(--accent-gold); |
|
|
font-weight: 700; |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.player-rank { |
|
|
color: var(--accent-red); |
|
|
font-weight: 600; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.footer { |
|
|
background: var(--secondary-dark); |
|
|
border-top: 1px solid var(--accent-gold); |
|
|
padding: 50px 0 20px; |
|
|
} |
|
|
|
|
|
.social-icon { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: var(--primary-dark); |
|
|
color: var(--accent-gold); |
|
|
border-radius: 50%; |
|
|
margin: 0 5px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-icon:hover { |
|
|
background: var(--accent-gold); |
|
|
color: var(--primary-dark); |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.copyright { |
|
|
border-top: 1px solid rgba(212, 175, 55, 0.3); |
|
|
padding-top: 20px; |
|
|
margin-top: 30px; |
|
|
text-align: center; |
|
|
font-size: 0.9rem; |
|
|
color: #aaa; |
|
|
} |
|
|
|
|
|
.btn-gold { |
|
|
background: var(--accent-gold); |
|
|
color: var(--primary-dark); |
|
|
border: none; |
|
|
font-weight: 600; |
|
|
padding: 10px 25px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-gold:hover { |
|
|
background: #b8961f; |
|
|
color: var(--primary-dark); |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.btn-outline-gold { |
|
|
border: 1px solid var(--accent-gold); |
|
|
color: var(--accent-gold); |
|
|
} |
|
|
|
|
|
.btn-outline-gold:hover { |
|
|
background: var(--accent-gold); |
|
|
color: var(--primary-dark); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.banner-title { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.banner-subtitle { |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header> |
|
|
<nav class="navbar navbar-expand-lg navbar-dark fixed-top"> |
|
|
<div class="container"> |
|
|
<a class="navbar-brand" href="#"> |
|
|
<i class="fas fa-billiard-ball me-2"></i>BIDA CLUB |
|
|
</a> |
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> |
|
|
<span class="navbar-toggler-icon"></span> |
|
|
</button> |
|
|
<div class="collapse navbar-collapse" id="navbarNav"> |
|
|
<ul class="navbar-nav ms-auto"> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link active" href="#">Trang chủ</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="#events">Sự kiện</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="#players">Cơ thủ</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="#contact">Liên hệ</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="banner"> |
|
|
<video class="banner-video" autoplay muted loop> |
|
|
<source src="https://assets.mixkit.co/videos/preview/mixkit-billiard-balls-on-a-pool-table-2858-large.mp4" type="video/mp4"> |
|
|
</video> |
|
|
<div class="banner-overlay"></div> |
|
|
<div class="banner-content"> |
|
|
<h1 class="banner-title">CLB BIDA SANG TRỌNG</h1> |
|
|
<p class="banner-subtitle">Nơi hội tụ những tay cơ hàng đầu Việt Nam. Trải nghiệm đẳng cấp với không gian hiện đại, trang thiết bị chuyên nghiệp và các giải đấu quy mô quốc gia.</p> |
|
|
<div class="mt-4"> |
|
|
<a href="#events" class="btn btn-gold btn-lg me-3">Xem Sự Kiện</a> |
|
|
<a href="#players" class="btn btn-outline-gold btn-lg">Danh Sách Cơ Thủ</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="events" class="py-5"> |
|
|
<div class="container"> |
|
|
<h2 class="section-title">SỰ KIỆN NỔI BẬT</h2> |
|
|
<div class="row"> |
|
|
|
|
|
<div class="col-lg-4 col-md-6"> |
|
|
<div class="event-card"> |
|
|
<img src="https://images.unsplash.com/photo-1543349689-9a4d426bee8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="img-fluid event-img" alt="Giải Bida Quốc Gia"> |
|
|
<div class="card-body p-4"> |
|
|
<h5 class="card-title">GIẢI BIDA QUỐC GIA 2023</h5> |
|
|
<p class="card-text">Giải đấu danh giá nhất trong năm với sự tham gia của hơn 100 cơ thủ hàng đầu cả nước.</p> |
|
|
<div class="event-date">25-30/08/2023</div> |
|
|
<a href="#" class="btn btn-outline-gold mt-3">Chi tiết</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="col-lg-4 col-md-6"> |
|
|
<div class="event-card"> |
|
|
<img src="https://images.unsplash.com/photo-1610035582144-084138e1000f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="img-fluid event-img" alt="Giải Bida Thành Phố"> |
|
|
<div class="card-body p-4"> |
|
|
<h5 class="card-title">GIẢI BIDA THÀNH PHỐ 2023</h5> |
|
|
<p class="card-text">Sân chơi dành cho các cơ thủ nghiệp dư với giải thưởng hấp dẫn và nhiều cơ hội giao lưu.</p> |
|
|
<div class="event-date">10-15/09/2023</div> |
|
|
<a href="#" class="btn btn-outline-gold mt-3">Chi tiết</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="col-lg-4 col-md-6 mx-auto"> |
|
|
<div class="event-card"> |
|
|
<img src="https://images.unsplash.com/photo-1610035582139-9a4d426bee8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" class="img-fluid event-img" alt="Khóa Học Bida"> |
|
|
<div class="card-body p-4"> |
|
|
<h5 class="card-title">KHÓA HỌC BIDA CƠ BẢN</h5> |
|
|
<p class="card-text">Khóa học dành cho người mới bắt đầu với giảng viên là các cơ thủ chuyên nghiệp.</p> |
|
|
<div class="event-date">05-20/10/2023</div> |
|
|
<a href="#" class="btn btn-outline-gold mt-3">Chi tiết</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="players" class="py-5 bg-dark"> |
|
|
<div class="container"> |
|
|
<h2 class="section-title">DANH SÁCH CƠ THỦ</h2> |
|
|
<div class="row"> |
|
|
|
|
|
<div class="col-lg-3 col-md-6"> |
|
|
<div class="player-card text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" class="img-fluid player-img" alt="Nguyễn Văn A"> |
|
|
<div class="card-body p-4"> |
|
|
<h5 class="player-name">NGUYỄN VĂN A</h5> |
|
|
<p class="player-rank">HẠNG 1 - QUỐC GIA</p> |
|
|
<p class="card-text">Vô địch giải quốc gia 3 lần liên tiếp. Kỹ thuật đánh bi chuẩn xác tuyệt đối.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="col-lg-3 col-md-6"> |
|
|
<div class="player-card text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" class="img-fluid player-img" alt="Trần Thị B"> |
|
|
<div class="card-body p-4"> |
|
|
<h5 class="player-name">TRẦN THỊ B</h5> |
|
|
<p class="player-rank">HẠNG 2 - QUỐC GIA</p> |
|
|
<p class="card-text">Cơ thủ nữ xuất sắc nhất năm. Chiến thắng ấn tượng tại giải quốc tế năm ngoái.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="col-lg-3 col-md-6"> |
|
|
<div class="player-card text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" class="img-fluid player-img" alt="Lê Văn C"> |
|
|
<div class="card-body p-4"> |
|
|
<h5 class="player-name">LÊ VĂN C</h5> |
|
|
<p class="player-rank">HẠNG 3 - QUỐC GIA</p> |
|
|
<p class="card-text">Tân binh xuất sắc năm nay. Phong độ ổn định và khả năng học hỏi nhanh.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="col-lg-3 col-md-6"> |
|
|
<div class="player-card text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" class="img-fluid player-img" alt="Phạm Thị D"> |
|
|
<div class="card-body p-4"> |
|
|
<h5 class="player-name">PHẠM THỊ D</h5> |
|
|
<p class="player-rank">HẠNG 4 - QUỐC GIA</p> |
|
|
<p class="card-text">Cơ thủ trẻ triển vọng. Đã giành nhiều giải thưởng tại các giải trẻ.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer id="contact" class="footer"> |
|
|
<div class="container"> |
|
|
<div class="row"> |
|
|
<div class="col-lg-4 col-md-6 mb-4"> |
|
|
<h4 class="mb-4">CLB BIDA SANG TRỌNG</h4> |
|
|
<p>Trung tâm bida chuyên nghiệp với đội ngũ huấn luyện viên hàng đầu Việt Nam. Môi trường luyện tập lý tưởng cho mọi trình độ.</p> |
|
|
<div class="mt-4"> |
|
|
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="social-icon"><i class="fab fa-youtube"></i></a> |
|
|
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="col-lg-4 col-md-6 mb-4"> |
|
|
<h4 class="mb-4">THÔNG TIN LIÊN HỆ</h4> |
|
|
<ul class="list-unstyled"> |
|
|
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 123 Đường Bida, Quận 1, TP.HCM</li> |
|
|
<li class="mb-2"><i class="fas fa-phone me-2"></i> (028) 1234 5678</li> |
|
|
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@bidasingtrong.vn</li> |
|
|
<li class="mb-2"><i class="fas fa-clock me-2"></i> Thứ Hai - Chủ Nhật: 8:00 - 22:00</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="col-lg-4 col-md-12 mb-4"> |
|
|
<h4 class="mb-4">ĐĂNG KÝ NHẬN TIN</h4> |
|
|
<p>Đăng ký để nhận thông tin sự kiện và ưu đãi mới nhất.</p> |
|
|
<div class="input-group"> |
|
|
<input type="email" class="form-control" placeholder="Email của bạn"> |
|
|
<button class="btn btn-gold">Gửi</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="copyright"> |
|
|
<p>© 2023 CLB Bida Sang Trọng. Tất cả quyền được bảo lưu.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mrname/demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
