feat: update charity project assets, add livestream media, and clean up temporary migration scripts
This commit is contained in:
@@ -0,0 +1,748 @@
|
||||
<style>
|
||||
.charity-hero {
|
||||
--red: #d7193f;
|
||||
--red-dark: #a90f2d;
|
||||
--red-soft: #fff0f4;
|
||||
--pink: #ffe3ec;
|
||||
--ink: #36363a;
|
||||
--muted: #74747a;
|
||||
--paper: #f7f7f8;
|
||||
--white: #ffffff;
|
||||
--shadow: 0 24px 70px rgba(174, 23, 55, .18);
|
||||
--shadow-strong: 0 32px 90px rgba(100, 10, 30, .28);
|
||||
}
|
||||
|
||||
.charity-hero {
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
color: var(--ink);
|
||||
background: #f1f1f2;
|
||||
position: relative;
|
||||
min-height: 546px;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background:
|
||||
radial-gradient(circle at 72% 22%, rgba(255,255,255,.92), transparent 28%),
|
||||
linear-gradient(110deg, #ffeaf0 0%, #f4f4f5 42%, #f9f9fa 100%);
|
||||
}
|
||||
|
||||
.charity-hero * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.charity-hero a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.charity-hero .hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.charity-hero .blob {
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
filter: blur(3px);
|
||||
opacity: .72;
|
||||
animation: blobFloat 13s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.charity-hero .blob-1 {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
background: rgba(255,207,221,.75);
|
||||
left: -150px;
|
||||
top: -170px;
|
||||
}
|
||||
|
||||
.charity-hero .blob-2 {
|
||||
width: 520px;
|
||||
height: 520px;
|
||||
background: rgba(255,236,241,.9);
|
||||
right: -180px;
|
||||
bottom: -220px;
|
||||
animation-delay: -3s;
|
||||
}
|
||||
|
||||
.charity-hero .blob-3 {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
background: rgba(215,25,63,.12);
|
||||
left: 48%;
|
||||
top: 48%;
|
||||
animation-delay: -6s;
|
||||
}
|
||||
|
||||
.charity-hero .soft-grid {
|
||||
position: absolute;
|
||||
inset: 22px 150px;
|
||||
border: 5px solid rgba(255,206,218,.68);
|
||||
border-radius: 6px;
|
||||
mask: linear-gradient(90deg,transparent,black 4%,black 96%,transparent);
|
||||
-webkit-mask: linear-gradient(90deg,transparent,black 4%,black 96%,transparent);
|
||||
opacity: .76;
|
||||
}
|
||||
|
||||
.charity-hero .soft-grid:before,
|
||||
.charity-hero .soft-grid:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--red);
|
||||
border-radius: 50% 50% 48% 48%;
|
||||
transform: rotate(45deg);
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.charity-hero .soft-grid:before {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
left: 22px;
|
||||
bottom: -13px;
|
||||
box-shadow: 34px -1px 0 var(--red);
|
||||
}
|
||||
|
||||
.charity-hero .soft-grid:after {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
right: 18px;
|
||||
top: 285px;
|
||||
opacity: .55;
|
||||
box-shadow: 20px 19px 0 rgba(215,25,63,.9);
|
||||
}
|
||||
|
||||
.charity-hero .hero-shell {
|
||||
width: min(1580px, calc(100% - 44px));
|
||||
min-height: 546px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(640px, 1.1fr) minmax(470px, .9fr);
|
||||
gap: 42px;
|
||||
align-items: center;
|
||||
padding: 22px 0;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-panel {
|
||||
position: relative;
|
||||
min-height: 500px;
|
||||
padding: 18px 12px 0;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-title {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
top: 10px;
|
||||
z-index: 22;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255,255,255,.72);
|
||||
box-shadow: 0 12px 30px rgba(70,40,50,.08);
|
||||
backdrop-filter: blur(10px);
|
||||
transform: translateY(-12px);
|
||||
opacity: 0;
|
||||
animation: fadeDown .7s ease forwards .25s;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-title .eyebrow {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--red);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-title strong {
|
||||
font-size: 16px;
|
||||
color: #313136;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-stage {
|
||||
position: relative;
|
||||
height: 464px;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
perspective: 1200px;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-light {
|
||||
position: absolute;
|
||||
left: 34%;
|
||||
top: 35%;
|
||||
width: 310px;
|
||||
height: 210px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,.88), rgba(255,255,255,0) 66%);
|
||||
pointer-events: none;
|
||||
opacity: .45;
|
||||
mix-blend-mode: screen;
|
||||
animation: lightPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.charity-hero .focus-frame {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 402px;
|
||||
height: 238px;
|
||||
transform: translate(-50%,-50%) scale(.86);
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(215,25,63,.25);
|
||||
box-shadow: 0 0 0 10px rgba(255,255,255,.16), inset 0 0 42px rgba(215,25,63,.07);
|
||||
opacity: 0;
|
||||
transition: .7s ease;
|
||||
pointer-events: none;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.charity-hero .gallery-stage.is-playing .focus-frame {
|
||||
opacity: 1;
|
||||
transform: translate(-50%,-50%) scale(1);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card {
|
||||
position: absolute;
|
||||
left: var(--x);
|
||||
top: var(--y);
|
||||
width: var(--w);
|
||||
background: #fff;
|
||||
border: 4px solid var(--red);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 14px 36px rgba(61,26,34,.22);
|
||||
transform: translate3d(0,0,0) rotate(var(--r)) scale(.92);
|
||||
opacity: 0;
|
||||
z-index: 5;
|
||||
will-change: transform,opacity,filter;
|
||||
animation: cardIntro .85s cubic-bezier(.2,.9,.25,1.12) forwards, microFloat 6s ease-in-out infinite;
|
||||
animation-delay: var(--delay), calc(var(--delay) + 1s);
|
||||
transition:
|
||||
opacity .75s ease,
|
||||
filter .75s ease,
|
||||
box-shadow .75s ease,
|
||||
border-color .75s ease,
|
||||
left .75s ease,
|
||||
top .75s ease,
|
||||
width .75s ease,
|
||||
transform .95s cubic-bezier(.18,.82,.18,1);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: scale(1.035);
|
||||
transition: transform 1s cubic-bezier(.18,.82,.18,1), filter .8s ease;
|
||||
}
|
||||
|
||||
.charity-hero .photo-card:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.34) 45%, transparent 70%);
|
||||
transform: translateX(-130%);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-active:before {
|
||||
animation: shine 1.3s ease .25s;
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-active {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: min(480px, 58vw);
|
||||
transform: translate(-50%,-50%) rotate(0deg) scale(1.06) !important;
|
||||
opacity: 1;
|
||||
z-index: 30;
|
||||
border-color: #fff;
|
||||
border-width: 8px;
|
||||
border-radius: 18px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
filter: saturate(1.08) contrast(1.03);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-active img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-dim {
|
||||
opacity: .28;
|
||||
filter: grayscale(.08) saturate(.8) blur(.2px);
|
||||
transform: translate3d(0,0,0) rotate(var(--r)) scale(.82);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-next {
|
||||
opacity: .74;
|
||||
box-shadow: 0 17px 45px rgba(92,24,42,.18);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card.is-exit {
|
||||
opacity: 0;
|
||||
transform: translateY(28px) scale(.74) rotate(var(--r));
|
||||
}
|
||||
|
||||
.charity-hero .photo-card:hover {
|
||||
transform: translateY(-8px) rotate(0deg) scale(1.03);
|
||||
z-index: 35;
|
||||
box-shadow: 0 24px 70px rgba(100,10,30,.24);
|
||||
}
|
||||
|
||||
.charity-hero .photo-card:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.charity-hero .gallery-controls {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.charity-hero .dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(215,25,63,.22);
|
||||
transition: .35s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.charity-hero .dot.is-active {
|
||||
width: 28px;
|
||||
background: var(--red);
|
||||
box-shadow: 0 0 0 6px rgba(215,25,63,.09);
|
||||
}
|
||||
|
||||
.charity-hero .content-panel {
|
||||
position: relative;
|
||||
min-height: 430px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 26px 24px 26px 8px;
|
||||
}
|
||||
|
||||
.charity-hero .content-panel:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 28px 0 18px 0;
|
||||
border-radius: 34px;
|
||||
background: linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,.08));
|
||||
border: 1px solid rgba(255,255,255,.55);
|
||||
box-shadow: 0 20px 70px rgba(62,45,54,.06);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.charity-hero .brand-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 170px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.charity-hero .logo-mark {
|
||||
width: 165px;
|
||||
justify-self: end;
|
||||
filter: drop-shadow(0 10px 16px rgba(215,25,63,.15));
|
||||
animation: logoBreath 3.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.charity-hero .brand-text {
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.charity-hero .brand-text h1 {
|
||||
margin: 0 0 8px;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.18;
|
||||
font-size: clamp(20px,1.72vw,30px);
|
||||
letter-spacing: -.3px;
|
||||
color: var(--red);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.charity-hero .brand-text p {
|
||||
margin: 0;
|
||||
color: #67676c;
|
||||
text-transform: uppercase;
|
||||
font-size: clamp(16px,1.2vw,22px);
|
||||
font-weight: 800;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card {
|
||||
width: min(560px,100%);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 20px 18px 28px;
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 86%;
|
||||
height: 86%;
|
||||
transform: translate(-50%,-50%);
|
||||
border-radius: 38px;
|
||||
background: linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,237,243,.72),rgba(255,255,255,.12));
|
||||
filter: blur(.2px);
|
||||
z-index: -1;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.charity-hero .quote-mark {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: -16px;
|
||||
font-size: 74px;
|
||||
line-height: 1;
|
||||
color: rgba(215,25,63,.18);
|
||||
font-family: Georgia,serif;
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card h2 {
|
||||
margin: 0;
|
||||
color: #e13b5e;
|
||||
font-size: clamp(29px,2.2vw,42px);
|
||||
line-height: 1.42;
|
||||
font-family: "Segoe Script","Brush Script MT",cursive;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 8px 20px rgba(215,25,63,.12);
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card h2 em {
|
||||
font-style: normal;
|
||||
font-size: .86em;
|
||||
color: #d9284c;
|
||||
}
|
||||
|
||||
.charity-hero .heart-line {
|
||||
display: block;
|
||||
width: 160px;
|
||||
height: 22px;
|
||||
margin: 12px auto 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.charity-hero .heart-line:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 34px;
|
||||
top: 11px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,transparent,var(--red));
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.charity-hero .heart-line:after {
|
||||
content: "♡";
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: -8px;
|
||||
color: var(--red);
|
||||
font-size: 32px;
|
||||
transform: rotate(18deg);
|
||||
animation: heartBeat 1.7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.charity-hero .action-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-top: 26px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.charity-hero .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 44px;
|
||||
padding: 0 20px;
|
||||
border-radius: 999px;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
letter-spacing: .2px;
|
||||
transition: .3s ease;
|
||||
box-shadow: 0 12px 30px rgba(115,21,43,.12);
|
||||
}
|
||||
|
||||
.charity-hero .btn.primary {
|
||||
background: linear-gradient(135deg,var(--red),#ef4769);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.charity-hero .btn.secondary {
|
||||
background: rgba(255,255,255,.74);
|
||||
color: var(--red);
|
||||
border: 1px solid rgba(215,25,63,.18);
|
||||
}
|
||||
|
||||
.charity-hero .btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 18px 42px rgba(115,21,43,.18);
|
||||
}
|
||||
|
||||
.charity-hero .reveal-up {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
animation: revealUp .8s ease forwards;
|
||||
}
|
||||
|
||||
.charity-hero .brand-text.reveal-up {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
|
||||
.charity-hero .logo-mark.reveal-up {
|
||||
animation-delay: .38s;
|
||||
}
|
||||
|
||||
.charity-hero .slogan-card.reveal-up {
|
||||
animation-delay: .62s;
|
||||
}
|
||||
|
||||
.charity-hero .action-row.reveal-up {
|
||||
animation-delay: .86s;
|
||||
}
|
||||
|
||||
@keyframes cardIntro {
|
||||
from { opacity: 0; transform: translate3d(-28px,22px,0) rotate(calc(var(--r) - 7deg)) scale(.78); }
|
||||
to { opacity: 1; transform: translate3d(0,0,0) rotate(var(--r)) scale(.92); }
|
||||
}
|
||||
@keyframes microFloat {
|
||||
0%,100% { margin-top: 0; }
|
||||
50% { margin-top: -8px; }
|
||||
}
|
||||
@keyframes shine {
|
||||
to { transform: translateX(130%); }
|
||||
}
|
||||
@keyframes revealUp {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeDown {
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes logoBreath {
|
||||
0%,100% { transform: translateY(0) scale(1); }
|
||||
50% { transform: translateY(-6px) scale(1.025); }
|
||||
}
|
||||
@keyframes heartBeat {
|
||||
0%,100% { transform: rotate(18deg) scale(1); }
|
||||
20% { transform: rotate(18deg) scale(1.18); }
|
||||
38% { transform: rotate(18deg) scale(1); }
|
||||
}
|
||||
@keyframes blobFloat {
|
||||
to { transform: translate(26px,20px) scale(1.05); }
|
||||
}
|
||||
@keyframes lightPulse {
|
||||
0%,100% { opacity: .25; transform: scale(.96); }
|
||||
50% { opacity: .58; transform: scale(1.08); }
|
||||
}
|
||||
|
||||
@media (max-width:1200px) {
|
||||
.charity-hero .hero-shell {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
padding: 18px 0 34px;
|
||||
}
|
||||
.charity-hero { min-height: auto; }
|
||||
.charity-hero .content-panel { min-height: auto; }
|
||||
.charity-hero .gallery-panel { min-height: 470px; }
|
||||
.charity-hero .gallery-stage { height: 430px; }
|
||||
.charity-hero .brand-row { grid-template-columns: 1fr 130px; margin-bottom: 20px; }
|
||||
.charity-hero .logo-mark { width: 130px; }
|
||||
}
|
||||
|
||||
@media (max-width:720px) {
|
||||
.charity-hero .hero-shell { width: calc(100% - 24px); }
|
||||
.charity-hero .soft-grid { inset: 12px; border-width: 3px; }
|
||||
.charity-hero .gallery-panel { padding: 12px 0; min-height: 390px; }
|
||||
.charity-hero .gallery-title { display: none; }
|
||||
.charity-hero .gallery-stage { height: 370px; overflow: hidden; }
|
||||
.charity-hero .photo-card { width: calc(var(--w) * .72); }
|
||||
.charity-hero .photo-card.is-active { width: min(86vw,380px); }
|
||||
.charity-hero .content-panel { padding: 8px; }
|
||||
.charity-hero .brand-row { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; }
|
||||
.charity-hero .brand-text h1 { text-align: center; }
|
||||
.charity-hero .slogan-card h2 { font-size: 29px; }
|
||||
.charity-hero .btn { height: 42px; padding: 0 16px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion:reduce) {
|
||||
.charity-hero *,
|
||||
.charity-hero *::before,
|
||||
.charity-hero *::after {
|
||||
animation-duration: .01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: .01ms !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="charity-hero" aria-label="Quỹ từ thiện bệnh nhân nghèo bị đột quỵ">
|
||||
<div class="hero-bg">
|
||||
<span class="blob blob-1"></span>
|
||||
<span class="blob blob-2"></span>
|
||||
<span class="blob blob-3"></span>
|
||||
<span class="soft-grid"></span>
|
||||
</div>
|
||||
|
||||
<section class="hero-shell">
|
||||
<div class="gallery-panel" aria-label="Hình ảnh hoạt động quỹ từ thiện">
|
||||
<div class="gallery-title">
|
||||
<span class="eyebrow">S.I.S Charity Foundation</span>
|
||||
<strong>Những khoảnh khắc sẻ chia</strong>
|
||||
</div>
|
||||
|
||||
<div class="gallery-stage" id="galleryStage">
|
||||
<article class="photo-card p1" data-index="0" style="--x: -4%; --y: 2%; --r: -2.5deg; --w: 205px; --delay: 0.05s;">
|
||||
<img src="/upload/charity_v4/photo-01.jpg" alt="Trao hỗ trợ bệnh nhân 1" />
|
||||
</article>
|
||||
<article class="photo-card p2" data-index="1" style="--x: 18%; --y: -2%; --r: 1.6deg; --w: 298px; --delay: 0.16s;">
|
||||
<img src="/upload/charity_v4/photo-02.jpg" alt="Trao hỗ trợ bệnh nhân 2" />
|
||||
</article>
|
||||
<article class="photo-card p3" data-index="2" style="--x: 63%; --y: 0%; --r: -1.2deg; --w: 410px; --delay: 0.27s;">
|
||||
<img src="/upload/charity_v4/photo-05.jpg" alt="Trao hỗ trợ bệnh nhân 3" />
|
||||
</article>
|
||||
<article class="photo-card p4" data-index="3" style="--x: 0%; --y: 27%; --r: 2.2deg; --w: 245px; --delay: 0.38s">
|
||||
<img src="/upload/charity_v4/photo-03.jpg" alt="Trao hỗ trợ bệnh nhân 4" />
|
||||
</article>
|
||||
<article class="photo-card p5" data-index="4" style="--x: 32%; --y: 32%; --r: -1.8deg; --w: 260px; --delay: 0.49s;">
|
||||
<img src="/upload/charity_v4/photo-04.jpg" alt="Trao hỗ trợ bệnh nhân 5" />
|
||||
</article>
|
||||
<article class="photo-card p6" data-index="5" style="--x: 57%; --y: 35%; --r: 1deg; --w: 195px; --delay: 0.6s">
|
||||
<img src="/upload/charity_v4/photo-06.jpg" alt="Trao hỗ trợ bệnh nhân 6" />
|
||||
</article>
|
||||
<article class="photo-card p7" data-index="6" style="--x: 4%; --y: 62%; --r: -1.4deg; --w: 270px; --delay: 0.71s;">
|
||||
<img src="/upload/charity_v4/photo-07.jpg" alt="Trao hỗ trợ bệnh nhân 7" />
|
||||
</article>
|
||||
<article class="photo-card p8" data-index="7" style="--x: 42%; --y: 73%; --r: 1.2deg; --w: 255px; --delay: 0.82s;">
|
||||
<img src="/upload/charity_v4/photo-08.jpg" alt="Trao hỗ trợ bệnh nhân 8" />
|
||||
</article>
|
||||
<article class="photo-card p9" data-index="8" style="--x: 77%; --y: 66%; --r: -1deg; --w: 338px; --delay: 0.93s">
|
||||
<img src="/upload/charity_v4/photo-09.jpg" alt="Trao hỗ trợ bệnh nhân 9" />
|
||||
</article>
|
||||
<div class="gallery-light" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-controls" aria-hidden="true">
|
||||
<span class="dot is-active"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-panel">
|
||||
<div class="brand-row">
|
||||
<div class="brand-text reveal-up">
|
||||
<h1>Quỹ từ thiện bệnh nhân nghèo bị đột quỵ<br />khu vực Đồng bằng sông Cửu Long</h1>
|
||||
<p>S.I.S Charity Foundation</p>
|
||||
</div>
|
||||
<img class="logo-mark reveal-up" src="/upload/charity_v4/logo.png" alt="Stroke International Services Charity Foundation" />
|
||||
</div>
|
||||
|
||||
<div class="slogan-card reveal-up">
|
||||
<span class="quote-mark">“</span>
|
||||
<h2>Sẻ chia yêu thương<br /><em>đến bệnh nhân nghèo bị đột quỵ</em></h2>
|
||||
<span class="heart-line" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
<div class="action-row reveal-up">
|
||||
<a class="btn primary" href="#">Lan tỏa yêu thương</a>
|
||||
<a class="btn secondary" href="#">Xem hoạt động quỹ</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
const container = document.querySelector('.charity-hero');
|
||||
if(!container) return;
|
||||
const stage = container.querySelector('.gallery-stage');
|
||||
const cards = Array.from(container.querySelectorAll('.photo-card'));
|
||||
const dots = Array.from(container.querySelectorAll('.dot'));
|
||||
if(!stage || cards.length === 0) return;
|
||||
|
||||
let active = 0;
|
||||
let timer = null;
|
||||
const duration = 2800;
|
||||
|
||||
function setActive(index){
|
||||
active = index % cards.length;
|
||||
stage.classList.add('is-playing');
|
||||
|
||||
cards.forEach((card, i) => {
|
||||
card.classList.remove('is-active','is-dim','is-next','is-exit');
|
||||
const diff = (i - active + cards.length) % cards.length;
|
||||
if(i === active){
|
||||
card.classList.add('is-active');
|
||||
}else if(diff === 1 || diff === 2){
|
||||
card.classList.add('is-next');
|
||||
}else if(diff === cards.length - 1){
|
||||
card.classList.add('is-exit');
|
||||
}else{
|
||||
card.classList.add('is-dim');
|
||||
}
|
||||
});
|
||||
|
||||
dots.forEach((dot, i) => dot.classList.toggle('is-active', i === active));
|
||||
}
|
||||
|
||||
function next(){
|
||||
setActive(active + 1);
|
||||
}
|
||||
|
||||
function start(){
|
||||
stop();
|
||||
timer = setInterval(next, duration);
|
||||
}
|
||||
|
||||
function stop(){
|
||||
if(timer) clearInterval(timer);
|
||||
}
|
||||
|
||||
cards.forEach((card, i) => {
|
||||
card.addEventListener('mouseenter', () => {
|
||||
stop();
|
||||
setActive(i);
|
||||
});
|
||||
card.addEventListener('mouseleave', start);
|
||||
});
|
||||
|
||||
dots.forEach((dot, i) => {
|
||||
dot.addEventListener('click', () => {
|
||||
setActive(i);
|
||||
start();
|
||||
});
|
||||
});
|
||||
|
||||
// Start immediately or on load if part of a bigger page
|
||||
setTimeout(() => {
|
||||
setActive(0);
|
||||
start();
|
||||
}, 900);
|
||||
})();
|
||||
</script>
|
||||
@@ -1,180 +1,172 @@
|
||||
<body>
|
||||
<div class="cc--component-container cc--tabbed-media-content" style="background-color: var(--color-gray-100);">
|
||||
<div class="c--component c--tabbed-media-content">
|
||||
<div class="tabbed-media-content-text-col">
|
||||
<div data-component-id="umass_base:section-title" class="f--section-title">
|
||||
<h2 style="color: var(--color-brand);">LiveStream tháng 07</h2>
|
||||
</div>
|
||||
<div data-component-id="umass_base:tabbed-container" data-once="tabbed-container">
|
||||
<div class="tab-labels-container" role="tablist">
|
||||
<div class="tab-labels-inner">
|
||||
<a href="https://www.umass.edu/#tabbed-content-campus-life" class="tab-label link-context-dark" role="tab" aria-selected="true" aria-controls="tabbed-content-campus-life">Tuần 1</a>
|
||||
<a href="https://www.umass.edu/#tabbed-content-campus-housing" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-campus-housing">Tuần 2</a>
|
||||
<a href="https://www.umass.edu/#tabbed-content-dining" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-dining">Tuần 3</a>
|
||||
<a href="https://www.umass.edu/#tabbed-content-around-amherst" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-around-amherst">Tuần 4</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content-container">
|
||||
<div class="tab-content-panel is-active" id="tabbed-content-campus-life" role="tabpanel" aria-live="polite">
|
||||
<div class="f--field f--cta-title">
|
||||
<h2 style="color: var(--color-black);"> Tầm soát và phòng ngừa ung thư gan </h2>
|
||||
</div>
|
||||
<div data-component-id="umass_base:description" class="f--description">
|
||||
<p style="color:var(--color-black);">Ung thư gan là một trong những bệnh ung thư có tỷ lệ tử vong hàng đầu tại Việt Nam. Đáng lo ngại, phần lớn người bệnh chỉ được phát hiện khi bệnh đã ở giai đoạn muộn, khi các cơ hội điều trị hiệu quả đã bị thu hẹp đáng kể.</p>
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/gateway/campus-life/student-activities" class="button-primary button-context-light " aria-label="Tìm Hiểu Thêm" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Tìm Hiểu Thêm </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content-panel" id="tabbed-content-campus-housing" role="tabpanel" aria-live="polite">
|
||||
<div class="f--field f--cta-title">
|
||||
<h3> Your Campus Home </h3>
|
||||
</div>
|
||||
<div data-component-id="umass_base:description" class="f--description">
|
||||
<p>Choose from vibrant residential communities where students live, study, and build lasting friendships steps from the classroom.</p>
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/gateway/campus-life/living-and-dining" class="button-primary button-context-light " aria-label="Learn About Living at UMass" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Tìm hiểu thêm </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content-panel" id="tabbed-content-dining" role="tabpanel" aria-live="polite">
|
||||
<div class="f--field f--cta-title">
|
||||
<h3> Food Worth Talking About </h3>
|
||||
</div>
|
||||
<div data-component-id="umass_base:description" class="f--description">
|
||||
<p>Discover why UMass dining is ranked #1 nationally—recognized for quality, variety, and sustainability.</p>
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umassdining.com/" class="button-primary button-context-light ext" aria-label="Learn Why UMass is #1 in Dining" data-component-id="umass_base:button" data-extlink="">
|
||||
<span class="button-text"> Learn Why UMass is #1 in Dining </span>
|
||||
<svg focusable="false" width="1em" height="1em" class="ext" data-extlink-placement="append" aria-label="(link is external)" viewBox="0 0 80 40" role="img" aria-hidden="false">
|
||||
<title>(link is external)</title>
|
||||
<path d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z"></path>
|
||||
<path d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content-panel" id="tabbed-content-around-amherst" role="tabpanel" aria-live="polite">
|
||||
<div class="f--field f--cta-title">
|
||||
<h3> Amherst, Uncommon </h3>
|
||||
</div>
|
||||
<div data-component-id="umass_base:description" class="f--description">
|
||||
<p>A vibrant creative culture, great food, and the natural beauty of the Pioneer Valley come together to shape this town’s distinctive, welcoming spirit.</p>
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/gateway/student-life/life-amherst" class="button-primary button-context-light " aria-label="Learn More About Amherst" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Learn More About Amherst </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabbed-media-content-media-col">
|
||||
<div class="tabbed-media-content-media-item is-active with-video" data-tab-id="tabbed-content-campus-life">
|
||||
<div class="f--field f--image">
|
||||
<img data-src="https://www.umass.edu/sites/default/files/styles/9_16_720x1280/public/2026-03/medium_jpg-2026_Vertical_Assets_5179_John_Solem_.jpg?h=7c5befa5&itok=DZUe-3fS" class=" ls-is-cached lazyloaded" alt="A UMass student plays ping pong." src="/UMass%20Amherst%20_%20UMass%20Amherst_files/medium_jpg-2026_Vertical_Assets_5179_John_Solem_.jpg">
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
|
||||
<span class="button-icon button-icon-play">
|
||||
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="button-text visually-hidden"> Play </span>
|
||||
</a>
|
||||
</div>
|
||||
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
|
||||
<iframe title="Video Content" id="video-132086-1" width="900" height="1600" src="https://www.youtube.com/embed/q0ZxZVbnMqs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-campus-housing">
|
||||
<div class="f--field f--image">
|
||||
<img data-src="https://www.umass.edu/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Campus-Housing.jpg?h=75081741&itok=6kDcYqy3" class="lazyload" alt="A UMass student sits on her bed in a dorm room.">
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
|
||||
<span class="button-icon button-icon-play">
|
||||
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="button-text visually-hidden"> Play </span>
|
||||
</a>
|
||||
</div>
|
||||
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
|
||||
<iframe title="Video Content" id="video-132086-2" width="900" height="1600" src="https://www.youtube.com/embed/7D_TnBztQhU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-dining">
|
||||
<div class="f--field f--image">
|
||||
<img data-src="https://www.umass.edu/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Dining2.jpg?h=75081741&itok=_34BDcqA" class="lazyload" alt="A student gets food at a UMass Amherst dining hall.">
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
|
||||
<span class="button-icon button-icon-play">
|
||||
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="button-text visually-hidden"> Play </span>
|
||||
</a>
|
||||
</div>
|
||||
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
|
||||
<iframe title="Video Content" id="video-132086-3" width="900" height="1600" src="https://www.youtube.com/embed/YRzZ9aRZ69w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-around-amherst">
|
||||
<div class="f--field f--image">
|
||||
<img data-src="https://www.umass.edu/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Downtown-Amherst.jpg?h=75081741&itok=irWjha4q" class="lazyload" alt="A UMass student holds a hote bag that reads "I Love Amherst."">
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
|
||||
<span class="button-icon button-icon-play">
|
||||
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="button-text visually-hidden"> Play </span>
|
||||
</a>
|
||||
</div>
|
||||
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
|
||||
<iframe title="Video Content" id="video-132086-4" width="900" height="1600" src="https://www.youtube.com/embed/agqIJlJpbAY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<style>* { box-sizing: border-box; } body {margin: 0;}
|
||||
.tab-labels-inner {
|
||||
border-bottom-color: var(--color-gray-800);
|
||||
.tab-label {
|
||||
font-weight: var(--font-weight-bold) !important;
|
||||
color: var(--color-black) !important;
|
||||
}
|
||||
.tab-label {
|
||||
&[aria-selected="true"] {
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
border-bottom: 2px solid var(--color-brand) !important;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
<style>
|
||||
.stroke-book-banner {
|
||||
background-color: #f8f9fa;
|
||||
padding: 50px 20px;
|
||||
font-family: var(--font-family-base, 'Inter', 'Segoe UI', sans-serif);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sbb-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
gap: 50px;
|
||||
/* Faint brain background pattern placeholder */
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="%23ffe6e6" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/></svg>');
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 350px;
|
||||
}
|
||||
|
||||
.sbb-left {
|
||||
flex: 1.2;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sbb-left img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
|
||||
}
|
||||
|
||||
.sbb-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.sbb-subtitle {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.sbb-title {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 800;
|
||||
color: #c0272d;
|
||||
margin: 0 0 15px 0;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.sbb-tagline {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.sbb-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 35px 0;
|
||||
}
|
||||
|
||||
.sbb-features li {
|
||||
font-size: 1.1rem;
|
||||
color: #444;
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sbb-features li::before {
|
||||
content: '✓';
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid #c0272d;
|
||||
color: #c0272d;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sbb-btn {
|
||||
display: inline-block;
|
||||
background: linear-gradient(180deg, #d81b32 0%, #a11122 100%);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
padding: 16px 40px;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 4px 10px rgba(161, 17, 34, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 0.5px;
|
||||
border: 1px solid #8e0b1b;
|
||||
}
|
||||
|
||||
.sbb-btn:hover {
|
||||
background: linear-gradient(180deg, #ee1f38 0%, #b81427 100%);
|
||||
box-shadow: 0 6px 15px rgba(161, 17, 34, 0.5);
|
||||
transform: translateY(-2px);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.sbb-container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 30px;
|
||||
background-image: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
.sbb-left {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sbb-right {
|
||||
align-items: center;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sbb-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.sbb-features li {
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="stroke-book-banner">
|
||||
<div class="sbb-container">
|
||||
<div class="sbb-left">
|
||||
<img src="/upload/sach-dot-quy-ngang.png" alt="Cẩm nang sức khỏe phòng chống đột quỵ">
|
||||
</div>
|
||||
<div class="sbb-right">
|
||||
<div class="sbb-subtitle">CẨM NANG SỨC KHỎE</div>
|
||||
<h2 class="sbb-title">PHÒNG CHỐNG ĐỘT QUỴ</h2>
|
||||
<div class="sbb-tagline">Hiểu đúng – Phòng sớm – Sống khỏe mỗi ngày</div>
|
||||
<ul class="sbb-features">
|
||||
<li>Kiến thức khoa học, dễ hiểu</li>
|
||||
<li>Nhận biết sớm dấu hiệu – Xử trí kịp thời</li>
|
||||
<li>Phòng ngừa hiệu quả – Giảm thiểu nguy cơ</li>
|
||||
<li>Dành cho mọi lứa tuổi</li>
|
||||
</ul>
|
||||
<a href="#" class="sbb-btn">TÌM HIỂU NGAY</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user