tisto/student-web-if-development-kit
2
0
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests Activity

Compare commits

base: tisto/student-web-if-development-kit:feature/animation
Branches Tags
tisto/student-web-if-development-kit:main tisto/student-web-if-development-kit:final tisto/student-web-if-development-kit:features/final-HarusSelesaiKP tisto/student-web-if-development-kit:feature/animation tisto/student-web-if-development-kit:feature/lazyloading tisto/student-web-if-development-kit:feature/multilanguage tisto/student-web-if-development-kit:feature/optimize-images tisto/student-web-if-development-kit:chore/upscale-images izu/student-web-if-development-kit:main
..
compare: tisto/student-web-if-development-kit:af7d7ee75a0deb23126b0b70ef76249b33b5b7d2
Branches Tags
tisto/student-web-if-development-kit:main tisto/student-web-if-development-kit:final tisto/student-web-if-development-kit:features/final-HarusSelesaiKP tisto/student-web-if-development-kit:feature/animation tisto/student-web-if-development-kit:feature/lazyloading tisto/student-web-if-development-kit:feature/multilanguage tisto/student-web-if-development-kit:feature/optimize-images tisto/student-web-if-development-kit:chore/upscale-images izu/student-web-if-development-kit:main

1 Commits
feature/animation .. af7d7ee75a

