Web profilecanhan
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang Profile </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font & Icons -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<style>
:root {
--bg: #050816;
--bg-soft: #0b1020;
--card: #111827;
--accent: #22c55e;
--accent2: #3b82f6;
--text-main: #e5e7eb;
--text-sub: #9ca3af;
--border-soft: rgba(148, 163, 184, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
min-height: 100vh;
background:
radial-gradient(circle at top, rgba(56,189,248,0.3), transparent 55%),
radial-gradient(circle at bottom, rgba(34,197,94,0.3), transparent 55%),
var(--bg);
color: var(--text-main);
display: flex;
justify-content: center;
}
.page {
width: 100%;
max-width: 420px;
padding: 32px 16px 40px;
}
.profile-card {
background: linear-gradient(145deg, #020617, #0b1020);
border-radius: 20px;
padding: 20px 18px;
border: 1px solid var(--border-soft);
box-shadow: 0 18px 40px rgba(0,0,0,0.75);
margin-bottom: 22px;
text-align: center;
position: relative;
overflow: hidden;
}
.profile-card::before {
content:"";
position:absolute;
inset:-40%;
background: radial-gradient(circle at top, rgba(59,130,246,0.25), transparent 55%);
opacity: 0.7;
pointer-events:none;
}
.profile-inner {
position: relative;
z-index: 1;
}
.avatar {
width: 92px;
height: 92px;
border-radius: 999px;
border: 3px solid rgba(34,197,94,0.9);
box-shadow: 0 0 25px rgba(34,197,94,0.9);
object-fit: cover;
margin-bottom: 10px;
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(34,197,94,0.7);
font-size: 11px;
color: var(--text-sub);
margin-bottom: 6px;
}
.status-pill span.dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 10px rgba(34,197,94,0.9);
}
.name-row {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom: 4px;
}
.name-row h1 {
font-size: 22px;
font-weight: 600;
}
.badge-verify {
font-size: 14px;
color:#38bdf8;
}
.profile-card h2 {
font-size: 13px;
font-weight: 500;
color: var(--accent);
margin-bottom: 6px;
}
.profile-card p {
font-size: 12px;
color: var(--text-sub);
max-width: 320px;
margin: 0 auto 10px;
}
.social-row {
display:flex;
justify-content:center;
gap:10px;
margin-top: 10px;
}
.social-btn {
width:32px;
height:32px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:#020617;
border:1px solid rgba(148,163,184,0.6);
font-size:14px;
color:#e5e7eb;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.social-btn:hover {
transform: translateY(-2px) scale(1.03);
border-color: var(--accent2);
box-shadow: 0 0 15px rgba(59,130,246,0.8);
}
/* group title */
.group-title {
font-size: 13px;
font-weight: 500;
margin: 18px 2px 8px;
color: var(--text-sub);
display:flex;
align-items:center;
gap:8px;
}
.group-title::before {
content:"";
width:20px;
height:1px;
background:rgba(148,163,184,0.7);
}
.link-list {
display:flex;
flex-direction:column;
gap:10px;
}
.link-card {
display:grid;
grid-template-columns: 64px minmax(0,1fr);
gap:10px;
align-items:center;
background: var(--card);
border-radius: 14px;
border: 1px solid rgba(30,64,175,0.55);
padding: 8px;
text-decoration:none;
color: inherit;
box-shadow: 0 12px 28px rgba(15,23,42,0.95);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.link-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
background: radial-gradient(circle at top, rgba(59,130,246,0.25), transparent 60%), #020617;
box-shadow: 0 16px 40px rgba(0,0,0,0.85);
}
.thumb {
width:64px;
height:64px;
border-radius: 10px;
overflow:hidden;
background:#020617;
border:1px solid rgba(148,163,184,0.5);
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
}
.thumb img {
width:100%;
height:100%;
object-fit:cover;
}
.link-text h3 {
font-size: 13px;
margin-bottom: 2px;
font-weight: 500;
}
.link-text p {
font-size: 11px;
color: var(--text-sub);
margin-bottom: 0;
}
.tag-small {
display:inline-flex;
align-items:center;
gap:4px;
font-size:10px;
padding:2px 6px;
border-radius:999px;
border:1px solid rgba(148,163,184,0.7);
margin-top:4px;
}
.footer-note {
margin-top: 20px;
font-size: 10px;
text-align:center;
color: var(--text-sub);
}
@media (max-width: 480px) {
.page {
padding-top: 24px;
}
.logo-title {
font-size: 18px;
}
.link-card {
grid-template-columns: 56px minmax(0,1fr);
}
.thumb {
width:56px;
height:56px;
}
}
</style>
</head>
<body>
<div class="page">
<!-- PROFILE -->
<section class="profile-card">
<div class="profile-inner">
<!-- Đổi ảnh avatar ở đây -->
<img src="https://i.pravatar.cc/200" alt="Avatar" class="avatar">
<div class="status-pill">
<span class="dot"></span>
<span>Đang hoạt động</span>
</div>
<div class="name-row">
<h1>Nguyễn Đình Nhật Huy</h1>
<i class="fa-solid fa-circle-check badge-verify" title="Verified"></i>
</div>
<h2>Website tiện ích / Chia sẻ file</h2>
<p>
Web mang đến cho bạn những code web đơn giản do mình tạo ra nhằm mang tính tham khảo !.
</p>
<div class="social-row">
<a href="Link fb của bạn" class="social-btn" title="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-btn" title="Telegram"><i class="fab fa-telegram"></i></a>
<a href="link yt nếu có" class="social-btn" title="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
</section>
<!-- GROUP 1 -->
<h3 class="group-title">📂 Mẫu web số 1 </h3>
<div class="link-list">
<a href="https://anotepad.com/notes/qrpm36kf" class="link-card">
<div class="thumb">
<!-- Có thể thay bằng <img src="..." /> -->
<i class="fa-solid fa-gamepad"></i>
</div>
<div class="link-text">
<h3>Web tư vấn cho các trung tam</h3>
<p>Đây là web do mình tạo ra và có đính kèm code cho bạn nếu cần, nhập code hoặc bấm vào link đi kèm để tham khảo</p>
<span class="tag-small"><i class="fa-regular fa-clock"></i> Cập nhật 12/12</span>
</div>
</a>
<a href="https://anotepad.com/notes/3j96eftt" class="link-card">
<div class="thumb">
<i class="fa-solid fa-download"></i>
</div>
<div class="link-text">
<h3>Web bán hàng toke thanh toán có sẵn</h3>
<p>Đây là web do mình tạo ra và có đính kèm code cho bạn nếu cần, nhập code hoặc bấm vào link đi kèm để tham khảo</p>
<span class="tag-small"><i class="fa-solid fa-link"></i> Link trực tiếp</span>
</div>
</a>
</div>
<!-- GROUP 2 -->
<h3 class="group-title">🔑 Nhóm link số 2</h3>
<div class="link-list">
<a href="#" class="link-card">
<div class="thumb">
<i class="fa-solid fa-key"></i>
</div>
<div class="link-text">
<h3>Tiêu đề link 3</h3>
<p>Ghi chú cách dùng, điều kiện, hoặc gì đó quan trọng cho người bấm.</p>
<span class="tag-small"><i class="fa-solid fa-star"></i> Ưu tiên</span>
</div>
</a>
<a href="#" class="link-card">
<div class="thumb">
<i class="fa-solid fa-book"></i>
</div>
<div class="link-text">
<h3>FAQ / Hướng dẫn</h3>
<p>Trang giải thích chi tiết cách dùng website, cách tải, v.v.</p>
Cần hỗ trợ vui long ib qua facebook nhé!
</div>
</a>
</div>
<p class="footer-note">
© 2025 Nguyen Dinh Nhat Huy – Trang tổng hợp link cá nhân.<br>
Code cho bạn tham khảo và sử dụng.
</p>
</div>
</body>
</html>
Public Last updated: 2025-12-14 05:20:35 AM
