10 Contoh Landing Page Responsive Siap Copy Paste

May 25, 2026

10 Contoh Landing Page Responsif, Keren & Ramah SEO

Cocok buat blogger, jualan online, affiliate, portfolio sampai bisnis digital.

Landing page sekarang jadi salah satu halaman paling penting buat website. Mau jual produk, jasa, ebook, tools, aplikasi, sampai jasa desain sekalipun, landing page bisa bantu ningkatin pengunjung jadi pembeli.

Masalahnya, masih banyak yang bikin landing page terlalu berat, lemot, dan tampilannya berantakan di HP. Padahal mayoritas pengunjung sekarang datang dari mobile.

Landing page yang bagus biasanya punya ciri:

Loading cepat
Responsif di semua ukuran layar
SEO friendly
Tampilan simpel tapi menarik
Call To Action jelas
Tidak terlalu banyak efek berat

1. Landing Page Produk Digital

Jenis ini cocok buat jual ebook, script premium, template blogger, tools online, dan lainnya. Biasanya tampilannya fokus ke manfaat produk dan tombol beli.

Contoh sederhana;

<section style="padding:50px;text-align:center">
<h2>Jual Template Blogger Premium</h2>
<p>Ringan, cepat dan SEO Friendly</p>
<a href="#">Beli Sekarang</a>
</section>

Contoh kode Full HTML Landing Page Produk Digital:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Produk Digital </div> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:Arial,sans-serif; background:#f5f7fb; color:#222; line-height:1.6; } a{ text-decoration:none; } .container{ max-width:1100px; margin:auto; padding:20px; } .hero{ background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; padding:90px 20px; text-align:center; border-bottom-left-radius:40px; border-bottom-right-radius:40px; } .hero h1{ font-size:48px; margin-bottom:20px; } .hero p{ font-size:18px; max-width:700px; margin:auto; opacity:.95; } .btn{ display:inline-block; margin-top:30px; padding:15px 35px; background:#fff; color:#4f46e5; font-weight:bold; border-radius:50px; transition:.3s; } .btn:hover{ transform:translateY(-3px); } .mockup{ margin-top:50px; } .mockup img{ width:100%; max-width:700px; border-radius:20px; box-shadow:0 15px 40px rgba(0,0,0,.2); } .section{ padding:70px 20px; } .title{ text-align:center; margin-bottom:50px; } .title h2{ font-size:36px; margin-bottom:10px; } .features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } .card{ background:#fff; padding:30px; border-radius:20px; box-shadow:0 5px 20px rgba(0,0,0,.05); transition:.3s; } .card:hover{ transform:translateY(-5px); } .card h3{ margin-bottom:15px; font-size:22px; color:#4f46e5; } .card p{ color:#555; } .bonus{ background:#fff; border-radius:25px; padding:50px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.05); } .bonus img{ width:100%; border-radius:20px; } .price-box{ background:linear-gradient(135deg,#111827,#1f2937); color:#fff; padding:50px 30px; border-radius:30px; text-align:center; margin-top:70px; } .price{ font-size:60px; font-weight:bold; margin:20px 0; } .old{ text-decoration:line-through; opacity:.7; font-size:22px; } .testimoni{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; } .testi{ background:#fff; padding:25px; border-radius:20px; box-shadow:0 5px 20px rgba(0,0,0,.05); } .testi img{ width:70px; height:70px; border-radius:50%; margin-bottom:15px; object-fit:cover; } .faq{ max-width:800px; margin:auto; } .faq-item{ background:#fff; margin-bottom:20px; padding:25px; border-radius:20px; box-shadow:0 5px 15px rgba(0,0,0,.05); } .footer{ background:#111827; color:#fff; text-align:center; padding:40px 20px; margin-top:70px; } @media(max-width:768px){ .hero h1{ font-size:34px; } .bonus{ grid-template-columns:1fr; } .price{ font-size:45px; } } </style> <div class="hero"> <div class="container"> <h1>Jual Produk Digital Jadi Lebih Mudah 🚀</h1> <p> Tingkatkan penjualan produk digital Anda dengan landing page modern, cepat, responsif dan siap menghasilkan konversi tinggi. </p> <a href="#harga" class="btn"> Beli Sekarang </a> <div class="mockup"> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085" alt="Landing Page Produk Digital"> </div> </div> </div> <div class="section"> <div class="container"> <div class="title"> <h2>Kenapa Harus Produk Ini?</h2> <p>Dirancang khusus untuk creator digital, blogger dan pebisnis online.</p> </div> <div class="features"> <div class="card"> <h3>⚡ Super Cepat</h3> <p> Optimasi loading ringan dan ramah SEO sehingga website lebih cepat tampil di Google. </p> </div> <div class="card"> <h3>📱 Responsive</h3> <p> Tampilan otomatis menyesuaikan semua ukuran layar mulai dari HP hingga desktop. </p> </div> <div class="card"> <h3>🎨 Modern UI</h3> <p> Desain clean dan elegan membuat pengunjung lebih nyaman dan percaya. </p> </div> <div class="card"> <h3>💰 Meningkatkan Penjualan</h3> <p> Struktur landing page dibuat untuk meningkatkan konversi dan penjualan produk digital. </p> </div> </div> </div> </div> <div class="section"> <div class="container"> <div class="bonus"> <div> <img src="https://images.unsplash.com/photo-1558655146-d09347e92766" alt="Bonus"> </div> <div> <h2>Bonus Eksklusif 🎁</h2> <p style="margin-top:20px"> Setiap pembelian akan mendapatkan bonus: </p> <ul style="margin-top:20px;padding-left:20px;color:#555"> <li>Template Landing Page Premium</li> <li>Script SEO Optimizer</li> <li>Support Gratis</li> <li>Update Lifetime</li> </ul> <a href="#harga" class="btn" style="background:#4f46e5;color:#fff"> Ambil Bonus Sekarang </a> </div> </div> </div> </div> <div class="section"> <div class="container"> <div class="title"> <h2>Apa Kata Mereka?</h2> <p>Testimoni pengguna produk digital ini.</p> </div> <div class="testimoni"> <div class="testi"> <img src="https://randomuser.me/api/portraits/men/32.jpg"> <h3>Rizky</h3> <p> “Landing page ini bikin jualan saya terlihat profesional dan conversion naik drastis.” </p> </div> <div class="testi"> <img src="https://randomuser.me/api/portraits/women/44.jpg"> <h3>Salsa</h3> <p> “Desainnya keren banget, ringan dan mudah dipasang di Blogger maupun hosting.” </p> </div> <div class="testi"> <img src="https://randomuser.me/api/portraits/men/68.jpg"> <h3>Fajar</h3> <p> “Baru beberapa hari pakai sudah dapat penjualan pertama dari landing page ini.” </p> </div> </div> </div> </div> <div class="section" id="harga"> <div class="container"> <div class="price-box"> <h2>Harga Spesial Hari Ini 🔥</h2> <div class="old">Rp299.000</div> <div class="price">Rp99.000</div> <p> Promo terbatas hanya hari ini. Setelah itu harga kembali normal. </p> <a href="#" class="btn"> Beli Sekarang </a> </div> </div> </div> <div class="section"> <div class="container"> <div class="title"> <h2>FAQ</h2> <p>Pertanyaan yang sering ditanyakan.</p> </div> <div class="faq"> <div class="faq-item"> <h3>Apakah bisa dipasang di Blogger?</h3> <p> Ya, template ini bisa dipasang di Blogger maupun hosting biasa. </p> </div> <div class="faq-item"> <h3>Apakah support mobile?</h3> <p> Tentu, desain sudah responsive untuk semua perangkat. </p> </div> <div class="faq-item"> <h3>Apakah dapat update?</h3> <p> Ya, Anda mendapatkan update lifetime gratis. </p> </div> </div> </div> </div> <div class="footer"> <div class="container"> <p> © 2026 Produk Digital Premium — All Rights Reserved </p> </div> </div> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

Tips SEO: gunakan judul yang mengandung keyword utama seperti "Template Blogger SEO Responsive".

2. Landing Page Jasa

Cocok buat jasa desain, jasa SEO, edit video, coding, dan lain-lain. Biasanya berisi:

Penjelasan jasa
Keunggulan
Testimoni
Kontak WhatsApp

Pengunjung lebih suka landing page jasa yang simpel dibanding terlalu ramai animasi.

