forked from izu/student-web-if-development-kit
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 tistopandita
|
d8c33d7a3d | ||
 pancaa
|
13fc797791 | ||
|
pancaa
|
af7d7ee75a |
+1218
-520
File diff suppressed because it is too large
Load Diff
@@ -1277,12 +1277,13 @@
|
||||
<section class="hero-section">
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<h1 class="hero-title reveal">
|
||||
<h1 class="hero-title">
|
||||
Study at
|
||||
<span class="highlight-text">Universitas Tanjungpura</span> Pontianak
|
||||
</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">
|
||||
Kuliah di kampus unggulan Kalimantan Barat dengan fasilitas lengkap,
|
||||
lingkungan nyaman dan kehidupan mahasiswa yang terjangkau
|
||||
</p>
|
||||
@@ -1290,12 +1291,12 @@
|
||||
|
||||
<!-- ABOUT SECTION -->
|
||||
<section class="about-section">
|
||||
<div class="about-image-wrapper reveal>
|
||||
<span class=" image-bg-decorator"></span>
|
||||
<div class="about-image-wrapper">
|
||||
<span class="image-bg-decorator"></span>
|
||||
<div class="main-image"></div>
|
||||
</div>
|
||||
|
||||
<div class="about-content reveal">
|
||||
<div class="about-content">
|
||||
<span class="eyebrow-component" data-skp-i18n="skp_about_eyebrow">Tentang Untan</span>
|
||||
|
||||
<h2 class="about-title" data-skp-i18n="skp_about_title">
|
||||
@@ -1336,7 +1337,7 @@
|
||||
<section class="facilities-section">
|
||||
<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
|
||||
</h2>
|
||||
|
||||
@@ -1347,10 +1348,10 @@
|
||||
<section class="campus-section">
|
||||
<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
|
||||
</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
|
||||
organisasi, UKM, komunitas, dan kegiatan ekstrakurikuler.
|
||||
</p>
|
||||
@@ -1366,8 +1367,8 @@
|
||||
<section class="pontianak-city-section">
|
||||
<div class="pontianak-overlay"></div>
|
||||
|
||||
<div class="pontianak-content reveal>
|
||||
<span class=" eyebrow-component" data-skp-i18n="skp_pontianak_eyebrow">Kota Pontianak</span>
|
||||
<div class="pontianak-content">
|
||||
<span class="eyebrow-component" data-skp-i18n="skp_pontianak_eyebrow">Kota Pontianak</span>
|
||||
<h2 class="pontianak-title" data-skp-i18n="skp_pontianak_title">
|
||||
Live In Pontianak
|
||||
</h2>
|
||||
@@ -1386,7 +1387,7 @@
|
||||
<section class="destination-section">
|
||||
<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
|
||||
</h2>
|
||||
|
||||
@@ -1399,7 +1400,7 @@
|
||||
<section class="culinary-section">
|
||||
<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
|
||||
</h2>
|
||||
<hr class="culinary-divider" />
|
||||
@@ -1416,7 +1417,7 @@
|
||||
<div class="cost-banner-overlay"></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>
|
||||
|
||||
<h2 class="cost-title" data-skp-i18n="skp_cost_title">
|
||||
@@ -1714,7 +1715,7 @@
|
||||
typeof skpT === "function" ? skpT(item.descKey) : item.descKey;
|
||||
|
||||
cardsHtmlHTML += `
|
||||
<div class="facility-card reveal">
|
||||
<div class="facility-card">
|
||||
<img src="${item.imgSrc}" alt="${displayTitle}" class="card-image" loading="lazy" decoding="async" />
|
||||
<div class="card-body">
|
||||
<span class="card-icon-badge">
|
||||
@@ -1854,7 +1855,7 @@
|
||||
typeof skpT === "function" ? skpT(dir.descKey) : dir.descKey;
|
||||
|
||||
return `
|
||||
<div class="directory-card reveal">
|
||||
<div class="directory-card">
|
||||
<div class="img-wrapper">
|
||||
<img src="${dir.image}" alt="${displayTitle}" loading="lazy" decoding="async" />
|
||||
</div>
|
||||
@@ -1990,7 +1991,7 @@
|
||||
typeof skpT === "function" ? skpT(dest.descKey) : dest.descKey;
|
||||
|
||||
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-content">
|
||||
<h3 class="card-name">${displayName}</h3>
|
||||
@@ -2143,7 +2144,7 @@
|
||||
typeof skpT === "function" ? skpT(item.descKey) : item.descKey;
|
||||
|
||||
return `
|
||||
<div class="culinary-card reveal">
|
||||
<div class="culinary-card">
|
||||
<img src="${item.image}" alt="${item.name}" class="card-thumb" loading="lazy" decoding="async" />
|
||||
<div class="card-body">
|
||||
<h3>${item.name}</h3>
|
||||
@@ -2208,7 +2209,7 @@
|
||||
typeof skpT === "function" ? skpT("skp_cost_period") : "per bulan";
|
||||
|
||||
return `
|
||||
<div class="cost-item-card reveal">
|
||||
<div class="cost-item-card">
|
||||
${detail.iconSvg}
|
||||
<p class="cost-type">${displayType}</p>
|
||||
<p class="cost-price">Rp ${detail.price}</p>
|
||||
@@ -2225,26 +2226,6 @@
|
||||
renderLivingCostCards();
|
||||
});
|
||||
</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>
|
||||
|
||||
</html>
|
||||
@@ -119,7 +119,7 @@ body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.article-body>*+* {
|
||||
.article-body > * + * {
|
||||
margin-top: 1.1em;
|
||||
}
|
||||
|
||||
@@ -300,10 +300,12 @@ body {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: linear-gradient(270deg,
|
||||
rgba(0, 0, 0, 0) 21.76%,
|
||||
rgba(0, 0, 0, 0.4) 63.31%,
|
||||
rgba(0, 49, 80, 0.72) 78.24%);
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(0, 0, 0, 0) 21.76%,
|
||||
rgba(0, 0, 0, 0.4) 63.31%,
|
||||
rgba(0, 49, 80, 0.72) 78.24%
|
||||
);
|
||||
}
|
||||
|
||||
/* Judul Hero */
|
||||
@@ -425,7 +427,7 @@ body {
|
||||
font-size: 8px;
|
||||
font-weight: 500;
|
||||
|
||||
p+p {
|
||||
p + p {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
@@ -982,10 +984,12 @@ body {
|
||||
.pontianak-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(0deg,
|
||||
rgba(0, 0, 0, 0.9) -14.48%,
|
||||
rgba(0, 0, 0, 0.4) 42.76%,
|
||||
rgba(0, 0, 0, 0) 100%);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.9) -14.48%,
|
||||
rgba(0, 0, 0, 0.4) 42.76%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -1128,10 +1132,12 @@ body {
|
||||
.card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(0deg,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
rgba(0, 0, 0, 0.2) 50%,
|
||||
rgba(0, 0, 0, 0) 100%);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
rgba(0, 0, 0, 0.2) 50%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -1400,10 +1406,12 @@ body {
|
||||
.cost-banner-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(0deg,
|
||||
#012338 0%,
|
||||
rgba(1, 35, 56, 0.4) 55%,
|
||||
rgba(1, 35, 56, 0) 100%);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
#012338 0%,
|
||||
rgba(1, 35, 56, 0.4) 55%,
|
||||
rgba(1, 35, 56, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1526,10 +1534,12 @@ body {
|
||||
|
||||
/* Perubahan Arah Gradasi: Mengabur ke arah kiri panel Navy */
|
||||
.cost-banner-overlay {
|
||||
background: linear-gradient(270deg,
|
||||
#012338 0%,
|
||||
rgba(0, 0, 0, 0.4) 65%,
|
||||
rgba(0, 0, 0, 0) 78%);
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
#012338 0%,
|
||||
rgba(0, 0, 0, 0.4) 65%,
|
||||
rgba(0, 0, 0, 0) 78%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1624,13 +1634,13 @@ body.lang-pending {
|
||||
will-change: box-shadow;
|
||||
}
|
||||
|
||||
#nav-wrapper>div:first-child {
|
||||
#nav-wrapper > div:first-child {
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
#nav-wrapper>div:first-child {
|
||||
#nav-wrapper > div:first-child {
|
||||
min-height: 0 !important;
|
||||
max-height: none;
|
||||
}
|
||||
@@ -1648,7 +1658,6 @@ body.lang-pending {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@@ -1823,7 +1832,6 @@ body.lang-pending {
|
||||
}
|
||||
|
||||
@keyframes lucoPulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
@@ -1870,7 +1878,6 @@ body.lang-pending {
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
@@ -1894,41 +1901,3 @@ body.lang-pending {
|
||||
border-right: 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);
|
||||
}
|
||||
Reference in New Issue
Block a user