fix(layout): perbaiki proporsi floating overlap statistik dan spasi seksi sambutan
This commit is contained in:
Mas Budi Kusuma
+271
-271
@@ -1,271 +1,271 @@
|
||||
<?php get_header(); ?>
|
||||
|
||||
<main id="primary" class="site-main edukarsa-home">
|
||||
|
||||
<!-- 1. SLIDER -->
|
||||
<?php if ( get_option('edukarsa_tampil_slider', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-hero-slider" style="padding: 0;">
|
||||
<div class="slider-container" id="hero-slider-container">
|
||||
<?php
|
||||
$query_slider = new WP_Query( array( 'post_type' => 'slider', 'posts_per_page' => -1 ) );
|
||||
if ( $query_slider->have_posts() ) :
|
||||
echo '<div class="slider-wrapper" id="hero-slider-wrapper">';
|
||||
while ( $query_slider->have_posts() ) : $query_slider->the_post();
|
||||
$link = get_post_meta( get_the_ID(), '_slider_link', true );
|
||||
?>
|
||||
<div class="slide-item img-wrapper-slider">
|
||||
<?php if(!empty($link)) echo '<a href="'.esc_url($link).'">'; ?>
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<?php the_post_thumbnail( 'full' ); ?>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>🖼️</i><span>Upload Gambar Slider untuk "<?php the_title(); ?>"</span></div>
|
||||
<?php endif; ?>
|
||||
<?php if(!empty($link)) echo '</a>'; ?>
|
||||
</div>
|
||||
<?php
|
||||
endwhile;
|
||||
echo '</div>';
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 2. STATISTIK DESAIN KARTU -->
|
||||
<?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-stats">
|
||||
<div class="container stats-grid">
|
||||
<?php for($i=1; $i<=3; $i++) : ?>
|
||||
<div class="stat-item card-style stat-card-modern">
|
||||
<div class="stat-icon-wrapper">
|
||||
<?php $icon = get_option('edukarsa_stat'.$i.'_icon'); ?>
|
||||
<?php if($icon) : ?>
|
||||
<img src="<?php echo esc_url($icon); ?>" alt="Icon">
|
||||
<?php else: ?>
|
||||
<span>🏫</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<h3 class="stat-number"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_angka', '00') ); ?></h3>
|
||||
<h4 class="stat-title"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_label', 'Judul Statistik') ); ?></h4>
|
||||
<p class="stat-desc"><?php echo nl2br(esc_html( get_option('edukarsa_stat'.$i.'_desc', 'Deskripsi singkat') )); ?></p>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 3. ABOUT US -->
|
||||
<?php if ( get_option('edukarsa_tampil_about', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-sambutan pt-0">
|
||||
<div class="container sambutan-grid">
|
||||
<div class="sambutan-image-wrapper">
|
||||
<div class="img-wrapper-portrait">
|
||||
<?php $foto = get_option('edukarsa_foto_kepsek'); ?>
|
||||
<?php if(!empty($foto)) : ?>
|
||||
<img src="<?php echo esc_url($foto); ?>" alt="Kepala Sekolah">
|
||||
<?php else : ?>
|
||||
<div class="img-placeholder"><i>👤</i><span>Upload Foto Kepala Sekolah</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sambutan-content">
|
||||
<span class="badge-title">ABOUT US</span>
|
||||
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_nama_kepsek') ); ?></h2>
|
||||
<h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:15px; font-size:18px;"><?php echo esc_html( get_option('edukarsa_subtitle_about') ); ?></h4>
|
||||
<div class="sambutan-text"><?php echo wpautop( wp_kses_post( get_option('edukarsa_teks_sambutan') ) ); ?></div>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary">Ketahui Lebih Lanjut</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 4. MILESTONES -->
|
||||
<?php if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-milestones bg-light-blue">
|
||||
<div class="container milestone-grid text-center">
|
||||
<?php
|
||||
$query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
|
||||
if ( $query_milestone->have_posts() ) :
|
||||
while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
|
||||
echo '<div class="milestone-item card-style"><h3 class="milestone-title" style="color:var(--primary-color); font-size:28px; margin-bottom:5px;">' . get_the_title() . '</h3><div class="milestone-desc">' . get_the_excerpt() . '</div></div>';
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 5. PROGRAM -->
|
||||
<?php if ( get_option('edukarsa_tampil_program', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-programs">
|
||||
<div class="container">
|
||||
<div class="section-header text-center"><h2 class="section-title">Our Program</h2><hr class="title-underline"></div>
|
||||
<div class="program-grid">
|
||||
<?php
|
||||
$query_program = new WP_Query( array( 'post_type' => 'program', 'posts_per_page' => 3 ) );
|
||||
if ( $query_program->have_posts() ) :
|
||||
while ( $query_program->have_posts() ) : $query_program->the_post();
|
||||
?>
|
||||
<div class="program-card card-style text-center top-border-blue">
|
||||
<div class="img-wrapper-landscape" style="margin-bottom: 20px;">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<?php the_post_thumbnail( 'medium' ); ?>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>🏫</i><span>Gambar Program</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<h3 style="margin-bottom:15px; color:var(--heading-color);"><?php the_title(); ?></h3>
|
||||
<div class="program-desc" style="margin-bottom:20px; font-size:14px; color:#666;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
|
||||
<a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
|
||||
</div>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- WRAPPER PARALLAX -->
|
||||
<?php
|
||||
$mid_bg = get_option('edukarsa_mid_bg_image');
|
||||
$mid_color = get_option('edukarsa_mid_bg_color', '#0b4a8e');
|
||||
$parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background-color: '.esc_attr($mid_color).';';
|
||||
?>
|
||||
<div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
|
||||
<div class="parallax-overlay" style="background-color: <?php echo esc_attr($mid_color); ?>; opacity: <?php echo $mid_bg ? '0.9' : '1'; ?>;"></div>
|
||||
<div class="parallax-content relative-z2">
|
||||
|
||||
<!-- 6. VIDEO -->
|
||||
<?php if ( get_option('edukarsa_tampil_video', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-videos">
|
||||
<div class="container video-grid">
|
||||
<?php for($i=1; $i<=2; $i++) : ?>
|
||||
<div class="video-item">
|
||||
<?php $vid_thumb = get_option('edukarsa_video'.$i.'_thumb'); ?>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_video'.$i.'_url', '#') ); ?>" target="_blank">
|
||||
<div class="img-wrapper-video">
|
||||
<?php if($vid_thumb) : ?>
|
||||
<img src="<?php echo esc_url($vid_thumb); ?>" alt="Video">
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder" style="background:#1e293b; color:#cbd5e1; border:none;"><i>▶️</i><span>Upload Thumbnail Video <?php echo $i; ?></span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php if($vid_thumb) echo '<div class="play-btn">▶</div>'; ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 7. KEUNGGULAN DINAMIS -->
|
||||
<?php if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 0; padding-bottom: 100px;">
|
||||
<div class="container">
|
||||
<div class="section-header text-center">
|
||||
<span class="badge-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US') ); ?></span>
|
||||
<h2 class="section-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_title', 'Keunggulan Program') ); ?></h2>
|
||||
</div>
|
||||
<div class="keunggulan-grid">
|
||||
<?php
|
||||
$query_keunggulan = new WP_Query( array( 'post_type' => 'keunggulan', 'posts_per_page' => 9 ) );
|
||||
if ( $query_keunggulan->have_posts() ) :
|
||||
$nomor = 1;
|
||||
while ( $query_keunggulan->have_posts() ) : $query_keunggulan->the_post();
|
||||
?>
|
||||
<div class="keunggulan-card card-style">
|
||||
<div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div>
|
||||
<div class="keunggulan-content-inner">
|
||||
<h4><?php the_title(); ?></h4>
|
||||
<div style="font-size: 14px; color: #666;">
|
||||
<?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$nomor++;
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 8. CTA SECTION (SEKARANG SUDAH KEMBALI) -->
|
||||
<?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
|
||||
<?php $cta_bg = get_option('edukarsa_cta_bg'); ?>
|
||||
<section class="edukarsa-section edukarsa-cta-bg" <?php if($cta_bg) echo 'style="background-image: url('.esc_url($cta_bg).');"'; ?>>
|
||||
<div class="container text-center text-white relative-z2">
|
||||
<h2 class="section-title text-white"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light" style="margin-top: 20px;">
|
||||
<?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 9. LATEST NEWS DINAMIS -->
|
||||
<?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-latest-news">
|
||||
<div class="container">
|
||||
<div class="section-header text-center">
|
||||
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_news_title', 'News & Update') ); ?></h2>
|
||||
</div>
|
||||
<div class="news-grid">
|
||||
<?php
|
||||
$query_news = new WP_Query( array('post_type' => 'post', 'posts_per_page' => 6) );
|
||||
if ( $query_news->have_posts() ) :
|
||||
while ( $query_news->have_posts() ) : $query_news->the_post();
|
||||
?>
|
||||
<article class="news-card card-style">
|
||||
<div class="img-wrapper-landscape" style="border-radius: 12px 12px 0 0;">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium' ); ?></a>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>📰</i><span>Gambar Berita</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3>
|
||||
<div class="news-excerpt"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
|
||||
<a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const slider = document.getElementById('hero-slider-wrapper');
|
||||
if (slider && slider.children.length > 1) {
|
||||
setInterval(function() {
|
||||
if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 10) {
|
||||
slider.scrollTo({ left: 0, behavior: 'smooth' });
|
||||
} else {
|
||||
slider.scrollBy({ left: slider.clientWidth, behavior: 'smooth' });
|
||||
}
|
||||
}, 4000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
<?php get_header(); ?>
|
||||
|
||||
<main id="primary" class="site-main edukarsa-home">
|
||||
|
||||
<!-- 1. SLIDER -->
|
||||
<?php if ( get_option('edukarsa_tampil_slider', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-hero-slider" style="padding: 0;">
|
||||
<div class="slider-container" id="hero-slider-container">
|
||||
<?php
|
||||
$query_slider = new WP_Query( array( 'post_type' => 'slider', 'posts_per_page' => -1 ) );
|
||||
if ( $query_slider->have_posts() ) :
|
||||
echo '<div class="slider-wrapper" id="hero-slider-wrapper">';
|
||||
while ( $query_slider->have_posts() ) : $query_slider->the_post();
|
||||
$link = get_post_meta( get_the_ID(), '_slider_link', true );
|
||||
?>
|
||||
<div class="slide-item img-wrapper-slider">
|
||||
<?php if(!empty($link)) echo '<a href="'.esc_url($link).'">'; ?>
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<?php the_post_thumbnail( 'full' ); ?>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>🖼️</i><span>Upload Gambar Slider untuk "<?php the_title(); ?>"</span></div>
|
||||
<?php endif; ?>
|
||||
<?php if(!empty($link)) echo '</a>'; ?>
|
||||
</div>
|
||||
<?php
|
||||
endwhile;
|
||||
echo '</div>';
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 2. STATISTIK DESAIN KARTU (FLOATING OVERLAP) -->
|
||||
<?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-stats">
|
||||
<div class="container stats-grid">
|
||||
<?php for($i=1; $i<=3; $i++) : ?>
|
||||
<div class="stat-item card-style stat-card-modern">
|
||||
<div class="stat-icon-wrapper">
|
||||
<?php $icon = get_option('edukarsa_stat'.$i.'_icon'); ?>
|
||||
<?php if($icon) : ?>
|
||||
<img src="<?php echo esc_url($icon); ?>" alt="Icon">
|
||||
<?php else: ?>
|
||||
<span>🏫</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<h3 class="stat-number"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_angka', '00') ); ?></h3>
|
||||
<h4 class="stat-title"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_label', 'Judul Statistik') ); ?></h4>
|
||||
<p class="stat-desc"><?php echo nl2br(esc_html( get_option('edukarsa_stat'.$i.'_desc', 'Deskripsi singkat') )); ?></p>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 3. ABOUT US -->
|
||||
<?php if ( get_option('edukarsa_tampil_about', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-sambutan">
|
||||
<div class="container sambutan-grid">
|
||||
<div class="sambutan-image-wrapper">
|
||||
<div class="img-wrapper-portrait">
|
||||
<?php $foto = get_option('edukarsa_foto_kepsek'); ?>
|
||||
<?php if(!empty($foto)) : ?>
|
||||
<img src="<?php echo esc_url($foto); ?>" alt="Kepala Sekolah">
|
||||
<?php else : ?>
|
||||
<div class="img-placeholder"><i>👤</i><span>Upload Foto Kepala Sekolah</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sambutan-content">
|
||||
<span class="badge-title">ABOUT US</span>
|
||||
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_nama_kepsek') ); ?></h2>
|
||||
<h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:15px; font-size:18px;"><?php echo esc_html( get_option('edukarsa_subtitle_about') ); ?></h4>
|
||||
<div class="sambutan-text"><?php echo wpautop( wp_kses_post( get_option('edukarsa_teks_sambutan') ) ); ?></div>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary">Ketahui Lebih Lanjut</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 4. MILESTONES -->
|
||||
<?php if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-milestones bg-light-blue">
|
||||
<div class="container milestone-grid text-center">
|
||||
<?php
|
||||
$query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
|
||||
if ( $query_milestone->have_posts() ) :
|
||||
while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
|
||||
echo '<div class="milestone-item card-style"><h3 class="milestone-title" style="color:var(--primary-color); font-size:28px; margin-bottom:5px;">' . get_the_title() . '</h3><div class="milestone-desc">' . get_the_excerpt() . '</div></div>';
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 5. PROGRAM -->
|
||||
<?php if ( get_option('edukarsa_tampil_program', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-programs">
|
||||
<div class="container">
|
||||
<div class="section-header text-center"><h2 class="section-title">Our Program</h2><hr class="title-underline"></div>
|
||||
<div class="program-grid">
|
||||
<?php
|
||||
$query_program = new WP_Query( array( 'post_type' => 'program', 'posts_per_page' => 3 ) );
|
||||
if ( $query_program->have_posts() ) :
|
||||
while ( $query_program->have_posts() ) : $query_program->the_post();
|
||||
?>
|
||||
<div class="program-card card-style text-center top-border-blue">
|
||||
<div class="img-wrapper-landscape" style="margin-bottom: 20px;">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<?php the_post_thumbnail( 'medium' ); ?>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>🏫</i><span>Gambar Program</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<h3 style="margin-bottom:15px; color:var(--heading-color);"><?php the_title(); ?></h3>
|
||||
<div class="program-desc" style="margin-bottom:20px; font-size:14px; color:var(--text-muted);"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
|
||||
<a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
|
||||
</div>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- WRAPPER PARALLAX -->
|
||||
<?php
|
||||
$mid_bg = get_option('edukarsa_mid_bg_image');
|
||||
$mid_color = get_option('edukarsa_mid_bg_color', '#0b4a8e');
|
||||
$parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background-color: '.esc_attr($mid_color).';';
|
||||
?>
|
||||
<div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
|
||||
<div class="parallax-overlay" style="background-color: <?php echo esc_attr($mid_color); ?>; opacity: <?php echo $mid_bg ? '0.9' : '1'; ?>;"></div>
|
||||
<div class="parallax-content relative-z2">
|
||||
|
||||
<!-- 6. VIDEO -->
|
||||
<?php if ( get_option('edukarsa_tampil_video', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-videos">
|
||||
<div class="container video-grid">
|
||||
<?php for($i=1; $i<=2; $i++) : ?>
|
||||
<div class="video-item">
|
||||
<?php $vid_thumb = get_option('edukarsa_video'.$i.'_thumb'); ?>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_video'.$i.'_url', '#') ); ?>" target="_blank">
|
||||
<div class="img-wrapper-video">
|
||||
<?php if($vid_thumb) : ?>
|
||||
<img src="<?php echo esc_url($vid_thumb); ?>" alt="Video">
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder" style="background:#1e293b; color:#cbd5e1; border:none;"><i>▶️</i><span>Upload Thumbnail Video <?php echo $i; ?></span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php if($vid_thumb) echo '<div class="play-btn">▶</div>'; ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 7. KEUNGGULAN DINAMIS -->
|
||||
<?php if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 0; padding-bottom: 100px;">
|
||||
<div class="container">
|
||||
<div class="section-header text-center">
|
||||
<span class="badge-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US') ); ?></span>
|
||||
<h2 class="section-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_title', 'Keunggulan Program') ); ?></h2>
|
||||
</div>
|
||||
<div class="keunggulan-grid">
|
||||
<?php
|
||||
$query_keunggulan = new WP_Query( array( 'post_type' => 'keunggulan', 'posts_per_page' => 9 ) );
|
||||
if ( $query_keunggulan->have_posts() ) :
|
||||
$nomor = 1;
|
||||
while ( $query_keunggulan->have_posts() ) : $query_keunggulan->the_post();
|
||||
?>
|
||||
<div class="keunggulan-card card-style">
|
||||
<div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div>
|
||||
<div class="keunggulan-content-inner">
|
||||
<h4><?php the_title(); ?></h4>
|
||||
<div style="font-size: 14px; color: var(--text-muted);">
|
||||
<?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$nomor++;
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 8. CTA SECTION -->
|
||||
<?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
|
||||
<?php $cta_bg = get_option('edukarsa_cta_bg'); ?>
|
||||
<section class="edukarsa-section edukarsa-cta-bg" <?php if($cta_bg) echo 'style="background-image: url('.esc_url($cta_bg).');"'; ?>>
|
||||
<div class="container text-center text-white relative-z2">
|
||||
<h2 class="section-title text-white"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
|
||||
<a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light" style="margin-top: 20px;">
|
||||
<?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 9. LATEST NEWS -->
|
||||
<?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
|
||||
<section class="edukarsa-section edukarsa-latest-news">
|
||||
<div class="container">
|
||||
<div class="section-header text-center">
|
||||
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_news_title', 'News & Update') ); ?></h2>
|
||||
</div>
|
||||
<div class="news-grid">
|
||||
<?php
|
||||
$query_news = new WP_Query( array('post_type' => 'post', 'posts_per_page' => 6) );
|
||||
if ( $query_news->have_posts() ) :
|
||||
while ( $query_news->have_posts() ) : $query_news->the_post();
|
||||
?>
|
||||
<article class="news-card card-style">
|
||||
<div class="img-wrapper-landscape" style="border-radius: 12px 12px 0 0;">
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium' ); ?></a>
|
||||
<?php else: ?>
|
||||
<div class="img-placeholder"><i>📰</i><span>Gambar Berita</span></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3>
|
||||
<div class="news-excerpt" style="color:var(--text-muted); font-size:14px; margin-bottom:15px;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
|
||||
<a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const slider = document.getElementById('hero-slider-wrapper');
|
||||
if (slider && slider.children.length > 1) {
|
||||
setInterval(function() {
|
||||
if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 10) {
|
||||
slider.scrollTo({ left: 0, behavior: 'smooth' });
|
||||
} else {
|
||||
slider.scrollBy({ left: slider.clientWidth, behavior: 'smooth' });
|
||||
}
|
||||
}, 4000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
|
||||
@@ -4,7 +4,7 @@ Theme URI: https://edukarsa.masbudi.my.id
|
||||
Author: masbudikusuma
|
||||
Author URI: https://masbudi.my.id
|
||||
Description: Tema WordPress profesional untuk sekolah dan kampus (Gaya Modern Card Layout).
|
||||
Version: 1.1.0
|
||||
Version: 1.1.1
|
||||
*/
|
||||
|
||||
:root {
|
||||
@@ -15,8 +15,8 @@ Version: 1.1.0
|
||||
--heading-color: #0f172a;
|
||||
--bg-light-blue: #f8fafc;
|
||||
--bg-white: #ffffff;
|
||||
--radius: 12px;
|
||||
--shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
|
||||
--radius: 14px;
|
||||
--shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
|
||||
--font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||||
.text-center { text-align: center; }
|
||||
.text-white { color: #fff !important; }
|
||||
.edukarsa-section { padding: 80px 0; }
|
||||
.edukarsa-section { padding: 75px 0; }
|
||||
.section-title { font-size: 32px; color: var(--heading-color); margin-bottom: 15px; font-weight: 800; letter-spacing: -0.5px; }
|
||||
|
||||
/* 3. HEADER & MENU NAVIGATION */
|
||||
@@ -84,8 +84,8 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
/* 5. KOMPONEN UMUM */
|
||||
.bg-light-blue { background-color: var(--bg-light-blue); }
|
||||
.bg-dark-blue { background-color: var(--primary-color); }
|
||||
.card-style { background: var(--bg-white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(226, 232, 240, 0.8); transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.card-style:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(15, 23, 42, 0.09); }
|
||||
.card-style { background: var(--bg-white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(226, 232, 240, 0.9); transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.card-style:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); }
|
||||
.top-border-blue { border-top: 4px solid var(--primary-color); }
|
||||
.title-underline { width: 50px; border: 2px solid #f39c12; margin: 10px auto 30px; }
|
||||
|
||||
@@ -98,18 +98,43 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.btn-outline-primary:hover { background-color: var(--primary-color); color: #fff; }
|
||||
.badge-title { display: inline-block; color: var(--secondary-color); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
|
||||
|
||||
/* 6. GRID SYSTEM */
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 10; margin-top: -80px; margin-bottom: 40px; }
|
||||
.stat-card-modern { padding: 40px 30px; text-align: left; border-radius: 20px; border-top: 5px solid var(--secondary-color); background: #fff; }
|
||||
.stat-icon-wrapper { width: 65px; height: 65px; background-color: #e6f0fa; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; font-size: 28px; }
|
||||
.stat-icon-wrapper img { width: 32px; height: 32px; object-fit: contain; }
|
||||
.stat-card-modern .stat-number { font-size: 44px; font-weight: 800; color: var(--primary-color); margin-bottom: 5px; line-height: 1; }
|
||||
/* 6. GRID SYSTEM & PROPORSI SPASI TERKALIBRASI */
|
||||
.edukarsa-stats { padding: 0; position: relative; z-index: 20; }
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
margin-top: -95px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.stat-card-modern {
|
||||
padding: 35px 30px;
|
||||
text-align: left;
|
||||
border-radius: 20px;
|
||||
border-top: 5px solid var(--secondary-color);
|
||||
background: #fff;
|
||||
}
|
||||
.stat-icon-wrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #e6f0fa;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.stat-icon-wrapper img { width: 30px; height: 30px; object-fit: contain; }
|
||||
.stat-card-modern .stat-number { font-size: 42px; font-weight: 800; color: var(--primary-color); margin-bottom: 5px; line-height: 1; }
|
||||
.stat-card-modern .stat-title { font-size: 18px; font-weight: 800; color: var(--heading-color); margin-bottom: 8px; }
|
||||
.stat-card-modern .stat-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; }
|
||||
.pt-0 { padding-top: 20px !important; }
|
||||
|
||||
/* SEKSI SAMBUTAN DENGAN JARAK IDEAL */
|
||||
.edukarsa-sambutan { padding: 65px 0 80px; }
|
||||
.sambutan-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
|
||||
.sambutan-text { color: #475569; font-size: 16px; margin-bottom: 30px; }
|
||||
|
||||
.milestone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
|
||||
.milestone-item { padding: 25px; }
|
||||
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
|
||||
@@ -184,7 +209,8 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.header-container { flex-direction: column; gap: 15px; }
|
||||
.nav-menu-custom { flex-wrap: wrap; justify-content: center; }
|
||||
.nav-menu-custom .sub-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; background: rgba(0,0,0,0.1); }
|
||||
.keunggulan-grid, .program-grid, .milestone-grid, .stats-grid, .news-grid { grid-template-columns: 1fr; }
|
||||
.edukarsa-stats { margin-top: -40px; }
|
||||
.keunggulan-grid, .program-grid, .milestone-grid, .news-grid { grid-template-columns: 1fr; }
|
||||
.stats-grid { grid-template-columns: 1fr; margin-top: -50px; gap: 16px; }
|
||||
.edukarsa-sambutan { padding: 45px 0 60px; }
|
||||
.img-wrapper-slider { height: 380px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user