Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hijab Store Coba - Gaya Muslimah Modern</title>
<style>
/* CSS Sederhana untuk Tampilan */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font lebih modern */
margin: 0;
padding: 0;
background-color: #f0f2f5; /* Warna latar belakang lebih lembut */
color: #333;
}
header {
background-color: #5D4037; /* Cokelat Gelap, lebih modern */
color: white;
padding: 15px 0;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
header h1 {
margin: 0;
font-size: 2.8em;
letter-spacing: 1px;
}
nav ul {
list-style: none;
padding: 0;
margin: 10px 0 0;
}
nav ul li {
display: inline;
margin: 0 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #FFDAB9; /* Warna peach untuk hover */
}
.hero {
background-color: #F5DEB3; /* Warna krem hangat */
text-align: center;
padding: 70px 20px;
margin-bottom: 30px;
background-image: url('https://image.pollinations.ai/prompt/hijab%20fashion%20e-commerce%20header%20banner%20with%20elegant%20woman%20in%20hijab,%20soft%20lighting,%20pastel%20colors,%20text%20space'); /* Gambar banner hero */
background-size: cover;
background-position: center;
color: #4B0082; /* Teks lebih kontras */
position: relative;
}
.hero::before { /* Overlay untuk teks lebih jelas */
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.5); /* Overlay putih transparan */
z-index: 0;
}
.hero h2, .hero p, .hero button {
position: relative;
z-index: 1;
color: #4B0082; /* Ungu Gelap */
}
.hero h2 {
font-size: 3em;
margin-bottom: 10px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.hero p {
font-size: 1.2em;
max-width: 600px;
margin: 0 auto 25px;
}
.hero button {
background-color: #6B8E23; /* Hijau Olive */
color: white;
padding: 12px 25px;
border: none;
cursor: pointer;
font-size: 1.2em;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.hero button:hover {
background-color: #556B2F;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
overflow: hidden;
padding: 20px 0 40px;
}
h2.section-title {
text-align: center;
font-size: 2.5em;
margin-bottom: 40px;
color: #5D4037;
position: relative;
}
h2.section-title::after {
content: '';
display: block;
width: 80px;
height: 3px;
background-color: #FF6347;
margin: 10px auto 0;
}
.product-grid {
display: grid; /* Menggunakan grid untuk layout */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Kolom responsif */
gap: 25px;
justify-content: center;
}
.product-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.product-card img {
width: 100%;
height: 280px; /* Tinggi gambar seragam */
object-fit: cover; /* Memastikan gambar mengisi area tanpa terdistorsi */
border-radius: 8px;
margin-bottom: 15px;
border: 1px solid #f0f0f0;
}
.product-card h3 {
font-size: 1.5em;
color: #5D4037;
margin-bottom: 10px;
}
.product-card .price {
font-size: 1.3em;
color: #FF6347; /* Merah Tomat */
font-weight: bold;
margin-bottom: 10px;
}
.product-card p {
font-size: 0.95em;
color: #666;
line-height: 1.5;
margin-bottom: 15px;
}
.product-card button {
background-color: #008CBA; /* Biru Netral */
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 1em;
transition: background-color 0.3s ease;
}
.product-card button:hover {
background-color: #007bb5;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 50px;
font-size: 0.9em;
}
</style>
</head>
<body>
<header>
<h1>Hijab Store Coba</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Katalog</a></li>
<li><a href="#">Promo Spesial</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<div class="hero">
<h2>Koleksi Terbaru! Anggun & Modern</h2>
<p>Temukan gaya hijab impianmu dengan bahan premium dan desain eksklusif.</p>
<button onclick="alert('Membuka halaman koleksi terbaru...')">Lihat Koleksi Sekarang</button>
</div>
<div class="container">
<h2 class="section-title">✨ Produk Pilihan Kami ✨</h2>
<div class="product-grid">
<div class="product-card">
<img src="https://image.pollinations.ai/prompt/hijab%20fashion%20e-commerce%20product%20photography%20of%20a%20modern%20muslim%20woman%20wearing%20an%20elegant%20beige%20voal%20hijab,%20clean%20background" alt="Hijab Voal Square Beige">
<h3>Voal Square Premium Beige</h3>
<p class="price">Rp 65.000</p>
<p>Bahan voal premium super lembut, mudah dibentuk, cocok untuk gaya minimalis.</p>
<button onclick="alert('Voal Beige ditambahkan ke Keranjang!')">Beli Sekarang</button>
</div>
<div class="product-card">
<img src="https://image.pollinations.ai/prompt/hijab%20fashion%20e-commerce%20product%20photography%20of%20a%20trendy%20muslim%20woman%20wearing%20a%20colorful%20printed%20pashmina%20hijab,%20vibrant%20and%20playful" alt="Pashmina Motif Trendy">
<h3>Pashmina Motif Ceruty Flowy</h3>
<p class="price">Rp 55.000</p>
<p>Pashmina ceruty dengan motif floral cerah, ringan dan jatuh sempurna.</p>
<button onclick="alert('Pashmina Motif ditambahkan ke Keranjang!')">Beli Sekarang</button>
</div>
<div class="product-card">
<img src="https://image.pollinations.ai/prompt/hijab%20fashion%20e-commerce%20product%20photography%20of%20a%20modest%20muslim%20woman%20wearing%20a%20soft%20pink%20instan%20hijab,%20feminine%20and%20comfortable" alt="Hijab Instan Soft Pink">
<h3>Bergo Instan Maryam Soft Pink</h3>
<p class="price">Rp 75.000</p>
<p>Hijab instan Maryam dengan warna pink lembut, super praktis dan nyaman dipakai.</p>
<button onclick="alert('Bergo Instan Pink ditambahkan ke Keranjang!')">Beli Sekarang</button>
</div>
<div class="product-card">
<img src="https://image.pollinations.ai/prompt/hijab%20fashion%20e-commerce%20product%20photography%20of%20a%20muslim%20woman%20with%20a%20dark%20blue%20plain%20square%20hijab,%20elegant%20and%20versatile" alt="Hijab Square Dark Blue">
<h3>Square Premium Dark Blue</h3>
<p class="price">Rp 60.000</p>
<p>Hijab segiempat warna biru gelap elegan, cocok untuk acara formal maupun kasual.</p>
<button onclick="alert('Square Dark Blue ditambahkan ke Keranjang!')">Beli Sekarang</button>
</div>
</div>
</div>
<footer>
<p>© 2025 Hijab Store Coba. Semua Hak Cipta Dilindungi.</p>
<p>Ikuti kami: <a href="#" style="color: white; text-decoration: none;">Instagram</a> | <a href="#" style="color: white; text-decoration: none;">Facebook</a></p>
</footer>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
6
Requests
2
Domains
209KB
Transfer Size
208KB
Content Size
94.0ms
Dom Content Loaded
188.0ms
First Paint
2,895.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...