Website Nhóm Nhạc The Band

Một trang web nhóm nhạc hư cấu có thiết kế responsive, giới thiệu nhóm nhạc với lịch trình tour, thông tin thành viên và chi tiết liên hệ. Dự án này thể hiện các kỹ thuật phát triển web hiện đại sử dụng HTML, CSS và nguyên tắc thiết kế responsive.

🎵 Giới Thiệu

Đây là trang web nhóm nhạc hư cấu bao gồm:

• Thông Tin Nhóm Nhạc: Gặp gỡ các thành viên (Minji, Haerin và Danielle)
• Lịch Trình Tour: Các buổi hòa nhạc sắp tới và tình trạng vé
• Form Liên Hệ: Liên lạc với nhóm nhạc
• Thiết Kế Responsive: Tối ưu cho máy tính, máy tính bảng và điện thoại di động

🚀 Bắt Đầu

Yêu Cầu Hệ Thống

Không cần phần mềm đặc biệt! Đây là trang web tĩnh chạy trên bất kỳ trình duyệt web hiện đại nào.

Cài Đặt

1. Clone repository:

   git clone https://github.com/zienk/TheBand-Website.git

2. Di chuyển đến thư mục dự án:

   cd TheBand-Website

3. Mở index.html trong trình duyệt web hoặc chạy bằng local web server.

Chạy Với Local Server

Để có trải nghiệm tốt nhất, hãy chạy trang web bằng local server:

# Sử dụng Python 3
python -m http.server 8000

# Sử dụng Node.js (nếu đã cài http-server)
npx http-server

# Sử dụng PHP
php -S localhost:8000

Sau đó mở http://localhost:8000 trong trình duyệt.

📁 Cấu Trúc Dự Án

TheBand-Website/
├── index.html              # File HTML chính
├── README.md              # Tài liệu dự án
└── assets/
    ├── css/
    │   ├── style.css      # File CSS chính
    │   └── responsive.css # CSS cho thiết kế responsive
    ├── fonts/
    │   └── themify-icons-font/ # File font icon
    └── img/
        ├── band/          # Ảnh thành viên nhóm nhạc
        ├── places/        # Ảnh địa điểm tour
        ├── slider/        # Ảnh phần hero
        └── map/           # Ảnh phần liên hệ

🎨 Tính Năng

• Navigation Responsive: Menu điều hướng thân thiện với mobile có hamburger menu
• Phần Hero: Slider bắt mắt với thông tin nhóm nhạc
• Phần Nhóm Nhạc: Giới thiệu thành viên với ảnh
• Phần Tour: Lịch trình tour tương tác với tình trạng vé
• Phần Liên Hệ: Form liên hệ và thông tin vị trí
• Icon Hiện Đại: Themify Icons cho các phần tử UI

🛠️ Công Nghệ Sử Dụng

• HTML5: Cấu trúc markup ngữ nghĩa
• CSS3: Styling hiện đại với Flexbox và Grid
• Responsive Design: Phương pháp mobile-first
• Themify Icons: Font icon cho các phần tử UI

🌐 Hỗ Trợ Trình Duyệt

Trang web tương thích với tất cả trình duyệt hiện đại bao gồm:

• Chrome (phiên bản mới nhất)
• Firefox (phiên bản mới nhất)
• Safari (phiên bản mới nhất)
• Edge (phiên bản mới nhất)

📱 Breakpoint Responsive

Trang web thích ứng với các kích thước màn hình khác nhau:

• Desktop: 1024px trở lên
• Tablet: 768px - 1023px
• Mobile: Dưới 768px

🤝 Đóng Góp

Hãy thoải mái fork dự án này và gửi pull request cho bất kỳ cải tiến nào!

📄 Giấy Phép

Dự án này là mã nguồn mở và có sẵn dưới Giấy phép MIT.

👨‍💻 Tác Giả

Được tạo bởi ZienK - Một minh chứng cho các thực hành phát triển web hiện đại.

---

Hãy thưởng thức việc khám phá trang web nhóm nhạc hư cấu này! 🎸🎤