Contoh Kode Script Landing Page Jasa Full HTML:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Jasa </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jasa Profesional</title> <style> *{ margin:0; padding:0; box-sizing:border-box; font-family:Arial,sans-serif; } body{ background:#f8fafc; color:#1e293b; line-height:1.6; } header{ background:#0f172a; padding:20px 8%; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:999; } .logo{ font-size:24px; font-weight:700; color:#fff; } nav a{ color:#fff; text-decoration:none; margin-left:25px; font-weight:600; } .hero{ padding:100px 8%; display:flex; align-items:center; justify-content:space-between; gap:40px; background:linear-gradient(135deg,#2563eb,#06b6d4); color:#fff; flex-wrap:wrap; } .hero-text{ flex:1; min-width:300px; } .hero-text h1{ font-size:52px; margin-bottom:20px; } .hero-text p{ font-size:18px; margin-bottom:25px; } .btn{ display:inline-block; padding:15px 30px; background:#fff; color:#2563eb; font-weight:700; text-decoration:none; border-radius:12px; transition:.3s; } .btn:hover{ transform:translateY(-3px); } .hero-img{ flex:1; min-width:300px; } .hero-img img{ width:100%; border-radius:20px; box-shadow:0 15px 40px rgba(0,0,0,.25); } section{ padding:80px 8%; } .section-title{ text-align:center; font-size:38px; margin-bottom:50px; } .services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } .card{ background:#fff; padding:30px; border-radius:20px; box-shadow:0 8px 25px rgba(0,0,0,.08); transition:.3s; } .card:hover{ transform:translateY(-10px); } .card h3{ margin-bottom:15px; color:#2563eb; } .about{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; } .about img{ width:100%; max-width:500px; border-radius:20px; } .about-text{ flex:1; } .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; margin-top:40px; } .stat{ background:#eff6ff; padding:25px; text-align:center; border-radius:15px; } .stat h2{ color:#2563eb; font-size:34px; } .testimonials{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; } .testi{ background:#fff; padding:25px; border-radius:18px; box-shadow:0 8px 20px rgba(0,0,0,.08); } .cta{ background:#2563eb; color:#fff; text-align:center; padding:80px 8%; } .cta h2{ font-size:42px; margin-bottom:20px; } footer{ background:#0f172a; color:#fff; text-align:center; padding:25px; } @media(max-width:768px){ .hero-text h1{ font-size:38px; } .section-title{ font-size:30px; } } </style> </head> <body> <header> <div class="logo">JasaPro</div> <nav> <a href="#layanan">Layanan</a> <a href="#tentang">Tentang</a> <a href="#testimoni">Testimoni</a> <a href="#kontak">Kontak</a> </nav> </header> <section class="hero"> <div class="hero-text"> <h1>Solusi Jasa Profesional untuk Bisnis Anda</h1> <p>Kami membantu bisnis berkembang dengan layanan website, desain, branding, dan digital marketing modern.</p> <a href="#kontak" class="btn">Konsultasi Gratis</a> </div> <div class="hero-img"> <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f" alt="Tim Profesional"> </div> </section> <section id="layanan"> <h2 class="section-title">Layanan Kami</h2> <div class="services"> <div class="card"> <h3>Pembuatan Website</h3> <p>Website profesional, cepat, responsive, dan SEO friendly.</p> </div> <div class="card"> <h3>Desain Grafis</h3> <p>Desain branding, banner, logo, dan kebutuhan visual bisnis.</p> </div> <div class="card"> <h3>Digital Marketing</h3> <p>Optimasi promosi digital untuk meningkatkan penjualan.</p> </div> <div class="card"> <h3>Konsultasi Bisnis</h3> <p>Strategi pengembangan bisnis berbasis data dan target pasar.</p> </div> </div> </section> <section id="tentang"> <div class="about"> <img src="https://images.unsplash.com/photo-1552664730-d307ca884978" alt="Tentang Kami"> <div class="about-text"> <h2>Tentang Kami</h2> <p>Kami adalah tim profesional berpengalaman yang telah membantu puluhan klien membangun bisnis digital yang sukses.</p> <div class="stats"> <div class="stat"> <h2>120+</h2> <p>Project Selesai</p> </div> <div class="stat"> <h2>98%</h2> <p>Klien Puas</p> </div> <div class="stat"> <h2>5+</h2> <p>Tahun Pengalaman</p> </div> </div> </div> </div> </section> <section id="testimoni"> <h2 class="section-title">Apa Kata Klien?</h2> <div class="testimonials"> <div class="testi"> <p>"Pelayanan sangat profesional dan hasil website luar biasa."</p> <strong>- Budi, Owner UMKM</strong> </div> <div class="testi"> <p>"Branding bisnis kami meningkat drastis setelah bekerja sama."</p> <strong>- Sari, Entrepreneur</strong> </div> <div class="testi"> <p>"Sangat direkomendasikan untuk bisnis yang ingin naik level."</p> <strong>- Andi, Startup Founder</strong> </div> </div> </section> <section class="cta" id="kontak"> <h2>Siap Mengembangkan Bisnis Anda?</h2> <p>Hubungi kami sekarang dan dapatkan konsultasi gratis.</p> <br> <a href="https://wa.me/6281234567890" class="btn">Hubungi Sekarang</a> </section> <footer> <p>© 2026 JasaPro. All Rights Reserved.</p> </footer> </body> </html> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

3. Landing Page Affiliate

Banyak dipakai blogger untuk promosi produk marketplace. Fokus utamanya adalah review singkat dan tombol menuju marketplace.

Contoh sedeehana:

<div class="produk">
<img src="produk.jpg">
<h3>Smartwatch Murah</h3>
<p>Baterai tahan lama dan desain premium</p>
</div>

Contoh Kode Script Landing Page Affiliate Full HTML:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Affiliate </div> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <section style="font-family:Arial,sans-serif;background:#f5f7fb;padding:0;margin:0;color:#222">  <div style="background:linear-gradient(135deg,#4f46e5,#7c3aed);padding:70px 20px;text-align:center;color:#fff"> <div style="max-width:900px;margin:auto"> <span style="display:inline-block;background:rgba(255,255,255,.2);padding:8px 15px;border-radius:30px;font-size:14px"> 🔥 Rekomendasi Produk Digital Terbaik </span> <h1 style="font-size:42px;margin:20px 0 10px;line-height:1.3"> Rahasia Jualan Online<br> Tanpa Ribet & Tanpa Modal Besar </h1> <p style="font-size:18px;line-height:1.8;max-width:700px;margin:auto"> Pelajari strategi affiliate marketing modern untuk menghasilkan komisi harian hanya dari smartphone dan internet. </p> <div style="margin-top:30px"> <a href="#order" style="display:inline-block;background:#fff;color:#4f46e5;padding:15px 35px;border-radius:50px;text-decoration:none;font-weight:bold;font-size:17px"> 🚀 Mulai Sekarang </a> </div> <div style="margin-top:40px"> <img src="https://picsum.photos/900/450" style="width:100%;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.2)"> </div> </div> </div>  <div style="padding:70px 20px;background:#fff"> <div style="max-width:1100px;margin:auto"> <h2 style="text-align:center;font-size:34px;margin-bottom:15px"> Kenapa Harus Produk Ini? </h2> <p style="text-align:center;color:#666;max-width:700px;margin:auto auto 50px;line-height:1.8"> Cocok untuk pemula maupun yang sudah pernah mencoba affiliate marketing sebelumnya. </p> <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px"> <div style="background:#f8f9ff;padding:30px;border-radius:18px"> <div style="font-size:45px">💰</div> <h3>Potensi Komisi Besar</h3> <p style="line-height:1.8;color:#555"> Dapatkan komisi dari setiap penjualan hanya dengan membagikan link affiliate. </p> </div> <div style="background:#f8f9ff;padding:30px;border-radius:18px"> <div style="font-size:45px">📱</div> <h3>Cukup Pakai HP</h3> <p style="line-height:1.8;color:#555"> Tidak perlu laptop mahal atau skill coding rumit untuk memulai. </p> </div> <div style="background:#f8f9ff;padding:30px;border-radius:18px"> <div style="font-size:45px">⚡</div> <h3>Materi Lengkap</h3> <p style="line-height:1.8;color:#555"> Step by step mulai dari dasar sampai teknik promosi modern. </p> </div> </div> </div> </div>  <div style="padding:70px 20px;background:#eef2ff"> <div style="max-width:1100px;margin:auto"> <h2 style="text-align:center;font-size:34px;margin-bottom:50px"> Testimoni Pengguna </h2> <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px"> <div style="background:#fff;padding:30px;border-radius:18px;box-shadow:0 5px 15px rgba(0,0,0,.05)"> <p style="line-height:1.8;color:#555"> “Baru 2 minggu belajar, sudah dapat komisi pertama. Materinya mudah dipahami.” </p> <h4 style="margin-top:20px">— Rizky, Bandung</h4> </div> <div style="background:#fff;padding:30px;border-radius:18px;box-shadow:0 5px 15px rgba(0,0,0,.05)"> <p style="line-height:1.8;color:#555"> “Awalnya bingung mulai dari mana, sekarang sudah rutin promosi tiap hari.” </p> <h4 style="margin-top:20px">— Dinda, Jakarta</h4> </div> <div style="background:#fff;padding:30px;border-radius:18px;box-shadow:0 5px 15px rgba(0,0,0,.05)"> <p style="line-height:1.8;color:#555"> “Tampilannya profesional dan cocok dipakai buat promosi affiliate.” </p> <h4 style="margin-top:20px">— Andi, Surabaya</h4> </div> </div> </div> </div>  <div style="padding:70px 20px;background:#fff"> <div style="max-width:1000px;margin:auto;text-align:center"> <h2 style="font-size:34px;margin-bottom:20px"> 🎁 Bonus Spesial </h2> <p style="font-size:18px;color:#555;line-height:1.8"> Dapatkan bonus template landing page, caption promosi, dan strategi traffic gratis. </p> <div style="margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:20px"> <div style="background:#f3f4f6;padding:20px 30px;border-radius:15px"> ✅ Template Promosi </div> <div style="background:#f3f4f6;padding:20px 30px;border-radius:15px"> ✅ Panduan Traffic </div> <div style="background:#f3f4f6;padding:20px 30px;border-radius:15px"> ✅ Grup Support </div> </div> </div> </div>  <div id="order" style="padding:80px 20px;background:linear-gradient(135deg,#111827,#1f2937);text-align:center;color:#fff"> <div style="max-width:800px;margin:auto"> <h2 style="font-size:40px;line-height:1.4"> Siap Mulai Affiliate Marketing? </h2> <p style="font-size:18px;line-height:1.8;color:#ddd;margin-top:20px"> Klik tombol di bawah dan mulai bangun penghasilan online dari sekarang. </p> <div style="margin-top:35px"> <a href="#" style="display:inline-block;background:#22c55e;color:#fff;padding:18px 40px;border-radius:60px;text-decoration:none;font-size:18px;font-weight:bold"> 🔥 Daftar Sekarang </a> </div> <p style="margin-top:25px;color:#aaa;font-size:14px"> 100% Aman • Support Pemula • Bisa Akses Selamanya </p> </div> </div> </section> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

4. Landing Page Portofolio

Biasanya dipakai freelancer dan web developer untuk menampilkan hasil karya.

Isi penting:

Foto project
Deskripsi singkat
Skill
Kontak

Contoh Kode Script Landing Page Portofolio Full HTML:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Portofolio </div> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:Arial,sans-serif; background:#f4f7fb; color:#222; line-height:1.6; } a{ text-decoration:none; } .container{ width:90%; max-width:1200px; margin:auto; } header{ background:#111827; padding:20px 0; position:sticky; top:0; z-index:99; } .nav{ display:flex; justify-content:space-between; align-items:center; } .logo{ color:#fff; font-size:24px; font-weight:bold; } .menu a{ color:#fff; margin-left:20px; transition:.3s; } .menu a:hover{ color:#38bdf8; } .hero{ padding:90px 0; background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; } .hero-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .hero img{ width:100%; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.3); } .hero h1{ font-size:48px; margin-bottom:20px; } .hero p{ margin-bottom:25px; color:#d1d5db; } .btn{ display:inline-block; padding:14px 28px; background:#38bdf8; color:#fff; border-radius:8px; transition:.3s; font-weight:bold; } .btn:hover{ background:#0ea5e9; } .section{ padding:80px 0; } .title{ text-align:center; margin-bottom:50px; } .title h2{ font-size:36px; margin-bottom:10px; } .title p{ color:#666; } .about{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .about img{ width:100%; border-radius:15px; } .skills{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; } .skill-box{ background:#fff; padding:25px; border-radius:12px; text-align:center; box-shadow:0 5px 20px rgba(0,0,0,.05); transition:.3s; } .skill-box:hover{ transform:translateY(-5px); } .projects{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; } .project{ background:#fff; border-radius:15px; overflow:hidden; box-shadow:0 5px 20px rgba(0,0,0,.05); transition:.3s; } .project:hover{ transform:translateY(-5px); } .project img{ width:100%; height:200px; object-fit:cover; } .project-content{ padding:20px; } .project-content h3{ margin-bottom:10px; } .contact{ background:#111827; color:#fff; border-radius:20px; padding:50px; text-align:center; } .contact p{ margin:20px 0; color:#d1d5db; } footer{ text-align:center; padding:30px 0; color:#666; } @media(max-width:768px){ .hero-wrap, .about{ grid-template-columns:1fr; } .hero{ text-align:center; } .hero h1{ font-size:36px; } .menu{ display:none; } } </style> <header> <div class="container nav"> <div class="logo">MyPortfolio</div> <div class="menu"> <a href="#about">About</a> <a href="#skills">Skills</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </div> </div> </header> <section class="hero"> <div class="container hero-wrap"> <div> <h1>Halo, Saya Ayi Suhendar</h1> <p> Seorang Web Developer & Blogger yang suka membuat website modern, responsive dan ramah SEO untuk berbagai kebutuhan digital. </p> <a href="#projects" class="btn"> Lihat Portfolio </a> </div> <div> <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop" alt="Portfolio"> </div> </div> </section> <section class="section" id="about"> <div class="container"> <div class="title"> <h2>Tentang Saya</h2> <p>Kenalan singkat tentang saya</p> </div> <div class="about"> <div> <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop" alt="About"> </div> <div> <h3 style="margin-bottom:15px;font-size:28px"> Creative Web Designer </h3> <p style="margin-bottom:15px"> Saya fokus membuat landing page, tools blogger, template modern dan website bisnis dengan tampilan profesional dan performa cepat. </p> <p> Selain coding, saya juga aktif membuat konten digital, tutorial blogger dan berbagai tools online. </p> </div> </div> </div> </section> <section class="section" id="skills" style="background:#eef2ff"> <div class="container"> <div class="title"> <h2>Skills</h2> <p>Keahlian yang saya kuasai</p> </div> <div class="skills"> <div class="skill-box"> <h3>HTML5</h3> <p>Landing Page & UI Modern</p> </div> <div class="skill-box"> <h3>CSS3</h3> <p>Responsive & Animation</p> </div> <div class="skill-box"> <h3>JavaScript</h3> <p>Interactive Website</p> </div> <div class="skill-box"> <h3>Blogger</h3> <p>Custom Template & SEO</p> </div> </div> </div> </section> <section class="section" id="projects"> <div class="container"> <div class="title"> <h2>My Projects</h2> <p>Beberapa project terbaru</p> </div> <div class="projects"> <div class="project"> <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=1200&auto=format&fit=crop"> <div class="project-content"> <h3>Landing Page Digital</h3> <p> Website promosi produk digital dengan desain premium dan responsive. </p> </div> </div> <div class="project"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop"> <div class="project-content"> <h3>SEO Blogger Tools</h3> <p> Tools online generator untuk kebutuhan optimasi blogger dan website. </p> </div> </div> <div class="project"> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop"> <div class="project-content"> <h3>Portfolio Website</h3> <p> Website portfolio modern dengan animasi ringan dan loading cepat. </p> </div> </div> </div> </div> </section> <section class="section" id="contact"> <div class="container"> <div class="contact"> <h2>Hubungi Saya</h2> <p> Tertarik bekerja sama atau membuat project website? Silakan hubungi saya sekarang juga. </p> <a href="mailto:emailanda@gmail.com" class="btn"> Contact Me </a> </div> </div> </section> <footer> © 2026 MyPortfolio - All Rights Reserved </footer> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

5. Landing Page Aplikasi

Kalau punya aplikasi Android atau tools web, model ini cocok banget. Biasanya ada screenshot aplikasi dan tombol download.

Gunakan gambar WebP supaya loading lebih cepat dan SEO makin bagus.

Contoh Kode Script Landing Page Aplikasi Full HTML:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Aplikasi </div> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{ margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; } body{ font-family:Arial,sans-serif; background:#f5f7fb; color:#222; line-height:1.6; } a{ text-decoration:none; } .container{ width:90%; max-width:1200px; margin:auto; } header{ background:#111827; padding:18px 0; position:sticky; top:0; z-index:999; } .nav{ display:flex; justify-content:space-between; align-items:center; } .logo{ font-size:28px; font-weight:bold; color:#fff; } .menu a{ color:#fff; margin-left:20px; font-size:15px; transition:.3s; } .menu a:hover{ color:#38bdf8; } .hero{ padding:90px 0; background:linear-gradient(135deg,#2563eb,#06b6d4); color:#fff; overflow:hidden; } .hero-wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .hero-text{ flex:1; min-width:280px; } .hero-text h1{ font-size:52px; line-height:1.2; margin-bottom:20px; } .hero-text p{ font-size:18px; margin-bottom:30px; opacity:.95; } .btn{ display:inline-block; padding:14px 28px; background:#fff; color:#2563eb; border-radius:8px; font-weight:bold; margin-right:10px; transition:.3s; } .btn:hover{ transform:translateY(-3px); } .btn2{ background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3); } .hero-img{ flex:1; text-align:center; min-width:280px; } .hero-img img{ width:100%; max-width:430px; border-radius:25px; box-shadow:0 10px 30px rgba(0,0,0,.25); } .section{ padding:80px 0; } .title{ text-align:center; margin-bottom:50px; } .title h2{ font-size:38px; margin-bottom:10px; } .title p{ color:#666; } .features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } .card{ background:#fff; padding:30px; border-radius:18px; box-shadow:0 5px 20px rgba(0,0,0,.06); transition:.3s; } .card:hover{ transform:translateY(-8px); } .card .icon{ font-size:45px; margin-bottom:15px; } .card h3{ margin-bottom:10px; font-size:22px; } .mockup{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .mockup img{ width:100%; max-width:420px; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.12); } .mockup-text{ flex:1; min-width:280px; } .mockup-text h2{ font-size:40px; margin-bottom:20px; } .mockup-text p{ margin-bottom:18px; color:#555; } .stats{ background:#111827; color:#fff; padding:70px 0; } .stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:25px; text-align:center; } .stats-box h3{ font-size:42px; margin-bottom:10px; color:#38bdf8; } .testimonial{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:25px; } .testi{ background:#fff; padding:30px; border-radius:18px; box-shadow:0 5px 20px rgba(0,0,0,.06); } .testi img{ width:60px; height:60px; border-radius:50%; margin-bottom:15px; } .testi h4{ margin-top:15px; } .cta{ background:linear-gradient(135deg,#0f172a,#1e3a8a); padding:80px 20px; text-align:center; color:#fff; border-radius:20px; } .cta h2{ font-size:42px; margin-bottom:20px; } .cta p{ max-width:700px; margin:auto; margin-bottom:30px; opacity:.9; } footer{ background:#0f172a; color:#bbb; padding:35px 0; text-align:center; margin-top:80px; } @media(max-width:768px){ .hero-text h1{ font-size:38px; } .title h2{ font-size:30px; } .mockup-text h2{ font-size:32px; } .cta h2{ font-size:32px; } .menu{ display:none; } } </style> <header> <div class="container nav"> <div class="logo">APPIFY</div> <div class="menu"> <a href="#fitur">Fitur</a> <a href="#tentang">Tentang</a> <a href="#review">Review</a> <a href="#download">Download</a> </div> </div> </header> <section class="hero"> <div class="container hero-wrap"> <div class="hero-text"> <h1>Aplikasi Modern Untuk Produktivitas Harian</h1> <p> Kelola pekerjaan, catatan, jadwal dan tim Anda dalam satu aplikasi ringan, cepat dan responsif dengan tampilan modern. </p> <a href="#" class="btn">Download App</a> <a href="#" class="btn btn2">Lihat Demo</a> </div> <div class="hero-img"> <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?q=80&w=1000" alt="Aplikasi Mobile"> </div> </div> </section> <section class="section" id="fitur"> <div class="container"> <div class="title"> <h2>Fitur Unggulan</h2> <p>Semua kebutuhan aplikasi modern dalam satu platform.</p> </div> <div class="features"> <div class="card"> <div class="icon">⚡</div> <h3>Super Cepat</h3> <p> Aplikasi ringan dengan performa cepat dan loading optimal di semua perangkat. </p> </div> <div class="card"> <div class="icon">🔒</div> <h3>Keamanan Tinggi</h3> <p> Data pengguna terenkripsi dan terlindungi menggunakan sistem keamanan modern. </p> </div> <div class="card"> <div class="icon">☁️</div> <h3>Cloud Sync</h3> <p> Sinkronisasi otomatis antar perangkat tanpa ribet dan tanpa kehilangan data. </p> </div> <div class="card"> <div class="icon">📊</div> <h3>Dashboard Modern</h3> <p> Pantau semua aktivitas dengan tampilan dashboard profesional dan simpel. </p> </div> </div> </div> </section> <section class="section" id="tentang"> <div class="container mockup"> <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?q=80&w=1000" alt="Mockup App"> <div class="mockup-text"> <h2>Desain Elegan & Mudah Digunakan</h2> <p> Dirancang dengan antarmuka modern agar nyaman digunakan oleh semua pengguna, baik pemula maupun profesional. </p> <p> Cocok untuk bisnis, startup, freelancer, content creator hingga kebutuhan pribadi. </p> <a href="#" class="btn" style="background:#2563eb;color:#fff"> Pelajari Selengkapnya </a> </div> </div> </section> <section class="stats"> <div class="container stats-grid"> <div class="stats-box"> <h3>1M+</h3> <p>Pengguna Aktif</p> </div> <div class="stats-box"> <h3>4.9★</h3> <p>Rating Pengguna</p> </div> <div class="stats-box"> <h3>99%</h3> <p>Kepuasan Pelanggan</p> </div> <div class="stats-box"> <h3>24/7</h3> <p>Support Online</p> </div> </div> </section> <section class="section" id="review"> <div class="container"> <div class="title"> <h2>Apa Kata Pengguna?</h2> <p>Review pengguna aplikasi dari berbagai negara.</p> </div> <div class="testimonial"> <div class="testi"> <img src="https://randomuser.me/api/portraits/women/68.jpg"> <p> “Aplikasi terbaik yang pernah saya gunakan. Sangat membantu pekerjaan harian saya.” </p> <h4>— Sarah Wijaya</h4> </div> <div class="testi"> <img src="https://randomuser.me/api/portraits/men/32.jpg"> <p> “Tampilan modern, ringan dan fiturnya lengkap. Recommended banget!” </p> <h4>— Andi Saputra</h4> </div> <div class="testi"> <img src="https://randomuser.me/api/portraits/women/45.jpg"> <p> “Sekarang kerja tim jadi lebih mudah dan produktif sejak memakai aplikasi ini.” </p> <h4>— Fitri Amelia</h4> </div> </div> </div> </section> <section class="section"> <div class="container"> <div class="cta" id="download"> <h2>Mulai Gunakan Sekarang</h2> <p> Download aplikasi sekarang dan nikmati pengalaman produktivitas modern langsung dari smartphone Anda. </p> <a href="#" class="btn">Download Gratis</a> </div> </div> </section> <footer> <div class="container"> © 2026 APPIFY - Landing Page Aplikasi Modern. </div> </footer> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

6. Landing Page Event

Dipakai untuk webinar, seminar, konser, atau event komunitas. Biasanya ada countdown dan form pendaftaran.

Contoh sederhana:

<h2>Webinar SEO Blogger</h2>
<p>Tanggal: 20 Juni 2026</p>
<button>Daftar Sekarang</button>

Contoh Kode Script Landing Page Event Full HTML:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Event </div> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div id="event-landing-page"> <style> *{ margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; } body{ font-family:Arial,sans-serif; background:#0f172a; color:#fff; } a{ text-decoration:none; } #event-landing-page{ width:100%; overflow:hidden; background:#0f172a; } /* NAVBAR */ .ev-navbar{ width:100%; padding:20px 8%; display:flex; justify-content:space-between; align-items:center; position:fixed; top:0; left:0; z-index:999; background:rgba(15,23,42,.9); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08); } .ev-logo{ font-size:28px; font-weight:bold; letter-spacing:1px; color:#fff; } .ev-menu{ display:flex; gap:25px; } .ev-menu a{ color:#ddd; font-size:15px; transition:.3s; } .ev-menu a:hover{ color:#38bdf8; } /* HERO */ .ev-hero{ min-height:100vh; padding:150px 8% 100px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; background: linear-gradient(rgba(15,23,42,.85),rgba(15,23,42,.92)), url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?q=80&w=1600&auto=format&fit=crop'); background-size:cover; background-position:center; } .ev-badge{ display:inline-block; padding:10px 18px; background:#38bdf8; border-radius:50px; font-size:13px; font-weight:bold; margin-bottom:20px; color:#0f172a; } .ev-title{ font-size:65px; line-height:1.1; font-weight:900; margin-bottom:25px; } .ev-title span{ color:#38bdf8; } .ev-desc{ font-size:18px; line-height:1.9; color:#cbd5e1; margin-bottom:35px; } .ev-btns{ display:flex; gap:18px; flex-wrap:wrap; } .ev-btn{ padding:15px 28px; border-radius:12px; font-size:15px; font-weight:bold; transition:.3s; display:inline-block; } .ev-btn-primary{ background:#38bdf8; color:#0f172a; } .ev-btn-primary:hover{ transform:translateY(-5px); } .ev-btn-outline{ border:2px solid #38bdf8; color:#38bdf8; } .ev-btn-outline:hover{ background:#38bdf8; color:#0f172a; } .ev-card{ background:rgba(255,255,255,.08); padding:35px; border-radius:25px; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); } .ev-card h3{ font-size:28px; margin-bottom:25px; } .ev-info{ display:flex; align-items:center; gap:15px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); } .ev-info:last-child{ border:none; } .ev-icon{ width:55px; height:55px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:#38bdf8; color:#0f172a; font-size:22px; font-weight:bold; } /* COUNTDOWN */ .ev-countdown{ padding:70px 8%; background:#111827; display:grid; grid-template-columns:repeat(4,1fr); gap:25px; text-align:center; } .ev-time{ background:#1e293b; padding:35px 20px; border-radius:20px; } .ev-time h2{ font-size:55px; color:#38bdf8; margin-bottom:10px; } .ev-time p{ color:#cbd5e1; } /* ABOUT */ .ev-about{ padding:110px 8%; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .ev-about img{ width:100%; border-radius:25px; box-shadow:0 15px 40px rgba(0,0,0,.35); } .ev-section-title{ font-size:45px; margin-bottom:25px; line-height:1.2; } .ev-section-title span{ color:#38bdf8; } .ev-about p{ font-size:17px; line-height:1.9; color:#cbd5e1; margin-bottom:20px; } /* SPEAKER */ .ev-speaker{ padding:110px 8%; background:#111827; } .ev-center{ text-align:center; margin-bottom:60px; } .ev-speaker-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; } .ev-speaker-box{ background:#1e293b; border-radius:25px; overflow:hidden; transition:.3s; } .ev-speaker-box:hover{ transform:translateY(-10px); } .ev-speaker-box img{ width:100%; height:320px; object-fit:cover; } .ev-speaker-content{ padding:25px; text-align:center; } .ev-speaker-content h3{ font-size:24px; margin-bottom:10px; } .ev-speaker-content p{ color:#94a3b8; } /* SCHEDULE */ .ev-schedule{ padding:110px 8%; } .ev-schedule-box{ background:#1e293b; padding:30px; border-radius:25px; margin-bottom:25px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; } .ev-schedule-time{ font-size:22px; font-weight:bold; color:#38bdf8; } .ev-schedule-content h3{ margin-bottom:10px; font-size:24px; } .ev-schedule-content p{ line-height:1.8; color:#cbd5e1; } /* CTA */ .ev-cta{ padding:110px 8%; text-align:center; background: linear-gradient(rgba(14,165,233,.9),rgba(14,165,233,.9)), url('https://images.unsplash.com/photo-1511578314322-379afb476865?q=80&w=1600&auto=format&fit=crop'); background-size:cover; background-position:center; } .ev-cta h2{ font-size:55px; margin-bottom:25px; color:#0f172a; } .ev-cta p{ max-width:750px; margin:auto auto 35px; font-size:18px; line-height:1.9; color:#082f49; } /* FOOTER */ .ev-footer{ padding:40px 8%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; background:#020617; } .ev-social{ display:flex; gap:15px; } .ev-social a{ width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#1e293b; color:#fff; transition:.3s; } .ev-social a:hover{ background:#38bdf8; color:#0f172a; } /* RESPONSIVE */ @media(max-width:950px){ .ev-hero, .ev-about{ grid-template-columns:1fr; } .ev-title{ font-size:45px; } .ev-countdown{ grid-template-columns:repeat(2,1fr); } .ev-navbar{ padding:18px 5%; } .ev-hero, .ev-about, .ev-speaker, .ev-schedule, .ev-cta{ padding-left:5%; padding-right:5%; } } @media(max-width:600px){ .ev-menu{ display:none; } .ev-title{ font-size:35px; } .ev-section-title{ font-size:32px; } .ev-cta h2{ font-size:36px; } .ev-countdown{ grid-template-columns:1fr; } } </style>  <div class="ev-navbar"> <div class="ev-logo"> EVENTPRO </div> <div class="ev-menu"> <a href="#about">Tentang</a> <a href="#speaker">Speaker</a> <a href="#schedule">Jadwal</a> <a href="#contact">Daftar</a> </div> </div>  <section class="ev-hero"> <div> <div class="ev-badge"> 🔥 EVENT TERBESAR 2026 </div> <h1 class="ev-title"> Creative Digital <span>Conference</span> </h1> <p class="ev-desc"> Event digital kreatif terbesar tahun ini untuk para content creator, freelancer, digital marketer, dan entrepreneur yang ingin berkembang di era digital modern. </p> <div class="ev-btns"> <a href="#" class="ev-btn ev-btn-primary"> Daftar Sekarang </a> <a href="#schedule" class="ev-btn ev-btn-outline"> Lihat Jadwal </a> </div> </div> <div class="ev-card"> <h3>📍 Detail Event</h3> <div class="ev-info"> <div class="ev-icon">📅</div> <div> <h4>Tanggal</h4> <p>25 Desember 2026</p> </div> </div> <div class="ev-info"> <div class="ev-icon">⏰</div> <div> <h4>Waktu</h4> <p>08.00 - 18.00 WIB</p> </div> </div> <div class="ev-info"> <div class="ev-icon">📌</div> <div> <h4>Lokasi</h4> <p>Jakarta Convention Center</p> </div> </div> <div class="ev-info"> <div class="ev-icon">🎟️</div> <div> <h4>Tiket</h4> <p>Mulai Rp99.000</p> </div> </div> </div> </section>  <section class="ev-countdown"> <div class="ev-time"> <h2 id="days">00</h2> <p>Hari</p> </div> <div class="ev-time"> <h2 id="hours">00</h2> <p>Jam</p> </div> <div class="ev-time"> <h2 id="minutes">00</h2> <p>Menit</p> </div> <div class="ev-time"> <h2 id="seconds">00</h2> <p>Detik</p> </div> </section>  <section class="ev-about" id="about"> <div> <img src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=1200&auto=format&fit=crop"> </div> <div> <h2 class="ev-section-title"> Tentang <span>Event</span> </h2> <p> Creative Digital Conference adalah event tahunan yang menghadirkan pembicara inspiratif dari berbagai bidang digital seperti content creator, social media specialist, web developer, hingga entrepreneur sukses. </p> <p> Event ini dirancang untuk membantu peserta memperluas networking, meningkatkan skill digital, serta mendapatkan insight terbaru tentang perkembangan dunia online dan teknologi modern. </p> <a href="#" class="ev-btn ev-btn-primary"> Gabung Sekarang </a> </div> </section>  <section class="ev-speaker" id="speaker"> <div class="ev-center"> <h2 class="ev-section-title"> Speaker <span>Terbaik</span> </h2> <p> Belajar langsung dari para profesional dan expert di bidang digital. </p> </div> <div class="ev-speaker-grid"> <div class="ev-speaker-box"> <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop"> <div class="ev-speaker-content"> <h3>Andi Pratama</h3> <p>Digital Marketing Expert</p> </div> </div> <div class="ev-speaker-box"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop"> <div class="ev-speaker-content"> <h3>Nadia Putri</h3> <p>Content Creator</p> </div> </div> <div class="ev-speaker-box"> <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop"> <div class="ev-speaker-content"> <h3>Rizky Maulana</h3> <p>Startup Founder</p> </div> </div> </div> </section>  <section class="ev-schedule" id="schedule"> <div class="ev-center"> <h2 class="ev-section-title"> Jadwal <span>Acara</span> </h2> </div> <div class="ev-schedule-box"> <div class="ev-schedule-time"> 08.00 WIB </div> <div class="ev-schedule-content"> <h3>Opening & Networking</h3> <p> Pembukaan acara dan sesi networking antar peserta serta komunitas digital. </p> </div> </div> <div class="ev-schedule-box"> <div class="ev-schedule-time"> 10.00 WIB </div> <div class="ev-schedule-content"> <h3>Content Strategy 2026</h3> <p> Strategi membangun audience dan branding di media sosial modern. </p> </div> </div> <div class="ev-schedule-box"> <div class="ev-schedule-time"> 13.00 WIB </div> <div class="ev-schedule-content"> <h3>AI & Future Technology</h3> <p> Pembahasan teknologi AI terbaru dan dampaknya untuk bisnis digital. </p> </div> </div> <div class="ev-schedule-box"> <div class="ev-schedule-time"> 16.00 WIB </div> <div class="ev-schedule-content"> <h3>Closing Session</h3> <p> Q&A, hadiah event, dan penutupan acara utama. </p> </div> </div> </section>  <section class="ev-cta" id="contact"> <h2> Jangan Sampai Ketinggalan! </h2> <p> Segera amankan tiket event terbesar tahun ini dan dapatkan pengalaman belajar digital yang seru, modern, dan inspiratif. </p> <a href="#" class="ev-btn ev-btn-primary"> Pesan Tiket Sekarang </a> </section>  <footer class="ev-footer"> <div> © 2026 Creative Digital Conference </div> <div class="ev-social"> <a href="#">FB</a> <a href="#">IG</a> <a href="#">YT</a> <a href="#">TT</a> </div> </footer> </div> <script> const targetDate = new Date("Dec 25, 2026 08:00:00").getTime(); const countdown = setInterval(function(){ const now = new Date().getTime(); const distance = targetDate - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById("days").innerHTML = days; document.getElementById("hours").innerHTML = hours; document.getElementById("minutes").innerHTML = minutes; document.getElementById("seconds").innerHTML = seconds; if(distance < 0){ clearInterval(countdown); document.getElementById("days").innerHTML = "00"; document.getElementById("hours").innerHTML = "00"; document.getElementById("minutes").innerHTML = "00"; document.getElementById("seconds").innerHTML = "00"; } },1000); </script> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

7. Landing Page Startup

Startup biasanya memakai desain modern dengan warna clean dan section yang rapi.

Biasanya ada:

Hero section
Fitur
Pricing
FAQ
Footer

Contoh Kode Script Landing Page Start up Full HTML:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Startup </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>StartupX - Solusi Digital Modern</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Poppins',sans-serif; background:#0f172a; color:#fff; overflow-x:hidden; } a{ text-decoration:none; } .container{ width:90%; max-width:1200px; margin:auto; } header{ padding:20px 0; position:sticky; top:0; background:rgba(15,23,42,.9); backdrop-filter:blur(10px); z-index:1000; } .navbar{ display:flex; justify-content:space-between; align-items:center; } .logo{ font-size:28px; font-weight:700; color:#38bdf8; } .menu{ display:flex; gap:25px; } .menu a{ color:#fff; font-size:15px; transition:.3s; } .menu a:hover{ color:#38bdf8; } .btn{ padding:12px 24px; background:#38bdf8; border-radius:10px; color:#fff; font-weight:600; display:inline-block; transition:.3s; } .btn:hover{ transform:translateY(-3px); background:#0ea5e9; } .hero{ padding:90px 0; } .hero-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; } .hero h1{ font-size:55px; line-height:1.2; margin-bottom:20px; } .hero p{ color:#cbd5e1; line-height:1.8; margin-bottom:30px; } .hero-image{ background:linear-gradient(135deg,#38bdf8,#8b5cf6); padding:30px; border-radius:25px; box-shadow:0 20px 50px rgba(0,0,0,.4); } .dashboard{ background:#fff; border-radius:20px; padding:20px; color:#111; } .top-bar{ display:flex; gap:8px; margin-bottom:20px; } .dot{ width:12px; height:12px; border-radius:50%; } .red{background:#ef4444;} .yellow{background:#facc15;} .green{background:#22c55e;} .card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px; } .card{ background:#f1f5f9; padding:20px; border-radius:15px; } .card h3{ font-size:26px; margin-bottom:5px; } .features{ padding:80px 0; background:#111827; } .section-title{ text-align:center; margin-bottom:50px; } .section-title h2{ font-size:40px; margin-bottom:10px; } .section-title p{ color:#cbd5e1; } .feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } .feature-box{ background:#1e293b; padding:30px; border-radius:20px; transition:.3s; } .feature-box:hover{ transform:translateY(-10px); } .feature-icon{ font-size:45px; margin-bottom:20px; } .feature-box h3{ margin-bottom:15px; } .feature-box p{ color:#cbd5e1; line-height:1.7; } .stats{ padding:80px 0; } .stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; } .stat-box{ background:#1e293b; padding:35px; border-radius:20px; text-align:center; } .stat-box h2{ font-size:45px; color:#38bdf8; margin-bottom:10px; } .cta{ padding:90px 0; text-align:center; background:linear-gradient(135deg,#2563eb,#7c3aed); } .cta h2{ font-size:45px; margin-bottom:20px; } .cta p{ max-width:700px; margin:auto; line-height:1.8; margin-bottom:30px; } footer{ padding:30px 0; text-align:center; background:#020617; color:#94a3b8; } @media(max-width:900px){ .hero-wrap{ grid-template-columns:1fr; } .hero h1{ font-size:38px; } .menu{ display:none; } } </style> </head> <body> <header> <div class="container navbar"> <div class="logo">StartupX</div> <div class="menu"> <a href="#">Home</a> <a href="#">Features</a> <a href="#">Pricing</a> <a href="#">About</a> <a href="#">Contact</a> </div> <a href="#" class="btn">Get Started</a> </div> </header> <section class="hero"> <div class="container hero-wrap"> <div> <h1>Bangun Startup Digital Modern Lebih Cepat</h1> <p> Platform startup all-in-one untuk membantu bisnis berkembang lebih cepat, aman, dan profesional dengan teknologi cloud terbaru. </p> <a href="#" class="btn">Mulai Sekarang</a> </div> <div class="hero-image"> <div class="dashboard"> <div class="top-bar"> <div class="dot red"></div> <div class="dot yellow"></div> <div class="dot green"></div> </div> <div class="card-grid"> <div class="card"> <h3>24K</h3> <p>Users</p> </div> <div class="card"> <h3>98%</h3> <p>Success</p> </div> <div class="card"> <h3>12M</h3> <p>Revenue</p> </div> <div class="card"> <h3>4.9</h3> <p>Rating</p> </div> </div> </div> </div> </div> </section> <section class="features"> <div class="container"> <div class="section-title"> <h2>Kenapa Memilih Kami?</h2> <p>Fitur premium untuk startup modern.</p> </div> <div class="feature-grid"> <div class="feature-box"> <div class="feature-icon">⚡</div> <h3>Super Cepat</h3> <p>Optimasi performa maksimal dengan server cloud modern dan stabil.</p> </div> <div class="feature-box"> <div class="feature-icon">🔒</div> <h3>Keamanan Tinggi</h3> <p>Data bisnis terlindungi dengan sistem keamanan modern.</p> </div> <div class="feature-box"> <div class="feature-icon">📊</div> <h3>Analytics Real Time</h3> <p>Monitor performa startup secara realtime dari dashboard.</p> </div> <div class="feature-box"> <div class="feature-icon">🌎</div> <h3>Global Access</h3> <p>Akses platform kapan saja dan dimana saja tanpa batas.</p> </div> </div> </div> </section> <section class="stats"> <div class="container"> <div class="stats-grid"> <div class="stat-box"> <h2>50K+</h2> <p>Pengguna Aktif</p> </div> <div class="stat-box"> <h2>120+</h2> <p>Partner Startup</p> </div> <div class="stat-box"> <h2>99%</h2> <p>Server Uptime</p> </div> <div class="stat-box"> <h2>24/7</h2> <p>Support Team</p> </div> </div> </div> </section> <section class="cta"> <div class="container"> <h2>Siap Mengembangkan Startup Anda?</h2> <p> Gabung sekarang dan rasakan pengalaman membangun bisnis digital modern dengan sistem yang cepat dan profesional. </p> <a href="#" class="btn">Daftar Gratis</a> </div> </section> <footer> © 2026 StartupX. All Rights Reserved. </footer> </body> </html> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

8. Landing Page Download Tools

Jenis ini cocok buat situs generator, converter, downloader, dan tools lainnya.

Pastikan tombol download atau generate terlihat jelas supaya user tidak bingung.

Contoh Kode Script Landing Page Download Tools Full HTML:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Download Tools </div> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Download Tools Premium</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Poppins',sans-serif; background:#f8fafc; color:#111827; } .container{ width:90%; max-width:1200px; margin:auto; } header{ padding:20px 0; background:#fff; box-shadow:0 2px 15px rgba(0,0,0,.05); position:sticky; top:0; z-index:1000; } .navbar{ display:flex; justify-content:space-between; align-items:center; } .logo{ font-size:28px; font-weight:700; color:#2563eb; } .menu{ display:flex; gap:25px; } .menu a{ text-decoration:none; color:#111827; font-weight:500; } .hero{ padding:90px 0; } .hero-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; } .hero h1{ font-size:52px; line-height:1.2; margin-bottom:20px; } .hero p{ line-height:1.8; color:#475569; margin-bottom:30px; } .btn{ display:inline-block; padding:14px 28px; background:#2563eb; color:#fff; border-radius:12px; text-decoration:none; font-weight:600; transition:.3s; } .btn:hover{ transform:translateY(-4px); } .mockup{ background:#fff; padding:25px; border-radius:25px; box-shadow:0 20px 40px rgba(0,0,0,.08); } .tool-box{ display:flex; justify-content:space-between; align-items:center; padding:18px; border:1px solid #e2e8f0; border-radius:15px; margin-bottom:15px; } .tool-left{ display:flex; align-items:center; gap:15px; } .icon{ width:55px; height:55px; border-radius:15px; background:#dbeafe; display:flex; align-items:center; justify-content:center; font-size:24px; } .download-btn{ padding:10px 18px; background:#2563eb; color:#fff; border-radius:10px; text-decoration:none; font-size:14px; } .features{ padding:80px 0; } .section-title{ text-align:center; margin-bottom:50px; } .section-title h2{ font-size:40px; margin-bottom:10px; } .feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } .feature-box{ background:#fff; padding:30px; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,.05); } .feature-box h3{ margin:15px 0; } .feature-box p{ line-height:1.7; color:#64748b; } .cta{ padding:90px 0; background:#2563eb; text-align:center; color:#fff; } .cta h2{ font-size:45px; margin-bottom:20px; } .cta p{ max-width:700px; margin:auto; line-height:1.8; margin-bottom:30px; } footer{ padding:30px 0; background:#fff; text-align:center; color:#64748b; } @media(max-width:900px){ .hero-wrap{ grid-template-columns:1fr; } .hero h1{ font-size:38px; } .menu{ display:none; } } </style> </head> <body> <header> <div class="container navbar"> <div class="logo">ToolsHub</div> <div class="menu"> <a href="#">Home</a> <a href="#">Tools</a> <a href="#">Features</a> <a href="#">Support</a> </div> </div> </header> <section class="hero"> <div class="container hero-wrap"> <div> <h1>Download Tools Gratis & Premium</h1> <p> Temukan berbagai tools modern untuk kebutuhan developer, blogger, designer, hingga digital marketing dalam satu platform. </p> <a href="#" class="btn">Mulai Download</a> </div> <div class="mockup"> <div class="tool-box"> <div class="tool-left"> <div class="icon">🛠️</div> <div> <h3>SEO Tools</h3> <p>Version 3.2</p> </div> </div> <a href="#" class="download-btn">Download</a> </div> <div class="tool-box"> <div class="tool-left"> <div class="icon">⚡</div> <div> <h3>Speed Checker</h3> <p>Version 5.1</p> </div> </div> <a href="#" class="download-btn">Download</a> </div> <div class="tool-box"> <div class="tool-left"> <div class="icon">🎨</div> <div> <h3>Image Optimizer</h3> <p>Version 2.7</p> </div> </div> <a href="#" class="download-btn">Download</a> </div> </div> </div> </section> <section class="features"> <div class="container"> <div class="section-title"> <h2>Fitur Platform</h2> <p>Semua kebutuhan tools dalam satu tempat.</p> </div> <div class="feature-grid"> <div class="feature-box"> <h3>🚀 Fast Download</h3> <p>Kecepatan download tinggi dengan server cloud premium.</p> </div> <div class="feature-box"> <h3>🔒 Aman Digunakan</h3> <p>Semua tools telah dicek dan aman untuk digunakan.</p> </div> <div class="feature-box"> <h3>📦 Update Rutin</h3> <p>Versi tools selalu diperbarui secara berkala.</p> </div> <div class="feature-box"> <h3>💎 Premium UI</h3> <p>Tampilan modern dan nyaman di semua perangkat.</p> </div> </div> </div> </section> <section class="cta"> <div class="container"> <h2>Download Tools Favorit Anda Sekarang</h2> <p> Akses berbagai tools keren secara gratis dan premium hanya dalam satu klik. </p> <a href="#" class="btn" style="background:#fff;color:#2563eb"> Download Sekarang </a> </div> </section> <footer> © 2026 ToolsHub. All Rights Reserved. </footer> </body> </html> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

9. Landing Page Toko Online

Bisa dipakai buat jualan fashion, skincare, makanan, atau produk fisik lainnya.

Bagian	Fungsi
Hero Banner	Menarik perhatian visitor
Produk Unggulan	Menampilkan produk terbaik
Testimoni	Meningkatkan kepercayaan
CTA	Mendorong pembelian

Contoh Kode Script Landing Page Toko Online Full HTML:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Toko Online </div> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:Arial,sans-serif; background:#f5f5f5; color:#222; } a{ text-decoration:none; } img{ max-width:100%; display:block; } /* HEADER */ .header{ background:#111; color:#fff; padding:15px 20px; position:sticky; top:0; z-index:999; } .nav{ max-width:1200px; margin:auto; display:flex; justify-content:space-between; align-items:center; } .logo{ font-size:26px; font-weight:bold; color:#00d084; } .menu{ display:flex; gap:20px; } .menu a{ color:#fff; font-size:15px; } /* HERO */ .hero{ background:linear-gradient(135deg,#00d084,#0099ff); color:#fff; padding:80px 20px; } .hero-wrap{ max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .hero h1{ font-size:48px; margin-bottom:20px; line-height:1.2; } .hero p{ font-size:18px; margin-bottom:25px; line-height:1.7; } .btn{ display:inline-block; padding:14px 28px; background:#111; color:#fff; border-radius:8px; font-weight:bold; } /* CATEGORY */ .section{ padding:70px 20px; } .container{ max-width:1200px; margin:auto; } .title{ text-align:center; font-size:34px; margin-bottom:15px; } .desc{ text-align:center; color:#666; margin-bottom:40px; } .category{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; } .cat-box{ background:#fff; padding:30px; border-radius:14px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.08); transition:.3s; } .cat-box:hover{ transform:translateY(-6px); } .cat-icon{ font-size:42px; margin-bottom:15px; } /* PRODUCT */ .products{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } .product{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.08); transition:.3s; } .product:hover{ transform:translateY(-6px); } .product img{ width:100%; height:230px; object-fit:cover; } .product-body{ padding:20px; } .product-title{ font-size:20px; margin-bottom:10px; } .price{ color:#00a86b; font-size:24px; font-weight:bold; margin-bottom:15px; } .buy-btn{ display:block; text-align:center; padding:12px; background:#00d084; color:#fff; border-radius:8px; font-weight:bold; } /* PROMO */ .promo{ background:#111; color:#fff; border-radius:20px; padding:50px 30px; text-align:center; } .promo h2{ font-size:38px; margin-bottom:15px; } .promo p{ color:#ccc; margin-bottom:25px; line-height:1.7; } /* TESTI */ .testi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; } .testi-box{ background:#fff; padding:25px; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.08); } .testi-box p{ color:#555; line-height:1.7; margin-bottom:15px; } .user{ font-weight:bold; color:#111; } /* FOOTER */ .footer{ background:#111; color:#fff; padding:50px 20px; margin-top:70px; } .footer-wrap{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:30px; } .footer h3{ margin-bottom:15px; } .footer p, .footer a{ color:#bbb; line-height:1.8; font-size:14px; } .copy{ text-align:center; color:#aaa; margin-top:40px; font-size:14px; } /* RESPONSIVE */ @media(max-width:768px){ .hero-wrap{ grid-template-columns:1fr; text-align:center; } .hero h1{ font-size:34px; } .menu{ display:none; } } </style>  <header class="header"> <div class="nav"> <div class="logo">TOKO.ID</div> <div class="menu"> <a href="#">Home</a> <a href="#">Produk</a> <a href="#">Promo</a> <a href="#">Testimoni</a> <a href="#">Kontak</a> </div> </div> </header>  <section class="hero"> <div class="hero-wrap"> <div> <h1>Belanja Produk Keren Harga Terjangkau</h1> <p> Temukan berbagai produk pilihan dengan kualitas terbaik, desain modern dan pengiriman cepat ke seluruh Indonesia. </p> <a href="#" class="btn">Belanja Sekarang</a> </div> <div> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=1200&auto=format&fit=crop"> </div> </div> </section>  <section class="section"> <div class="container"> <h2 class="title">Kategori Produk</h2> <p class="desc"> Pilih kategori favorit sesuai kebutuhan anda </p> <div class="category"> <div class="cat-box"> <div class="cat-icon">📱</div> <h3>Gadget</h3> </div> <div class="cat-box"> <div class="cat-icon">⌚</div> <h3>Aksesoris</h3> </div> <div class="cat-box"> <div class="cat-icon">🎧</div> <h3>Audio</h3> </div> <div class="cat-box"> <div class="cat-icon">💻</div> <h3>Laptop</h3> </div> </div> </div> </section>  <section class="section" style="background:#fff"> <div class="container"> <h2 class="title">Produk Populer</h2> <p class="desc"> Produk terbaik yang paling banyak dibeli pelanggan </p> <div class="products"> <div class="product"> <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=1200&auto=format&fit=crop"> <div class="product-body"> <h3 class="product-title">Sepatu Sneakers</h3> <div class="price">Rp299.000</div> <a href="#" class="buy-btn">Beli Sekarang</a> </div> </div> <div class="product"> <img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?q=80&w=1200&auto=format&fit=crop"> <div class="product-body"> <h3 class="product-title">Smartphone Premium</h3> <div class="price">Rp2.499.000</div> <a href="#" class="buy-btn">Beli Sekarang</a> </div> </div> <div class="product"> <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=1200&auto=format&fit=crop"> <div class="product-body"> <h3 class="product-title">Headset Gaming</h3> <div class="price">Rp399.000</div> <a href="#" class="buy-btn">Beli Sekarang</a> </div> </div> <div class="product"> <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?q=80&w=1200&auto=format&fit=crop"> <div class="product-body"> <h3 class="product-title">Kamera Digital</h3> <div class="price">Rp1.799.000</div> <a href="#" class="buy-btn">Beli Sekarang</a> </div> </div> </div> </div> </section>  <section class="section"> <div class="container"> <div class="promo"> <h2>Promo Diskon 50%</h2> <p> Nikmati promo spesial hari ini untuk semua produk pilihan. Buruan sebelum promo berakhir. </p> <a href="#" class="btn">Lihat Promo</a> </div> </div> </section>  <section class="section"> <div class="container"> <h2 class="title">Testimoni Pelanggan</h2> <p class="desc"> Review asli dari pelanggan toko online kami </p> <div class="testi"> <div class="testi-box"> <p> “Produknya bagus dan pengiriman cepat banget, recommended untuk belanja online.” </p> <div class="user">- Andi</div> </div> <div class="testi-box"> <p> “Harga murah kualitas premium, tampilannya juga keren.” </p> <div class="user">- Rina</div> </div> <div class="testi-box"> <p> “Sudah beberapa kali order dan selalu puas dengan pelayanannya.” </p> <div class="user">- Dimas</div> </div> </div> </div> </section>  <footer class="footer"> <div class="footer-wrap"> <div> <h3>TOKO.ID</h3> <p> Toko online modern dengan produk pilihan terbaik dan pelayanan cepat. </p> </div> <div> <h3>Menu</h3> <p><a href="#">Home</a></p> <p><a href="#">Produk</a></p> <p><a href="#">Promo</a></p> <p><a href="#">Kontak</a></p> </div> <div> <h3>Kontak</h3> <p>Email : admin@toko.com</p> <p>Whatsapp : 0812-3456-7890</p> <p>Instagram : @toko.id</p> </div> </div> <div class="copy"> © 2026 TOKO.ID - All Rights Reserved </div> </footer> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

10. Landing Page Personal Branding

Biasanya dipakai content creator, influencer, dan blogger. Tujuannya untuk memperkenalkan diri dan mengarahkan pengunjung ke media sosial atau layanan.

Contoh sederhana:

<h1>Halo Saya Ayi</h1>
<p>Blogger & Web Developer</p>
<a href="#">Hubungi Saya</a>

Contoh Kode Script Landing Page Personal Branding Full HTML:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Personal Branding </div> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div id="personal-branding-page"> <style> *{ margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; } body{ font-family:Arial,sans-serif; background:#f5f7fb; color:#222; } a{ text-decoration:none; } #personal-branding-page{ width:100%; overflow:hidden; } /* NAVBAR */ .pb-navbar{ position:fixed; top:0; left:0; width:100%; padding:18px 8%; display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); z-index:999; box-shadow:0 2px 10px rgba(0,0,0,.05); } .pb-logo{ font-size:26px; font-weight:bold; color:#111; } .pb-menu{ display:flex; gap:25px; } .pb-menu a{ color:#333; font-size:15px; font-weight:bold; transition:.3s; } .pb-menu a:hover{ color:#4f46e5; } /* HERO */ .pb-hero{ padding:150px 8% 100px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; background:linear-gradient(135deg,#eef2ff,#ffffff); } .pb-badge{ display:inline-block; padding:8px 16px; background:#4f46e5; color:#fff; border-radius:50px; font-size:13px; margin-bottom:20px; } .pb-title{ font-size:58px; line-height:1.1; margin-bottom:20px; font-weight:900; color:#111827; } .pb-title span{ color:#4f46e5; } .pb-desc{ font-size:18px; line-height:1.8; color:#555; margin-bottom:35px; } .pb-btns{ display:flex; gap:15px; flex-wrap:wrap; } .pb-btn{ padding:14px 26px; border-radius:12px; font-weight:bold; font-size:15px; display:inline-block; transition:.3s; } .pb-btn-primary{ background:#4f46e5; color:#fff; box-shadow:0 10px 25px rgba(79,70,229,.3); } .pb-btn-primary:hover{ transform:translateY(-4px); } .pb-btn-outline{ border:2px solid #4f46e5; color:#4f46e5; background:#fff; } .pb-btn-outline:hover{ background:#4f46e5; color:#fff; } .pb-hero-img{ position:relative; } .pb-hero-img img{ width:100%; border-radius:30px; box-shadow:0 20px 50px rgba(0,0,0,.15); } /* STATS */ .pb-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:60px 8%; margin-top:-40px; } .pb-stat-box{ background:#fff; padding:30px; border-radius:20px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.06); } .pb-stat-box h3{ font-size:35px; color:#4f46e5; margin-bottom:10px; } .pb-stat-box p{ color:#666; font-size:15px; } /* ABOUT */ .pb-about{ padding:100px 8%; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .pb-about img{ width:100%; border-radius:25px; } .pb-section-title{ font-size:42px; margin-bottom:20px; color:#111827; } .pb-section-title span{ color:#4f46e5; } .pb-about p{ font-size:17px; line-height:1.9; color:#555; margin-bottom:20px; } /* SKILLS */ .pb-skills{ padding:100px 8%; background:#fff; } .pb-center{ text-align:center; margin-bottom:60px; } .pb-skill-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; } .pb-skill-box{ padding:35px; border-radius:20px; background:#f7f8fc; transition:.3s; } .pb-skill-box:hover{ transform:translateY(-8px); background:#4f46e5; color:#fff; } .pb-skill-box h3{ margin:15px 0; font-size:22px; } .pb-skill-box p{ line-height:1.7; font-size:15px; } /* PORTFOLIO */ .pb-portfolio{ padding:100px 8%; background:#f5f7fb; } .pb-portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; } .pb-project{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.06); transition:.3s; } .pb-project:hover{ transform:translateY(-8px); } .pb-project img{ width:100%; height:220px; object-fit:cover; } .pb-project-content{ padding:25px; } .pb-project-content h3{ margin-bottom:12px; font-size:22px; } .pb-project-content p{ font-size:15px; color:#666; line-height:1.7; } /* TESTIMONI */ .pb-testi{ padding:100px 8%; background:#fff; } .pb-testi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; } .pb-testi-box{ padding:35px; border-radius:20px; background:#f7f8fc; } .pb-testi-box p{ line-height:1.8; margin-bottom:20px; color:#555; } .pb-testi-user{ display:flex; align-items:center; gap:15px; } .pb-testi-user img{ width:60px; height:60px; border-radius:50%; object-fit:cover; } /* CTA */ .pb-cta{ padding:100px 8%; text-align:center; background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; } .pb-cta h2{ font-size:48px; margin-bottom:20px; } .pb-cta p{ font-size:18px; max-width:700px; margin:auto auto 35px; line-height:1.8; } /* FOOTER */ .pb-footer{ padding:40px 8%; background:#111827; color:#fff; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; } .pb-social{ display:flex; gap:15px; } .pb-social a{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#1f2937; color:#fff; font-size:18px; transition:.3s; } .pb-social a:hover{ background:#4f46e5; } /* RESPONSIVE */ @media(max-width:900px){ .pb-hero, .pb-about{ grid-template-columns:1fr; } .pb-title{ font-size:42px; } .pb-stats{ grid-template-columns:repeat(2,1fr); } .pb-navbar{ padding:15px 5%; } .pb-hero, .pb-about, .pb-skills, .pb-portfolio, .pb-testi, .pb-cta{ padding-left:5%; padding-right:5%; } } @media(max-width:600px){ .pb-menu{ display:none; } .pb-title{ font-size:34px; } .pb-section-title{ font-size:32px; } .pb-cta h2{ font-size:34px; } .pb-stats{ grid-template-columns:1fr; } } </style>  <div class="pb-navbar"> <div class="pb-logo">AYI BRAND</div> <div class="pb-menu"> <a href="#about">About</a> <a href="#skills">Skills</a> <a href="#portfolio">Portfolio</a> <a href="#testi">Testimoni</a> <a href="#contact">Contact</a> </div> </div>  <section class="pb-hero"> <div> <div class="pb-badge"> PERSONAL BRANDING </div> <h1 class="pb-title"> Bangun <span>Personal Branding</span> Profesional Anda </h1> <p class="pb-desc"> Saya membantu bisnis, kreator, dan personal brand tampil lebih modern, profesional, dan terpercaya melalui desain landing page, website, serta strategi digital branding. </p> <div class="pb-btns"> <a href="#" class="pb-btn pb-btn-primary"> Mulai Sekarang </a> <a href="#portfolio" class="pb-btn pb-btn-outline"> Lihat Portfolio </a> </div> </div> <div class="pb-hero-img"> <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop" alt="Personal Branding"> </div> </section>  <div class="pb-stats"> <div class="pb-stat-box"> <h3>250+</h3> <p>Project Selesai</p> </div> <div class="pb-stat-box"> <h3>120+</h3> <p>Client Aktif</p> </div> <div class="pb-stat-box"> <h3>5 Tahun</h3> <p>Pengalaman</p> </div> <div class="pb-stat-box"> <h3>98%</h3> <p>Kepuasan Client</p> </div> </div>  <section class="pb-about" id="about"> <div> <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop"> </div> <div> <h2 class="pb-section-title"> Tentang <span>Saya</span> </h2> <p> Halo, saya adalah seorang digital creator dan web designer yang fokus membantu personal brand tampil lebih kuat di internet. Dengan desain modern dan strategi visual yang tepat, saya membantu meningkatkan kepercayaan audience dan calon client. </p> <p> Landing page personal branding sangat penting untuk memperkuat identitas online, meningkatkan profesionalitas, dan mempermudah audience mengenal siapa Anda serta layanan yang Anda tawarkan. </p> <a href="#" class="pb-btn pb-btn-primary"> Download CV </a> </div> </section>  <section class="pb-skills" id="skills"> <div class="pb-center"> <h2 class="pb-section-title"> Keahlian <span>Utama</span> </h2> <p> Berikut beberapa skill yang saya fokuskan dalam membangun personal branding digital. </p> </div> <div class="pb-skill-grid"> <div class="pb-skill-box"> <h3>UI/UX Design</h3> <p> Membuat tampilan website modern, responsif, dan nyaman digunakan. </p> </div> <div class="pb-skill-box"> <h3>Landing Page</h3> <p> Mendesain landing page profesional dengan konversi tinggi. </p> </div> <div class="pb-skill-box"> <h3>SEO Optimization</h3> <p> Optimasi website agar mudah ditemukan di Google dan mesin pencari. </p> </div> <div class="pb-skill-box"> <h3>Content Branding</h3> <p> Membangun citra personal brand melalui strategi konten digital. </p> </div> </div> </section>  <section class="pb-portfolio" id="portfolio"> <div class="pb-center"> <h2 class="pb-section-title"> Portfolio <span>Terbaru</span> </h2> <p> Beberapa project dan karya digital yang pernah saya kerjakan. </p> </div> <div class="pb-portfolio-grid"> <div class="pb-project"> <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=1200&auto=format&fit=crop"> <div class="pb-project-content"> <h3>Website Branding</h3> <p> Website profesional untuk meningkatkan branding bisnis dan personal profile. </p> </div> </div> <div class="pb-project"> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop"> <div class="pb-project-content"> <h3>Landing Page Premium</h3> <p> Landing page modern dengan desain clean dan fokus konversi. </p> </div> </div> <div class="pb-project"> <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1200&auto=format&fit=crop"> <div class="pb-project-content"> <h3>Digital Campaign</h3> <p> Strategi digital marketing untuk meningkatkan audience dan engagement. </p> </div> </div> </div> </section>  <section class="pb-testi" id="testi"> <div class="pb-center"> <h2 class="pb-section-title"> Apa Kata <span>Client</span> </h2> </div> <div class="pb-testi-grid"> <div class="pb-testi-box"> <p> “Desainnya sangat modern dan profesional. Branding bisnis saya jadi lebih terpercaya.” </p> <div class="pb-testi-user"> <img src="https://randomuser.me/api/portraits/men/32.jpg"> <div> <h4>Rizky</h4> <small>Entrepreneur</small> </div> </div> </div> <div class="pb-testi-box"> <p> “Landing page sangat cepat, responsif, dan tampil premium di semua device.” </p> <div class="pb-testi-user"> <img src="https://randomuser.me/api/portraits/women/44.jpg"> <div> <h4>Nadya</h4> <small>Content Creator</small> </div> </div> </div> <div class="pb-testi-box"> <p> “Personal branding saya meningkat drastis setelah menggunakan website ini.” </p> <div class="pb-testi-user"> <img src="https://randomuser.me/api/portraits/men/76.jpg"> <div> <h4>Andi</h4> <small>Freelancer</small> </div> </div> </div> </div> </section>  <section class="pb-cta" id="contact"> <h2> Siap Membangun Personal Branding? </h2> <p> Bangun citra profesional Anda sekarang juga dengan website modern, cepat, dan SEO friendly. </p> <a href="#" class="pb-btn pb-btn-primary" style="background:#fff;color:#4f46e5"> Hubungi Saya </a> </section>  <footer class="pb-footer"> <div> © 2026 Personal Branding. All Rights Reserved. </div> <div class="pb-social"> <a href="#">FB</a> <a href="#">IG</a> <a href="#">YT</a> <a href="#">TT</a> </div> </footer> </div> Code by: <style> @keyframes shine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } </style> <a href="https://ayi-service.blogspot.com" target="_blank" style="background: linear-gradient(60deg, #333, #222, #eee); background-size: 300% 10%; color: #fff; border: none; padding: 8px 18px; font-size: 14px; text-decoration: none; border-radius: 10px; cursor: pointer; animation: shine 5s linear infinite;">Mang Ayi Service</a>

Tips Membuat Landing Page SEO Friendly

Gunakan heading H1 hanya satu
Tambahkan meta description
Optimasi gambar
Gunakan font sederhana
Hindari script terlalu berat
Buat tampilan mobile friendly
Gunakan internal link
Percepat loading halaman

Google sekarang lebih memprioritaskan website cepat dan nyaman di perangkat mobile.

Kesimpulan

Landing page tidak harus ribet dan penuh efek mahal. Yang penting cepat, jelas, responsif, dan nyaman dibaca pengunjung.

Kalau desain sederhana tapi isi jelas dan CTA kuat, hasilnya justru sering lebih bagus dibanding desain terlalu ramai.

Semoga 10 contoh landing page di atas bisa jadi inspirasi buat blog atau website anda.

Mulai Buat Landing Page

Search This Blog

Blog Responsive 2015

10 Contoh Landing Page Responsive Siap Copy Paste

10 Contoh Landing Page Responsif, Keren & Ramah SEO

1. Landing Page Produk Digital

2. Landing Page Jasa

3. Landing Page Affiliate

4. Landing Page Portofolio

5. Landing Page Aplikasi

6. Landing Page Event

7. Landing Page Startup

8. Landing Page Download Tools

9. Landing Page Toko Online

10. Landing Page Personal Branding

Tips Membuat Landing Page SEO Friendly

Kesimpulan

Comments

Post a Comment

Popular posts from this blog

Ternyata mudah menghapus samsung akun yang nyangkut karena lupa password

Download Script Landing Page CPA Movie Free

Acunetix v9.0 full Version

Contoh Template Movie & TV Series Full HTML, CSS, JAVASCRIPT

50 Contoh Prompt untuk membuat video menggunakan CapCut

Listing Crypto Terbaru 2026: Daftar Coin Baru, Tren, dan Cara Menemukannya

Kode Script Form kontak blog

Kumpulan Do'a sehari hari

Cara Mengaktifkan kembali akun Youtube yang kena Suspend