kode html

<!DOCTYPE html>

<head>

<title>Sishumad Unjani – Template</title>

<style>

/* ... kode CSS kamu ... */

</style>

</head>

<style>

:root{

--brand:#1f513f; /* hijau tua */

--brand-2:#1f513f; /* aksen */

--bg: #ffffff;

--text: #000000;

--nav-bg: #ffffff;

--nav-text: #000000;

--card-bg: #ffffffcc; /* semi transparan supaya gradient tetap kelihatan */

--card-text: #000000;

--footer-bg: #0d1f19;

--footer-text: #c0d5cd;

}

body{

font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";

background: var(--bg);

color: var(--text);

transition: all 0.6s ease;

min-height: 100vh;

}

.topbar{background:#0e2b21;color:#cfe9df;font-size:.875rem}

.topbar a{color:#cfe9df;text-decoration:none}

.navbar{

box-shadow:0 4px 20px rgba(0,0,0,.06);

background: var(--nav-bg) !important;

transition: all 0.6s ease;

}

.navbar .nav-link,

.navbar .navbar-brand {

font-weight:600;

color: var(--nav-text) !important;

}

.btn-brand{background:var(--brand);color:#fff;border:none}

.btn-brand:hover{background:#174034;color:#fff}

.text-brand{color:var(--brand)}

.bg-brand{background:var(--brand);}

/* SLIDER HERO */

.carousel-caption {

bottom: 20%;

max-width: 600px;

}

.carousel-item img {

object-fit: cover;

height: 80vh;

}

.carousel::after {

content:"";

position:absolute;

inset:0;

background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.5));

}

/* QUICK */

.shortcut-card{transition:.2s transform,.2s box-shadow;border:1px solid #e9ecef}

.shortcut-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}

/* PENGUMUMAN */

.ticker{white-space:nowrap;overflow:hidden;background:#f8f9fa;border-radius:10px;border:1px solid #e9ecef}

.ticker span{display:inline-block;padding:10px 24px;animation:marquee 18s linear infinite}

@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* BERITA */

.news-card img{aspect-ratio:16/9;object-fit:cover}

/* FAKULTAS */

.faculty-card,

.card {

border:none;

border-radius:16px;

background: var(--card-bg);

color: var(--card-text);

transition: all 0.6s ease;

backdrop-filter: blur(6px);

}

.faculty-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08)}

/* STAT */

.stat{

background:linear-gradient(120deg,var(--brand),#2f7a61);

color:#fff;border-radius:20px

}

/* FOOTER */

footer{

background:var(--footer-bg);

color:var(--footer-text);

transition: all 0.6s ease;

}

footer a{color:#cfe9df;text-decoration:none}

.btn-cta{background:var(--brand-2);border:none;font-weight:700}

.btn-cta:hover{filter:brightness(.95)}

.shadow-soft{box-shadow:0 12px 30px rgba(0,0,0,.08)}

.rounded-2xl{border-radius:1.25rem}

/* Back to top */

#backToTop{position:fixed;right:20px;bottom:20px;display:none;z-index:999}

</style>

</head>

<body>

<a href="mailto:info@kampus.ac.id"><i class="bi bi-envelope ms-3 me-1"></i> info@kampus.ac.id</a>

</div>

<a href="#">Mahasiswa</a>

<a href="#">Dosen</a>

<a href="#">Alumni</a>

<a href="#">Pendaftar</a>

</div>

<div class="fw-bold lh-1">Sishumad<br><span class="text-brand">Unjani</span></div>

</a>

</button>

<a class="navbar-brand fw-bold" href="#">Sishumad</a>

</button>

<a class="nav-link" href="#layanan">Layanan</a>

</li>

<a class="nav-link" href="#berita">Berita Terbaru</a>

</li>

<a class="nav-link" href="#aplikasi">Status Aplikasi</a>

</li>

<a class="nav-link" href="#statistik">Statistik</a>

</li>

<a class="nav-link" href="#gallery">Galeri Kegiatan</a>

</li>

<a class="nav-link" href="#mitra">Mitra</a>

</li>

</ul>

</div>

</nav>

</ul>

<a class="btn btn-brand" href="#pendaftaran"><i class="bi bi-box-arrow-in-right me-1"></i> Pendaftaran</a>

</li>

<li><a class="dropdown-item theme-switch" data-bg="linear-gradient(135deg, #ffffff, #000000, #1C352D)" href="javascript:void(0)">Hitam</a></li>

<li><a class="dropdown-item theme-switch" data-bg="linear-gradient(135deg, #1C352D, #006633, #ffffff)" href="javascript:void(0)">Hijau</a></li>

<li><a class="dropdown-item theme-switch" data-bg="linear-gradient(135deg, #1C352D, #FFD700, #ffffff)" href="javascript:void(0)">Kuning</a></li>

</ul>

</li>

</ul>

</div>

</nav>

<span class="badge bg-warning text-dark mb-3 fw-semibold">Penerimaan Mahasiswa Baru 2025</span>

<h1 class="display-5 fw-bold">Unggul, Berkarakter, dan Berwawasan Kebangsaan</h1>

<p class="lead">Bergabunglah bersama kami untuk mencetak lulusan yang adaptif, inovatif, dan siap memimpin perubahan.</p>

<a href="#" class="btn btn-light"><i class="bi bi-play-circle me-1"></i> Lihat Profil</a>

<a href="#" class="btn btn-cta"><i class="bi bi-clipboard-check me-1"></i> Daftar Sekarang</a>

</div>

<h1 class="display-5 fw-bold">Kampus Hijau & Inklusif</h1>

<p class="lead">Lingkungan belajar nyaman dengan fasilitas modern, laboratorium lengkap, dan digital campus.</p>

<a href="#" class="btn btn-brand"><i class="bi bi-journal-bookmark me-1"></i> Lihat Fakultas</a>

</div>

<h1 class="display-5 fw-bold">Prestasi & Riset</h1>

<p class="lead">Kami mendorong riset inovatif serta kolaborasi dengan industri dan komunitas global.</p>

<a href="#" class="btn btn-outline-light"><i class="bi bi-newspaper me-1"></i> Lihat Berita</a>

</div>

<span class="visually-hidden">Sebelumnya</span>

</button>

<span class="visually-hidden">Berikutnya</span>

</button>

</div>

</section>

<span><strong>[Pengumuman]</strong> Pendaftaran PMB Gelombang 2 dibuka s.d. 30 September • <strong>[Beasiswa]</strong> KIP-Kuota tambahan untuk prodi sains terapan • <strong>[Maintenance]</strong> SIAKAD akan offline pada 10 Sep 22.00–23.30 WIB</span>

</div>

</section>

<div class="d-flex align-items-center mb-2"><i class="bi bi-globe2 fs-4 text-brand me-2"></i><h6 class="mb-0">Sistem Informasi</h6></div>

<p class="text-secondary mb-3 small">Portal akademik, SIAKAD, e-learning, dan perpustakaan digital.</p>

<a href="" class="stretched-link">Akses cepat <i class="bi bi-arrow-right"></i></a>

</div>

<div class="d-flex align-items-center mb-2"><i class="bi bi-megaphone fs-4 text-brand me-2"></i><h6 class="mb-0">Humas</h6></div>

<p class="text-secondary mb-3 small">Siaran pers, kerja sama, dan layanan media kampus.</p>

<a href="" class="stretched-link">Hubungi humas <i class="bi bi-arrow-right"></i></a>

</div>

<div class="d-flex align-items-center mb-2"><i class="bi bi-person-vcard fs-4 text-brand me-2"></i><h6 class="mb-0">Admisi</h6></div>

<p class="text-secondary mb-3 small">Informasi jalur seleksi, biaya kuliah, dan beasiswa.</p>

<a href="" class="stretched-link">Lihat admisi <i class="bi bi-arrow-right"></i></a>

</div>

<div class="d-flex align-items-center mb-2"><i class="bi bi-calendar2-event fs-4 text-brand me-2"></i><h6 class="mb-0">Agenda</h6></div>

<p class="text-secondary mb-3 small">Seminar, wisuda, open house, dan event terbaru.</p>

<a href="" class="stretched-link">Lihat agenda <i class="bi bi-arrow-right"></i></a>

</div>

</section>

<div>

<h2 class="mb-1">Berita Terbaru</h2>

<p class="text-secondary">Informasi, prestasi, dan kegiatan sivitas akademika.</p>

</div>

<a href="#" class="btn btn-outline-secondary">Semua Berita</a>

</div>

<span class="badge bg-brand mb-2">Prestasi</span>

<h5 class="card-title">Tim Robotika Juara 1 Kompetisi Nasional</h5>

<p class="card-text text-secondary">Mengalahkan 24 perguruan tinggi lain, tim berhasil memecahkan rekor lintasan tercepat.</p>

<a href="" class="stretched-link">Baca selengkapnya</a>

</div>

<span class="badge bg-warning text-dark mb-2">Riset</span>

<h5 class="card-title">Kolaborasi Riset Energi Terbarukan</h5>

<p class="card-text text-secondary">Kerja sama dengan industri untuk pengembangan baterai ramah lingkungan.</p>

<a href="" class="stretched-link">Baca selengkapnya</a>

</div>

<span class="badge bg-info text-dark mb-2">Pengumuman</span>

<h5 class="card-title">Wisuda Periode Oktober 2025</h5>

<p class="card-text text-secondary">Informasi jadwal, toga, dan registrasi peserta wisuda.</p>

<a href="" class="stretched-link">Baca selengkapnya</a>

</div>

</section>

<style>

body, html {

margin: 0;

padding: 0;

font-family: sans-serif;

}

.parallax {

background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1200&auto=format&fit=crop');

height: 30vh;

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.content {

height: 0vh;

background-color: #1C352D;

display: flex;

align-items: center;

justify-content: center;

font-size: 2rem;

color: #333;

}

</style>

</head>

<body>

<p>Selamat datang di website parallax kamu!</p>

</div>

<h2 class="mb-1">Status Aplikasi</h2>

<p class="text-secondary">Pantauan perkembangan aplikasi internal.</p>

</div>

<h6 class="mb-0">Aplikasi Selesai</h6>

</div>

<li>Sistem Absensi Online</li>

<li>Portal Akademik</li>

<li>Keuangan & Pembayaran</li>

</ul>

<a href="" class="stretched-link text-success fw-semibold">Lihat detail</a>

</div>

<h6 class="mb-0">Aplikasi Tahap Perencanaan</h6>

</div>

<li>Sistem E-Library</li>

<li>Dashboard Monitoring</li>

</ul>

<a href="" class="stretched-link text-warning fw-semibold">Lihat detail</a>

</div>

<h6 class="mb-0">Aplikasi Belum Selesai</h6>

</div>

<li>Sistem Inventaris Barang</li>

<li>Manajemen Beasiswa</li>

</ul>

<a href="" class="stretched-link text-danger fw-semibold">Lihat detail</a>

</div>

</section>

<div>Mahasiswa</div>

</div>

<div>Dosen & Staff</div>

</div>

<div>Program Studi</div>

</div>

<div>Alumni</div>

</div>

<h5 class="mb-3">Unduh Brosur</h5>

<p class="text-secondary">Dapatkan brosur profil universitas & fakultas terkini.</p>

<a class="btn btn-brand" href="https://www.unjani.ac.id/"><i class="bi bi-file-earmark-arrow-down me-1"></i> Download PDF</a>

</div>

</section>

<!DOCTYPE html>

<head>

<title>Galeri Kegiatan Prakerin</title>

<style>

body {

margin: 0;

font-family: 'Segoe UI', sans-serif;

background-color: #f4f4f4;

}

header {

background: url('https://images.unsplash.com/photo-1551836022-d5d88e9218df?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat;

color: white;

padding: 60px 20px;

text-align: center;

position: relative;

}

header::after {

content: "";

position: absolute;

top: 0; left: 0;

width: 100%; height: 100%;

background-color: rgba(0,0,0,0.5);

z-index: 0;

}

header h1, header p {

position: relative;

z-index: 1;

}

header h1 {

margin: 0;

font-size: 2.8rem;

font-weight: bold;

}

header p {

margin-top: 10px;

font-size: 1.2rem;

opacity: 0.9;

}

.gallery {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 15px;

padding: 20px;

}

.gallery img {

width: 100%;

border-radius: 8px;

cursor: pointer;

transition: transform 0.3s ease;

}

.gallery img:hover {

transform: scale(1.05);

}

.popup {

display: none;

position: fixed;

z-index: 999;

top: 0; left: 0;

width: 100%; height: 100%;

background-color: rgba(0,0,0,0.8);

justify-content: center;

align-items: center;

}

.popup img {

max-width: 90%;

max-height: 80vh;

border-radius: 10px;

box-shadow: 0 0 20px rgba(255,255,255,0.3);

transition: transform 0.5s ease;

}

.popup.active {

display: flex;

}

.close {

position: absolute;

top: 30px;

right: 40px;

font-size: 30px;

color: white;

text-decoration: none;

font-weight: bold;

cursor: pointer;

z-index: 1000;

}

.lihat-selengkapnya-container {

text-align: center;

margin: 30px 0;

}

.lihat-selengkapnya-container button {

background-color: #0078D7;

color: white;

border: none;

padding: 12px 24px;

font-size: 1rem;

border-radius: 6px;

cursor: pointer;

transition: background-color 0.3s ease;

}

.lihat-selengkapnya-container button:hover {

background-color: #005fa3;

}

</style>

</head>

<body>

<h1>Galeri Kegiatan Prakerin</h1>

<p>Dokumentasi kegiatan terbaru siswa/i selama masa praktik kerja</p>

</header>

</section>

<button onclick="lihatSelengkapnya()">Lihat Selengkapnya</button>

</div>

</div>

function openPopup(src) {

const popup = document.getElementById('popup');

const popupImg = document.getElementById('popupImg');

popupImg.src = src;

popup.classList.add('active');

popupImg.style.transform = 'scale(1.1)';

popup.addEventListener('mousemove', () => {

popupImg.style.transform = 'scale(1)';

}, { once: true });

}

function closePopup() {

document.getElementById('popup').classList.remove('active');

document.getElementById('popupImg').style.transform = 'scale(1)';

}

function lihatSelengkapnya() {

alert("Fitur 'Lihat Selengkapnya' bisa diarahkan ke halaman lain atau menampilkan konten tambahan.");

// Contoh redirect:

// window.location.href = "halaman-lain.html";

}

</script>

</body>

</html>

</div>

<h2 class="mb-2">Tentang SISHUMAD Unjani</h2>

Sistem Informasi Humas dan Admisi (SISHUMAD) Universitas Jenderal Achmad Yani

dirancang untuk mendukung layanan informasi, publikasi, serta pengelolaan penerimaan mahasiswa baru

secara terintegrasi dan transparan.

</p>

<li>Mendukung proses <strong>Admisi & Pendaftaran Online</strong></li>

<li>Publikasi berita, pengumuman, dan agenda kampus</li>

<li>Integrasi dengan sistem akademik dan layanan digital kampus</li>

</ul>

<a href="" class="btn btn-outline-secondary">Pelajari lebih lanjut</a>

</div>

</section>

<div>

<h2 class="fw-bold mb-1">Kegiatan Terbaru</h2>

<p class="text-muted">Ikuti berbagai aktivitas menarik di lingkungan kampus.</p>

</div>

<a href="#" class="btn btn-primary">Lihat Semua</a>

</div>

<div>

<h5 class="mb-1">Workshop UI/UX Design</h5>

<p class="mb-0 text-muted">Lab Multimedia • 10 Sep 2025</p>

</div>

<a href="#" class="btn btn-outline-primary mt-2 mt-md-0"><i class="bi bi-info-circle me-1"></i> Detail</a>

</div>

<div>

<h5 class="mb-1">Pelatihan Kewirausahaan Digital</h5>

<p class="mb-0 text-muted">Ruang Seminar • 18 Sep 2025</p>

</div>

<a href="#" class="btn btn-outline-primary mt-2 mt-md-0"><i class="bi bi-info-circle me-1"></i> Detail</a>

</div>

<div>

<h5 class="mb-1">Expo Inovasi Mahasiswa</h5>

<p class="mb-0 text-muted">Gedung Serbaguna • 25 Sep 2025</p>

</div>

<a href="#" class="btn btn-outline-primary mt-2 mt-md-0"><i class="bi bi-info-circle me-1"></i> Detail</a>

</div>

</section>

<h2 class="mb-4 fw-bold">Mitra & Kolaborator</h2>

<p class="mb-5 text-secondary">Kerja sama dengan institusi pemerintah, industri, dan universitas untuk mendukung pendidikan, riset, dan pengabdian masyarakat.</p>

</div>

</div>

<span class="visually-hidden">Sebelumnya</span>

</button>

<span class="visually-hidden">Selanjutnya</span>

</button>

</div>

</section>

<h5 class="mb-0">Sishumad Unjani</h5>

</div>

<p class="small">Jl. Contoh No. 123, Kota Bandung, Jawa Barat 40123<br>Telepon: +62 22 1234 567 • Email: info@kampus.ac.id</p>

</div>

<h6 class="text-uppercase">Tautan</h6>

<li><a href="#">Profil</a></li>

<li><a href="#">Admisi</a></li>

<li><a href="#">Beasiswa</a></li>

<li><a href="#">Kerja Sama</a></li>

</ul>

</div>

<h6 class="text-uppercase">Lokasi</h6>

</div>

<div><a href="https://www.unjani.ac.id/">Kebijakan Privasi</a> • <a href="#">Syarat & Ketentuan</a></div>

</div>

</footer>

// Counter animation

const counters = document.querySelectorAll('[data-counter]');

const opt = {threshold: .4};

const runCounter = (el) => {

const target = +el.dataset.counter;

const step = Math.max(1, Math.round(target / 120));

let val = 0;

const tick = () => {

val += step;

if (val >= target) {

el.textContent = target.toLocaleString('id-ID');

} else {

el.textContent = val.toLocaleString('id-ID');

requestAnimationFrame(tick);

}

};

tick();

};

const io = new IntersectionObserver(entries => {

entries.forEach(e => {

if (e.isIntersecting) {

runCounter(e.target);

io.unobserve(e.target);

}

});

}, opt);

counters.forEach(c => io.observe(c));

// Back to top

const back = document.getElementById('backToTop');

window.addEventListener('scroll', () => {

back.style.display = window.scrollY > 100 ? 'block' : 'none';

});

back.addEventListener('click', () => window.scrollTo({top: 0, behavior: 'smooth'}));

// Theme switch

document.querySelectorAll('.theme-switch').forEach(btn => {

btn.addEventListener('click', function (e) {

e.preventDefault();

let bg = this.getAttribute('data-bg');

document.documentElement.style.setProperty('--bg', bg);

document.documentElement.style.setProperty('--nav-bg', bg);

document.documentElement.style.setProperty('--footer-bg', bg);

document.documentElement.style.setProperty('--card-bg', '#ffffffcc');

document.documentElement.style.setProperty('--text', '#000000');

document.documentElement.style.setProperty('--nav-text', '#000000');

document.documentElement.style.setProperty('--card-text', '#000000');

document.documentElement.style.setProperty('--footer-text', '#000000');

});

</script>

$(document).ready(function () {

$("#heroCarousel").swipe({

swipe: function (event, direction) {

if (direction === 'left') {

$(this).carousel('next');

} else if (direction === 'right') {

$(this).carousel('prev');

}

threshold: 75

});

</script>

</body>

</html>

kode html

Posting Komentar

Formulir Kontak