Title 1. Thiết lập thanh điều hướng (navbar).docx ✅

1. 1. Thiết lập cấu trúc thư mục và project như sau 2. Import font awesome để thêm các icon đẹp cho website https://cdnjs.com/libraries/font-awesome 3. Tạo thanh điều hướng Navbar Ta sẽ thêm header cho để tạo thanh điều hướng như sau <header>   <a href="#" class="logo">Store <span>.</span></a>   <nav class="navbar">     <a href="#home">home</a>     <a href="#about">about</a>     <a href="#products">products</a>     <a href="#contact">contact</a>   </nav>   <nav class="icons">     <a href="#" class="fas fa-cart-shopping"></a>   </nav> </header>
1. Ta cần style bổ sung vào để thanh điều hướng có màu sắc và hiệu ứng rê chuột như sau Như vậy mã lệnh CSS cài đặt như sau :root {   --pink: #e84393; } * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: Verdana, Geneva, Tahoma, sans-serif;   outline: none;   border: none;   text-decoration: none;   text-transform: capitalize;   transition: 0.2s linear; } html {   font-size: 62.5%;   scroll-behavior: smooth;   scroll-padding-top: 6rem;   overflow-x: hidden; } header {   position: fixed;   top: 0;   left: 0;   right: 0;   background: #fff;   padding: 2rem 9%;   display: flex;   align-items: center;   justify-content: space-between;   box-shadow: 0 0.5rem; } header .logo {
1.   font-size: 3rem;   color: #333;   font-weight: bolder; } header .logo span {   color: var(--pink) } header .navbar a {   font-size: 2rem;   padding: 0 1.5rem;   color: #666;   text-decoration: none; } /* rê chuột lên các liên kết sẽ đổi màu */ header .navbar a:hover {   color: var(--pink); } /* thêm style cho logo icon giỏ hàng */ header .icons a {   font-size: 2.5rem;   color: #333;   margin-left: 1.5rem; } header .icons a:hover {   color: var(--pink); } 4. Tạo khả năng hiển thị desktop hoặc trên di động cho thanh điều hướng (responsive) Giao diện chưa có responsive khi thu nhỏ màn hình sẽ như sau Giao diện đã cài chế độ responsive
1. Style cần bổ sung như sau /* thêm style để web có thể hiển thị responsive */ @media (max-width:768px) {   header .navbar {     position: absolute;     top: 100%;     left: 0;     right: 0;     background: #eee;     border-top: 0.1rem solid rgba(0,0,0.1);   }   header .navbar a{     margin: 1.5rem;     padding: 1.5rem;     background: #fff;     border: 0.1rem solid rgba(0,0,0.1);     display: block;     width: 100%;   }   header .navbar a:hover {     background: var(--pink);     color: #fff;     transition: 1s ease;   } } 5. Thêm biểu tượng để bật/tắt menu trên thanh điều hướng