tambah section video profil

This commit is contained in:
miaaurl
2026-06-05 15:26:25 +07:00
parent 6a46baad86
commit 2dfee8a2b5
2 changed files with 86 additions and 0 deletions
+76
View File
@@ -1811,6 +1811,82 @@
</div>
</section>
<!-- ===================== VIDEO PROFIL ===================== -->
<section class="jf-section jf-section-light">
<div class="container">
<div class="jf-section-header jf-center">
<span class="jf-badge" data-i18n="grp_jellyfish_video_profil">Video Profil</span>
<h2 class="jf-section-title" data-i18n="grp_jellyfish_profil_ft">Profil Fakultas Teknik UNTAN</h2>
<p class="jf-section-sub">
<center data-i18n="grp_jellyfish_video_desc">Kenali lebih dekat Fakultas Teknik Universitas Tanjungpura melalui video profil resmi
berikut.</center>
</p>
</div>
<div style="
display: flex;
justify-content: center;
margin-top: 2rem;
">
<a href="https://youtu.be/52Tn9e750aY?si=0_D7ZJMm1Yv8OQeh" target="_blank" rel="noopener noreferrer"
style="
display: block;
width: 100%;
max-width: 800px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 40px rgba(0,0,0,0.18);
aspect-ratio: 16/9;
position: relative;
text-decoration: none;
background: #000;
">
<!-- Thumbnail YouTube (maxresdefault / hqdefault) -->
<img src="https://img.youtube.com/vi/52Tn9e750aY/maxresdefault.jpg"
onerror="this.src='https://img.youtube.com/vi/52Tn9e750aY/hqdefault.jpg'"
alt="Profil Fakultas Teknik UNTAN" style="
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.3s;
" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'" />
<!-- Overlay tombol play -->
<div style="
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
">
<div style="
width: 72px; height: 72px;
background: rgba(255,0,0,0.9);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
transition: transform 0.2s;
" onmouseover="this.style.transform='scale(1.1)'"
onmouseout="this.style.transform='scale(1)'">
<svg width="28" height="28" viewBox="0 0 24 24" fill="white">
<path d="M8 5v14l11-7z" />
</svg>
</div>
<span style="
color: #fff;
font-size: 15px;
font-weight: 600;
background: rgba(0,0,0,0.55);
padding: 5px 16px;
border-radius: 20px;
letter-spacing: 0.3px;
" data-i18n="grp_jellyfish_watch">Tonton di YouTube</span>
</div>
</a>
</div>
</div>
</section>
<!-- ===================== K. CTA / KONTAK ===================== -->
<section class="jf-section jf-cta-section" id="kontak">
<div class="container jf-cta-inner">