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>Syed Items Store</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box}
body{
margin:0;
font-family:'Poppins',sans-serif;
background:#000;
color:#fff;
}
header{
background:#0a8f46;
padding:20px 40px;
display:flex;
justify-content:space-between;
align-items:center;
}
header h1{margin:0;font-size:26px}
nav a{
color:white;
margin-left:20px;
text-decoration:none;
font-weight:500;
}
.hero{
height:70vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
background:linear-gradient(black,#0a8f46);
}
.hero h2{font-size:42px;margin-bottom:10px}
.hero p{max-width:600px}
.btn{
background:#0a8f46;
border:none;
color:white;
padding:12px 25px;
margin-top:15px;
font-size:16px;
cursor:pointer;
border-radius:6px;
}
.section{
padding:60px 40px;
}
.section h2{
text-align:center;
margin-bottom:40px;
}
.products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:25px;
}
.product{
background:#111;
padding:15px;
border-radius:10px;
border:1px solid #0a8f46;
text-align:center;
transition:0.3s;
}
.product:hover{transform:translateY(-5px)}
.product img{
width:100%;
border-radius:8px;
}
.price{color:#0a8f46;font-weight:600}
.cart{
position:fixed;
right:0;
top:0;
height:100%;
width:300px;
background:#111;
padding:20px;
overflow:auto;
border-left:2px solid #0a8f46;
}
.cart h3{margin-top:0}
.cart-item{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}
footer{
background:#0a8f46;
text-align:center;
padding:20px;
}
input,textarea{
width:100%;
padding:10px;
margin-bottom:10px;
border:none;
border-radius:5px;
}
.contact-box{
max-width:500px;
margin:auto;
}
</style>
</head>
<body><header>
<h1>Syed Items Store</h1>
<nav>
<a href="#">Home</a>
<a href="#products">Products</a>
<a href="#contact">Contact</a>
</nav>
</header><section class="hero">
<h2>Welcome to Syed Items Store</h2>
<p>Premium quality products at affordable prices. Shop online with confidence.</p>
<button class="btn" onclick="document.getElementById('products').scrollIntoView()">Shop Now</button>
</section><section class="section" id="products">
<h2>Featured Products</h2>
<div class="products"><div class="product">
<img src="https://via.placeholder.com/300">
<h3>Wireless Headphones</h3>
<p class="price">Rs 3,999</p>
<button class="btn" onclick="addToCart('Wireless Headphones',3999)">Add to Cart</button>
</div><div class="product">
<img src="https://via.placeholder.com/300">
<h3>Smart Watch</h3>
<p class="price">Rs 5,499</p>
<button class="btn" onclick="addToCart('Smart Watch',5499)">Add to Cart</button>
</div><div class="product">
<img src="https://via.placeholder.com/300">
<h3>Bluetooth Speaker</h3>
<p class="price">Rs 2,499</p>
<button class="btn" onclick="addToCart('Bluetooth Speaker',2499)">Add to Cart</button>
</div><div class="product">
<img src="https://via.placeholder.com/300">
<h3>Mobile Charger</h3>
<p class="price">Rs 899</p>
<button class="btn" onclick="addToCart('Mobile Charger',899)">Add to Cart</button>
</div><div class="product">
<img src="https://via.placeholder.com/300">
<h3>Power Bank</h3>
<p class="price">Rs 2,199</p>
<button class="btn" onclick="addToCart('Power Bank',2199)">Add to Cart</button>
</div><div class="product">
<img src="https://via.placeholder.com/300">
<h3>Gaming Mouse</h3>
<p class="price">Rs 1,599</p>
<button class="btn" onclick="addToCart('Gaming Mouse',1599)">Add to Cart</button>
</div></div>
</section><div class="cart">
<h3>Your Cart</h3>
<div id="cartItems"></div>
<p><strong>Total: Rs <span id="total">0</span></strong></p>
</div><section class="section" id="contact">
<h2>Contact Us</h2>
<div class="contact-box">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<textarea rows="4" placeholder="Your Message"></textarea>
<button class="btn">Send Message</button>
</div>
</section><footer>
© 2026 Syed Items Store | All Rights Reserved
</footer><script>
let total=0
function addToCart(name,price){
let cart=document.getElementById('cartItems')
let item=document.createElement('div')
item.className='cart-item'
item.innerHTML=name+' <span>Rs '+price+'</span>'
cart.appendChild(item)
total+=price
document.getElementById('total').innerText=total
}
</script></body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
6
Requests
4
Domains
21KB
Transfer Size
24KB
Content Size
167.0ms
Dom Content Loaded
236.0ms
First Paint
305.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...