forked from izu/student-web-if-development-kit
tambah section video profil
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user