10 Contoh Landing Page Responsif & Ramah SEO

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

Apa kabar semuanya?, harapan saya semoga kita selalu di dalam lindungan Allah SWT, di beri kesehatan, umur panjang dan keberkahan hidup serta bisa khusyu dalam ibadah.Aamiin. seperti pada postingan yang lalu tentang 10 Contoh Animasi Loading untuk blog,pada kesempatan ini kembali saya corat coret di blog ini hanya sekedar ingin berbagi lagi 10 contoh landing page.

Landing page dari dulu hingga sekarang mungkin sudah menjadi salah satu halaman paling penting buat website (Dalam arti Global entah itu jenis Blogspot, Wordprees, Hosting buildir dsb). Dari hasil searching di om google, sekarang banyang pengembang web yang menggunakan landing page untuk jual produk, jasa, ebook, tools, aplikasi, sampai jasa desain, dll. karena dengan landing page bisa membantu ningkatin pengunjung untuk jadi pembeli.

Cuma masalahnya, untuk sebagian orang masih banyak yang bikin landing page terlalu berat, lemot, dan tampilannya berantakan di HP. Padahal mayoritas pengunjung sekarang datang dari mobile bukan dari motor hehe mksudnya dari handphone ya sob 😁.

Di lansir dari beberapa sumber, katanya Landing page yang bagus itu biasanya punya ciri²:

Loading cepat
Responsif di semua ukuran layar (Layar tancap, Layar datar, Layar cembung sampai Layar kaca 😁)
SEO friendly
Tampilan simpel tapi menarik
Call To Action jelas
Tidak terlalu banyak efek berat

kembali ke bahasan inti, berikut ini 10 Contoh landing page lengkap dengan kode script struktur htmlnya untuk sekedar inpirasi dan bahan belajar edit edit sendiri disaat waktu senggang.

1. Contoh Landing Page Produk Digital

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

<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>

Tips untuk SEO: gunakan judul yang mengandung keyword utama misalkan web anda jualan template: "Template Blogger SEO Responsive".

