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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Junaid Bakers and Sweets</title>
<style>
/* --- Color Palette & Reset --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary-color: #A3702C; /* Rich Premium Gold */
--secondary-color: #1A1A1A; /* Deep Charcoal/Black */
--accent-color: #D2691E; /* Warm Caramel */
--light-bg: #FAF7F2; /* Cream background */
--white: #FFFFFF;
}
body {
background-color: var(--light-bg);
color: var(--secondary-color);
line-height: 1.6;
}
/* --- Navigation --- */
header {
background-color: var(--white);
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
.logo {
font-size: 22px;
font-weight: 800;
color: var(--secondary-color);
text-decoration: none;
letter-spacing: 1px;
}
.logo span {
color: var(--primary-color);
}
.nav-links {
display: flex;
list-style: none;
gap: 25px;
}
.nav-links a {
text-decoration: none;
color: var(--secondary-color);
font-weight: 600;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--primary-color);
}
/* --- Hero Section --- */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
url('https://images.unsplash.com/photo-1509440159596-0249088772ff?q=80&w=1200') no-repeat center center/cover;
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--white);
padding: 20px;
}
.hero h1 {
font-size: 45px;
margin-bottom: 15px;
font-family: Georgia, serif;
letter-spacing: 1px;
}
.hero p {
font-size: 18px;
margin-bottom: 25px;
max-width: 600px;
font-weight: 300;
}
.btn {
background-color: var(--primary-color);
color: var(--white);
padding: 12px 35px;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
transition: background 0.3s;
border: none;
cursor: pointer;
letter-spacing: 0.5px;
}
.btn:hover {
background-color: #85581A;
}
/* --- Main Content Layout --- */
.container {
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
}
.section-title {
text-align: center;
font-size: 32px;
margin-bottom: 40px;
color: var(--secondary-color);
position: relative;
font-family: Georgia, serif;
}
.section-title::after {
content: '';
display: block;
width: 50px;
height: 3px;
background-color: var(--primary-color);
margin: 10px auto 0;
}
/* --- Menu Section --- */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.menu-item {
background-color: var(--white);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
transition: transform 0.3s, box-shadow 0.3s;
border-bottom: 3px solid transparent;
}
.menu-item:hover {
transform: translateY(-5px);
border-bottom-color: var(--primary-color);
box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.menu-img {
width: 100%;
height: 220px;
object-fit: cover;
}
.menu-info {
padding: 20px;
}
.menu-info h3 {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
font-size: 18px;
}
.price {
color: var(--primary-color);
font-weight: 700;
}
.menu-info p {
font-size: 14px;
color: #666;
}
/* --- Order Form Section --- */
.order-container {
background-color: var(--white);
padding: 40px;
border-radius: 6px;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
max-width: 700px;
margin: 0 auto;
border-top: 4px solid var(--primary-color);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
}
.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #E0E0E0;
border-radius: 4px;
font-size: 16px;
background-color: #FAFAFA;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
background-color: var(--white);
}
.radio-group {
display: flex;
gap: 20px;
margin-top: 5px;
}
.radio-group label {
font-weight: normal;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
/* --- Footer --- */
footer {
background-color: var(--secondary-color);
color: #AEAEAE;
padding: 50px 20px 20px;
text-align: center;
margin-top: 80px;
}
.footer-info h3 {
color: var(--white);
font-size: 22px;
margin-bottom: 15px;
font-family: Georgia, serif;
}
.footer-info p {
margin-bottom: 8px;
font-size: 14px;
}
.copyright {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #333;
font-size: 12px;
}
/* --- Responsive View --- */
@media (max-width: 768px) {
.nav-links { display: none; }
.hero h1 { font-size: 32px; }
.order-container { padding: 25px; }
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<header>
<nav class="nav-container">
<a href="#" class="logo">JUNAID <span>BAKERS & SWEETS</span></a>
<ul class="nav-links">
<li><a href="#menu">Our Menu</a></li>
<li><a href="#order">Place Order</a></li>
<li><a href="#about">About Us</a></li>
</ul>
</nav>
</header>
<!-- Hero Showcase Section -->
<section class="hero">
<h1>Freshly Baked, Exceptionally Sweet</h1>
<p>Bringing you premium quality live bakery items, customized celebration cakes, and traditional sweets made with pure ingredients.</p>
<a href="#order" class="btn">Order Online</a>
</section>
<div class="container">
<!-- Live Menu Section -->
<h2 id="menu" class="section-title">Popular Items</h2>
<div class="menu-grid">
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?q=80&w=500" alt="Custom Cakes" class="menu-img">
<div class="menu-info">
<h3><span>Premium Cream Cakes</span> <span class="price">Rs. 1,500+</span></h3>
<p>Freshly baked layers of rich sponge and fresh cream. Fully customizable for birthdays and weddings.</p>
</div>
</div>
<div class="menu-item">
<!-- Fallback premium sweet/pastry imagery placeholder -->
<img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?q=80&w=500" alt="Traditional Sweets" class="menu-img">
<div class="menu-info">
<h3><span>Premium Mithai & Sweets</span> <span class="price">Rs. 800/kg</span></h3>
<p>Made with pure desi ghee. Our signature assorted sweets are perfect for celebrations and gifts.</p>
</div>
</div>
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1555507036-ab1f4038808a?q=80&w=500" alt="Fresh Pastries" class="menu-img">
<div class="menu-info">
<h3><span>Fresh Bakery Biscuits</span> <span class="price">Rs. 400+</span></h3>
<p>Crispy, golden-baked tea biscuits, puff pastries, and local savory favorites prepared fresh daily.</p>
</div>
</div>
</div>
<!-- Order Form & Booking -->
<h2 id="order" class="section-title">Order & Reservation Form</h2>
<div class="order-container">
<form action="#" method="POST" onsubmit="alert('Thank you for choosing Junaid Bakers! We have received your request and will call you shortly to confirm your order.'); return false;">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" required placeholder="Enter your name">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" required placeholder="e.g., 03001234567">
</div>
<div class="form-group">
<label>Order Type</label>
<div class="radio-group">
<label><input type="radio" name="ordertype" value="pickup" checked> Shop Pickup</label>
<label><input type="radio" name="ordertype" value="delivery"> Home Delivery</label>
</div>
</div>
<div class="form-group">
<label for="item">Select Main Category</label>
<select id="item" required>
<option value="">-- Choose an option --</option>
<option value="custom-cake">Customized Celebration Cake</option>
<option value="sweets">Assorted Sweets / Mithai Box</option>
<option value="bakery-items">Fresh Bakery Items & Platters</option>
</select>
</div>
<div class="form-group">
<label for="date">Required Date & Time</label>
<input type="datetime-local" id="date" required>
</div>
<div class="form-group">
<label for="notes">Order Details / Special Instructions</label>
<textarea id="notes" rows="4" placeholder="Mention flavor preferences, cake weights, custom text writing, or any delivery address details here..."></textarea>
</div>
<button type="submit" class="btn" style="width: 100%;">Submit Order</button>
</form>
</div>
</div>
<!-- Contact & Store Information Footer -->
<footer>
<div class="footer-info">
<h3>Junaid Bakers and Sweets</h3>
<p>Main Commercial Market, Peshawar, Pakistan</p>
<p>Open Daily: 8:00 AM – 11:00 PM</p>
<p>For Urgent Orders Call: 0312-XXXXXXX</p>
</div>
<p class="copyright">© 2026 Junaid Bakers and Sweets. All rights reserved.</p>
</footer>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
5
Requests
2
Domains
485KB
Transfer Size
484KB
Content Size
195.0ms
Dom Content Loaded
300.0ms
First Paint
213.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...