Biểu ngữ thông báo

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 24 trên 35.

Các biểu ngữ thông báo cho người dùng biết những thông tin quan trọng như thông báo thành công, cảnh báo hoặc lỗi. Chúng thường xuất hiện ở đầu hoặc cuối trang. Có lẽ bạn đã thấy chúng được dùng cho những việc như:

Thông báo thành công, ví dụ: “Hồ sơ của bạn đã được cập nhật thành công.”
Thông báo lỗi, ví dụ: “Đã xảy ra lỗi, vui lòng thử lại.”
Thông báo thông tin, ví dụ: “Chúng tôi đã cập nhật chính sách quyền riêng tư.”

Hãy tạo một biểu ngữ thông báo đơn giản. Bắt đầu với một vùng chứa cơ bản:

<div class="notification">
  This is a notification message!
</div>

Thêm một chút kiểu dáng để làm nội dung nổi bật hơn:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

Lệnh này tạo một biểu ngữ thông báo màu xanh lá với chữ màu trắng.

Thử thách

Dễ

Bạn được cung cấp HTML cho một biểu ngữ thông báo. Nhiệm vụ của bạn là tạo kiểu để biểu ngữ trông như một thông báo thành công thực sự.

Nhiệm vụ của bạn:

Đặt biểu tượng và văn bản cạnh nhau bằng cách sử dụng display: flex và align-items: center.
Thêm khoảng đệm bên trong biểu ngữ để dễ đọc hơn.
Đặt nền màu xanh lá (#4CAF50) và đổi văn bản thành màu trắng, vì đây là thông báo thành công.
Bo tròn các góc.
Thêm đổ bóng để biểu ngữ trông có chiều sâu.
Tạo khoảng cách giữa biểu tượng và văn bản bằng cách dùng margin-right.
Tăng kích thước biểu tượng một chút bằng cách dùng font-size: 18px.

Mục tiêu: Biểu ngữ của bạn trông như một thông báo thành công gọn gàng, với biểu tượng dấu kiểm ở bên trái và văn bản ở bên phải.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Notification Banners</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    .notification {
    
    }
    
    .notification_icon {
        
    }
  </style>
</head>
<body>
  <div class="notification notification--success">
    <span class="notification_icon">✓</span>
    <div class="notification_message">Your changes have been saved successfully!</div>
  </div>
</body>
</html>