Untuk Script dan Demo tampilan Landing Page Produk Digital ini bisa anda comot melalui tombol dibawah:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing page Produk Digital </div> <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); } .safelink-aza{ 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="https://ayi-suhendar.blogspot.com/p/contact.html" class="btn" target="_blank"> 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="safelink-aza"> <div class="container"> <p> © 2026 Produk Digital Premium — All Rights Reserved </p> </div> </div>

2. Contoh Landing Page Jasa

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

Penjelasan jasa
Keunggulan
Testimoni
Kontak WhatsApp/Telegram

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

Berikut ini Kode script dan demo tampilannya

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>Berkah Jaya Abadi Teknik | Mang Ayi Service Sukabumi</title>  <meta name="description" content="Mang Ayi Service - Jasa service kulkas, mesin cuci, kipas angin, blender, magic com, water heater. Panggilan & workshop area Sukabumi. Cepat, jujur, bergaransi."> <meta name="keywords" content="service elektronik sukabumi, service kulkas sukabumi, service mesin cuci sukabumi, mang ayi service, berkah jaya abadi teknik"> <meta name="author" content="Berkah Jaya Abadi Teknik">  <meta property="og:title" content="Berkah Jaya Abadi Teknik - Mang Ayi Service"> <meta property="og:description" content="Jasa Service Elektronik Rumah Tangga Sukabumi. Cepat • Jujur • Bergaransi"> <meta property="og:image" content="https://i.imgur.com/4QyKQYF.png"> <meta property="og:url" content="https://NAMABLOGKAMU.blogspot.com/p/service.html"> <meta property="og:type" content="website">  <meta name="twitter:card" content="summary_large_image"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> <style> body{ margin:0; font-family:Poppins,Arial,sans-serif; background:#f2f5f8; color:#222; } .header{ background:linear-gradient(135deg,#0099ff,#00c896); color:#fff; text-align:center; padding:30px 15px; } .header h1{margin:0;font-size:22px;} .header p{margin:6px 0 0;font-size:14px;opacity:.9} .container{ max-width:480px; margin:auto; padding:15px; } .card{ background:#fff; border-radius:16px; padding:15px; margin-bottom:15px; box-shadow:0 4px 12px rgba(0,0,0,.08); } .badge{ background:#00c896; color:#fff; display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; margin-bottom:8px; } .services ul{ margin:5px 0; padding-left:18px; font-size:14px; } .btn-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; } .btn{ display:flex; align-items:center; justify-content:center; gap:6px; padding:11px; border-radius:12px; text-decoration:none; font-size:14px; font-weight:600; color:#fff; } .call{background:#28a745;} .sms{background:#17a2b8;} .wa{background:#25D366;} .telegram{background:#0088cc;} .messenger{background:#006AFF;} .email{background:#6f42c1;} .social{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:10px; } .social a{ text-decoration:none; background:#eee; padding:8px 14px; border-radius:10px; font-size:13px; color:#333; } .footer{ text-align:center; font-size:12px; color:#666; padding:15px; } </style> </head> <body> <div class="header"> <h1>BERKAH JAYA ABADI TEKNIK</h1> <p>Mang Ayi Service • Jasa Service Elektronik Sukabumi</p> </div> <div class="container">  <div class="card"> <span class="badge">🔧 Layanan Profesional</span> <div class="services"> <ul> <li>Service Kulkas / Freezer / Showcase</li> <li>Service Mesin Cuci</li> <li>Service Kipas Angin</li> <li>Service Blender & Magic Com</li> <li>Service Water Heater / Shower</li> <li>Panggilan & Workshop</li> </ul> </div> </div>  <div class="card"> <span class="badge">📞 Hubungi Sekarang</span> <div class="btn-grid"> <a class="btn call" href="tel:+6285295444864">📞 Call</a> <a class="btn sms" href="sms:+6285295444864">💬 SMS</a> <a class="btn wa" href="https://wa.me/6285295444864">🟢 WhatsApp</a> <a class="btn telegram" href="https://t.me/username_telegram">✈️ Telegram</a> <a class="btn messenger" href="https://m.me/username_fb">💙 Messenger</a> <a class="btn email" href="mailto:emailkamu@gmail.com">✉️ Email</a> </div> </div>  <div class="card"> <span class="badge">📍 Lokasi Bengkel</span> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d126731.60428806276!2d106.9023232!3d-6.9664768!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6847d41e47e89f%3A0x7c94ddeb662b2fab!2sMang%20Ayi%20Service!5e0!3m2!1sid!2sid!4v1768571505743!5m2!1sid!2sid" width="100%" height="260" style="border:0;border-radius:14px;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe> </div>  <div class="card"> <span class="badge">🌐 Media Sosial</span> <div class="social"> <a href="https://facebook.com/">Facebook</a> <a href="https://instagram.com/">Instagram</a> <a href="https://tiktok.com/">TikTok</a> <a href="https://maps.google.com/">Google Maps</a> </div> </div> </div> <div class="footer"> © <span id="yr"></span> Berkah Jaya Abadi Teknik — Mang Ayi Service </div> <script> document.getElementById("yr").innerHTML = new Date().getFullYear(); </script> </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. Contoh Landing Page Affiliate

Landing page ini Banyak dipakai blogger dan website untuk promosi produk marketplace, affiliasi bisnis reffereal, affiliasi iklan, dll. Fokus utamanya adalah review singkat dan tombol menuju form daftar/registrasi.

Contoh sederhana:

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

Kode Script dan demo Landing page:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Affiliate </div> <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="https://s.skillup.id/VUEseW" style="display:inline-block;background:#22c55e;color:#fff;padding:18px 40px;border-radius:60px;text-decoration:none;font-size:18px;font-weight:bold" target="_blank"> 🔥 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>

4. Contoh Landing Page Portfolio

Biasanya dipakai freelancer dan web developer untuk menampilkan hasil karya.

Isi penting:

Foto project
Deskripsi singkat
Skill
Kontak

Contoh Kode Script & Demonya:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Portofolio </div> <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:ayiedadevafsun@gmail.com" class="btn"> Contact Me </a> </div> </div> </section> <footer> © 2026 MyPortfolio - All Rights Reserved </footer>

5. Contoh Landing Page Aplikasi

Kalau anda punya aplikasi Android atau tools web, anding page seperti ini cocok banget. Biasanya ada screenshot aplikasi dan tombol download.

Menurut beberapa sumber, untuk rekomendasi gambar saat ini katanya gunakanlah gambar WebP supaya loading lebih cepat dan SEO makin bagus.

Kode lengkap dan Demo Landing page:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing page Aplikasi </div> <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">SERLOK APP</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="https://serlok-app.blogspot.com" target="_blank" class="btn">Download Gratis</a> </div> </div> </section> <footer> <div class="container"> © 2026 SERLOK APP - Landing Page Aplikasi Modern. </div> </footer>

6. Contoh Landing Page Event

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

Contoh simple:

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

Kode script & Demo

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Event </div> <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.Contoh Landing Page Startup

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

Biasanya struktur landind page ada:

Hero section
Fitur
Pricing
FAQ
Footer

Contoh kode dan tampilan :

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. Contoh 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 dan Demo nya:

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

Kode script & Contoh demo landing page toko online:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Toko Online </div> <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. Contoh Landing Page Personal Branding

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

Contoh sederhanya:

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

Kode Script & Demo Landing pagenya:

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Landing Page Personal Branding </div> <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="https://t.me/Ayi_service" 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>

Seperti itulah Contoh contoh dari tampilan lañding page yang bisa di jadikan inspirasi untuk diterapkan di blog atau website yang anda punya sesuai kebutuhan. Semoga salah satunya ada yang cocok dan bisa anda gunakan jadi template atau tema blog anda

Catatan!

Jika di halaman Kode script, anda menemukan notif "Kode tidak ditemukan" , kemungkinan besar anda terlebih dulu sudah menekan tombol Demo Script, jadi tips saya sebelum klik tombol demo, lihat dulu kode scriptnya. Dan jika ada saran ataupun kritik silahkan di sampaikan di kolom komentar.

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.Bahkan untuk saat ini banyak orang pengembang web ataupun para bloggervmenggunakan template AMP, anda pun pasti sudah mengetahuinya Apa itu blog AMP?. penjelasannya bisa anda lihat di halaman tentang Apa Sih Template AMP.

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 seperti blog saya yang loadingnya berat hehe..😁

Akhir kata Terimakasih sudah menyimak artikel ini sampai akhir, Semoga 10 contoh landing page di atas beserta kode scriptnya bisa jadi inspirasi buat blog atau website anda.

Mulai Buat Landing Page

Pertanyaan Umum (FAQ)

Apa yang di maksud dengan Landing zpage?

Landing page adalah halaman web mandiri yang dirancang khusus untuk tujuan pemasaran atau kampanye.

Apa bedanya Landing page dengan Website/Homepage biasa?

kalau Website/Homepage: Memiliki banyak menu, link navigasi, dan informasi luas tentang perusahaan yang mendorong pengunjung untuk menjelajah.

Sedangkan Landing Page: Fokus pada satu tujuan spesifik dengan navigasi minimal agar pengunjung tidak terdistraksi dan langsung mengambil tindakan. .

10 Contoh Landing Page Responsive, Keren & Ramah SEO