Landing page merupakan hal yang sangat penting dalam penjualan sebuah brand atau website, karna hal utama yang akan pertama kali orang lihat, berikut klikMEDIA sajikan beberapa html untuk membuat landing gratis :
Contoh gamabar :
 |
| Landing Page klikMEDIA |
Berikut html nya :
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Landing Page 2</title>
<style>
body {font-family: Arial, sans-serif; background-color: #e0f7fa; margin: 0; padding: 0;}
.container {max-width: 800px; margin: auto; padding: 20px;}
.header {background-color: #00796b; color: white; padding: 20px; text-align: center;}
.content {background-color: white; padding: 20px; margin-top: 10px;}
.footer {background-color: #b2dfdb; padding: 10px; text-align: center;}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Discover Our Products</h1>
<p>Quality you can trust.</p>
</div>
<div class="content">
<h2>Featured Product</h2>
<p>Explore the features and benefits of our top-rated products. Don't miss out!</p>
<img alt="Featured Product" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Contoh.png" style="height: auto; width: 100%;" />
</div>
<div class="footer">
<p>Visit us at <a href="https://www.example2.com">www.example2.com</a></p>
</div>
</div>
</body></html>
Contoh Gambar:
 |
| Gambar Landing Page |
Berikut HTMLnya :
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Landing Page Inspired by klikMEDIA</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}header {background-color: #ffe01b;padding: 20px;text-align: center;}header img {max-width: 200px;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;text-align: center;}h1 {color: #333;}p {color: #555;}.cta-button {background-color: #0073e6;color: #fff;padding: 15px 30px;text-decoration: none;border-radius: 5px;font-size: 18px;display: inline-block;margin-top: 20px;}.features {display: flex;justify-content: space-around;margin-top: 50px;}.feature {background-color: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);width: 3%;}.feature img {max-width: 100px;}<style></head><body><header><img src="logo.png" alt="Logo"></header><div class="container"><h1>Welcome to Our Service</h1><p>Join thousands of happy customers who are using our service to grow their business.</p><a href="https://www.yourwebsite.com/signup" class="cta-button">Get Started</a><div class="features"><div class="feature"><img src="feature1.png" alt="Feature 1"><h2>Feature 1</h2><p>Description of feature 1. Explain how it benefits the user.</p></div><div class="feature"><img src="feature2.png" alt="Feature 2"><h2>Feature 2</h2><p>Description of feature 2. Explain how it benefits the user.</p></div><div class="feature"><img src="feature3.png" alt="Feature 3"><h2>Feature 3</h2><p>Description of feature 3. Explain how it benefits the user.</p></div></div></div></body></html>
.jpeg)
%20(9).jpeg)
.jpeg)