Cao Diệu Linh
Giới thiệu về bản thân
Thử phiên bản mới
chờ mình xíu nhé
tý mình giải cho
mình có nè
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TCMC - Cháy Cùng Đam Mê | THPT Thượng Cát</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');
:root {
--accent: #ff4500;
--accent-gradient: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
--bg-dark: #070707;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg-dark);
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TCMC - Cháy Cùng Đam Mê | THPT Thượng Cát</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');
:root {
--accent: #ff4500;
--accent-gradient: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
--bg-dark: #070707;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg-dark);
color: white;
overflow-x: hidden;
}
.font-heading { font-family: 'Syncopate', sans-serif; }
.text-gradient {
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Hiệu ứng sóng âm bao quanh Logo */
.sound-wave {
position: absolute;
border: 2px solid rgba(255, 69, 0, 0.4);
border-radius: 50%;
animation: wave 4s infinite linear;
z-index: 0;
}
@keyframes wave {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.8); opacity: 0; }
}
.glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.bento-card {
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
position: relative;
}
.bento-card:hover {
transform: translateY(-10px);
border-color: var(--accent);
box-shadow: 0 20px 40px rgba(255, 69, 0, 0.15);
}
.btn-fire {
background: var(--accent-gradient);
box-shadow: 0 10px 30px rgba(255, 69, 0, 0.3);
transition: 0.4s;
}
.btn-fire:hover {
box-shadow: 0 15px 40px rgba(255, 69, 0, 0.6);
transform: scale(1.05);
}
/* Image Mask */
.img-overlay {
background: linear-gradient(to top, rgba(7,7,7,1) 0%, rgba(7,7,7,0.3) 50%, rgba(7,7,7,0) 100%);
}
.activity-card {
background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
transition: 0.3s ease;
}
.activity-card:hover {
background: rgba(255, 69, 0, 0.05);
}
/* Gallery Zoom */
.gallery-item img {
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item:hover img {
transform: scale(1.1);
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }
</style>
</head>
<body>
<!-- Header & Navigation -->
<nav class="fixed w-full z-50 py-4 transition-all duration-500" id="navbar">
<div class="max-w-7xl mx-auto px-6 flex justify-between items-center">
<div class="flex items-center space-x-4">
<div class="bg-white p-1 rounded-full shadow-[0_0_15px_rgba(255,255,255,0.2)]">
<img src="tcat.jpg" alt="Logo Trường Thượng Cát" class="h-10 w-10 rounded-full object-cover">
</div>
<div class="flex flex-col">
<span class="font-heading text-lg font-bold tracking-tighter leading-none">TCMC</span>
<span class="text-[8px] uppercase tracking-[0.3em] text-gray-400 font-bold">Thuong Cat Music</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-10">
<a href="#home" class="text-[10px] font-black uppercase tracking-widest hover:text-orange-500 transition text-orange-500">Trang chủ</a>
<a href="#activities" class="text-[10px] font-black uppercase tracking-widest hover:text-orange-500 transition">Hoạt động</a>
<a href="#showcase" class="text-[10px] font-black uppercase tracking-widest hover:text-orange-500 transition">Sân khấu</a>
<a href="#join" class="btn-fire px-8 py-2 rounded-full text-[10px] font-black uppercase tracking-widest shadow-lg">Gia nhập</a>
</div>
<button class="md:hidden text-white"><i class="fas fa-bars-staggered text-2xl"></i></button>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 px-6">
<div class="absolute top-1/4 -left-20 w-[500px] h-[500px] bg-orange-600/10 blur-[150px] rounded-full"></div>
<div class="absolute bottom-1/4 -right-20 w-[500px] h-[500px] bg-red-600/10 blur-[150px] rounded-full"></div>
<div class="relative z-10 text-center">
<div class="relative inline-block mb-10">
<div class="sound-wave" style="animation-delay: 0s;"></div>
<div class="sound-wave" style="animation-delay: 1.5s;"></div>
<div class="relative z-10 p-2 bg-gradient-to-br from-orange-500 to-red-600 rounded-full">
<img src="tcmc.jpg" alt="Logo CLB TCMC" class="w-44 h-44 md:w-60 md:h-60 rounded-full object-cover border-4 border-black shadow-2xl">
</div>
</div>
<h1 class="font-heading text-5xl md:text-8xl font-black mb-6 leading-none tracking-tighter">
AMPLIFY YOUR <br> <span class="text-gradient">PASSION</span>
</h1>
<p class="max-w-2xl mx-auto text-gray-400 text-lg md:text-xl mb-10 font-light tracking-wide italic">
Bản sắc Thượng Cát - Giai điệu tương lai. Chúng mình cùng nhau tỏa sáng qua từng nốt nhạc.
</p>
<div class="flex flex-col md:flex-row gap-6 justify-center items-center">
<a href="#join" class="btn-fire px-12 py-5 rounded-2xl font-black uppercase tracking-widest text-sm w-full md:w-auto shadow-2xl text-center">Đăng ký Casting</a>
<a href="#activities" class="group flex items-center space-x-3 text-xs font-black uppercase tracking-[0.2em] py-5 px-8 glass rounded-2xl hover:bg-white/10 transition">
<span>Khám phá hoạt động</span>
<i class="fas fa-arrow-down text-[10px] transition group-hover:translate-y-1 text-orange-500"></i>
</a>
</div>
</div>
</section>
<!-- Activities Section -->
<section id="activities" class="py-24 px-6 max-w-7xl mx-auto">
<div class="mb-20 text-center">
<h2 class="font-heading text-4xl md:text-6xl font-black mb-4 uppercase italic">Hành trình <span class="text-gradient">Âm nhạc</span></h2>
<p class="text-gray-500 tracking-[0.2em] uppercase text-xs font-bold">Từ luyện tập đến sân khấu chuyên nghiệp</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="activity-card p-10 rounded-[3rem] border border-white/5 bento-card">
<div class="w-16 h-16 bg-orange-600/20 rounded-2xl flex items-center justify-center mb-8 border border-orange-500/30">
<i class="fas fa-microphone-lines text-2xl text-orange-500"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Workshop & Luyện thanh</h3>
<p class="text-gray-500 text-sm mb-6">"Xương sống" của CLB, nơi nâng tầm giọng hát mỗi tuần.</p>
<ul class="space-y-3 text-sm text-gray-400">
<li class="flex items-center space-x-2"><i class="fas fa-check text-orange-500"></i> <span>Kỹ thuật lấy hơi, mở khẩu hình.</span></li>
<li class="flex items-center space-x-2"><i class="fas fa-check text-orange-500"></i> <span>Rung hơi & Nhạc lý cơ bản.</span></li>
</ul>
</div>
<div class="activity-card p-10 rounded-[3rem] border border-white/5 bento-card">
<div class="w-16 h-16 bg-blue-600/20 rounded-2xl flex items-center justify-center mb-8 border border-blue-500/30">
<i class="fas fa-users-viewfinder text-2xl text-blue-500"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Tập luyện & Chia bè</h3>
<p class="text-gray-500 text-sm mb-6">Tăng tính đồng đội và khả năng phối hợp bản phối.</p>
<ul class="space-y-3 text-sm text-gray-400">
<li class="flex items-center space-x-2"><i class="fas fa-check text-blue-500"></i> <span>Chia bè Soprano, Alto, Tenor.</span></li>
<li class="flex items-center space-x-2"><i class="fas fa-check text-blue-500"></i> <span>Ghép ban nhạc & Nhạc cụ.</span></li>
</ul>
</div>
<div class="activity-card p-10 rounded-[3rem] border border-white/5 bento-card text-center flex flex-col items-center justify-center">
<img src="tcat.jpg" alt="Logo Trường" class="w-20 h-20 rounded-full mb-6 border-2 border-white/20">
<h4 class="font-heading text-xs font-bold text-white mb-2 uppercase tracking-widest">Niềm tự hào</h4>
<p class="text-xl font-bold text-orange-500 uppercase tracking-tighter">THPT Thượng Cát</p>
</div>
</div>
</section>
<!-- Showcase Section: SÂN KHẤU RỰC RỠ -->
<section id="showcase" class="py-24 px-6 max-w-7xl mx-auto">
<div class="mb-16 flex flex-col md:flex-row md:items-end justify-between gap-6">
<div>
<h2 class="font-heading text-4xl md:text-6xl font-black mb-4 uppercase italic">Sân khấu <span class="text-gradient">Rực rỡ</span></h2>
<p class="text-gray-500 tracking-[0.2em] uppercase text-xs font-bold">Những khoảnh khắc bùng cháy của TCMC</p>
</div>
<div class="glass px-6 py-3 rounded-2xl border-orange-500/20">
<span class="text-orange-500 font-bold">K20</span> <span class="text-gray-400 text-xs ml-2">Performance Collection</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
<!-- Ảnh hj.jpg (Lớn nhất) -->
<div class="md:col-span-8 gallery-item bento-card rounded-[2.5rem] h-[500px] relative overflow-hidden">
<img src="hj.jpg" alt="Đội hình cờ đỏ sao vàng" class="w-full h-full object-cover">
<div class="absolute inset-0 img-overlay flex flex-col justify-end p-8">
<h3 class="text-2xl font-bold uppercase tracking-tighter">Hào khí Việt Nam</h3>
<p class="text-gray-400 text-sm">Tiết mục khai mạc đầy ấn tượng.</p>
</div>
</div>
<!-- Ảnh images.jpg -->
<div class="md:col-span-4 gallery-item bento-card rounded-[2.5rem] h-[500px] relative overflow-hidden">
<img src="images.jpg" alt="Song ca" class="w-full h-full object-cover">
<div class="absolute inset-0 img-overlay flex flex-col justify-end p-8">
<h3 class="text-xl font-bold uppercase tracking-tighter">Giai điệu người lính</h3>
<p class="text-gray-400 text-xs italic">Nốt lặng đầy cảm xúc.</p>
</div>
</div>
<!-- Ảnh 15.jpg -->
<div class="md:col-span-6 gallery-item bento-card rounded-[2.5rem] h-[400px] relative overflow-hidden">
<img src="15.jpg" alt="Múa sen" class="w-full h-full object-cover">
<div class="absolute inset-0 img-overlay flex flex-col justify-end p-8">
<h3 class="text-xl font-bold uppercase tracking-tighter">Sen Hồng Thượng Cát</h3>
<p class="text-gray-400 text-xs">Vẻ đẹp truyền thống kết hợp hiện đại.</p>
</div>
</div>
<!-- Ảnh hát.jpg -->
<div class="md:col-span-6 gallery-item bento-card rounded-[2.5rem] h-[400px] relative overflow-hidden">
<img src="hát.jpg" alt="Hợp xướng" class="w-full h-full object-cover">
<div class="absolute inset-0 img-overlay flex flex-col justify-end p-8">
<h3 class="text-xl font-bold uppercase tracking-tighter">Khát vọng vươn xa</h3>
<p class="text-gray-400 text-xs">Hòa giọng cùng đam mê.</p>
</div>
</div>
</div>
</section>
<!-- Join Section -->
<section id="join" class="py-24 px-6 relative">
<div class="max-w-4xl mx-auto glass rounded-[3.5rem] p-10 md:p-20 relative z-10 overflow-hidden">
<div class="text-center mb-16">
<div class="flex justify-center space-x-4 mb-8">
<img src="tcat.jpg" class="w-14 h-14 rounded-full border border-white/20 object-cover shadow-lg">
<img src="tcmc.jpg" class="w-14 h-14 rounded-full border border-orange-500 object-cover shadow-lg">
</div>
<h2 class="font-heading text-4xl md:text-6xl font-black mb-6 italic tracking-tighter uppercase">JOIN THE <span class="text-gradient">BEAT</span></h2>
<p class="text-gray-400 max-w-md mx-auto italic">TCMC k20 đang chờ đón thế hệ nghệ sĩ tài năng tiếp theo.</p>
</div>
<form id="joinForm" class="grid grid-cols-1 gap-8">
<div class="grid md:grid-cols-2 gap-8">
<input type="text" required class="w-full bg-white/5 border border-white/10 rounded-2xl p-5 outline-none focus:border-orange-500 transition-all font-bold" placeholder="Họ và tên">
<input type="text" required class="w-full bg-white/5 border border-white/10 rounded-2xl p-5 outline-none focus:border-orange-500 transition-all font-bold" placeholder="Lớp (Ví dụ: 10A1)">
</div>
<button type="submit" class="btn-fire w-full py-6 rounded-2xl font-black uppercase tracking-[0.4em] text-sm mt-4 shadow-2xl">
Xác nhận Casting ngay
</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="py-16 border-t border-white/5 bg-black">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-12 items-center text-center md:text-left">
<div>
<div class="flex items-center justify-center md:justify-start space-x-3 mb-6">
<img src="tcmc.jpg" class="w-10 h-10 rounded-full" alt="TCMC Logo">
<span class="font-heading text-xl font-bold italic tracking-tighter">TCMC</span>
</div>
<p class="text-[10px] text-gray-500 uppercase tracking-widest font-bold">Cống hiến - Đam mê - Sáng tạo</p>
</div>
<div class="flex flex-col items-center justify-center space-y-4">
<div class="flex space-x-8 text-xl">
<a href="#" class="text-gray-600 hover:text-orange-500 transition"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-600 hover:text-orange-500 transition"><i class="fab fa-tiktok"></i></a>
<a href="#" class="text-gray-600 hover:text-orange-500 transition"><i class="fab fa-instagram"></i></a>
</div>
<div class="text-center">
<span class="text-[9px] text-gray-700 uppercase tracking-[0.5em] block mb-1">Developed by</span>
<span class="text-sm font-black text-white bg-white/5 px-4 py-1 rounded-full border border-white/10">Minh Vy - Lớp 12A2</span>
</div>
</div>
<div class="text-center md:text-right">
<p class="text-[10px] text-gray-600 uppercase font-black tracking-widest">Trường THPT Thượng Cát</p>
<p class="text-[9px] text-gray-800 mt-2 italic">Copyright © 2024 TCMC K20</p>
</div>
</div>
</footer>
<!-- Toast Notification -->
<div id="toast" class="fixed bottom-10 right-10 glass border-orange-500/50 p-8 rounded-[2rem] hidden z-[100] shadow-[0_0_50px_rgba(255,69,0,0.2)]">
<div class="flex items-center space-x-6">
<div class="w-14 h-14 bg-orange-600 rounded-full flex items-center justify-center shadow-lg">
<i class="fas fa-check text-xl text-white"></i>
</div>
<div>
<p class="font-heading text-sm font-bold">ĐÃ GỬI!</p>
<p class="text-xs text-gray-400">Chuẩn bị bài tủ và đợi tin từ TCMC nhé!</p>
</div>
</div>
</div>
<script>
// Navbar scroll effect
window.addEventListener('scroll', () => {
const nav = document.getElementById('navbar');
if (window.scrollY > 80) {
nav.classList.add('bg-black/90', 'backdrop-blur-2xl', 'py-2', 'border-b', 'border-white/5');
} else {
nav.classList.remove('bg-black/90', 'backdrop-blur-2xl', 'py-2', 'border-b', 'border-white/5');
}
});
// Form Submission
document.getElementById('joinForm').addEventListener('submit', (e) => {
e.preventDefault();
const toast = document.getElementById('toast');
toast.style.display = 'block';
setTimeout(() => {
toast.style.display = 'none';
e.target.reset();
}, 4000);
});
// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
-Loại cáp: Cáp xoắn đôi Cat6 là phù hợp nhất, đảm bảo tốc độ truyền tải và ổn định ở khoảng cách .
-Cách thức kết nối mạng đến các thiết bị :
+Bước 1: Kết nối trung tâm: Đặt Switch ở vị trí trung tâm văn phòng.
+Bước 2: Kết nối máy tính và máy in: Sử dụng dây cáp Cat6 bấm sẵn đầu RJ45, cắm một đầu vào cổng mạng LAN trên máy tính/máy in, đầu còn lại cắm vào một cổng trên Switch. Thực hiện lần lượt cho 20 máy tính và máy in.
+Bước 3: Kết nối Internet: Sử dụng một dây cáp mạng kết nối một cổng LAN trên Switch với cổng LAN của Router/Modem Internet.
+Bước 4: Kiểm tra: Đèn tín hiệu trên Switch và cổng mạng trên máy tính sáng/nhấp nháy thể hiện kết nối thành công.
_Điều khiển và tự động hóa: Cho phép bật/tắt thiết bị gia dụng (đèn, quạt, máy pha cà phê...) từ bất cứ đâu, hoặc theo lịch trình cố định.
_Tiết kiệm điện năng: Tự động ngắt điện khi không có người, hoặc khi thiết bị đã sạc đầy/chạy xong chương trình, tránh lãng phí.
_Giám sát năng lượng: Theo dõi mức tiêu thụ điện chi tiết theo ngày/tháng, cảnh báo nếu vượt ngưỡng để rèn luyện thói quen sử dụng điện tiết kiệm.
_Thiết lập ngữ cảnh thông minh: Tương tác với cảm biến để tạo các kịch bản như: "về nhà" (đèn bật, rèm mở) hoặc "đi ngủ" (tất cả ổ cắm tắt).
_Nâng cao an toàn: Giảm rủi ro chập cháy nhờ tính năng tự động ngắt và kiểm soát
.mark{
border: 2px solid #FFA500;
font-weight: bold;
color: black;
font-size: 30px;
}
-Thẻ h4.1: Chữ màu đỏ, in nghiêng, nền màu vàng.
-Thẻ h4.2: Chữ màu xanh lá, font Arial, cỡ 35px, in nghiêng, nền màu xám.
-Thẻ p1: Chữ màu xanh lá, font Arial, cỡ 35px.
-Thẻ p2: Chữ màu đỏ, font Quicksand, in đậm.
t đây nè