Landing page adalah halaman khusus yang digunakan untuk memperkenalkan produk baik berupa jasa maupun barang dari perusahaan, pemerintah, organisasi nirlaba, maupun perorangan. Dengan tampilan yang sederhana namun menarik, landing page berusaha memikat pengunjung untuk mengetahui lebih jauh informasi yang disampaikan.
Sebagaimana judul artikel ini, kita akan gunakan web programming sederhana dengan framework Bootstrap, sebuah framework front-end (css html plus javascript) paket lengkap yang digunakan untuk styling dan membangun website agar rapi, konsisten, dan responsif di berbagai ukuran layar (desktop, tablet, hingga smartphone). Yang jelas, semua komponen sudah disediakan oleh framework bootstrap ini, kita tinggal pakai dan atur sedikit.
Pada artikel ini, saya akan membuat sebuah landing page yang menawarkan jasa analisis data. Halaman ini dirancang untuk menampilkan informasi layanan yang ditawarkan, alasan memilih jasa tersebut, testimoni klien, serta informasi kontak yang mengarahkan calon klien ke formulir pemesanan.
Pembahasan akan disampaikan secara bertahap agar mudah diikuti.
Adapun struktur folder yang digunakan adalah sebagai berikut:
project-root/
├── index.html
├── logoolahdata.png
└── style.cssSelanjutnya, buka editor kode favorit Anda. Pada contoh ini, saya menggunakan Visual Studio Code (VS Code), namun Anda juga dapat menggunakan editor lain, termasuk Notepad.
Sesuai dengan struktur yang telah dirancang, buat sebuah file bernama index.html, kemudian tuliskan kode berikut di dalamnya.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>DataServices | Layanan Data Profesional</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logoolahdata.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
DataScience Inc.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#why">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#contact">Hubungi Kami</a>
</li>
<span style=" margin-left: 20px;" class="navbar-text me-3">
<i class="fa fa-phone-square" aria-hidden="true"></i> 0812-3456-7890
</span>
<!-- Icon Media Sosial -->
<span class="nav-link text-white"> Media Kami :</span>
<div class="d-flex">
<a href="https://www.facebook.com" target="_blank" class="nav-link">
<i class="bi bi-facebook"></i>
</a>
<a href="https://www.instagram.com" target="_blank" class="nav-link">
<i class="bi bi-instagram"></i>
</a>
<a href="https://www.youtube.com" target="_blank" class="nav-link">
<i class="bi bi-youtube"></i>
</a>
</div>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="container hero-flex">
<div class="hero-text">
<h1>Solusi Data untuk Keputusan Bisnis yang Tepat</h1>
<p>Kami membantu analisis, visualisasi, dan pengelolaan data untuk bisnis dan instansi Anda.</p>
<a href="#contact" class="btn-primary">Mulai Sekarang</a>
</div>
<div class="d-flex justify-content-center">
<img style="max-width: 60%;" src="logoolahdata.png" class="img-fluid" alt="gambar">
</div>
</div>
</section>
<!-- SERVICES -->
<section id="services" class="services">
<div class="container">
<h2>Layanan Kami</h2>
<div class="service-grid">
<div class="card">
<i class="fa fa-database" aria-hidden="true"></i>
<h3>Data Collection</h3>
<p>Membangun form survei dan mengumpulkan data.</p>
</div>
<div class="card">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
<h3>Data Analysis & Visualization</h3>
<p>Analisis, Dashboard, dan Grafik Informatif untuk pengambilan keputusan.</p>
</div>
<div class="card">
<i class="fa fa-book" aria-hidden="true"></i>
<h3>Report and Recomendation </h3>
<p>Menyajikan laporan yang berisi insight dan rekomendasi strategis yang mudah dipahami.</p>
</div>
<div class="card">
<h3>Modeling and Data Prediction</h3>
<p>LMenggunakan teknik statistik atau analitik untuk memprediksi tren, permintaan pasar, atau
perilaku konsumen.</p>
</div>
</div>
</div>
</section>
<!-- WHY US -->
<section id="why" class="why-us">
<div class="container">
<h2>Mengapa Memilih Kami?</h2>
<div class="why-grid">
<div class="why-item">
<h4>Tim Berpengalaman</h4>
<p>Berpengalaman di bidang statistik dan data.</p>
</div>
<div class="why-item">
<h4>Teknologi Terkini</h4>
<p>Menggunakan tools dan metode terbaru.</p>
</div>
<div class="why-item">
<h4>Hasil Terbukti</h4>
<p>Insight yang aplikatif dan mudah dipahami.</p>
</div>
</div>
</div>
</section>
<!-- TESTIMONIAL -->
<section class="testimonial">
<div class="container">
<h2>Apa Kata Klien</h2>
<blockquote>
“Analisis datanya sangat membantu pengambilan keputusan kami.”
<span>— Klien Korporasi</span>
</blockquote>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="contact">
<div class="container">
<h2>Hubungi Kami</h2>
<form>
<input type="text" placeholder="Nama">
<input type="email" placeholder="Email">
<textarea placeholder="Pesan"></textarea>
<button type="submit" class="btn-primary">Kirim Pesan</button>
</form>
</div>
</section>
<!-- FOOTER -->
<footer>
<p>© 2025 DataServices. All rights reserved.</p>
</footer>
</body>
</html>Selanjutnya, kita akan mengatur styling. Buat file style.css, kemudian masukkan kode berikut:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
color: #333;
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1100px;
margin: auto;
}
/* NAVBAR */
.navbar {
background: #0d47a1;
padding: 15px 0;
}
.nav-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: #fff;
font-weight: bold;
font-size: 20px;
}
nav a {
color: #fff;
margin-left: 20px;
text-decoration: none;
}
nav .btn {
background: #fff;
color: #0d47a1;
padding: 8px 14px;
border-radius: 4px;
}
/* HERO */
.hero {
background: linear-gradient(
to right,
#0d47a1,
#1565c0,
#1e88e5,
#42a5f5
);
color: #fff;
padding: 80px 0;
}
.hero-flex {
display: flex;
align-items: center;
gap: 40px;
/* height: 190px; */
}
.hero-text h1 {
font-size: 36px;
margin-bottom: 15px;
}
.hero-image img {
max-width: 60%;
margin-left: auto;
display: flex;
}
.btn-primary {
display: inline-block;
margin-top: 20px;
background: #ff9800;
color: #fff;
padding: 12px 20px;
border-radius: 5px;
text-decoration: none;
}
/* SERVICES */
.services {
padding: 60px 0;
text-align: center;
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 30px;
}
.card {
/* border: #0d47a1; */
background: linear-gradient(
135deg,
#ffffff,
#e3f2fd
);
padding: 25px;
border-radius: 20px;
}
/* WHY US */
.why-us {
background: #eef3f8;
padding: 60px 0;
text-align: center;
}
.why-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-top: 30px;
}
.why-item {
background: #fff;
padding: 20px;
width: 280px;
border-radius: 8px;
}
/* TESTIMONIAL */
.testimonial {
padding: 60px 0;
text-align: center;
font-style: italic;
}
.testimonial span {
display: block;
margin-top: 10px;
font-weight: bold;
}
/* CONTACT */
.contact {
background: #0d47a1;
color: #fff;
padding: 60px 0;
text-align: center;
}
.contact form {
max-width: 500px;
margin: auto;
}
.contact input,
.contact textarea {
width: 100%;
padding: 12px;
margin: 10px 0;
border: none;
border-radius: 4px;
}
.contact button {
border: none;
cursor: pointer;
}
/* FOOTER */
footer {
background: #08306b;
color: #fff;
text-align: center;
padding: 15px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.hero-flex {
flex-direction: column;
text-align: center;
}
}Oke, jangan lupa juga menyiapkan logo perusahaan. Logo sudah saya sediakan, silakan unduh melalui tautan berikut: Logo DataServices. Setelah diunduh, beri nama file tersebut logoolahdata.png.
Jika semua file sudah lengkap, silakan buka index.html menggunakan web browser. Tampilan yang muncul nantinya akan terlihat seperti berikut.
Sekian pembahasan singkat kali ini, semoga bermanfaat.
