281 lines
7.9 KiB
HTML
281 lines
7.9 KiB
HTML
<!doctype html>
|
||
<html lang="vi">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Trang Tin Tức - Bài Viết Nổi Bật</title>
|
||
<style>
|
||
/* ===================================================
|
||
1. RESET & BASIC STYLES
|
||
=================================================== */
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
|
||
sans-serif;
|
||
}
|
||
|
||
body {
|
||
background-color: #f8fafc;
|
||
padding: 40px 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ===================================================
|
||
2. GRID LAYOUT CHÍNH (12 CỘT)
|
||
=================================================== */
|
||
.news-section {
|
||
max-width: 1200px;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
padding: 24px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
/* Component thẻ Badge (TIN TỨC / SỰ KIỆN) */
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 4px 8px;
|
||
background-color: #f1f5f9;
|
||
color: #475569;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
border-radius: 4px;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.post-date {
|
||
font-size: 12px;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
/* ===================================================
|
||
3. CỘT TRÁI - BÀI VIẾT NỔI BẬT (FEATURED POST)
|
||
=================================================== */
|
||
.featured-post {
|
||
grid-column: span 6; /* Chiếm 6/12 cột */
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.featured-img-box {
|
||
width: 100%;
|
||
aspect-ratio: 16 / 9;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.featured-img-box img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.featured-post:hover .featured-img-box img {
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
.meta-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.featured-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #0284c7; /* Màu xanh chủ đạo */
|
||
line-height: 1.3;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.featured-title:hover {
|
||
color: #0369a1;
|
||
}
|
||
|
||
.featured-excerpt {
|
||
font-size: 14px;
|
||
color: #475569;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ===================================================
|
||
4. CỘT PHẢI - LƯỚI 4 BÀI NHỎ (GRID 2x2)
|
||
=================================================== */
|
||
.side-news-grid {
|
||
grid-column: span 6; /* Chiếm 6/12 cột còn lại */
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr); /* Tách thành 2 cột nhỏ */
|
||
gap: 20px;
|
||
}
|
||
|
||
.small-post {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
.small-img-box {
|
||
width: 100%;
|
||
aspect-ratio: 16 / 10;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.small-img-box img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.small-post:hover .small-img-box img {
|
||
transform: scale(1.04);
|
||
}
|
||
|
||
.small-title {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3; /* Giới hạn tối đa 3 dòng */
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.small-post:hover .small-title {
|
||
color: #0284c7;
|
||
}
|
||
|
||
/* ===================================================
|
||
5. RESPONSIVE (Cho Tablet & Mobile)
|
||
=================================================== */
|
||
@media (max-width: 992px) {
|
||
.featured-post,
|
||
.side-news-grid {
|
||
grid-column: span 12; /* Chuyển thành 1 cột dọc lớn */
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.side-news-grid {
|
||
grid-template-columns: 1fr; /* Lưới bài nhỏ chuyển thành 1 cột trên Mobile */
|
||
}
|
||
.featured-title {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="news-section">
|
||
<!-- CỘT TRÁI: Bài viết nổi bật lớn -->
|
||
<article class="featured-post">
|
||
<div class="featured-img-box">
|
||
<img
|
||
src="https://picsum.photos/800/450?random=1"
|
||
alt="Nhà giáo nhân dân Nguyễn Đình Hối"
|
||
/>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="badge">Tin tức</span>
|
||
<span class="post-date">06/07/2026</span>
|
||
</div>
|
||
<a href="#" class="featured-title">Thư cảm tạ</a>
|
||
<p class="featured-excerpt">
|
||
Đại học Y Dược Thành phố Hồ Chí Minh, Bệnh viện Đại học Y Dược Thành
|
||
phố Hồ Chí Minh và gia quyến vô cùng xúc động và trân trọng gửi lời
|
||
cảm tạ sâu sắc.
|
||
</p>
|
||
</article>
|
||
|
||
<!-- CỘT PHẢI: Lưới 4 bài viết nhỏ (2x2) -->
|
||
<div class="side-news-grid">
|
||
<!-- Bài nhỏ 1 -->
|
||
<a href="#" class="small-post">
|
||
<div class="small-img-box">
|
||
<img
|
||
src="https://picsum.photos/400/250?random=2"
|
||
alt="Tuần lễ thế giới nuôi con bằng sữa mẹ"
|
||
/>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="badge">Sự kiện</span>
|
||
</div>
|
||
<h3 class="small-title">
|
||
Tuần lễ thế giới nuôi con bằng sữa mẹ 2026
|
||
</h3>
|
||
<span class="post-date">04/08/2026</span>
|
||
</a>
|
||
|
||
<!-- Bài nhỏ 2 -->
|
||
<a href="#" class="small-post">
|
||
<div class="small-img-box">
|
||
<img
|
||
src="https://picsum.photos/400/250?random=3"
|
||
alt="Đau lưng ở nhân viên văn phòng"
|
||
/>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="badge">Tin tức</span>
|
||
</div>
|
||
<h3 class="small-title">
|
||
Đau lưng ở nhân viên văn phòng: Đừng đợi đến khi cột sống “lên
|
||
tiếng”
|
||
</h3>
|
||
<span class="post-date">01/08/2026</span>
|
||
</a>
|
||
|
||
<!-- Bài nhỏ 3 -->
|
||
<a href="#" class="small-post">
|
||
<div class="small-img-box">
|
||
<img
|
||
src="https://picsum.photos/400/250?random=4"
|
||
alt="Bệnh lý miễn dịch thần kinh"
|
||
/>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="badge">Tin tức</span>
|
||
</div>
|
||
<h3 class="small-title">
|
||
‘Bệnh lý miễn dịch thần kinh - Phát hiện sớm để điều trị tốt’
|
||
</h3>
|
||
<span class="post-date">31/07/2026</span>
|
||
</a>
|
||
|
||
<!-- Bài nhỏ 4 -->
|
||
<a href="#" class="small-post">
|
||
<div class="small-img-box">
|
||
<img
|
||
src="https://picsum.photos/400/250?random=5"
|
||
alt="Phẫu thuật nội soi"
|
||
/>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="badge">Tin tức</span>
|
||
</div>
|
||
<h3 class="small-title">
|
||
Phẫu thuật nội soi cắt phì đại liên thất và thay van động mạch chủ
|
||
</h3>
|
||
<span class="post-date">30/07/2026</span>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</body>
|
||
</html>
|