[CSS] tạo ô khuyến mãi đẹp như hình

[CSS] tạo ô khuyến mãi đẹp như ví dụ bên dưới

Mã html

<div class="khuyen-mai-hb"> 
<span class="tieu-de"><i class="icon-gift"></i> Khuyến mãi đặc biệt</span> 
   <ul>
 	<li>Giảm 30% khi đăng ký hosting 3 năm</li>
 	<li>Giảm 10% phí dịch vụ khi like và share website</li>
 	<li>Tặng 1 khóa học viết bài chuẩn SEO online</li>
   </ul>
</div>

<span class="tieu-de"><i class="icon-gift"></i> Khuyến mãi đặc biệt</span>

<ul>

<li>Giảm 30% khi đăng ký hosting 3 năm</li>

<li>Giảm 10% phí dịch vụ khi like và share website</li>

<li>Tặng 1 khóa học viết bài chuẩn SEO online</li>

</ul>

</div>

Css

.khuyen-mai-hb {
	margin-bottom:2px;
	margin-top:2px;
	background:white;
	padding:10px;
	border-radius:5px;
	border:1px solid #ef0b0b;
	font-size:15px;
	width:100%;
}
.khuyen-mai-hb .tieu-de {
	background:#e31616;
	padding:2px 20px;
	margin-top:-24px;
	font-size:15px;
	font-weight:500;
	color:#ffffff;
	display:block;
	max-width:207px;
	border-radius:99px;
}

.khuyen-mai-hb ul {
   margin-bottom:4px;
   list-style-image:url(tick.png);	
}

.khuyen-mai-hb {

margin-bottom:2px;

margin-top:2px;

background:white;

padding:10px;

border-radius:5px;

border:1px solid #ef0b0b;

font-size:15px;

width:100%;

}

.khuyen-mai-hb .tieu-de {

background:#e31616;

padding:2px 20px;

margin-top:-24px;

font-size:15px;

font-weight:500;

color:#ffffff;

display:block;

max-width:207px;

border-radius:99px;

}

.khuyen-mai-hb ul {

margin-bottom:4px;

list-style-image:url(tick.png);

}

Khuyến mãi đặc biệt

Giảm 30% khi đăng ký hosting 3 năm
Giảm 10% phí dịch vụ khi like và share website
Tặng 1 khóa học viết bài chuẩn SEO online

5/5 - (1 bình chọn)

Bài viết mới:

code, CSS

[CSS] tạo ô khuyến mãi đẹp như hình

Bài viết cùng chủ đề:

Kỹ thuật dồn các icon vào 1 file để hiển thị khi làm web

CodePen Home Textarea Tabs + Syntax Highlighting

Count Up Number trên themes Flatsome như thế nào?

Tạo bảng với nút tìm kiếm dữ liệu / How to – Filter/Search Table

Nội dung mặt định file .htaccess trong WordPress

Css hiệu ứng chữ nhấp nháy – blinking/flashing text with CSS 3

Tạo nút Read More / Read Less (Xem thêm / Ẩn nội dung) cho nội dung quá dài trong wordpress

Css thường dùng, cách tùy biến contact form 7

Aiken Trung