179 lines
5.7 KiB
HTML
179 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>S.I.S Charity Foundation</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<main
|
|
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="assets/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="assets/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="assets/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="assets/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="assets/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="assets/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="assets/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="assets/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="assets/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="assets/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>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|