hasil pencarian Script Landing Page UMKM
kode Script membuat Landing Page UMKM terbaru!
Salin dan tempel kode Script Landing Page UMKM ini di blog kamu,lihat kode script di bawah..
klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamster Mainan Anak</title>
<style>
body {
margin: 0;
font-family: 'Comic Sans MS', cursive, sans-serif;
background: linear-gradient(to bottom, #ffe0e6, #fff7d9);
color: #333;
}
header {
text-align: center;
padding: 20px;
background: #ff85a2;
color: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
header h1 {
margin: 0;
font-size: 2.2em;
}
.hero {
text-align: center;
padding: 30px;
}
.hero img {
width: 200px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.hero h2 {
font-size: 1.8em;
color: #ff4081;
margin-top: 15px;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
padding: 20px;
}
.card {
background: white;
padding: 15px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
}
.card img {
width: 100%;
border-radius: 12px;
}
.price {
font-size: 1.4em;
color: #ff4081;
margin: 10px 0;
}
.btn {
display: inline-block;
background: #ff4081;
color: white;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
transition: background 0.3s;
}
.btn:hover {
background: #e73370;
}
footer {
text-align: center;
padding: 15px;
background: #ff85a2;
color: white;
font-size: 0.9em;
}
</style>
</head>
<body>
<header>
<h1>🐹 Hamster Mainan Anak</h1>
<p>Lucu, Menggemaskan, dan Aman untuk Anak-anak</p>
</header>
<section class="hero">
<img src="https://i.ibb.co/8XczMx0/hamster-toy.png" alt="Hamster Mainan">
<h2>Bikin Anak Senang dengan Hamster Mainan!</h2>
<a href="#produk" class="btn">Lihat Produk</a>
</section>
<section id="produk" class="features">
<div class="card">
<img src="https://i.ibb.co/7yF9VYm/hamster1.jpg" alt="Hamster Pink">
<h3>Hamster Pink</h3>
<p class="price">Rp 45.000</p>
<a href="https://wa.me/6281234567890?text=Saya%20mau%20beli%20Hamster%20Pink" class="btn">Beli Sekarang</a>
</div>
<div class="card">
<img src="https://i.ibb.co/MpWHxNM/hamster2.jpg" alt="Hamster Coklat">
<h3>Hamster Coklat</h3>
<p class="price">Rp 45.000</p>
<a href="https://wa.me/6281234567890?text=Saya%20mau%20beli%20Hamster%20Coklat" class="btn">Beli Sekarang</a>
</div>
<div class="card">
<img src="https://i.ibb.co/sR9pMcP/hamster3.jpg" alt="Hamster Putih">
<h3>Hamster Putih</h3>
<p class="price">Rp 45.000</p>
<a href="https://wa.me/6281234567890?text=Saya%20mau%20beli%20Hamster%20Putih" class="btn">Beli Sekarang</a>
</div>
</section>
<footer>
© 2025 Hamster Mainan Anak | Dibuat dengan ❤️
</footer>
</body>
</html>
Komentar untuk Script Landing Page UMKM