forked from izu/student-web-if-development-kit
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Bayu
|
766a930542 | ||
|
Bayu
|
35f1dd3865 | ||
|
Bayu
|
54b00194a8 | ||
|
Bayu
|
bedac5851e | ||
|
Bayu
|
034b131c12 | ||
 powji17
|
243541d1e4 | ||
 powji
|
e07d70093b |
+340
-81
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="id" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@@ -1140,51 +1140,60 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
|
||||
<div class="container mx-auto px-4 lg:px-8 py-12">
|
||||
<main id="main-content" class="min-h-screen bg-white">
|
||||
<div class="container mx-auto px-4 lg:px-8" style="padding-top: calc(88px + 3rem);">
|
||||
<div class="mb-8 pb-8 border-b border-slate-200">
|
||||
<span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Kehidupan Mahasiswa & Himpunan (HMIF)</h1>
|
||||
<p class="text-slate-500 text-sm">Kelompok 07 — LIMA EM · Informatika UNTAN 2026</p>
|
||||
</div>
|
||||
<div id="assignment-body" class="prose prose-slate max-w-none">
|
||||
</div>
|
||||
<div id="assignment-body" class="w-full">
|
||||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
<!-- Hero Section -->
|
||||
<header class="relative w-full min-h-screen flex items-center overflow-hidden pt-[92px] lg:pt-[118px]">
|
||||
<header class="relative w-full min-h-screen flex items-center overflow-hidden" style="padding-top: 92px;">
|
||||
|
||||
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
|
||||
class="absolute inset-0 w-full h-full object-cover z-0" />
|
||||
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0"></div>
|
||||
<!-- Gradient biru ke kanan seperti referensi -->
|
||||
<div class="absolute inset-0 z-0" style="background: linear-gradient(to right, #003150 0%, rgba(0,49,80,0.85) 40%, rgba(0,49,80,0.4) 65%, transparent 100%);"></div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
|
||||
<div class="relative z-10 w-full" style="max-width: 1280px; margin: 0 auto; padding: 4rem 3rem;">
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;">
|
||||
|
||||
<div class="flex flex-col items-start text-left space-y-6">
|
||||
<div style="display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;">
|
||||
|
||||
<div
|
||||
class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full">
|
||||
COMMUNITY & LEADERSHIP
|
||||
<!-- Badge COMMUNITY & LEADERSHIP -->
|
||||
<div style="background: rgba(254,180,1,0.15); color: #feb401; font-weight: 700; font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 9999px; letter-spacing: 0.05em;">
|
||||
COMMUNITY & LEADERSHIP
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
|
||||
Kehidupan Mahasiswa & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span>
|
||||
<!-- Heading -->
|
||||
<h1 style="font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 800; color: white; line-height: 1.2; margin: 0;">
|
||||
Kehidupan Mahasiswa & <span style="color: #feb401;">Himpunan (HMIF)</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
|
||||
<!-- Subtext -->
|
||||
<p style="font-size: 1rem; color: #d1d5db; font-weight: 300; line-height: 1.75; max-width: 36rem; margin: 0;">
|
||||
Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
|
||||
kreativitas, membentuk calon pemimpin industri masa depan.
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md hover:bg-hmif-secondary hover:text-hmif-primary hover:border-hmif-secondary transition-all hover:cursor-pointer">
|
||||
<!-- Button -->
|
||||
<button onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})"
|
||||
style="background: transparent; border: 2px solid white; color: white; font-weight: 700; font-size: 0.9375rem; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; transition: all 0.25s ease; margin-top: 0.5rem;"
|
||||
onmouseover="this.style.background='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401'; this.style.transform='scale(1.04)'; this.style.boxShadow='0 8px 24px rgba(254,180,1,0.35)';"
|
||||
onmouseout="this.style.background='transparent'; this.style.color='white'; this.style.borderColor='white'; this.style.transform='scale(1)'; this.style.boxShadow='none';"
|
||||
onmousedown="this.style.transform='scale(0.97)';"
|
||||
onmouseup="this.style.transform='scale(1.04)';">
|
||||
Lihat Struktur Kepengurusan
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:block"></div>
|
||||
<div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1192,7 +1201,7 @@
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="bg-white overflow-hidden">
|
||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-16 pt-20 lg:pt-24 pb-16">
|
||||
<div class="w-full px-6 lg:px-16 xl:px-24 pt-20 lg:pt-24 pb-16">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
|
||||
|
||||
<!-- ─── Left: Text Content ─── -->
|
||||
@@ -1219,19 +1228,19 @@
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100">
|
||||
<div>
|
||||
<div class="group cursor-default">
|
||||
<p
|
||||
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
||||
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums transition-transform duration-300 group-hover:scale-110 inline-block">
|
||||
518</p>
|
||||
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
||||
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3 group-hover:text-hmif-primary transition-colors duration-300">
|
||||
Mahasiswa Aktif
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="group cursor-default">
|
||||
<p
|
||||
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
||||
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums transition-transform duration-300 group-hover:scale-110 inline-block">
|
||||
8</p>
|
||||
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
||||
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3 group-hover:text-hmif-primary transition-colors duration-300">
|
||||
MITRA
|
||||
</p>
|
||||
</div>
|
||||
@@ -1239,36 +1248,31 @@
|
||||
</div>
|
||||
|
||||
<!-- ─── Right: Photo ─── -->
|
||||
<div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
|
||||
<div class="order-2 relative mt-8 lg:mt-0 flex justify-center lg:justify-end">
|
||||
<!-- Offset shadow block biru tua -->
|
||||
<div class="absolute inset-0 bg-hmif-primary translate-x-4 translate-y-4 rounded-2xl lg:rounded-3xl z-0 shadow-2xl" style="background-color: #003150;"></div>
|
||||
|
||||
<!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
|
||||
<div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
|
||||
bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
|
||||
|
||||
<!-- Frame foto — overflow hidden, foto full width tanpa crop -->
|
||||
<div
|
||||
class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
|
||||
<!-- Frame foto -->
|
||||
<div class="relative w-full rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default bg-gray-200" style="aspect-ratio: 4/5;">
|
||||
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
||||
alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
|
||||
transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
|
||||
alt="Ruang Tumbuh HMIF Universitas Tanjungpura"
|
||||
class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
|
||||
<!-- Gradient overlay bawah -->
|
||||
<div class="absolute inset-0
|
||||
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
|
||||
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
|
||||
<div class="absolute inset-0 transition-opacity duration-500 opacity-70 group-hover:opacity-45" style="background: linear-gradient(to top, rgba(0, 49, 80, 0.45), transparent, transparent);"></div>
|
||||
</div>
|
||||
|
||||
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
||||
<div class="absolute z-20 bottom-[-3%] left-[0%]
|
||||
<div class="absolute z-20 bottom-0 left-0 -translate-x-2 translate-y-4 lg:-translate-x-6 lg:translate-y-6
|
||||
bg-hmif-secondary text-hmif-primary
|
||||
rounded-xl px-4 py-3 text-center shadow-2xl
|
||||
border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
|
||||
border-2 border-white/20" style="min-width: 120px; max-width: 140px; background-color: #feb401; color: #003150;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
||||
stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
||||
</svg>
|
||||
<p class="text-[11px] lg:text-xs font-bold leading-snug">
|
||||
Inklusivitas &<br>Kolaborasi
|
||||
Inklusivitas &<br>Kolaborasi
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1280,26 +1284,45 @@
|
||||
|
||||
<!-- Partner & Kolaborator -->
|
||||
<section id="partners" class="bg-white py-16">
|
||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
||||
<div class="w-full px-6 lg:px-16 xl:px-24">
|
||||
<h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
|
||||
Partner dan Kolaborator
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-wrap gap-6 lg:gap-10 items-center">
|
||||
<!-- Partner Aktif (Terbaru) -->
|
||||
<a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
|
||||
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
|
||||
hover:scale-110 transition-transform duration-200 cursor-pointer"
|
||||
title="Partner Terbaru" />
|
||||
</a>
|
||||
<div class="relative group flex flex-col items-center gap-2">
|
||||
<a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
|
||||
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku"
|
||||
class="block relative">
|
||||
<!-- Yellow ring glow on hover -->
|
||||
<span class="absolute -inset-1 rounded-full bg-hmif-secondary opacity-0 group-hover:opacity-40 transition-opacity duration-300 blur-sm z-0" style="background-color:#feb401;"></span>
|
||||
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku"
|
||||
class="relative z-10 w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 transition-all duration-300 cursor-pointer group-hover:scale-110 group-hover:shadow-xl"
|
||||
style="border-color: #feb401;"
|
||||
title="Partner Aktif" />
|
||||
</a>
|
||||
<!-- Label AKTIF -->
|
||||
<span class="text-[10px] font-bold tracking-widest uppercase px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
|
||||
style="background-color:#feb401; color:#003150;">AKTIF</span>
|
||||
</div>
|
||||
|
||||
<!-- Partner Aktif (Sobat Konveksi) -->
|
||||
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
|
||||
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
|
||||
hover:scale-110 transition-transform duration-200 cursor-pointer"
|
||||
title="Partner Aktif" />
|
||||
</a>
|
||||
<div class="relative group flex flex-col items-center gap-2">
|
||||
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
|
||||
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi"
|
||||
class="block relative">
|
||||
<!-- Yellow ring glow on hover -->
|
||||
<span class="absolute -inset-1 rounded-full opacity-0 group-hover:opacity-40 transition-opacity duration-300 blur-sm z-0" style="background-color:#feb401;"></span>
|
||||
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi"
|
||||
class="relative z-10 w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 transition-all duration-300 cursor-pointer group-hover:scale-110 group-hover:shadow-xl"
|
||||
style="border-color: #feb401;"
|
||||
title="Partner Aktif" />
|
||||
</a>
|
||||
<!-- Label AKTIF -->
|
||||
<span class="text-[10px] font-bold tracking-widest uppercase px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
|
||||
style="background-color:#feb401; color:#003150;">AKTIF</span>
|
||||
</div>
|
||||
|
||||
<!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna -->
|
||||
<div class="relative group">
|
||||
@@ -1332,7 +1355,7 @@
|
||||
|
||||
<!-- Divisi Kepengurusan HMIF Section -->
|
||||
<section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
|
||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
||||
<div class="w-full px-6 lg:px-16 xl:px-24">
|
||||
<!-- Header -->
|
||||
<div class="mb-12 md:mb-16 max-w-3xl">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
|
||||
@@ -1346,9 +1369,9 @@
|
||||
|
||||
<!-- Grid Card Container -->
|
||||
<div
|
||||
class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden">
|
||||
class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden divide-y md:divide-y-0 md:divide-x divide-white/10">
|
||||
<!-- Bidang 1 -->
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
|
||||
<span
|
||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||
Bidang 1
|
||||
@@ -1367,7 +1390,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Bidang 2 -->
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
|
||||
<span
|
||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||
Bidang 2
|
||||
@@ -1385,7 +1408,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Bidang 3 -->
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
|
||||
<span
|
||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||
Bidang 3
|
||||
@@ -1404,7 +1427,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Bidang 4 -->
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
|
||||
<span
|
||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||
Bidang 4
|
||||
@@ -1423,7 +1446,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Bidang 5 -->
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
|
||||
<span
|
||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||
Bidang 5
|
||||
@@ -1441,7 +1464,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Bidang 6 -->
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
|
||||
<span
|
||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||
Bidang 6
|
||||
@@ -1464,7 +1487,7 @@
|
||||
|
||||
<!-- Kegiatan Unggulan Section -->
|
||||
<section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24">
|
||||
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 relative w-full">
|
||||
<div class="w-full px-6 lg:px-16 xl:px-24 relative">
|
||||
<!-- Header -->
|
||||
<div class="mb-12">
|
||||
<h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight">
|
||||
@@ -1493,7 +1516,7 @@
|
||||
<div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
|
||||
|
||||
<!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/SKBI.jpeg" alt="Silaturahmi Keluarga Besar"
|
||||
@@ -1501,14 +1524,14 @@
|
||||
</div>
|
||||
<div class="flex items-start gap-4 mt-6">
|
||||
<div
|
||||
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
||||
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm transition-transform duration-300 group-hover:scale-110">
|
||||
<span class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
|
||||
<span
|
||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<h3
|
||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors duration-300">
|
||||
Silaturahmi Keluarga Besar Informatika</h3>
|
||||
<p class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
|
||||
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p>
|
||||
@@ -1517,7 +1540,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Card 2 Gemastik -->
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
|
||||
@@ -1543,7 +1566,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Card 3 17 agustus -->
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg" alt="Perayaan 17 Agustus"
|
||||
@@ -1567,7 +1590,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Card 3 Bootcamp -->
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
|
||||
@@ -1591,7 +1614,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5 UPC 2025 -->
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
|
||||
@@ -1615,7 +1638,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Card 6 Informers -->
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/informers.jpg" alt="Ultah Informatika"
|
||||
@@ -1671,7 +1694,7 @@
|
||||
|
||||
<!-- Study Club Section -->
|
||||
<section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100">
|
||||
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 w-full">
|
||||
<div class="w-full px-6 lg:px-16 xl:px-24">
|
||||
<!-- Centered Header -->
|
||||
<div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center">
|
||||
<h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase">
|
||||
@@ -1684,8 +1707,8 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- CP Card -->
|
||||
<div
|
||||
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
|
||||
<div class="text-[#b48608]">
|
||||
class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
|
||||
<div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
|
||||
<!-- Brackets Icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="w-8 h-8">
|
||||
@@ -1706,8 +1729,8 @@
|
||||
|
||||
<!-- Data Mining Card -->
|
||||
<div
|
||||
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
|
||||
<div class="text-[#b48608]">
|
||||
class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
|
||||
<div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
|
||||
<!-- Shield Icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="w-8 h-8">
|
||||
@@ -1728,8 +1751,8 @@
|
||||
</div>
|
||||
<!-- Software Development Card -->
|
||||
<div
|
||||
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
|
||||
<div class="text-[#b48608]">
|
||||
class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
|
||||
<div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
|
||||
<!-- Layout Dashboard Icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" class="w-8 h-8">
|
||||
@@ -1754,7 +1777,7 @@
|
||||
|
||||
<!-- Galeri Keseruan Section -->
|
||||
<section id="galeri" class="bg-white py-20 lg:py-24">
|
||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
||||
<div class="w-full px-6 lg:px-16 xl:px-24">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-12">
|
||||
@@ -1929,7 +1952,7 @@
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20">
|
||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
||||
<div class="w-full px-6 lg:px-16 xl:px-24">
|
||||
<div
|
||||
class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]">
|
||||
|
||||
@@ -2017,7 +2040,6 @@
|
||||
</div>
|
||||
</section>
|
||||
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -2085,6 +2107,243 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// =============================================================================
|
||||
// main.js — Logika Interaksi Halaman HMIF
|
||||
//
|
||||
// Struktur:
|
||||
// 1. Galeri Keseruan — Slider bento grid foto keseruan
|
||||
// 2. Kegiatan Unggulan — Slider kartu kegiatan tahunan
|
||||
// =============================================================================
|
||||
|
||||
// =============================================================================
|
||||
// 1. GALERI KESERUAN — SLIDER
|
||||
// Slider bento grid foto keseruan dengan auto-slide, navigasi manual,
|
||||
// dot indicator, pause on hover, dan recalculate on resize.
|
||||
// =============================================================================
|
||||
|
||||
(function () {
|
||||
var AUTO_DELAY_MS = 4000; // 4 detik per slide
|
||||
var GAP_PX = 16 * 2; // grid gap-4 = 1rem? but original used gap-4; keep reasonable spacing if needed
|
||||
|
||||
var track = document.getElementById('galeri-track');
|
||||
var viewport = document.getElementById('galeri-viewport');
|
||||
var prevBtn = document.getElementById('galeri-prev');
|
||||
var nextBtn = document.getElementById('galeri-next');
|
||||
var dotsContainer = document.getElementById('galeri-dots');
|
||||
|
||||
if (!track || !viewport || !prevBtn || !nextBtn) return;
|
||||
|
||||
var currentSlide = 0;
|
||||
var autoSlideTimer;
|
||||
var originalHTML = track.innerHTML;
|
||||
|
||||
// collect all anchor elements (images) in the original order
|
||||
var originalAnchors = Array.from((function () {
|
||||
var tmp = document.createElement('div'); tmp.innerHTML = originalHTML; return tmp;
|
||||
})().querySelectorAll('a'));
|
||||
|
||||
// builds slides where each slide contains a single image (for small screens)
|
||||
function buildSingleImageSlides() {
|
||||
var slides = originalAnchors.map(function (a) {
|
||||
// clone anchor and remove mobile-hidden class so it becomes visible in single-image slides
|
||||
try {
|
||||
var clone = a.cloneNode(true);
|
||||
if (clone.classList) clone.classList.remove('hidden');
|
||||
// also remove inline style display:none if present
|
||||
if (clone.style) clone.style.display = '';
|
||||
return '<div class="flex-shrink-0 w-full">' +
|
||||
'<div class="aspect-video w-full overflow-hidden rounded-xl">' +
|
||||
clone.outerHTML +
|
||||
'</div></div>';
|
||||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
return slides.join('');
|
||||
}
|
||||
|
||||
function getTotalSlides() {
|
||||
return track.children.length;
|
||||
}
|
||||
|
||||
// render dot buttons dynamically according to total slides
|
||||
function renderDots(n) {
|
||||
if (!dotsContainer) return;
|
||||
dotsContainer.innerHTML = '';
|
||||
for (var i = 0; i < n; i++) {
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'galeri-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
|
||||
btn.setAttribute('data-index', String(i));
|
||||
btn.setAttribute('aria-label', 'Slide ' + (i+1));
|
||||
(function (idx) { btn.addEventListener('click', function () { goToSlide(idx); startAutoSlide(); }); })(i);
|
||||
dotsContainer.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
function updateDots(activeIndex) {
|
||||
if (!dotsContainer) return;
|
||||
var dots = dotsContainer.querySelectorAll('button');
|
||||
dots.forEach(function (dot, i) {
|
||||
if (i === activeIndex) {
|
||||
dot.classList.remove('bg-gray-200', 'w-2.5');
|
||||
dot.classList.add('bg-hmif-primary', 'w-6');
|
||||
} else {
|
||||
dot.classList.remove('bg-hmif-primary', 'w-6');
|
||||
dot.classList.add('bg-gray-200', 'w-2.5');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function rebuildTrackForViewport() {
|
||||
var isMobile = window.innerWidth < 768; // md breakpoint
|
||||
if (isMobile) {
|
||||
track.innerHTML = buildSingleImageSlides();
|
||||
} else {
|
||||
track.innerHTML = originalHTML;
|
||||
}
|
||||
renderDots(getTotalSlides());
|
||||
}
|
||||
|
||||
// Pindah ke slide dengan index tertentu, loop otomatis di kedua arah
|
||||
function goToSlide(index) {
|
||||
var total = getTotalSlides();
|
||||
if (total === 0) return;
|
||||
currentSlide = ((index % total) + total) % total;
|
||||
track.style.transform = 'translateX(-' + (currentSlide * viewport.offsetWidth) + 'px)';
|
||||
updateDots(currentSlide);
|
||||
}
|
||||
|
||||
// Mulai atau restart timer auto-slide
|
||||
function startAutoSlide() {
|
||||
clearInterval(autoSlideTimer);
|
||||
autoSlideTimer = setInterval(function () { goToSlide(currentSlide + 1); }, AUTO_DELAY_MS);
|
||||
}
|
||||
|
||||
prevBtn.addEventListener('click', function () { goToSlide(currentSlide - 1); startAutoSlide(); });
|
||||
nextBtn.addEventListener('click', function () { goToSlide(currentSlide + 1); startAutoSlide(); });
|
||||
|
||||
// Pause saat kursor di atas galeri
|
||||
viewport.addEventListener('mouseenter', function () { clearInterval(autoSlideTimer); });
|
||||
viewport.addEventListener('mouseleave', startAutoSlide);
|
||||
|
||||
// Recalculate posisi slide saat browser di-resize
|
||||
window.addEventListener('resize', function () { rebuildTrackForViewport(); goToSlide(currentSlide); });
|
||||
|
||||
// initial build
|
||||
rebuildTrackForViewport();
|
||||
goToSlide(0);
|
||||
startAutoSlide();
|
||||
})();
|
||||
|
||||
|
||||
// =============================================================================
|
||||
// 2. KEGIATAN UNGGULAN — SLIDER
|
||||
// Slider kartu kegiatan tahunan yang menampilkan 2 kartu sekaligus pada desktop,
|
||||
// dan 1 kartu pada layar sempit. Logika pergantian disesuaikan agar pergeseran
|
||||
// selalu berpindah tepat satu item, memperhitungkan gap antar-kartu.
|
||||
// =============================================================================
|
||||
|
||||
(function () {
|
||||
var TOTAL_CARDS = 6;
|
||||
var AUTO_DELAY_MS = 2000;
|
||||
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
||||
|
||||
var track = document.getElementById('slider-track');
|
||||
var viewport = document.getElementById('slider-viewport');
|
||||
var prevBtn = document.getElementById('slider-prev');
|
||||
var nextBtn = document.getElementById('slider-next');
|
||||
var dotsContainer = document.getElementById('slider-dots');
|
||||
|
||||
if (!track || !viewport || !prevBtn || !nextBtn) return;
|
||||
|
||||
var current = 0;
|
||||
var autoTimer;
|
||||
|
||||
function getCardsVisible() {
|
||||
return window.innerWidth >= 768 ? 2 : 1; // md breakpoint
|
||||
}
|
||||
|
||||
// lebar kartu yang terlihat (tidak termasuk gap)
|
||||
function getCardWidth() {
|
||||
var visible = getCardsVisible();
|
||||
if (visible === 1) return viewport.offsetWidth;
|
||||
return (viewport.offsetWidth - GAP_PX) / visible;
|
||||
}
|
||||
|
||||
function getMaxIndex() {
|
||||
return Math.max(0, TOTAL_CARDS - getCardsVisible());
|
||||
}
|
||||
|
||||
// Pindah ke posisi slide tertentu; perhitungan berbeda untuk 1 atau 2 kartu
|
||||
function goTo(index) {
|
||||
var maxIndex = getMaxIndex();
|
||||
current = ((index % (maxIndex + 1)) + (maxIndex + 1)) % (maxIndex + 1);
|
||||
|
||||
if (getCardsVisible() === 1) {
|
||||
// langkah pergeseran = viewport width + gap
|
||||
var step = viewport.offsetWidth + GAP_PX;
|
||||
track.style.transform = 'translateX(-' + (current * step) + 'px)';
|
||||
} else {
|
||||
var cardW = getCardWidth();
|
||||
track.style.transform = 'translateX(-' + (current * (cardW + GAP_PX)) + 'px)';
|
||||
}
|
||||
|
||||
updateDots(current);
|
||||
}
|
||||
|
||||
// Render dot indicators dynamically based on total slides
|
||||
function renderSliderDots(n) {
|
||||
if (!dotsContainer) return;
|
||||
dotsContainer.innerHTML = '';
|
||||
for (var i = 0; i < n; i++) {
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'slider-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
|
||||
btn.setAttribute('data-index', String(i));
|
||||
btn.setAttribute('aria-label', 'Slide ' + (i+1));
|
||||
(function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
|
||||
dotsContainer.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
function updateDots(activeIndex) {
|
||||
if (!dotsContainer) return;
|
||||
var dots = dotsContainer.querySelectorAll('button');
|
||||
dots.forEach(function (dot, i) {
|
||||
if (i === activeIndex) {
|
||||
dot.classList.remove('bg-gray-200', 'w-2.5');
|
||||
dot.classList.add('bg-hmif-primary', 'w-6');
|
||||
} else {
|
||||
dot.classList.remove('bg-hmif-primary', 'w-6');
|
||||
dot.classList.add('bg-gray-200', 'w-2.5');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mulai atau restart timer auto-slide
|
||||
function startAuto() {
|
||||
clearInterval(autoTimer);
|
||||
autoTimer = setInterval(function () { goTo(current + 1); }, AUTO_DELAY_MS);
|
||||
}
|
||||
|
||||
prevBtn.addEventListener('click', function () { goTo(current - 1); startAuto(); });
|
||||
nextBtn.addEventListener('click', function () { goTo(current + 1); startAuto(); });
|
||||
|
||||
// initial render of dots according to current viewport
|
||||
renderSliderDots(getMaxIndex() + 1);
|
||||
|
||||
// Pause saat kursor di atas slider
|
||||
viewport.addEventListener('mouseenter', function () { clearInterval(autoTimer); });
|
||||
viewport.addEventListener('mouseleave', startAuto);
|
||||
|
||||
// Recalculate posisi slide and dots saat browser di-resize
|
||||
window.addEventListener('resize', function () { renderSliderDots(getMaxIndex() + 1); goTo(current); });
|
||||
|
||||
goTo(0);
|
||||
startAuto();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const menuItems = document.querySelectorAll('[data-menu]');
|
||||
|
||||
+47
-6
@@ -1,6 +1,47 @@
|
||||
/*
|
||||
* LimaEm — Group 07 | Kehidupan Mahasiswa & Himpunan (HMIF)
|
||||
*
|
||||
* CSS utama ada di: assets/css/output.css (Tailwind custom build)
|
||||
* File ini tersedia untuk CSS tambahan jika diperlukan.
|
||||
*/
|
||||
:root {
|
||||
--brand-navy: #003150;
|
||||
--brand-yellow: #feb401;
|
||||
--text-main: #1e293b;
|
||||
--text-soft: #64748b;
|
||||
--bg-soft: #f8fafc;
|
||||
--line: #e2e8f0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
|
||||
.container { width: min(1100px, 92%); margin-inline: auto; }
|
||||
|
||||
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
|
||||
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
|
||||
|
||||
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
|
||||
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
|
||||
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
|
||||
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
|
||||
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
|
||||
|
||||
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
|
||||
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
|
||||
|
||||
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
|
||||
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
|
||||
.cover img { width: 100%; height: auto; display: block; }
|
||||
|
||||
.article-body > * + * { margin-top: 1.1em; }
|
||||
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
|
||||
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
|
||||
.article-body p { margin: 0 0 1em; }
|
||||
.article-body ul, .article-body ol { padding-left: 1.4rem; }
|
||||
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
|
||||
.article-body a { color: #005eb8; }
|
||||
.article-body img { max-width: 100%; border-radius: 8px; }
|
||||
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
|
||||
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
|
||||
|
||||
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
|
||||
.footer-logo { height: 28px; width: auto; }
|
||||
.footer-ornament { width: 100%; display: block; opacity: .9; }
|
||||
|
||||
Reference in New Issue
Block a user