Modern Company Website - Copy this Html, Bootstrap Component to your project
Assignment:-Xây-dựng-Website-Giới-Thiệu-Công-Ty-Mô-tả:-Tạo-một-trang-web-giới-thiệu-công-ty-với-các-trang-cơ-bản:-Trang-chủ,-Giới-thiệu,-Dịch-vụ,-Dự-án,-và-Liên-hệ.-Ứng-dụng-các-kỹ-năng-đã-học-về-CSS-nâng-cao,-Responsive-Design,-JavaScript,-Bootstrap-và-CSS-Preprocessors.-----I.-Yêu-cầu-chi-tiết-và-gợi-ý-thực-hiện-#1.-Thiết-kế-giao-diện-và-bố-cục-với-CSS-nâng-cao---Yêu-cầu:---Sử-dụng-Flexbox-và-Grid-CSS-để-bố-trí-các-phần-của-trang-như-header,-footer,-main-content.---Tạo-hiệu-ứng-cho-các-phần-tử-khi-người-dùng-di-chuột-qua-hoặc-click-vào.---Dùng-biến-CSS-(`CSS-Variables`)-để-quản-lý-màu-sắc-và-font-chữ-trên-toàn-bộ-trang,-giúp-duy-trì-tính-nhất-quán.---Gợi-ý-thực-hiện:---Flexbox-và-Grid:-Đặt-header-và-footer-là-Flexbox-(dùng-`display:-flex`)-để-dễ-căn-giữa-các-thành-phần.-Với-phần-main-content,-sử-dụng-Grid-để-tạo-bố-cục-nhiều-cột-cho-các-mục-như-dịch-vụ,-dự-án.---CSS-Variables:-Đặt-biến-trong-phần-`:root`-để-quản-lý-màu-chủ-đạo-và-font-chính,-ví-dụ:-```css-:root-{---primary-color:-#3498db;---secondary-color:-#2ecc71;---font-family:-'Arial,-sans-serif';-}-```---CSS-Pseudo-Classes:-Dùng-các-class-`:hover`,-`:active`,-`:focus`-để-tạo-hiệu-ứng-cho-button-hoặc-các-link-khi-người-dùng-tương-tác.-#2.-Thiết-kế-đáp-ứng-(Responsive-Design)---Yêu-cầu:---Đảm-bảo-trang-web-hiển-thị-tốt-trên-các-thiết-bị-với-kích-thước-màn-hình-khác-nhau-(desktop,-tablet,-mobile).---Tối-ưu-hóa-các-hình-ảnh-trên-trang-để-chúng-tự-động-thay-đổi-kích-thước-dựa-trên-màn-hình.---Gợi-ý-thực-hiện:---Media-Queries:-Sử-dụng-media-queries-để-thay-đổi-bố-cục-ở-các-điểm-breakpoint-khác-nhau-(768px-cho-tablet,-480px-cho-mobile):-```css-@media-(max-width:-768px)-{-.main-content-{-grid-template-columns:-1fr;-}-}-```---Responsive-Images:-Sử-dụng-thuộc-tính-`max-width:-100%`-cho-hình-ảnh-để-hình-tự-động-co-giãn-theo-kích-thước-của-phần-tử-chứa.---Viewport:-Đảm-bảo-trong-thẻ-`<head>`-có-dòng-sau-để-trang-hiển-thị-đúng-trên-các-thiết-bị:-```html-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-```-#3.-JavaScript-nâng-cao---Yêu-cầu:---Viết-JavaScript-để-điều-khiển-trình-đơn-thả-xuống-(dropdown-menu)-cho-mục-Dịch-vụ-hoặc-Dự-án.---Tạo-một-slider-tự-động-hiển-thị-các-dự-án-hoặc-testimonial-của-khách-hàng.---Sử-dụng-AJAX-để-lấy-dữ-liệu-JSON-từ-file-dữ-liệu-giả-lập-(mock-data),-và-hiển-thị-danh-sách-nhân-viên.---Gợi-ý-thực-hiện:---Dropdown-Menu:-Tạo-một-menu-thả-xuống-bằng-cách-thêm-sự-kiện-`click`-cho-phần-tử-điều-khiển-menu.-Sử-dụng-`classList.toggle()`-để-mở-và-đóng-menu.---Slider:-Sử-dụng-`setInterval()`-để-tự-động-chuyển-ảnh-trong-slider-sau-mỗi-3-giây.-Ví-dụ:-```javascript-let-currentIndex-=-0;-const-images-=-document.querySelectorAll('.slider-img');-setInterval(()-=>-{-images[currentIndex].classList.remove('active');-currentIndex-=-(currentIndex-+-1)-%-images.length;-images[currentIndex].classList.add('active');-},-3000);-```---AJAX-và-JSON:-Tạo-file-`employees.json`-với-dữ-liệu-về-các-nhân-viên.-Sử-dụng-`fetch`-để-lấy-dữ-liệu-và-hiển-thị-ra-giao-diện:-```javascript-fetch('employees.json')-.then(response-=>-response.json())-.then(data-=>-{-//-Hiển-thị-dữ-liệu-từ-JSON-});-```-#4.-Bootstrap-để-tối-ưu-hóa-giao-diện---Yêu-cầu:---Sử-dụng-Bootstrap-để-nhanh-chóng-tạo-bố-cục-grid-và-responsive-cho-toàn-bộ-trang.---Tận-dụng-các-thành-phần-của-Bootstrap-như-navbar,-card,-và-button-để-tạo-tính-nhất-quán.---Gợi-ý-thực-hiện:---Bootstrap-Grid:-Dùng-các-class-`.container`,-`.row`,-và-`.col`-của-Bootstrap-để-chia-cột-dễ-dàng-và-đảm-bảo-giao-diện-đáp-ứng.---Navbar:-Sử-dụng-`navbar`-của-Bootstrap-để-tạo-header-có-menu-điều-hướng-cố-định.---Cards:-Trong-phần-dự-án,-dùng-`card`-để-trình-bày-các-dự-án-ngắn-gọn-với-tiêu-đề,-ảnh-và-mô-tả.-#5.-CSS-Preprocessors-(SCSS)---Yêu-cầu:---Viết-CSS-bằng-SCSS,-sử-dụng-nesting,-variables,-và-mixins-để-tối-ưu-hóa-mã-CSS.---Tạo-các-mixin-để-dễ-dàng-tái-sử-dụng-cho-các-thành-phần-có-chung-style.---Gợi-ý-thực-hiện:---Variables:-Tạo-biến-cho-màu-sắc,-font,-kích-thước-để-dễ-chỉnh-sửa.-Ví-dụ:-```scss-$primary-color:-#3498db;-$font-size:-16px;-```---Nesting:-Lồng-các-class-con-trong-SCSS-giúp-mã-ngắn-gọn-và-dễ-đọc-hơn:-```scss-.navbar-{-background-color:-$primary-color;-.nav-item-{-color:-white;-&:hover-{-color:-darken($primary-color,-10%);-}-}-}-```---Mixins:-Tạo-mixin-để-dễ-dàng-dùng-lại-cho-các-thành-phần-có-cùng-thuộc-tính,-ví-dụ:-```scss-@mixin-border-radius($radius)-{-border-radius:-$radius;--webkit-border-radius:-$radius;-}-.button-{-@include-border-radius(5px);-}-```-#6.-Hiệu-ứng-và-hoạt-ảnh---Yêu-cầu:---Tạo-hiệu-ứng-2D-và-3D-cho-các-thành-phần-khi-di-chuột-qua.---Sử-dụng-transitions-và-animations-để-tạo-trải-nghiệm-mượt-mà-khi-chuyển-động-hoặc-thay-đổi-trạng-thái-các-thành-phần.---Gợi-ý-thực-hiện:---2D-và-3D-Transforms:-Áp-dụng-`transform:-scale(1.1)`-khi-người-dùng-di-chuột-qua-các-hình-ảnh-dự-án-để-tạo-hiệu-ứng-nổi-bật.---Transitions:-Đặt-thuộc-tính-`transition`-cho-các-button-và-menu-để-chuyển-động-mượt-mà:-```css-button-{-transition:-background-color-0.3s-ease;-}-```---Animations:-Tạo-hoạt-ảnh-đơn-giản-cho-các-tiêu-đề-khi-chúng-xuất-hiện-trên-màn-hình-bằng-keyframes:-```css-@keyframes-fadeIn-{-from-{-opacity:-0;-}-to-{-opacity:-1;-}-}-.header-title-{-animation:-fadeIn-2s-ease-in-out;-}-```-----II.-Output-yêu-cầu-1.-Thư-mục-mã-nguồn:-Bao-gồm-tất-cả-các-file-HTML,-SCSS,-CSS,-JavaScript,-và-JSON.-2.-File-README.md:-Mô-tả-chi-tiết-các-công-nghệ,-thư-viện-đã-sử-dụng,-cách-thiết-lập-và-cách-chạy-dự-án.-3.-Ảnh-chụp-giao-diện:-Bao-gồm-các-ảnh-minh-họa-giao-diện-trên-các-thiết-bị-khác-nhau-để-đánh-giá-tính-đáp-ứng-của-trang-web.
