Buatkan sebuah landing page menggunakan HTML, CSS, dan Bootstrap 5. Desainnya mencakup elemen-elemen berikut:
🧱 Struktur Halaman:
Navbar (fixed top)
Logo DT PLUSK di kiri
Menu: Beranda, Fitur, Lowongan, Peluang Usaha
Tombol "Masuk" dan "Daftar" di kanan
Hero Section (Jumbotron Style)
Judul besar: "Pusat Layanan Usaha dan Kerja Terintegrasi"
Subjudul: "Temukan pekerjaan impian dan peluang usaha menjanjikan bersama DT PLUSK."
Dua tombol besar: Cari Lowongan dan Jelajahi Peluang Usaha
Video preview di sisi kanan (gunakan thumbnail dan tombol play overlay)
Tentang DT PLUSK (Video Preview)
Judul section
Gambar pratinjau video dengan tombol play overlay
Keterangan: "Pelajari lebih lanjut tentang platform kami melalui video berikut."
Statistik Section
Dua angka besar:
"1000+ Lowongan Kerja"
"500+ Peluang Usaha"
Fitur Utama DT PLUSK (2 Kartu Horizontal)
Kartu 1: Pencari Kerja
Fiturnya: Profil & CV Digital, Filter Lowongan, Notifikasi
Kartu 2: Peluang Usaha
Fiturnya: Katalog Peluang, Detail Modal, Bimbingan Awal
Lowongan Pekerjaan Terbaru
Filter kategori: Semua Kategori, Teknologi, Administrasi, dll
3 Kartu Lowongan: Web Developer, Digital Marketing, Staff Administrasi
Info: Lokasi, Gaji, Tipe kerja, Tombol "Lamar Sekarang"
Peluang Usaha Menjanjikan
Filter kategori: Franchise, Reseller, Dropship, Kemitraan
3 Kartu Usaha: Kedai Kopi Premium, Fashion Muslimah, Agen Logistik
Info: Modal Awal, ROI, Lokasi, Tombol "Lihat Detail"
Footer
Deskripsi singkat DT PLUSK
Navigasi: Beranda, Fitur, Lowongan, Peluang Usaha
Layanan: Pencarian Kerja, Konsultasi Usaha, Pelatihan, Pendampingan
Ikon media sosial
🎨 Styling:
Gunakan warna biru untuk elemen utama (background hero, tombol utama, ikon)
Gunakan Bootstrap Grid System
Tombol berbentuk rounded dan card dengan shadow halus
Pastikan desain responsif (mobile-friendly)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DT PLUSK - Pusat Layanan Usaha dan Kerja</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.hero { padding: 4rem 0; background: #f8f9fa; }
.section-title { font-weight: 700; margin-bottom: 1rem; }
.section-subtitle { color: #6c757d; margin-bottom: 2rem; }
.btn-primary, .btn-outline { margin-right: 0.5rem; }
.fitur-card, .lowongan-card, .peluang-card {
padding: 1.5rem;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
background: #fff;
margin-bottom: 1rem;
}
footer {
background: #343a40;
color: #fff;
padding: 2rem 0;
}
footer a { color: #adb5bd; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.footer .container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
}
.footer .container > div {
flex: 1 1 200px;
}
@media (max-width: 768px) {
.footer .container {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png" alt="DT PLUSK Logo" height="40"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#">Beranda</a></li>
<li class="nav-item"><a class="nav-link" href="#fitur">Fitur</a></li>
<li class="nav-item"><a class="nav-link" href="#lowongan">Lowongan</a></li>
<li class="nav-item"><a class="nav-link" href="#peluang">Peluang Usaha</a></li>
</ul>
<div class="d-flex">
<a href="#" class="btn btn-outline-primary me-2">Masuk</a>
<a href="#" class="btn btn-primary">Daftar</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero text-center">
<div class="container">
<h1 class="mb-3">Pusat Layanan Usaha dan Kerja Terintegrasi</h1>
<p class="mb-4">Temukan pekerjaan impian dan peluang usaha menjanjikan bersama DT PLUSK.</p>
<a href="#lowongan" class="btn btn-primary me-2">Cari Lowongan</a>
<a href="#peluang" class="btn btn-outline-secondary">Jelajahi Peluang Usaha</a>
<div class="mt-4">
<img src="video-thumbnail.png" class="img-fluid" alt="Video Thumbnail">
</div>
</div>
</section>
<!-- Tentang -->
<section class="py-5" id="tentang">
<div class="container text-center">
<h2 class="section-title">Tentang DT PLUSK</h2>
<p class="section-subtitle">Pelajari lebih lanjut tentang platform kami melalui video berikut.</p>
<img src="tentang-thumbnail.png" class="img-fluid" alt="Tentang DT PLUSK">
</div>
</section>
<!-- Fitur -->
<section class="py-5 bg-light" id="fitur">
<div class="container">
<h2 class="section-title text-center">Fitur Utama DT PLUSK</h2>
<p class="section-subtitle text-center">Platform terintegrasi untuk membantu Anda menemukan pekerjaan dan memulai usaha.</p>
<div class="row">
<div class="col-md-6">
<div class="fitur-card">
<h3>Pencari Kerja</h3>
<ul>
<li>Profil & CV Digital</li>
<li>Filter Lowongan</li>
<li>Notifikasi Pekerjaan</li>
</ul>
<a href="#lowongan">Lihat Lowongan →</a>
</div>
</div>
<div class="col-md-6">
<div class="fitur-card">
<h3>Peluang Usaha</h3>
<ul>
<li>Katalog Peluang</li>
<li>Detail Modal</li>
<li>Bimbingan Awal</li>
</ul>
<a href="#peluang">Lihat Peluang →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Lowongan -->
<section class="py-5" id="lowongan">
<div class="container">
<h2 class="section-title text-center">Lowongan Pekerjaan Terbaru</h2>
<p class="section-subtitle text-center">Temukan pekerjaan yang sesuai dengan minat dan keahlian Anda dari berbagai industri.</p>
<div class="row">
<div class="col-md-4">
<div class="lowongan-card">
<h3>Web Developer</h3>
<p>PT Teknologi Maju</p>
<ul>
<li>Jakarta, Indonesia</li>
<li>Rp 8.000.000 - 12.000.000</li>
</ul>
<a href="#" class="btn btn-secondary">Lamar Sekarang</a>
</div>
</div>
<div class="col-md-4">
<div class="lowongan-card">
<h3>Digital Marketing</h3>
<p>CV Media Kreatif</p>
<ul>
<li>Bandung, Indonesia</li>
<li>Rp 4.000.000 - 6.000.000</li>
</ul>
<a href="#" class="btn btn-secondary">Lamar Sekarang</a>
</div>
</div>
<div class="col-md-4">
<div class="lowongan-card">
<h3>Staff Administrasi</h3>
<p>PT Maju Bersama</p>
<ul>
<li>Surabaya, Indonesia</li>
<li>Rp 5.000.000 - 7.000.000</li>
</ul>
<a href="#" class="btn btn-secondary">Lamar Sekarang</a>
</div>
</div>
</div>
</div>
</section>
<!-- Peluang Usaha -->
<section class="py-5 bg-light" id="peluang">
<div class="container">
<h2 class="section-title text-center">Peluang Usaha Menjanjikan</h2>
<p class="section-subtitle text-center">Temukan berbagai peluang usaha dengan modal dan proyeksi keuntungan yang jelas.</p>
<div class="row">
<div class="col-md-4">
<div class="peluang-card">
<h3>Kedai Kopi Premium</h3>
<p>Modal Awal: Rp 50.000.000 - 75.000.000</p>
<p>ROI: 12 - 18 bulan</p>
<a href="#">Lihat Detail</a>
</div>
</div>
<div class="col-md-4">
<div class="peluang-card">
<h3>Fashion Muslimah</h3>
<p>Modal Awal: Rp 5.000.000 - 10.000.000</p>
<p>ROI: 3 - 6 bulan</p>
<a href="#">Lihat Detail</a>
</div>
</div>
<div class="col-md-4">
<div class="peluang-card">
<h3>Agen Logistik</h3>
<p>Modal Awal: Rp 15.000.000 - 25.000.000</p>
<p>ROI: 6 - 12 bulan</p>
<a href="#">Lihat Detail</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div>
<img src="logo.png" alt="Logo" height="40">
<p>Platform terintegrasi untuk membantu Anda menemukan pekerjaan dan memulai usaha.</p>
</div>
<div>
<h5>Navigasi</h5>
<ul class="list-unstyled">
<li><a href="#">Beranda</a></li>
<li><a href="#fitur">Fitur</a></li>
<li><a href="#lowongan">Lowongan</a></li>
<li><a href="#peluang">Peluang Usaha</a></li>
</ul>
</div>
<div>
<h5>Layanan</h5>
<ul class="list-unstyled">
<li><a href="#">Pencarian Kerja</a></li>
<li><a href="#">Konsultasi Usaha</a></li>
<li><a href="#">Pelatihan</a></li>
<li><a href="#">Pendampingan</a></li>
</ul>
</div>
<div>
<h5>Kontak</h5>
<ul class="list-unstyled">
<li>Email: info@dtplusk.id</li>
<li>Telepon: 0800-123-456</li>
</ul>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
No comments:
Post a Comment