<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slogan Example</title>
<style>
/* Khung slogan */
.slogan {
border: 2px solid red; /* Viền đỏ */
text-align: center !important;
padding: 5px 10px; /* Điều chỉnh padding để khung nhỏ hơn */
width: fit-content; /* Khung sẽ vừa với nội dung */
margin: 20px auto; /* Căn giữa khung */
font-size: 1.5rem;
font-weight: bold;
color: red; /* Màu chữ đỏ */
background-color: yellow; /* Màu nền vàng */
}
/* Khung row */
.row {
display: flex;
flex-wrap: nowrap; /* Đảm bảo các ô nằm trong một hàng */
justify-content: space-between; /* Căn đều các ô trong hàng */
margin-top: 1rem;
max-width: 80%; /* Giảm kích thước chiều rộng của khung */
padding: 5px 10px; /* Giảm padding để làm khung nhỏ hơn */
border: 2px solid green; /* Viền xanh lá */
margin: 0 auto; /* Căn giữa */
}
.row::before {
content: "Row"; /* Thêm chữ 'Row' vào trước */
display: block;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
color: white; /* Màu chữ */
background-color: green; /* Màu nền cho chữ */
padding: 5px;
margin-bottom: 10px; /* Khoảng cách với nội dung phía dưới */
}
.block_3 {
flex: 1; /* Các ô có chiều rộng bằng nhau */
padding: 10px;
background-color: #f1f1f1;
text-align: center;
margin-top: 10px;
border: 1px solid #ddd; /* Thêm viền nhẹ cho các ô */
margin-right: 10px; /* Khoảng cách giữa các ô */
max-width: 30%; /* Đảm bảo các ô không rộng quá */
}
/* Thêm tên người làm dưới slogan */
.slogan::after {
content: "Người làm: Lý Hồng Minh Phương"; /* Thay tên theo yêu cầu */
display: block;
margin-top: 1rem;
font-size: 1rem;
color: #555;
text-align: center;
font-style: italic;
}
</style>
</head>
<body>
<div class="slogan">
Slogan
</div>
<div class="row">
<div class="block_3">Ô 1</div>
<div class="block_3">Ô 2</div>
<div class="block_3">Ô 3</div>
</div>
</body>
</html
>
