Website Du Lịch - Bài Tập Web Development

Mô Tả

Website du lịch được tạo ra để hoàn thành bài tập web development với đầy đủ các yêu cầu kỹ thuật.

Cấu Trúc Website

• index.html - Trang chủ với 3 hình ảnh nổi bật
• gallery.html - Thư viện ảnh với 5 hình ảnh (đáp ứng yêu cầu tối thiểu)
• about.html - Trang giới thiệu với 1 hình ảnh
• styles.css - File CSS chứa tất cả styling

Các Tính Năng Đã Triển Khai

1. Liên Kết "Chuyển đến nội dung chính"

• Sử dụng position: absolute và :focus pseudo-class
• Chỉ hiển thị khi được focus (nhấn Tab)
• Có transition mượt mà

2. Navigation Hấp Dẫn

• Sử dụng Flexbox layout
• Gradient background
• Hover effects với transform và box-shadow
• Sticky positioning
• Responsive design

3. Box Model cho Hình Ảnh

• Border: 3px solid white
• Padding: 10px
• Border-radius: 15px (và các giá trị khác nhau)
• Box-shadow cho hiệu ứng 3D

4. CSS Grid

• .image-grid: Grid layout cho featured images
• .about-grid: Grid 2 cột cho trang about
• Responsive với auto-fit

5. CSS Flexbox

• .main-nav ul: Navigation menu
• .gallery-flex: Layout cho gallery images
• Responsive với flex-wrap

6. Hover Effects

• Transform: scale và rotate
• Box-shadow transitions
• Smooth transitions (0.3s ease)

7. nth-child Selector

• .gallery-flex img:nth-child(odd): border-radius 25px
• .gallery-flex img:nth-child(even): border-radius 50px

Cách Sử Dụng

1. Mở Website

Mở file index.html trong trình duyệt để xem trang chủ.

2. Kiểm Tra Accessibility

• Nhấn Tab để kiểm tra skip link
• Sử dụng keyboard navigation
• Kiểm tra contrast và readability

3. Validation

Để validate code, sử dụng:

• HTML: https://validator.w3.org/
• CSS: https://jigsaw.w3.org/css-validator/
• Accessibility: https://wave.webaim.org/

Hình Ảnh

Website sử dụng 5 hình ảnh có sẵn trong folder:

• 1.png, 2.png, 3.png, 4.png, 5.png

Responsive Design

Website được thiết kế responsive và hoạt động tốt trên:

• Desktop
• Tablet
• Mobile

Browser Support

• Chrome, Firefox, Safari, Edge (các phiên bản hiện đại)
• CSS Grid và Flexbox được hỗ trợ rộng rãi