Chương 3-Bài 6. Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty

Yêu cầu

Sử dụng Bootstrap & JQuery để tạo trang web giới thiệu về Công ty hoặc Cá nhân, với các yêu cầu sau: 1. Cần tổ chức thư mục theo cấu trúc dự án thường có. Ví dụ như:

website-netashop/                            <- Thư mục gốc của dự án
+---assets/                                  <- Thư mục chứa các file Css, Js, Image, Video, ...
|   \---img/                                 <- Thư mục chứa các ảnh dùng cho Trang web  
|   \---video/                               <- Thư mục chứa các file video dùng cho Trang web
|   \---css/                                 <- Thư mục chứa các file CSS do chúng ta tự viết
|   \---js/                                  <- Thư mục chứa các file JS do chúng ta tự viết
\---vendor/                                  <- Thư mục chứa các thư viện (library) do các nhà cung cấp (vendor) / bên thứ 3 (3rd party)
    +---bootstrap/                           <- Thư viện Bootstrap
    |   +---css/
    |   \---js/
    \---jquery/                              <- Thư viện JQuery
    \---popperjs/                            <- Thư viện PopperJS
\---index.html                               <- File sẽ được chạy đầu tiên khi truy cập vào Trang web, thường đặt tên là index (hay còn gọi là Trang chủ)

2. Thiết kế theo chuẩn responsive (tương thích với mọi thiết bị). 3. Cần có đầy đủ các phân đoạn (section) chính như sau:

• Chào mừng (intro): đây là thành phần chính nằm ở đầu trang
  • Thường là slider hoặc image lớn full màn hình.
• Dịch vụ (services): đây là phần giới thiệu các dịch vụ / khả năng có thể cung cấp của Công ty / Cá nhân
• Danh mục Đầu tư (portfolio): đây là phần giới thiệu danh sách các Dự án / Sản phẩm / Khả năng mà Công ty / Cá nhân đã từng thực hiện
• Giới thiệu (about): đây là phần giới thiệu về Công ty / Cá nhân
• Đội ngũ (team): đây là phần giới thiệu về Đội ngũ Nhân sự / Team / Thành viên / Bạn bè của Công ty / Cá nhân
• Liên hệ (contact): đây là phần chứa Form thông tin giúp Người truy cập có thể gởi yêu cầu liên hệ đến Công ty / Cá nhân

4. Cần có Ràng buộc dữ liệu (validate) cho phần Liên hệ (contact): Phần Liên hệ (contact) cần có các trường thông tin (fields / inputs) và có các ràng buộc sau như sau:

• Họ tên (name):
  • Bắt buộc nhập (required)
  • Chỉ được nhập từ 3 - 150 ký tự.
  • Không được nhập tên là admin, quantri
• Email:
  • Bắt buộc nhập (required)
  • Chỉ được nhập từ 3 - 250 ký tự.
  • Phải nhập đúng định dạng Email
  • Chỉ chấp nhận duy nhất email là GMAIL (@gmail.com)
• Số điện thoại (phone):
  • Bắt buộc nhập (required)
  • Chỉ được nhập từ 3-50 ký tự.
  • Phải nhập đúng định dạng số điện thoại Việt nam quy định:
    • +84-XXXX-XXX-XXX. Ví dụ: +84-915-659-223
• Lời nhắn (message):
  • Bắt buộc nhập (required)
  • Chỉ được nhập từ 3-5000 ký tự

Trang web tham khảo:

https://startbootstrap.github.io/startbootstrap-agency/