Tạo Khung Thông Báo Nổi Bật Nhiều Màu Sắc

Các Bước Thực Hiện

Bước 1: Các bạn tạo CSS cho khung thông báo

.codepro-colorbox {
    overflow: hidden;
    position: relative;
    margin: .5rem 0 1rem;
    transition: box-shadow.25 s;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 20px;
    font-size: 16px
}

.codepro-colorbox.blue {
    background: #03a9f4
}

.codepro-colorbox.green {
    background: #4CAF50
}

.codepro-colorbox.red {
    background: #F44336
}

.codepro-colorbox.orange {
    background: #ff9800
}

.codepro-colorbox.purple {
    background: #673ab7
}

Bước 2: Các sử dụng -> gọi đến class tương ứng với từng màu, ví dụ:

Hắc Hường Area

<p class="codepro-colorbox blue">chèn thông báo vào đây</p>

Hắc Hường Area

<p class="codepro-colorbox green">chèn thông báo vào đây</p>

Hắc Hường Area

<p class="codepro-colorbox red">chèn thông báo vào đây</p>

Hắc Hường Area

	<p class="codepro-colorbox orange">chèn thông báo vào đây</p>

Hắc Hường Area

<p class="codepro-colorbox purple">chèn thông báo vào đây</p>