Template Landing Page Gratis dengan Desain Menarik
Landing page berperan penting dalam menarik perhatian pengunjung dan meningkatkan konversi. Artikel ini akan membahas template landing page gratis yang memiliki desain menarik, modern, dan responsif. Selain itu, Anda akan mendapatkan kode HTML dan CSS untuk membuat halaman ini dengan mudah. Mari kita mulai!
Keunggulan Template Landing Page Ini
Template landing page ini menawarkan berbagai manfaat. Desainnya yang responsif memastikan halaman tampil sempurna di semua perangkat, baik desktop maupun ponsel. Kode yang digunakan mudah dimengerti, sehingga siapa pun dapat mengeditnya sesuai kebutuhan. Template ini juga dirancang untuk memaksimalkan kecepatan loading dan meningkatkan peringkat SEO website Anda.
Anda dapat menggunakan template ini untuk berbagai keperluan, seperti membuat portofolio, mempromosikan bisnis, atau bahkan proyek personal.
Struktur HTML untuk Template Landing Page
Berikut adalah struktur HTML dari Desain landing page ini. Setiap bagian telah dirancang dengan sederhana agar mudah dimodifikasi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Landing Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="navbar">
<img src="img/logo.png" alt="Logo" class="logo">
<div class="nav-links">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Service</a>
<a href="#">Portfolio</a>
<a href="#">Testimonials</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
<div class="menu-toggle" id="menu-toggle">
<i class="fas fa-bars"></i> <!-- Hamburger icon -->
</div>
</div>
<div class="hero">
<div class="hero-content">
<h1>Discover Creativity with <span class="highlight">ARTIKEL</span></h1>
<p><span>FARHAN</span> Showcasing Unique Designs and Transformative Ideas.</p>
<p>Explore a collection of innovative projects,<br>each crafted with precision and creativity to deliver outstanding results.</p>
<a href="#" class="btn">View My Work</a>
</div>
<div class="nav-arrows">
<a href="#"><i class="fas fa-chevron-left"></i></a>
<a href="#"><i class="fas fa-chevron-right"></i></a>
</div>
<div class="slider-dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script>
const backgrounds = [
"url('img/background1.jpeg')",
"url('img/background2.webp')",
"url('img/background3.webp')"
]; // Ganti dengan gambar yang ingin dipakai
let currentIndex = 0;
const hero = document.querySelector(".hero");
const dots = document.querySelectorAll(".dot");
function changeSlide(index) {
currentIndex = index;
hero.style.backgroundImage = backgrounds[currentIndex];
document.querySelector(".dot.active").classList.remove("active");
dots[currentIndex].classList.add("active");
}
// Auto-slide setiap 5 detik
setInterval(() => {
currentIndex = (currentIndex + 1) % backgrounds.length;
changeSlide(currentIndex);
}, 5000);
// Navigasi manual via bullet
dots.forEach((dot, index) => {
dot.addEventListener("click", () => {
changeSlide(index);
});
});
// Navigasi manual dengan tombol panah
document.getElementById("prev").addEventListener("click", () => {
currentIndex = (currentIndex - 1 + backgrounds.length) % backgrounds.length;
changeSlide(currentIndex);
});
document.getElementById("next").addEventListener("click", () => {
currentIndex = (currentIndex + 1) % backgrounds.length;
changeSlide(currentIndex);
});
// Ambil elemen dengan id 'menu-toggle' dan '.nav-links'
const menuToggle = document.getElementById('menu-toggle');
const navLinks = document.querySelector('.nav-links');
// Menambahkan event listener untuk klik pada hamburger icon
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active'); // Toggle kelas 'active' untuk menampilkan menu
});
</script>
</body>
</html>
Struktur ini memudahkan Anda dalam mengatur elemen-elemen penting di halaman landing page.
Gaya CSS untuk Template Landing Page
Berikut adalah kode CSS untuk memberikan tampilan menarik pada template ini. Anda bisa menghubungkannya dengan file HTML menggunakan tag <link> di bagian <head>.
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Navbar */
.navbar {
position: fixed; /* Biar tetap di atas saat scroll */
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 80px;
background: rgba(0, 0, 0, 0.4); /* Tambahkan transparansi */
z-index: 1000; /* Pastikan navbar ada di atas elemen lain */
}
.logo {
height: 40px; /* Sesuaikan ukuran logo */
width: auto;
padding-left: 20px; /* Geser logo ke kanan */
}
/* Navbar Links */
.nav-links a {
color: #F8F9FA; /* Warna default */
text-decoration: none;
margin: 0 15px;
font-size: 1.2rem;
position: relative;
transition: color 0.3s ease-in-out;
}
/* Warna khusus untuk menu yang aktif */
.nav-links a.active {
color: #2bbab3; /* Warna biru dari logo */
font-weight: bold;
border-bottom: 3px solid #F8F9FA; /* Tambahkan garis bawah */
padding-bottom: 5px;
}
/* Efek Hover: Ubah Warna + Tambah Underline */
.nav-links a:hover {
color: #2bbab3; /* Warna putih saat hover */
}
/* Underline Animasi */
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -5px; /* Jarak underline dari teks */
width: 0;
height: 2px;
background-color: #F8F9FA; /* Warna underline */
transition: width 0.3s ease-in-out;
}
.nav-links a:hover::after {
width: 100%;
}
/* Bagian TOGLE */
.menu-toggle {
display: none;
}
/* Ketika menu aktif */
.nav-links.active {
display: flex; /* Tampilkan menu link */
}
/* Hero Section */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
padding: 0 20px;
background-size: cover;
background-position: center;
transition: background 1s ease-in-out; /* Animasi smooth */
background: url('img/background1.jpeg') center/cover no-repeat;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); /* Lapisan gelap */
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero h1 {
font-size: 4rem;
font-weight: bold;
letter-spacing: 2px;
}
.hero-content p {
word-wrap: break-word; /* Memecah kata-kata jika terlalu panjang */
line-height: 1.6; /* Menjaga jarak antar baris agar lebih rapi */
font-size: 1.2rem;
}
.hero span {
color: #ffffff;
font-weight: bold;
}
.highlight {
background: linear-gradient(90deg, #2bbab3 50%, rgba(0, 0, 0, 0.8));
color: white;
padding: 5px 10px; /* Ruang di sekitar teks */
border-radius: 20px; /* Sudut melengkung */
margin-bottom: 20px;
font-weight: bold; /* Teks lebih tebal */
display: inline-block; /* Supaya padding hanya di teks */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Tambahkan bayangan */
}
/* Hover Effect */
.highlight:hover {
transform: scale(1.05); /* Efek membesar saat hover */
}
.btn {
display: inline-block;
padding: 15px 30px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), #2bbab3); /* Warna gradien */
color: white;
text-decoration: none;
font-size: 1.4rem;
border-radius: 30px;
margin-top: 20px;
transition: 0.3s;
}
.btn:hover {
background-color: #1e8f88; /* Biru kehijauan lebih gelap */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* Navigation Arrows */
.nav-arrows {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
padding: 0 50px; /* Geser panah ke dalam */
}
.nav-arrows a {
color: #2bbab3;
font-size: 2rem;
text-decoration: none;
padding: 15px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
}
.slider-dots {
position: absolute;
bottom: 60px; /* Sedikit dinaikkan biar lebih mirip contoh */
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px; /* Tambahkan jarak antar bullet */
}
/* Semua Bulatan */
.slider-dots .dot {
width: 12px; /* Ukuran bulatan */
height: 12px;
border: 2px solid #fff; /* Warna solid outline */
background-color: transparent;
border-radius: 50%; /* Membuat bulat sempurna */
margin: 0 5px; /* Jarak antar bulatan */
transition: background-color 0.3s ease, transform 0.3s ease;
box-shadow: none; /* Hilangkan bayangan */
}
/* Bulatan Aktif */
.slider-dots .dot.active {
background-color: #2bbab3;
border: none; /* Hilangkan outline */
transform: scale(1.5); /* Tidak terlalu kecil */
transition: transform 0.5s ease, background-color 0.5s ease;
box-shadow: none; /* Hilangkan bayangan */
}
/* Untuk Tablet */
@media (max-width: 768px) {
.nav-links {
display: none; /* Sembunyikan menu link */
flex-direction: column;
position: absolute;
top: 60px; /* Posisi menu dropdown */
right: 0;
background-color: #333;
width: 100%;
padding: 10px;
}
.nav-links a {
padding: 10px;
font-size: 1.5rem;
text-align: center;
}
.menu-toggle {
display: block;
font-size: 2rem;
cursor: pointer;
color: white;
}
}
/* Untuk Ponsel */
@media (max-width: 480px) {
h1 {
font-size: 1.8rem; /* Ukuran font judul lebih kecil */
}
.highlight {
font-size: 1.2rem; /* Ukuran font "FARHAN" lebih kecil */
padding: 6px 12px; /* Menyesuaikan ruang dalam */
}
.btn {
padding: 10px 20px; /* Tombol lebih kecil */
font-size: 1rem; /* Ukuran font tombol lebih kecil */
}
.hero-content {
padding: 0 15px; /* Memberikan ruang samping lebih kecil */
}
.slider-dots .dot {
width: 8px; /* Bulatan lebih kecil */
height: 8px;
}
}
Kode ini memberikan tampilan modern dengan kombinasi warna.
Langkah-langkah Menggunakan Template
Untuk menggunakan template ini, Anda bisa mengikuti langkah berikut:
- Salin kode HTML dan CSS di atas.
- Simpan kode HTML dalam file bernama
index.htmldan kode CSS dalam filestyle.css. - Hubungkan file HTML dan CSS menggunakan tag
<link>seperti yang ditunjukkan pada contoh di atas. - Buka file
index.htmldi browser Anda untuk melihat hasilnya.
Cara Mengoptimalkan Template untuk SEO
Untuk memastikan Desain landing page ini mendapatkan peringkat tinggi di mesin pencari, Anda dapat melakukan langkah berikut:
- Tambahkan meta tag deskripsi seperti contoh HTML di atas.
- Gunakan heading yang terstruktur dengan baik, seperti H1 untuk judul utama dan H2 untuk subjudul.
- Tambahkan atribut
altpada setiap gambar yang Anda gunakan di landing page.
Kesimpulan
Template landing page gratis ini mempermudah Anda dalam menciptakan halaman yang profesional, menarik, dan SEO-friendly. Dengan desain responsif dan struktur kode yang mudah dipahami, template ini sangat cocok untuk berbagai kebutuhan. Cobalah template ini dan modifikasi sesuai dengan preferensi Anda.
Jika Anda memiliki pertanyaan atau ingin berbagi pengalaman, tuliskan di kolom komentar di bawah. Selamat mencoba!
Tagged with:
Desain Landing Page MenarikDesain Modern untuk Landing PageLanding Page Gratis dan ProfesionalTemplate Gratis untuk WebsiteTemplate Landing Page Gratis
Berbagi wawasan dan tips praktis seputar dunia digital.
You might also like
Bisnis
Coding
Investasi
Pendidikan
Review
Tips
