Mai Hồng Quân
Giới thiệu về bản thân
36 cc ba m
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Báo Tường Xuân 2026 - Mã Đáo Thành Công</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Saira+Stencil+One&display=swap" rel="stylesheet">
<style>
:root {
--paper: #f4e4bc;
--ink: #5d2e12;
--red-tet: #b30000;
--gold: #daa520;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body {
background: #222 url('https://www.transparenttextures.com/patterns/dark-wood.png');
color: var(--ink);
font-family: 'Segoe UI', serif;
overflow-x: hidden;
padding: 50px 20px;
}
/* --- HIỆU ỨNG CHUỘT NGỰA BAY TỰ DO --- */
#horse-cursor {
position: fixed;
z-index: 1000;
pointer-events: none;
font-size: 60px;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
transition: transform 0.1s linear;
}
/* --- KHỔ GIẤY BÁO TƯỜNG (SCROLL) --- */
.newspaper-canvas {
max-width: 1000px;
margin: 0 auto;
background: var(--paper);
border: 15px solid #8b4513;
border-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') 30 round;
box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 100px rgba(0,0,0,0.2);
padding: 60px;
position: relative;
min-height: 1500px;
}
/* Hoa văn góc báo tường */
.corner-flower {
position: absolute;
width: 200px;
z-index: 5;
pointer-events: none;
}
.top-left { top: -10px; left: -10px; transform: rotate(0deg); }
.top-right { top: -10px; right: -10px; transform: rotate(90deg); }
/* Tiêu đề báo tường */
header {
text-align: center;
border-bottom: 5px double var(--red-tet);
margin-bottom: 50px;
padding-bottom: 20px;
}
.main-title {
font-family: 'Dancing Script', cursive;
font-size: 5rem;
color: var(--red-tet);
text-shadow: 2px 2px 0px var(--gold);
}
.sub-title {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 5px;
color: #333;
font-weight: bold;
}
/* Các mục báo tường */
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.news-section {
border: 2px solid rgba(93, 46, 18, 0.2);
padding: 20px;
background: rgba(255,255,255,0.3);
position: relative;
}
.news-section h2 {
font-family: 'Dancing Script', cursive;
font-size: 2.2rem;
color: var(--red-tet);
margin-bottom: 15px;
text-align: center;
}
/* Bảng thời khóa biểu dạng viết tay */
table {
width: 100%;
border-collapse: collapse;
font-family: 'Dancing Script', cursive;
font-size: 1.2rem;
}
th, td {
border-bottom: 1px solid var(--ink);
padding: 10px;
text-align: center;
}
th { color: var(--red-tet); font-size: 1.4rem; }
/* Bài thơ - Trọng tâm của báo tường */
.poem-section {
grid-column: 1 / -1;
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 1.8rem;
line-height: 2.2;
padding: 40px;
border: 1px dashed var(--ink);
}
/* Hiệu ứng nổ pháo hoa khi click */
.click-firework {
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
pointer-events: none;
animation: explode 0.8s ease-out forwards;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(15); opacity: 0; }
}
/* Hoa mai rơi */
.falling {
position: fixed;
top: -50px;
z-index: 100;
animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
</style>
</head>
<body>
<div id="horse-cursor">🐎</div>
<div class="newspaper-canvas">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-left">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-right">
<header>
<p class="sub-title">Số đặc biệt: Chào Xuân 2026</p>
<h1 class="main-title">Mã Đáo Thành Công</h1>
<p>Người thực hiện: <b>Sĩ tử Nguyễn Văn A - Lớp 12A1</b></p>
</header>
<div class="grid-layout">
<div class="news-section">
<h2>Lời Ngỏ</h2>
<p style="font-style: italic; line-height: 1.6;">
Năm 2026 - cánh cửa cuộc đời đang mở rộng trước mắt những sĩ tử lớp 12.
Như chú ngựa sắt bền bỉ, chúng ta quyết tâm phi nước đại để cán đích vinh quang.
Tờ báo tường này là nơi gửi gắm những ước mơ và sự chuẩn bị kỹ lưỡng cho kỳ thi sắp tới.
</p>
</div>
<div class="news-section">
<h2>Gương Mặt Sĩ Tử</h2>
<p><b>Họ tên:</b> Nguyễn Văn A</p>
<p><b>Mục tiêu:</b> ĐH Bách Khoa TP.HCM</p>
<p><b>Sở thích:</b> Sáng tạo Code & Giải Toán</p>
<p><b>Châm ngôn:</b> <span style="color: var(--red-tet);">"Học không chơi đánh rơi tuổi trẻ, chơi không học vừa khỏe vừa vui (nhưng vẫn đỗ BK)!"</span></p>
</div>
<div class="news-section" style="grid-column: 1 / -1;">
<h2>Lịch Trình Chinh Phục</h2>
<table>
<tr><th>Thứ 2</th><th>Thứ 3</th><th>Thứ 4</th><th>Thứ 5</th><th>Thứ 6</th><th>Thứ 7</th></tr>
<tr><td>Toán</td><td>Toán</td><td>Văn</td><td>Lý</td><td>Anh</td><td>Luyện Đề</td></tr>
<tr><td>Văn</td><td>Lý</td><td>Hóa</td><td>Sinh</td><td>Sử</td><td>Tự Học</td></tr>
</table>
</div>
<div class="poem-section">
<h2>Góc Thơ Thanh Xuân</h2>
<p>Tháng năm ấy, bảng đen và phấn trắng</p>
<p>Gửi lại trường những vạt nắng xôn xao</p>
<p>Tuổi mười tám, bao hoài bão dâng trào</p>
<p>Ngựa sắt vươn mình, hóa rồng bay phấp phới.</p>
</div>
</div>
<div style="text-align: center; margin-top: 50px; font-weight: bold; font-family: 'Dancing Script'; font-size: 2rem;">
🧧 Chúc Mừng Năm Mới - Thi Đâu Đỗ Đó! 🧧
</div>
</div>
<script>
// 1. Con chuột ngựa bay
const cursor = document.getElementById('horse-cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// 2. Hiệu ứng click nổ pháo hoa giấy (Confetti)
document.addEventListener('click', (e) => {
for(let i=0; i<10; i++) {
const firework = document.createElement('div');
firework.className = 'click-firework';
firework.style.left = e.clientX + 'px';
firework.style.top = e.clientY + 'px';
firework.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
document.body.appendChild(firework);
setTimeout(() => firework.remove(), 800);
}
});
// 3. Hoa mai rơi
function createFalling() {
const item = document.createElement('div');
item.className = 'falling';
item.innerHTML = Math.random() > 0.5 ? '🌸' : '🌼';
item.style.left = Math.random() * 100 + 'vw';
item.style.fontSize = Math.random() * 20 + 20 + 'px';
item.style.animationDuration = Math.random() * 3 + 4 + 's';
document.body.appendChild(item);
setTimeout(() => item.remove(), 5000);
}
setInterval(createFalling, 300);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Báo Tường Xuân 2026 - Mã Đáo Thành Công</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Saira+Stencil+One&display=swap" rel="stylesheet">
<style>
:root {
--paper: #f4e4bc;
--ink: #5d2e12;
--red-tet: #b30000;
--gold: #daa520;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body {
background: #222 url('https://www.transparenttextures.com/patterns/dark-wood.png');
color: var(--ink);
font-family: 'Segoe UI', serif;
overflow-x: hidden;
padding: 50px 20px;
}
/* --- HIỆU ỨNG CHUỘT NGỰA BAY TỰ DO --- */
#horse-cursor {
position: fixed;
z-index: 1000;
pointer-events: none;
font-size: 60px;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
transition: transform 0.1s linear;
}
/* --- KHỔ GIẤY BÁO TƯỜNG (SCROLL) --- */
.newspaper-canvas {
max-width: 1000px;
margin: 0 auto;
background: var(--paper);
border: 15px solid #8b4513;
border-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') 30 round;
box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 100px rgba(0,0,0,0.2);
padding: 60px;
position: relative;
min-height: 1500px;
}
/* Hoa văn góc báo tường */
.corner-flower {
position: absolute;
width: 200px;
z-index: 5;
pointer-events: none;
}
.top-left { top: -10px; left: -10px; transform: rotate(0deg); }
.top-right { top: -10px; right: -10px; transform: rotate(90deg); }
/* Tiêu đề báo tường */
header {
text-align: center;
border-bottom: 5px double var(--red-tet);
margin-bottom: 50px;
padding-bottom: 20px;
}
.main-title {
font-family: 'Dancing Script', cursive;
font-size: 5rem;
color: var(--red-tet);
text-shadow: 2px 2px 0px var(--gold);
}
.sub-title {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 5px;
color: #333;
font-weight: bold;
}
/* Các mục báo tường */
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.news-section {
border: 2px solid rgba(93, 46, 18, 0.2);
padding: 20px;
background: rgba(255,255,255,0.3);
position: relative;
}
.news-section h2 {
font-family: 'Dancing Script', cursive;
font-size: 2.2rem;
color: var(--red-tet);
margin-bottom: 15px;
text-align: center;
}
/* Bảng thời khóa biểu dạng viết tay */
table {
width: 100%;
border-collapse: collapse;
font-family: 'Dancing Script', cursive;
font-size: 1.2rem;
}
th, td {
border-bottom: 1px solid var(--ink);
padding: 10px;
text-align: center;
}
th { color: var(--red-tet); font-size: 1.4rem; }
/* Bài thơ - Trọng tâm của báo tường */
.poem-section {
grid-column: 1 / -1;
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 1.8rem;
line-height: 2.2;
padding: 40px;
border: 1px dashed var(--ink);
}
/* Hiệu ứng nổ pháo hoa khi click */
.click-firework {
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
pointer-events: none;
animation: explode 0.8s ease-out forwards;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(15); opacity: 0; }
}
/* Hoa mai rơi */
.falling {
position: fixed;
top: -50px;
z-index: 100;
animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
</style>
</head>
<body>
<div id="horse-cursor">🐎</div>
<div class="newspaper-canvas">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-left">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-right">
<header>
<p class="sub-title">Số đặc biệt: Chào Xuân 2026</p>
<h1 class="main-title">Mã Đáo Thành Công</h1>
<p>Người thực hiện: <b>Sĩ tử Nguyễn Văn A - Lớp 12A1</b></p>
</header>
<div class="grid-layout">
<div class="news-section">
<h2>Lời Ngỏ</h2>
<p style="font-style: italic; line-height: 1.6;">
Năm 2026 - cánh cửa cuộc đời đang mở rộng trước mắt những sĩ tử lớp 12.
Như chú ngựa sắt bền bỉ, chúng ta quyết tâm phi nước đại để cán đích vinh quang.
Tờ báo tường này là nơi gửi gắm những ước mơ và sự chuẩn bị kỹ lưỡng cho kỳ thi sắp tới.
</p>
</div>
<div class="news-section">
<h2>Gương Mặt Sĩ Tử</h2>
<p><b>Họ tên:</b> Nguyễn Văn A</p>
<p><b>Mục tiêu:</b> ĐH Bách Khoa TP.HCM</p>
<p><b>Sở thích:</b> Sáng tạo Code & Giải Toán</p>
<p><b>Châm ngôn:</b> <span style="color: var(--red-tet);">"Học không chơi đánh rơi tuổi trẻ, chơi không học vừa khỏe vừa vui (nhưng vẫn đỗ BK)!"</span></p>
</div>
<div class="news-section" style="grid-column: 1 / -1;">
<h2>Lịch Trình Chinh Phục</h2>
<table>
<tr><th>Thứ 2</th><th>Thứ 3</th><th>Thứ 4</th><th>Thứ 5</th><th>Thứ 6</th><th>Thứ 7</th></tr>
<tr><td>Toán</td><td>Toán</td><td>Văn</td><td>Lý</td><td>Anh</td><td>Luyện Đề</td></tr>
<tr><td>Văn</td><td>Lý</td><td>Hóa</td><td>Sinh</td><td>Sử</td><td>Tự Học</td></tr>
</table>
</div>
<div class="poem-section">
<h2>Góc Thơ Thanh Xuân</h2>
<p>Tháng năm ấy, bảng đen và phấn trắng</p>
<p>Gửi lại trường những vạt nắng xôn xao</p>
<p>Tuổi mười tám, bao hoài bão dâng trào</p>
<p>Ngựa sắt vươn mình, hóa rồng bay phấp phới.</p>
</div>
</div>
<div style="text-align: center; margin-top: 50px; font-weight: bold; font-family: 'Dancing Script'; font-size: 2rem;">
🧧 Chúc Mừng Năm Mới - Thi Đâu Đỗ Đó! 🧧
</div>
</div>
<script>
// 1. Con chuột ngựa bay
const cursor = document.getElementById('horse-cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// 2. Hiệu ứng click nổ pháo hoa giấy (Confetti)
document.addEventListener('click', (e) => {
for(let i=0; i<10; i++) {
const firework = document.createElement('div');
firework.className = 'click-firework';
firework.style.left = e.clientX + 'px';
firework.style.top = e.clientY + 'px';
firework.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
document.body.appendChild(firework);
setTimeout(() => firework.remove(), 800);
}
});
// 3. Hoa mai rơi
function createFalling() {
const item = document.createElement('div');
item.className = 'falling';
item.innerHTML = Math.random() > 0.5 ? '🌸' : '🌼';
item.style.left = Math.random() * 100 + 'vw';
item.style.fontSize = Math.random() * 20 + 20 + 'px';
item.style.animationDuration = Math.random() * 3 + 4 + 's';
document.body.appendChild(item);
setTimeout(() => item.remove(), 5000);
}
setInterval(createFalling, 300);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Báo Tường Xuân 2026 - Mã Đáo Thành Công</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Saira+Stencil+One&display=swap" rel="stylesheet">
<style>
:root {
--paper: #f4e4bc;
--ink: #5d2e12;
--red-tet: #b30000;
--gold: #daa520;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body {
background: #222 url('https://www.transparenttextures.com/patterns/dark-wood.png');
color: var(--ink);
font-family: 'Segoe UI', serif;
overflow-x: hidden;
padding: 50px 20px;
}
/* --- HIỆU ỨNG CHUỘT NGỰA BAY TỰ DO --- */
#horse-cursor {
position: fixed;
z-index: 1000;
pointer-events: none;
font-size: 60px;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
transition: transform 0.1s linear;
}
/* --- KHỔ GIẤY BÁO TƯỜNG (SCROLL) --- */
.newspaper-canvas {
max-width: 1000px;
margin: 0 auto;
background: var(--paper);
border: 15px solid #8b4513;
border-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') 30 round;
box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 100px rgba(0,0,0,0.2);
padding: 60px;
position: relative;
min-height: 1500px;
}
/* Hoa văn góc báo tường */
.corner-flower {
position: absolute;
width: 200px;
z-index: 5;
pointer-events: none;
}
.top-left { top: -10px; left: -10px; transform: rotate(0deg); }
.top-right { top: -10px; right: -10px; transform: rotate(90deg); }
/* Tiêu đề báo tường */
header {
text-align: center;
border-bottom: 5px double var(--red-tet);
margin-bottom: 50px;
padding-bottom: 20px;
}
.main-title {
font-family: 'Dancing Script', cursive;
font-size: 5rem;
color: var(--red-tet);
text-shadow: 2px 2px 0px var(--gold);
}
.sub-title {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 5px;
color: #333;
font-weight: bold;
}
/* Các mục báo tường */
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.news-section {
border: 2px solid rgba(93, 46, 18, 0.2);
padding: 20px;
background: rgba(255,255,255,0.3);
position: relative;
}
.news-section h2 {
font-family: 'Dancing Script', cursive;
font-size: 2.2rem;
color: var(--red-tet);
margin-bottom: 15px;
text-align: center;
}
/* Bảng thời khóa biểu dạng viết tay */
table {
width: 100%;
border-collapse: collapse;
font-family: 'Dancing Script', cursive;
font-size: 1.2rem;
}
th, td {
border-bottom: 1px solid var(--ink);
padding: 10px;
text-align: center;
}
th { color: var(--red-tet); font-size: 1.4rem; }
/* Bài thơ - Trọng tâm của báo tường */
.poem-section {
grid-column: 1 / -1;
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 1.8rem;
line-height: 2.2;
padding: 40px;
border: 1px dashed var(--ink);
}
/* Hiệu ứng nổ pháo hoa khi click */
.click-firework {
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
pointer-events: none;
animation: explode 0.8s ease-out forwards;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(15); opacity: 0; }
}
/* Hoa mai rơi */
.falling {
position: fixed;
top: -50px;
z-index: 100;
animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
</style>
</head>
<body>
<div id="horse-cursor">🐎</div>
<div class="newspaper-canvas">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-left">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-right">
<header>
<p class="sub-title">Số đặc biệt: Chào Xuân 2026</p>
<h1 class="main-title">Mã Đáo Thành Công</h1>
<p>Người thực hiện: <b>Sĩ tử Nguyễn Văn A - Lớp 12A1</b></p>
</header>
<div class="grid-layout">
<div class="news-section">
<h2>Lời Ngỏ</h2>
<p style="font-style: italic; line-height: 1.6;">
Năm 2026 - cánh cửa cuộc đời đang mở rộng trước mắt những sĩ tử lớp 12.
Như chú ngựa sắt bền bỉ, chúng ta quyết tâm phi nước đại để cán đích vinh quang.
Tờ báo tường này là nơi gửi gắm những ước mơ và sự chuẩn bị kỹ lưỡng cho kỳ thi sắp tới.
</p>
</div>
<div class="news-section">
<h2>Gương Mặt Sĩ Tử</h2>
<p><b>Họ tên:</b> Nguyễn Văn A</p>
<p><b>Mục tiêu:</b> ĐH Bách Khoa TP.HCM</p>
<p><b>Sở thích:</b> Sáng tạo Code & Giải Toán</p>
<p><b>Châm ngôn:</b> <span style="color: var(--red-tet);">"Học không chơi đánh rơi tuổi trẻ, chơi không học vừa khỏe vừa vui (nhưng vẫn đỗ BK)!"</span></p>
</div>
<div class="news-section" style="grid-column: 1 / -1;">
<h2>Lịch Trình Chinh Phục</h2>
<table>
<tr><th>Thứ 2</th><th>Thứ 3</th><th>Thứ 4</th><th>Thứ 5</th><th>Thứ 6</th><th>Thứ 7</th></tr>
<tr><td>Toán</td><td>Toán</td><td>Văn</td><td>Lý</td><td>Anh</td><td>Luyện Đề</td></tr>
<tr><td>Văn</td><td>Lý</td><td>Hóa</td><td>Sinh</td><td>Sử</td><td>Tự Học</td></tr>
</table>
</div>
<div class="poem-section">
<h2>Góc Thơ Thanh Xuân</h2>
<p>Tháng năm ấy, bảng đen và phấn trắng</p>
<p>Gửi lại trường những vạt nắng xôn xao</p>
<p>Tuổi mười tám, bao hoài bão dâng trào</p>
<p>Ngựa sắt vươn mình, hóa rồng bay phấp phới.</p>
</div>
</div>
<div style="text-align: center; margin-top: 50px; font-weight: bold; font-family: 'Dancing Script'; font-size: 2rem;">
🧧 Chúc Mừng Năm Mới - Thi Đâu Đỗ Đó! 🧧
</div>
</div>
<script>
// 1. Con chuột ngựa bay
const cursor = document.getElementById('horse-cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// 2. Hiệu ứng click nổ pháo hoa giấy (Confetti)
document.addEventListener('click', (e) => {
for(let i=0; i<10; i++) {
const firework = document.createElement('div');
firework.className = 'click-firework';
firework.style.left = e.clientX + 'px';
firework.style.top = e.clientY + 'px';
firework.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
document.body.appendChild(firework);
setTimeout(() => firework.remove(), 800);
}
});
// 3. Hoa mai rơi
function createFalling() {
const item = document.createElement('div');
item.className = 'falling';
item.innerHTML = Math.random() > 0.5 ? '🌸' : '🌼';
item.style.left = Math.random() * 100 + 'vw';
item.style.fontSize = Math.random() * 20 + 20 + 'px';
item.style.animationDuration = Math.random() * 3 + 4 + 's';
document.body.appendChild(item);
setTimeout(() => item.remove(), 5000);
}
setInterval(createFalling, 300);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Báo Tường Xuân 2026 - Mã Đáo Thành Công</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Saira+Stencil+One&display=swap" rel="stylesheet">
<style>
:root {
--paper: #f4e4bc;
--ink: #5d2e12;
--red-tet: #b30000;
--gold: #daa520;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body {
background: #222 url('https://www.transparenttextures.com/patterns/dark-wood.png');
color: var(--ink);
font-family: 'Segoe UI', serif;
overflow-x: hidden;
padding: 50px 20px;
}
/* --- HIỆU ỨNG CHUỘT NGỰA BAY TỰ DO --- */
#horse-cursor {
position: fixed;
z-index: 1000;
pointer-events: none;
font-size: 60px;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
transition: transform 0.1s linear;
}
/* --- KHỔ GIẤY BÁO TƯỜNG (SCROLL) --- */
.newspaper-canvas {
max-width: 1000px;
margin: 0 auto;
background: var(--paper);
border: 15px solid #8b4513;
border-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') 30 round;
box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 100px rgba(0,0,0,0.2);
padding: 60px;
position: relative;
min-height: 1500px;
}
/* Hoa văn góc báo tường */
.corner-flower {
position: absolute;
width: 200px;
z-index: 5;
pointer-events: none;
}
.top-left { top: -10px; left: -10px; transform: rotate(0deg); }
.top-right { top: -10px; right: -10px; transform: rotate(90deg); }
/* Tiêu đề báo tường */
header {
text-align: center;
border-bottom: 5px double var(--red-tet);
margin-bottom: 50px;
padding-bottom: 20px;
}
.main-title {
font-family: 'Dancing Script', cursive;
font-size: 5rem;
color: var(--red-tet);
text-shadow: 2px 2px 0px var(--gold);
}
.sub-title {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 5px;
color: #333;
font-weight: bold;
}
/* Các mục báo tường */
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.news-section {
border: 2px solid rgba(93, 46, 18, 0.2);
padding: 20px;
background: rgba(255,255,255,0.3);
position: relative;
}
.news-section h2 {
font-family: 'Dancing Script', cursive;
font-size: 2.2rem;
color: var(--red-tet);
margin-bottom: 15px;
text-align: center;
}
/* Bảng thời khóa biểu dạng viết tay */
table {
width: 100%;
border-collapse: collapse;
font-family: 'Dancing Script', cursive;
font-size: 1.2rem;
}
th, td {
border-bottom: 1px solid var(--ink);
padding: 10px;
text-align: center;
}
th { color: var(--red-tet); font-size: 1.4rem; }
/* Bài thơ - Trọng tâm của báo tường */
.poem-section {
grid-column: 1 / -1;
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 1.8rem;
line-height: 2.2;
padding: 40px;
border: 1px dashed var(--ink);
}
/* Hiệu ứng nổ pháo hoa khi click */
.click-firework {
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
pointer-events: none;
animation: explode 0.8s ease-out forwards;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(15); opacity: 0; }
}
/* Hoa mai rơi */
.falling {
position: fixed;
top: -50px;
z-index: 100;
animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
</style>
</head>
<body>
<div id="horse-cursor">🐎</div>
<div class="newspaper-canvas">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-left">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-right">
<header>
<p class="sub-title">Số đặc biệt: Chào Xuân 2026</p>
<h1 class="main-title">Mã Đáo Thành Công</h1>
<p>Người thực hiện: <b>Sĩ tử Nguyễn Văn A - Lớp 12A1</b></p>
</header>
<div class="grid-layout">
<div class="news-section">
<h2>Lời Ngỏ</h2>
<p style="font-style: italic; line-height: 1.6;">
Năm 2026 - cánh cửa cuộc đời đang mở rộng trước mắt những sĩ tử lớp 12.
Như chú ngựa sắt bền bỉ, chúng ta quyết tâm phi nước đại để cán đích vinh quang.
Tờ báo tường này là nơi gửi gắm những ước mơ và sự chuẩn bị kỹ lưỡng cho kỳ thi sắp tới.
</p>
</div>
<div class="news-section">
<h2>Gương Mặt Sĩ Tử</h2>
<p><b>Họ tên:</b> Nguyễn Văn A</p>
<p><b>Mục tiêu:</b> ĐH Bách Khoa TP.HCM</p>
<p><b>Sở thích:</b> Sáng tạo Code & Giải Toán</p>
<p><b>Châm ngôn:</b> <span style="color: var(--red-tet);">"Học không chơi đánh rơi tuổi trẻ, chơi không học vừa khỏe vừa vui (nhưng vẫn đỗ BK)!"</span></p>
</div>
<div class="news-section" style="grid-column: 1 / -1;">
<h2>Lịch Trình Chinh Phục</h2>
<table>
<tr><th>Thứ 2</th><th>Thứ 3</th><th>Thứ 4</th><th>Thứ 5</th><th>Thứ 6</th><th>Thứ 7</th></tr>
<tr><td>Toán</td><td>Toán</td><td>Văn</td><td>Lý</td><td>Anh</td><td>Luyện Đề</td></tr>
<tr><td>Văn</td><td>Lý</td><td>Hóa</td><td>Sinh</td><td>Sử</td><td>Tự Học</td></tr>
</table>
</div>
<div class="poem-section">
<h2>Góc Thơ Thanh Xuân</h2>
<p>Tháng năm ấy, bảng đen và phấn trắng</p>
<p>Gửi lại trường những vạt nắng xôn xao</p>
<p>Tuổi mười tám, bao hoài bão dâng trào</p>
<p>Ngựa sắt vươn mình, hóa rồng bay phấp phới.</p>
</div>
</div>
<div style="text-align: center; margin-top: 50px; font-weight: bold; font-family: 'Dancing Script'; font-size: 2rem;">
🧧 Chúc Mừng Năm Mới - Thi Đâu Đỗ Đó! 🧧
</div>
</div>
<script>
// 1. Con chuột ngựa bay
const cursor = document.getElementById('horse-cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// 2. Hiệu ứng click nổ pháo hoa giấy (Confetti)
document.addEventListener('click', (e) => {
for(let i=0; i<10; i++) {
const firework = document.createElement('div');
firework.className = 'click-firework';
firework.style.left = e.clientX + 'px';
firework.style.top = e.clientY + 'px';
firework.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
document.body.appendChild(firework);
setTimeout(() => firework.remove(), 800);
}
});
// 3. Hoa mai rơi
function createFalling() {
const item = document.createElement('div');
item.className = 'falling';
item.innerHTML = Math.random() > 0.5 ? '🌸' : '🌼';
item.style.left = Math.random() * 100 + 'vw';
item.style.fontSize = Math.random() * 20 + 20 + 'px';
item.style.animationDuration = Math.random() * 3 + 4 + 's';
document.body.appendChild(item);
setTimeout(() => item.remove(), 5000);
}
setInterval(createFalling, 300);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Báo Tường Xuân 2026 - Mã Đáo Thành Công</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Saira+Stencil+One&display=swap" rel="stylesheet">
<style>
:root {
--paper: #f4e4bc;
--ink: #5d2e12;
--red-tet: #b30000;
--gold: #daa520;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body {
background: #222 url('https://www.transparenttextures.com/patterns/dark-wood.png');
color: var(--ink);
font-family: 'Segoe UI', serif;
overflow-x: hidden;
padding: 50px 20px;
}
/* --- HIỆU ỨNG CHUỘT NGỰA BAY TỰ DO --- */
#horse-cursor {
position: fixed;
z-index: 1000;
pointer-events: none;
font-size: 60px;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
transition: transform 0.1s linear;
}
/* --- KHỔ GIẤY BÁO TƯỜNG (SCROLL) --- */
.newspaper-canvas {
max-width: 1000px;
margin: 0 auto;
background: var(--paper);
border: 15px solid #8b4513;
border-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') 30 round;
box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 100px rgba(0,0,0,0.2);
padding: 60px;
position: relative;
min-height: 1500px;
}
/* Hoa văn góc báo tường */
.corner-flower {
position: absolute;
width: 200px;
z-index: 5;
pointer-events: none;
}
.top-left { top: -10px; left: -10px; transform: rotate(0deg); }
.top-right { top: -10px; right: -10px; transform: rotate(90deg); }
/* Tiêu đề báo tường */
header {
text-align: center;
border-bottom: 5px double var(--red-tet);
margin-bottom: 50px;
padding-bottom: 20px;
}
.main-title {
font-family: 'Dancing Script', cursive;
font-size: 5rem;
color: var(--red-tet);
text-shadow: 2px 2px 0px var(--gold);
}
.sub-title {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 5px;
color: #333;
font-weight: bold;
}
/* Các mục báo tường */
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.news-section {
border: 2px solid rgba(93, 46, 18, 0.2);
padding: 20px;
background: rgba(255,255,255,0.3);
position: relative;
}
.news-section h2 {
font-family: 'Dancing Script', cursive;
font-size: 2.2rem;
color: var(--red-tet);
margin-bottom: 15px;
text-align: center;
}
/* Bảng thời khóa biểu dạng viết tay */
table {
width: 100%;
border-collapse: collapse;
font-family: 'Dancing Script', cursive;
font-size: 1.2rem;
}
th, td {
border-bottom: 1px solid var(--ink);
padding: 10px;
text-align: center;
}
th { color: var(--red-tet); font-size: 1.4rem; }
/* Bài thơ - Trọng tâm của báo tường */
.poem-section {
grid-column: 1 / -1;
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 1.8rem;
line-height: 2.2;
padding: 40px;
border: 1px dashed var(--ink);
}
/* Hiệu ứng nổ pháo hoa khi click */
.click-firework {
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
pointer-events: none;
animation: explode 0.8s ease-out forwards;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(15); opacity: 0; }
}
/* Hoa mai rơi */
.falling {
position: fixed;
top: -50px;
z-index: 100;
animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
</style>
</head>
<body>
<div id="horse-cursor">🐎</div>
<div class="newspaper-canvas">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-left">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-right">
<header>
<p class="sub-title">Số đặc biệt: Chào Xuân 2026</p>
<h1 class="main-title">Mã Đáo Thành Công</h1>
<p>Người thực hiện: <b>Sĩ tử Nguyễn Văn A - Lớp 12A1</b></p>
</header>
<div class="grid-layout">
<div class="news-section">
<h2>Lời Ngỏ</h2>
<p style="font-style: italic; line-height: 1.6;">
Năm 2026 - cánh cửa cuộc đời đang mở rộng trước mắt những sĩ tử lớp 12.
Như chú ngựa sắt bền bỉ, chúng ta quyết tâm phi nước đại để cán đích vinh quang.
Tờ báo tường này là nơi gửi gắm những ước mơ và sự chuẩn bị kỹ lưỡng cho kỳ thi sắp tới.
</p>
</div>
<div class="news-section">
<h2>Gương Mặt Sĩ Tử</h2>
<p><b>Họ tên:</b> Nguyễn Văn A</p>
<p><b>Mục tiêu:</b> ĐH Bách Khoa TP.HCM</p>
<p><b>Sở thích:</b> Sáng tạo Code & Giải Toán</p>
<p><b>Châm ngôn:</b> <span style="color: var(--red-tet);">"Học không chơi đánh rơi tuổi trẻ, chơi không học vừa khỏe vừa vui (nhưng vẫn đỗ BK)!"</span></p>
</div>
<div class="news-section" style="grid-column: 1 / -1;">
<h2>Lịch Trình Chinh Phục</h2>
<table>
<tr><th>Thứ 2</th><th>Thứ 3</th><th>Thứ 4</th><th>Thứ 5</th><th>Thứ 6</th><th>Thứ 7</th></tr>
<tr><td>Toán</td><td>Toán</td><td>Văn</td><td>Lý</td><td>Anh</td><td>Luyện Đề</td></tr>
<tr><td>Văn</td><td>Lý</td><td>Hóa</td><td>Sinh</td><td>Sử</td><td>Tự Học</td></tr>
</table>
</div>
<div class="poem-section">
<h2>Góc Thơ Thanh Xuân</h2>
<p>Tháng năm ấy, bảng đen và phấn trắng</p>
<p>Gửi lại trường những vạt nắng xôn xao</p>
<p>Tuổi mười tám, bao hoài bão dâng trào</p>
<p>Ngựa sắt vươn mình, hóa rồng bay phấp phới.</p>
</div>
</div>
<div style="text-align: center; margin-top: 50px; font-weight: bold; font-family: 'Dancing Script'; font-size: 2rem;">
🧧 Chúc Mừng Năm Mới - Thi Đâu Đỗ Đó! 🧧
</div>
</div>
<script>
// 1. Con chuột ngựa bay
const cursor = document.getElementById('horse-cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// 2. Hiệu ứng click nổ pháo hoa giấy (Confetti)
document.addEventListener('click', (e) => {
for(let i=0; i<10; i++) {
const firework = document.createElement('div');
firework.className = 'click-firework';
firework.style.left = e.clientX + 'px';
firework.style.top = e.clientY + 'px';
firework.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
document.body.appendChild(firework);
setTimeout(() => firework.remove(), 800);
}
});
// 3. Hoa mai rơi
function createFalling() {
const item = document.createElement('div');
item.className = 'falling';
item.innerHTML = Math.random() > 0.5 ? '🌸' : '🌼';
item.style.left = Math.random() * 100 + 'vw';
item.style.fontSize = Math.random() * 20 + 20 + 'px';
item.style.animationDuration = Math.random() * 3 + 4 + 's';
document.body.appendChild(item);
setTimeout(() => item.remove(), 5000);
}
setInterval(createFalling, 300);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Báo Tường Xuân 2026 - Mã Đáo Thành Công</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Saira+Stencil+One&display=swap" rel="stylesheet">
<style>
:root {
--paper: #f4e4bc;
--ink: #5d2e12;
--red-tet: #b30000;
--gold: #daa520;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body {
background: #222 url('https://www.transparenttextures.com/patterns/dark-wood.png');
color: var(--ink);
font-family: 'Segoe UI', serif;
overflow-x: hidden;
padding: 50px 20px;
}
/* --- HIỆU ỨNG CHUỘT NGỰA BAY TỰ DO --- */
#horse-cursor {
position: fixed;
z-index: 1000;
pointer-events: none;
font-size: 60px;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
transition: transform 0.1s linear;
}
/* --- KHỔ GIẤY BÁO TƯỜNG (SCROLL) --- */
.newspaper-canvas {
max-width: 1000px;
margin: 0 auto;
background: var(--paper);
border: 15px solid #8b4513;
border-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') 30 round;
box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 100px rgba(0,0,0,0.2);
padding: 60px;
position: relative;
min-height: 1500px;
}
/* Hoa văn góc báo tường */
.corner-flower {
position: absolute;
width: 200px;
z-index: 5;
pointer-events: none;
}
.top-left { top: -10px; left: -10px; transform: rotate(0deg); }
.top-right { top: -10px; right: -10px; transform: rotate(90deg); }
/* Tiêu đề báo tường */
header {
text-align: center;
border-bottom: 5px double var(--red-tet);
margin-bottom: 50px;
padding-bottom: 20px;
}
.main-title {
font-family: 'Dancing Script', cursive;
font-size: 5rem;
color: var(--red-tet);
text-shadow: 2px 2px 0px var(--gold);
}
.sub-title {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 5px;
color: #333;
font-weight: bold;
}
/* Các mục báo tường */
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.news-section {
border: 2px solid rgba(93, 46, 18, 0.2);
padding: 20px;
background: rgba(255,255,255,0.3);
position: relative;
}
.news-section h2 {
font-family: 'Dancing Script', cursive;
font-size: 2.2rem;
color: var(--red-tet);
margin-bottom: 15px;
text-align: center;
}
/* Bảng thời khóa biểu dạng viết tay */
table {
width: 100%;
border-collapse: collapse;
font-family: 'Dancing Script', cursive;
font-size: 1.2rem;
}
th, td {
border-bottom: 1px solid var(--ink);
padding: 10px;
text-align: center;
}
th { color: var(--red-tet); font-size: 1.4rem; }
/* Bài thơ - Trọng tâm của báo tường */
.poem-section {
grid-column: 1 / -1;
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 1.8rem;
line-height: 2.2;
padding: 40px;
border: 1px dashed var(--ink);
}
/* Hiệu ứng nổ pháo hoa khi click */
.click-firework {
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
pointer-events: none;
animation: explode 0.8s ease-out forwards;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(15); opacity: 0; }
}
/* Hoa mai rơi */
.falling {
position: fixed;
top: -50px;
z-index: 100;
animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
</style>
</head>
<body>
<div id="horse-cursor">🐎</div>
<div class="newspaper-canvas">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-left">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-right">
<header>
<p class="sub-title">Số đặc biệt: Chào Xuân 2026</p>
<h1 class="main-title">Mã Đáo Thành Công</h1>
<p>Người thực hiện: <b>Sĩ tử Nguyễn Văn A - Lớp 12A1</b></p>
</header>
<div class="grid-layout">
<div class="news-section">
<h2>Lời Ngỏ</h2>
<p style="font-style: italic; line-height: 1.6;">
Năm 2026 - cánh cửa cuộc đời đang mở rộng trước mắt những sĩ tử lớp 12.
Như chú ngựa sắt bền bỉ, chúng ta quyết tâm phi nước đại để cán đích vinh quang.
Tờ báo tường này là nơi gửi gắm những ước mơ và sự chuẩn bị kỹ lưỡng cho kỳ thi sắp tới.
</p>
</div>
<div class="news-section">
<h2>Gương Mặt Sĩ Tử</h2>
<p><b>Họ tên:</b> Nguyễn Văn A</p>
<p><b>Mục tiêu:</b> ĐH Bách Khoa TP.HCM</p>
<p><b>Sở thích:</b> Sáng tạo Code & Giải Toán</p>
<p><b>Châm ngôn:</b> <span style="color: var(--red-tet);">"Học không chơi đánh rơi tuổi trẻ, chơi không học vừa khỏe vừa vui (nhưng vẫn đỗ BK)!"</span></p>
</div>
<div class="news-section" style="grid-column: 1 / -1;">
<h2>Lịch Trình Chinh Phục</h2>
<table>
<tr><th>Thứ 2</th><th>Thứ 3</th><th>Thứ 4</th><th>Thứ 5</th><th>Thứ 6</th><th>Thứ 7</th></tr>
<tr><td>Toán</td><td>Toán</td><td>Văn</td><td>Lý</td><td>Anh</td><td>Luyện Đề</td></tr>
<tr><td>Văn</td><td>Lý</td><td>Hóa</td><td>Sinh</td><td>Sử</td><td>Tự Học</td></tr>
</table>
</div>
<div class="poem-section">
<h2>Góc Thơ Thanh Xuân</h2>
<p>Tháng năm ấy, bảng đen và phấn trắng</p>
<p>Gửi lại trường những vạt nắng xôn xao</p>
<p>Tuổi mười tám, bao hoài bão dâng trào</p>
<p>Ngựa sắt vươn mình, hóa rồng bay phấp phới.</p>
</div>
</div>
<div style="text-align: center; margin-top: 50px; font-weight: bold; font-family: 'Dancing Script'; font-size: 2rem;">
🧧 Chúc Mừng Năm Mới - Thi Đâu Đỗ Đó! 🧧
</div>
</div>
<script>
// 1. Con chuột ngựa bay
const cursor = document.getElementById('horse-cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// 2. Hiệu ứng click nổ pháo hoa giấy (Confetti)
document.addEventListener('click', (e) => {
for(let i=0; i<10; i++) {
const firework = document.createElement('div');
firework.className = 'click-firework';
firework.style.left = e.clientX + 'px';
firework.style.top = e.clientY + 'px';
firework.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
document.body.appendChild(firework);
setTimeout(() => firework.remove(), 800);
}
});
// 3. Hoa mai rơi
function createFalling() {
const item = document.createElement('div');
item.className = 'falling';
item.innerHTML = Math.random() > 0.5 ? '🌸' : '🌼';
item.style.left = Math.random() * 100 + 'vw';
item.style.fontSize = Math.random() * 20 + 20 + 'px';
item.style.animationDuration = Math.random() * 3 + 4 + 's';
document.body.appendChild(item);
setTimeout(() => item.remove(), 5000);
}
setInterval(createFalling, 300);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Báo Tường Xuân 2026 - Mã Đáo Thành Công</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Saira+Stencil+One&display=swap" rel="stylesheet">
<style>
:root {
--paper: #f4e4bc;
--ink: #5d2e12;
--red-tet: #b30000;
--gold: #daa520;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body {
background: #222 url('https://www.transparenttextures.com/patterns/dark-wood.png');
color: var(--ink);
font-family: 'Segoe UI', serif;
overflow-x: hidden;
padding: 50px 20px;
}
/* --- HIỆU ỨNG CHUỘT NGỰA BAY TỰ DO --- */
#horse-cursor {
position: fixed;
z-index: 1000;
pointer-events: none;
font-size: 60px;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
transition: transform 0.1s linear;
}
/* --- KHỔ GIẤY BÁO TƯỜNG (SCROLL) --- */
.newspaper-canvas {
max-width: 1000px;
margin: 0 auto;
background: var(--paper);
border: 15px solid #8b4513;
border-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') 30 round;
box-shadow: 0 0 50px rgba(0,0,0,0.8), inset 0 0 100px rgba(0,0,0,0.2);
padding: 60px;
position: relative;
min-height: 1500px;
}
/* Hoa văn góc báo tường */
.corner-flower {
position: absolute;
width: 200px;
z-index: 5;
pointer-events: none;
}
.top-left { top: -10px; left: -10px; transform: rotate(0deg); }
.top-right { top: -10px; right: -10px; transform: rotate(90deg); }
/* Tiêu đề báo tường */
header {
text-align: center;
border-bottom: 5px double var(--red-tet);
margin-bottom: 50px;
padding-bottom: 20px;
}
.main-title {
font-family: 'Dancing Script', cursive;
font-size: 5rem;
color: var(--red-tet);
text-shadow: 2px 2px 0px var(--gold);
}
.sub-title {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 5px;
color: #333;
font-weight: bold;
}
/* Các mục báo tường */
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.news-section {
border: 2px solid rgba(93, 46, 18, 0.2);
padding: 20px;
background: rgba(255,255,255,0.3);
position: relative;
}
.news-section h2 {
font-family: 'Dancing Script', cursive;
font-size: 2.2rem;
color: var(--red-tet);
margin-bottom: 15px;
text-align: center;
}
/* Bảng thời khóa biểu dạng viết tay */
table {
width: 100%;
border-collapse: collapse;
font-family: 'Dancing Script', cursive;
font-size: 1.2rem;
}
th, td {
border-bottom: 1px solid var(--ink);
padding: 10px;
text-align: center;
}
th { color: var(--red-tet); font-size: 1.4rem; }
/* Bài thơ - Trọng tâm của báo tường */
.poem-section {
grid-column: 1 / -1;
text-align: center;
font-family: 'Dancing Script', cursive;
font-size: 1.8rem;
line-height: 2.2;
padding: 40px;
border: 1px dashed var(--ink);
}
/* Hiệu ứng nổ pháo hoa khi click */
.click-firework {
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
pointer-events: none;
animation: explode 0.8s ease-out forwards;
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(15); opacity: 0; }
}
/* Hoa mai rơi */
.falling {
position: fixed;
top: -50px;
z-index: 100;
animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
</style>
</head>
<body>
<div id="horse-cursor">🐎</div>
<div class="newspaper-canvas">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-left">
<img src="https://img.icons8.com/color/200/apricot-blossom.png" class="corner-flower top-right">
<header>
<p class="sub-title">Số đặc biệt: Chào Xuân 2026</p>
<h1 class="main-title">Mã Đáo Thành Công</h1>
<p>Người thực hiện: <b>Sĩ tử Nguyễn Văn A - Lớp 12A1</b></p>
</header>
<div class="grid-layout">
<div class="news-section">
<h2>Lời Ngỏ</h2>
<p style="font-style: italic; line-height: 1.6;">
Năm 2026 - cánh cửa cuộc đời đang mở rộng trước mắt những sĩ tử lớp 12.
Như chú ngựa sắt bền bỉ, chúng ta quyết tâm phi nước đại để cán đích vinh quang.
Tờ báo tường này là nơi gửi gắm những ước mơ và sự chuẩn bị kỹ lưỡng cho kỳ thi sắp tới.
</p>
</div>
<div class="news-section">
<h2>Gương Mặt Sĩ Tử</h2>
<p><b>Họ tên:</b> Nguyễn Văn A</p>
<p><b>Mục tiêu:</b> ĐH Bách Khoa TP.HCM</p>
<p><b>Sở thích:</b> Sáng tạo Code & Giải Toán</p>
<p><b>Châm ngôn:</b> <span style="color: var(--red-tet);">"Học không chơi đánh rơi tuổi trẻ, chơi không học vừa khỏe vừa vui (nhưng vẫn đỗ BK)!"</span></p>
</div>
<div class="news-section" style="grid-column: 1 / -1;">
<h2>Lịch Trình Chinh Phục</h2>
<table>
<tr><th>Thứ 2</th><th>Thứ 3</th><th>Thứ 4</th><th>Thứ 5</th><th>Thứ 6</th><th>Thứ 7</th></tr>
<tr><td>Toán</td><td>Toán</td><td>Văn</td><td>Lý</td><td>Anh</td><td>Luyện Đề</td></tr>
<tr><td>Văn</td><td>Lý</td><td>Hóa</td><td>Sinh</td><td>Sử</td><td>Tự Học</td></tr>
</table>
</div>
<div class="poem-section">
<h2>Góc Thơ Thanh Xuân</h2>
<p>Tháng năm ấy, bảng đen và phấn trắng</p>
<p>Gửi lại trường những vạt nắng xôn xao</p>
<p>Tuổi mười tám, bao hoài bão dâng trào</p>
<p>Ngựa sắt vươn mình, hóa rồng bay phấp phới.</p>
</div>
</div>
<div style="text-align: center; margin-top: 50px; font-weight: bold; font-family: 'Dancing Script'; font-size: 2rem;">
🧧 Chúc Mừng Năm Mới - Thi Đâu Đỗ Đó! 🧧
</div>
</div>
<script>
// 1. Con chuột ngựa bay
const cursor = document.getElementById('horse-cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// 2. Hiệu ứng click nổ pháo hoa giấy (Confetti)
document.addEventListener('click', (e) => {
for(let i=0; i<10; i++) {
const firework = document.createElement('div');
firework.className = 'click-firework';
firework.style.left = e.clientX + 'px';
firework.style.top = e.clientY + 'px';
firework.style.background = `hsl(${Math.random()*360}, 100%, 50%)`;
document.body.appendChild(firework);
setTimeout(() => firework.remove(), 800);
}
});
// 3. Hoa mai rơi
function createFalling() {
const item = document.createElement('div');
item.className = 'falling';
item.innerHTML = Math.random() > 0.5 ? '🌸' : '🌼';
item.style.left = Math.random() * 100 + 'vw';
item.style.fontSize = Math.random() * 20 + 20 + 'px';
item.style.animationDuration = Math.random() * 3 + 4 + 's';
document.body.appendChild(item);
setTimeout(() => item.remove(), 5000);
}
setInterval(createFalling, 300);
</script>
</body>
</html>