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

Compare commits

merge into: MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em
Branches Tags
MuhammadFarras/student-web-if-development-kit:main MuhammadFarras/student-web-if-development-kit:fix/divisi-kepengurusan MuhammadFarras/student-web-if-development-kit:fix/divisi-kepengurusan-hover MuhammadFarras/student-web-if-development-kit:feature/fix-ukuran-foto-about MuhammadFarras/student-web-if-development-kit:feature/konten-Lima-em MuhammadFarras/student-web-if-development-kit:feat/limaem-partner-logo-hover-effects MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em-v2 MuhammadFarras/student-web-if-development-kit:enhance/hover-effects-and-interactions MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em MuhammadFarras/student-web-if-development-kit:fix/layout-slider-gradient-limaem MuhammadFarras/student-web-if-development-kit:fix/limaem-slider-layout MuhammadFarras/student-web-if-development-kit:feat/LimaEm-group izu/student-web-if-development-kit:main
...
pull from: MuhammadFarras/student-web-if-development-kit:fix/layout-slider-gradient-limaem
Branches Tags
MuhammadFarras/student-web-if-development-kit:main MuhammadFarras/student-web-if-development-kit:fix/divisi-kepengurusan MuhammadFarras/student-web-if-development-kit:fix/divisi-kepengurusan-hover MuhammadFarras/student-web-if-development-kit:feature/fix-ukuran-foto-about MuhammadFarras/student-web-if-development-kit:feature/konten-Lima-em MuhammadFarras/student-web-if-development-kit:feat/limaem-partner-logo-hover-effects MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em-v2 MuhammadFarras/student-web-if-development-kit:enhance/hover-effects-and-interactions MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em MuhammadFarras/student-web-if-development-kit:fix/layout-slider-gradient-limaem MuhammadFarras/student-web-if-development-kit:fix/limaem-slider-layout MuhammadFarras/student-web-if-development-kit:feat/LimaEm-group izu/student-web-if-development-kit:main

1 Commits
feature/konten-lima-em ... fix/layout-slider-gradient-limaem

Author SHA1 Message Date
Bayu 034b131c12 fix(LimaEm): tidy up Ruang Tumbuh layout and add Kehidupan Mahasiswa hero gradient 2026-06-04 19:40:03 +07:00
1 changed files with 27 additions and 32 deletions
Expand all files Collapse all files
groups/LimaEm/index.html
+27 -32
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="id" class="scroll-smooth"> <html lang="id" class="scroll-smooth">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -1155,7 +1155,7 @@
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa" <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" /> 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> <div class="absolute inset-0 z-0" style="background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, 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 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
@@ -1239,36 +1239,31 @@
</div> </div>
<!-- ─── Right: Photo ─── --> <!-- ─── 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) --> <!-- Frame foto -->
<div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%] <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;">
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">
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg" <img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block alt="Ruang Tumbuh HMIF Universitas Tanjungpura"
transition-transform duration-700 ease-out group-hover:scale-[1.03]" /> class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
<!-- Gradient overlay bawah --> <!-- Gradient overlay bawah -->
<div class="absolute inset-0 <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>
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
</div> </div>
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah --> <!-- 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 bg-hmif-secondary text-hmif-primary
rounded-xl px-4 py-3 text-center shadow-2xl 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" <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"> stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" <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" /> 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> </svg>
<p class="text-[11px] lg:text-xs font-bold leading-snug"> <p class="text-[11px] lg:text-xs font-bold leading-snug">
Inklusivitas &<br>Kolaborasi Inklusivitas &amp;<br>Kolaborasi
</p> </p>
</div> </div>
</div> </div>
@@ -1594,7 +1589,7 @@
<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 w-full md:w-[calc(50%_-_16px)]">
<div <div
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100"> 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" <img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div> </div>
<div class="flex items-start gap-4 mt-6"> <div class="flex items-start gap-4 mt-6">
@@ -1618,7 +1613,7 @@
<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 w-full md:w-[calc(50%_-_16px)]">
<div <div
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100"> 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" <img src="./assets/images/kegiatan-unggulan/informers.jpg" alt="Ultah Informatika"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div> </div>
<div class="flex items-start gap-4 mt-6"> <div class="flex items-start gap-4 mt-6">
@@ -1790,7 +1785,7 @@
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer"> class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC00636.JPG" alt="UPC V" <img src="./assets/images/galeri-keseruan/DSC00636.jpg" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1798,7 +1793,7 @@
<a href="https://instagram.com/hmif_ftuntan" target="_blank" <a href="https://instagram.com/hmif_ftuntan" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\Copy of DSC09492.JPG" alt="Gemastik" <img src="./assets/images/galeri-keseruan/Copy of DSC09492.jpg" alt="Gemastik"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1806,7 +1801,7 @@
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\IMG_0204.JPG" alt="INFORMERS" <img src="./assets/images/galeri-keseruan/IMG_0204.jpg" alt="INFORMERS"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1814,7 +1809,7 @@
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC00456.JPG" alt="UPC V" <img src="./assets/images/galeri-keseruan/DSC00456.jpg" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1828,7 +1823,7 @@
<!-- Foto besar kiri --> <!-- Foto besar kiri -->
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer" <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer"> class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSCF8922.JPG" <img src="./assets/images/galeri-keseruan/DSCF8922.jpg"
alt="Ulang Tahun Informatika" alt="Ulang Tahun Informatika"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1837,14 +1832,14 @@
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC00091.JPG" alt="UPC V" <img src="./assets/images/galeri-keseruan/DSC00091.jpg" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
<!-- Foto kecil kanan atas 2 --> <!-- Foto kecil kanan atas 2 -->
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC03316.JPG" <img src="./assets/images/galeri-keseruan/DSC03316.jpg"
alt="Silaturahmi Keluarga Besar Informatika" alt="Silaturahmi Keluarga Besar Informatika"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1853,7 +1848,7 @@
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer"
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\IMG_5705.JPG" alt="INFORMERS" <img src="./assets/images/galeri-keseruan/IMG_5705.jpg" alt="INFORMERS"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1868,7 +1863,7 @@
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer"> class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC00252.JPG" alt="UPC V" <img src="./assets/images/galeri-keseruan/DSC00252.jpg" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1876,7 +1871,7 @@
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC00519.JPG" alt="UPC V" <img src="./assets/images/galeri-keseruan/DSC00519.jpg" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1884,7 +1879,7 @@
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
target="_blank" rel="noopener noreferrer" target="_blank" rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\IMG_0030.JPG" alt="INFORMERS" <img src="./assets/images/galeri-keseruan/IMG_0030.jpg" alt="INFORMERS"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1892,7 +1887,7 @@
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC01002.JPG" alt="UPC V" <img src="./assets/images/galeri-keseruan/DSC01002.jpg" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>