Author SHA1 Message Date
pancaa af7d7ee75a Merge pull request 'feature/multilanguage' (#7) from feature/multilanguage into main 
Reviewed-on: #7
Reviewed-by: requestha <d1041231091@student.untan.ac.id>
Reviewed-by: pancaa <d1041231077@student.untan.ac.id>
 2026-06-05 05:17:21 +00:00
2 changed files with 56 additions and 105 deletions
Expand all files Collapse all files
groups/HarusSelesaiKP/index.html
+22 -40
View File
@@ -2,7 +2,6 @@
<html lang="id" class="scroll-smooth"> <html lang="id" class="scroll-smooth">
<head> <head>
<link rel="preload" as="image" href="images/hero.webp" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Group 03 &ndash; HarusSelesaiKP | Informatika UNTAN</title> <title>Group 03 &ndash; HarusSelesaiKP | Informatika UNTAN</title>
@@ -1277,12 +1276,15 @@
<section class="hero-section"> <section class="hero-section">
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
<h1 class="hero-title reveal"> <h1 class="hero-title">
Study at Study at
<span class="highlight-text">Universitas Tanjungpura</span> Pontianak <span class="highlight-text">Universitas Tanjungpura</span> Pontianak
</h1> </h1>
<p class="hero-description reveal" data-skp-i18n="skp_hero_desc"> <p class="hero-description" data-skp-i18n="skp_hero_desc">
=======
<p class="hero-description" data-skp-i18n="skp_hero_desc">
>>>>>>> origin/main
Kuliah di kampus unggulan Kalimantan Barat dengan fasilitas lengkap, Kuliah di kampus unggulan Kalimantan Barat dengan fasilitas lengkap,
lingkungan nyaman dan kehidupan mahasiswa yang terjangkau lingkungan nyaman dan kehidupan mahasiswa yang terjangkau
</p> </p>
@@ -1290,12 +1292,12 @@
<!-- ABOUT SECTION --> <!-- ABOUT SECTION -->
<section class="about-section"> <section class="about-section">
<div class="about-image-wrapper reveal> <div class="about-image-wrapper">
<span class=" image-bg-decorator"></span> <span class="image-bg-decorator"></span>
<div class="main-image"></div> <div class="main-image"></div>
</div> </div>
<div class="about-content reveal"> <div class="about-content">
<span class="eyebrow-component" data-skp-i18n="skp_about_eyebrow">Tentang Untan</span> <span class="eyebrow-component" data-skp-i18n="skp_about_eyebrow">Tentang Untan</span>
<h2 class="about-title" data-skp-i18n="skp_about_title"> <h2 class="about-title" data-skp-i18n="skp_about_title">
@@ -1336,7 +1338,7 @@
<section class="facilities-section"> <section class="facilities-section">
<span class="eyebrow-component" data-skp-i18n="skp_fac_eyebrow">Fasilitas Kampus</span> <span class="eyebrow-component" data-skp-i18n="skp_fac_eyebrow">Fasilitas Kampus</span>
<h2 class="facilities-title reveal" data-skp-i18n="skp_fac_main_title"> <h2 class="facilities-title" data-skp-i18n="skp_fac_main_title">
Fasilitas Kampus untuk Pengalaman Belajar yang Nyaman Fasilitas Kampus untuk Pengalaman Belajar yang Nyaman
</h2> </h2>
@@ -1347,10 +1349,10 @@
<section class="campus-section"> <section class="campus-section">
<span class="eyebrow-component" data-skp-i18n="skp_campus_eyebrow">Kehidupan Kampus</span> <span class="eyebrow-component" data-skp-i18n="skp_campus_eyebrow">Kehidupan Kampus</span>
<h2 class="campus-title reveal data-skp-i18n=" skp_campus_title"> <h2 class="campus-title" data-skp-i18n="skp_campus_title">
Aktivitas Mahasiswa & Organisasi Kampus Aktivitas Mahasiswa & Organisasi Kampus
</h2> </h2>
<p class="campus-subtitle reveal data-skp-i18n=" skp_campus_subtitle"> <p class="campus-subtitle" data-skp-i18n="skp_campus_subtitle">
Mahasiswa UNTAN memiliki berbagai kesempatan untuk berkembang melalui Mahasiswa UNTAN memiliki berbagai kesempatan untuk berkembang melalui
organisasi, UKM, komunitas, dan kegiatan ekstrakurikuler. organisasi, UKM, komunitas, dan kegiatan ekstrakurikuler.
</p> </p>
@@ -1366,8 +1368,8 @@
<section class="pontianak-city-section"> <section class="pontianak-city-section">
<div class="pontianak-overlay"></div> <div class="pontianak-overlay"></div>
<div class="pontianak-content reveal> <div class="pontianak-content">
<span class=" eyebrow-component" data-skp-i18n="skp_pontianak_eyebrow">Kota Pontianak</span> <span class="eyebrow-component" data-skp-i18n="skp_pontianak_eyebrow">Kota Pontianak</span>
<h2 class="pontianak-title" data-skp-i18n="skp_pontianak_title"> <h2 class="pontianak-title" data-skp-i18n="skp_pontianak_title">
Live In Pontianak Live In Pontianak
</h2> </h2>
@@ -1386,7 +1388,7 @@
<section class="destination-section"> <section class="destination-section">
<span class="eyebrow-component" data-skp-i18n="skp_dest_eyebrow">Wisata & Destinasi</span> <span class="eyebrow-component" data-skp-i18n="skp_dest_eyebrow">Wisata & Destinasi</span>
<h2 class="destination-title reveal data-skp-i18n=" skp_dest_title"> <h2 class="destination-title" data-skp-i18n="skp_dest_title">
Tempat Menarik di Pontianak Tempat Menarik di Pontianak
</h2> </h2>
@@ -1399,7 +1401,7 @@
<section class="culinary-section"> <section class="culinary-section">
<span class="eyebrow-component" data-skp-i18n="skp_cul_eyebrow">Cafe & Kuliner</span> <span class="eyebrow-component" data-skp-i18n="skp_cul_eyebrow">Cafe & Kuliner</span>
<h2 class="culinary-title reveal" data-skp-i18n="skp_cul_title"> <h2 class="culinary-title" data-skp-i18n="skp_cul_title">
Kuliner dan Coffee Shop Favorit Mahasiswa Kuliner dan Coffee Shop Favorit Mahasiswa
</h2> </h2>
<hr class="culinary-divider" /> <hr class="culinary-divider" />
@@ -1412,11 +1414,11 @@
<!-- LIVING COST SECTION --> <!-- LIVING COST SECTION -->
<section class="living-cost-section"> <section class="living-cost-section">
<div class="cost-banner-wrapper"> <div class="cost-banner-wrapper">
<img src="images/biaya-hidup.jpg" alt="biaya hidup" class="cost-banner-img" loading="lazy" /> <img src="images/biaya-hidup.jpg" alt="biaya hidup" class="cost-banner-img" />
<div class="cost-banner-overlay"></div> <div class="cost-banner-overlay"></div>
</div> </div>
<div class="cost-info-panel reveal"> <div class="cost-info-panel">
<span class="eyebrow-component" data-skp-i18n="skp_cost_eyebrow">Biaya Hidup Mahasiswa</span> <span class="eyebrow-component" data-skp-i18n="skp_cost_eyebrow">Biaya Hidup Mahasiswa</span>
<h2 class="cost-title" data-skp-i18n="skp_cost_title"> <h2 class="cost-title" data-skp-i18n="skp_cost_title">
@@ -1714,7 +1716,7 @@
typeof skpT === "function" ? skpT(item.descKey) : item.descKey; typeof skpT === "function" ? skpT(item.descKey) : item.descKey;
cardsHtmlHTML += ` cardsHtmlHTML += `
<div class="facility-card reveal"> <div class="facility-card">
<img src="${item.imgSrc}" alt="${displayTitle}" class="card-image" loading="lazy" decoding="async" /> <img src="${item.imgSrc}" alt="${displayTitle}" class="card-image" loading="lazy" decoding="async" />
<div class="card-body"> <div class="card-body">
<span class="card-icon-badge"> <span class="card-icon-badge">
@@ -1854,7 +1856,7 @@
typeof skpT === "function" ? skpT(dir.descKey) : dir.descKey; typeof skpT === "function" ? skpT(dir.descKey) : dir.descKey;
return ` return `
<div class="directory-card reveal"> <div class="directory-card">
<div class="img-wrapper"> <div class="img-wrapper">
<img src="${dir.image}" alt="${displayTitle}" loading="lazy" decoding="async" /> <img src="${dir.image}" alt="${displayTitle}" loading="lazy" decoding="async" />
</div> </div>
@@ -1990,7 +1992,7 @@
typeof skpT === "function" ? skpT(dest.descKey) : dest.descKey; typeof skpT === "function" ? skpT(dest.descKey) : dest.descKey;
return ` return `
<div class="destination-card reveal" style="background-image: url('${dest.image}')"> <div class="destination-card" style="background-image: url('${dest.image}')">
<div class="card-overlay"></div> <div class="card-overlay"></div>
<div class="card-content"> <div class="card-content">
<h3 class="card-name">${displayName}</h3> <h3 class="card-name">${displayName}</h3>
@@ -2143,7 +2145,7 @@
typeof skpT === "function" ? skpT(item.descKey) : item.descKey; typeof skpT === "function" ? skpT(item.descKey) : item.descKey;
return ` return `
<div class="culinary-card reveal"> <div class="culinary-card">
<img src="${item.image}" alt="${item.name}" class="card-thumb" loading="lazy" decoding="async" /> <img src="${item.image}" alt="${item.name}" class="card-thumb" loading="lazy" decoding="async" />
<div class="card-body"> <div class="card-body">
<h3>${item.name}</h3> <h3>${item.name}</h3>
@@ -2208,7 +2210,7 @@
typeof skpT === "function" ? skpT("skp_cost_period") : "per bulan"; typeof skpT === "function" ? skpT("skp_cost_period") : "per bulan";
return ` return `
<div class="cost-item-card reveal"> <div class="cost-item-card">
${detail.iconSvg} ${detail.iconSvg}
<p class="cost-type">${displayType}</p> <p class="cost-type">${displayType}</p>
<p class="cost-price">Rp ${detail.price}</p> <p class="cost-price">Rp ${detail.price}</p>
@@ -2225,26 +2227,6 @@
renderLivingCostCards(); renderLivingCostCards();
}); });
</script> </script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const reveals = document.querySelectorAll(".reveal");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("active");
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.15
});
reveals.forEach((element) => {
observer.observe(element);
});
});
</script>
</body> </body>
</html> </html>
groups/HarusSelesaiKP/style.css
+24 -55
View File
@@ -119,7 +119,7 @@ body {
display: block; display: block;
} }
.article-body>*+* { .article-body > * + * {
margin-top: 1.1em; margin-top: 1.1em;
} }
@@ -300,10 +300,12 @@ body {
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 1; z-index: 1;
background: linear-gradient(270deg, background: linear-gradient(
270deg,
rgba(0, 0, 0, 0) 21.76%, rgba(0, 0, 0, 0) 21.76%,
rgba(0, 0, 0, 0.4) 63.31%, rgba(0, 0, 0, 0.4) 63.31%,
rgba(0, 49, 80, 0.72) 78.24%); rgba(0, 49, 80, 0.72) 78.24%
);
} }
/* Judul Hero */ /* Judul Hero */
@@ -425,7 +427,7 @@ body {
font-size: 8px; font-size: 8px;
font-weight: 500; font-weight: 500;
p+p { p + p {
margin-top: 8px; margin-top: 8px;
} }
} }
@@ -982,10 +984,12 @@ body {
.pontianak-overlay { .pontianak-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(0deg, background: linear-gradient(
0deg,
rgba(0, 0, 0, 0.9) -14.48%, rgba(0, 0, 0, 0.9) -14.48%,
rgba(0, 0, 0, 0.4) 42.76%, rgba(0, 0, 0, 0.4) 42.76%,
rgba(0, 0, 0, 0) 100%); rgba(0, 0, 0, 0) 100%
);
z-index: 1; z-index: 1;
} }
@@ -1128,10 +1132,12 @@ body {
.card-overlay { .card-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(0deg, background: linear-gradient(
0deg,
rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0) 100%); rgba(0, 0, 0, 0) 100%
);
z-index: 1; z-index: 1;
} }
@@ -1400,10 +1406,12 @@ body {
.cost-banner-overlay { .cost-banner-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(0deg, background: linear-gradient(
0deg,
#012338 0%, #012338 0%,
rgba(1, 35, 56, 0.4) 55%, rgba(1, 35, 56, 0.4) 55%,
rgba(1, 35, 56, 0) 100%); rgba(1, 35, 56, 0) 100%
);
} }
} }
@@ -1526,10 +1534,12 @@ body {
/* Perubahan Arah Gradasi: Mengabur ke arah kiri panel Navy */ /* Perubahan Arah Gradasi: Mengabur ke arah kiri panel Navy */
.cost-banner-overlay { .cost-banner-overlay {
background: linear-gradient(270deg, background: linear-gradient(
270deg,
#012338 0%, #012338 0%,
rgba(0, 0, 0, 0.4) 65%, rgba(0, 0, 0, 0.4) 65%,
rgba(0, 0, 0, 0) 78%); rgba(0, 0, 0, 0) 78%
);
} }
} }
@@ -1624,13 +1634,13 @@ body.lang-pending {
will-change: box-shadow; will-change: box-shadow;
} }
#nav-wrapper>div:first-child { #nav-wrapper > div:first-child {
transform: translateZ(0); transform: translateZ(0);
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
} }
@media (max-width: 1023px) { @media (max-width: 1023px) {
#nav-wrapper>div:first-child { #nav-wrapper > div:first-child {
min-height: 0 !important; min-height: 0 !important;
max-height: none; max-height: none;
} }
@@ -1648,7 +1658,6 @@ body.lang-pending {
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *,
*::before, *::before,
*::after { *::after {
@@ -1823,7 +1832,6 @@ body.lang-pending {
} }
@keyframes lucoPulse { @keyframes lucoPulse {
0%, 0%,
100% { 100% {
transform: scale(1); transform: scale(1);
@@ -1870,7 +1878,6 @@ body.lang-pending {
} }
@keyframes bounce { @keyframes bounce {
0%, 0%,
80%, 80%,
100% { 100% {
@@ -1894,41 +1901,3 @@ body.lang-pending {
border-right: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
} }
/* ===== PAGE LOAD ANIMATIONS ===== */
@keyframes fadeInUplarge {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Hero */
.reveal {
opacity: 0;
transform: translateY(50px);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}