Untitled Snippet

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>NOOB STORE</title>

<style>

* {

  box-sizing: border-box;

}

body {

  margin: 0;

  font-family: Arial, sans-serif;

  background: #f4f4f4;

}

header {

  background: #111;

  color: white;

  padding: 20px;

  text-align: center;

}

nav {

  background: #222;

  padding: 12px;

  text-align: center;

}

nav a {

  color: white;

  text-decoration: none;

  margin: 12px;

}

.hero {

  background: #0d9488;

  color: white;

  padding: 40px 15px;

  text-align: center;

}

.search {

  text-align: center;

  padding: 20px;

}

.search input {

  padding: 12px;

  width: 90%;

  max-width: 400px;

  border: 1px solid #ccc;

  border-radius: 8px;

}

.products {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  gap: 15px;

  padding: 15px;

}

.product {

  background: white;

  border-radius: 10px;

  padding: 12px;

  text-align: center;

  box-shadow: 0 2px 8px #ddd;

}

.product img {

  width: 100%;

  height: 150px;

  object-fit: cover;

  border-radius: 8px;

}

.price {

  color: #0d9488;

  font-weight: bold;

}

button {

  background: #0d9488;

  color: white;

  border: none;

  padding: 10px;

  border-radius: 6px;

  cursor: pointer;

  margin: 4px;

}

button:hover {

  background: #08766e;

}

footer {

  background: #111;

  color: white;

  text-align: center;

  padding: 20px;

}

</style>

</head>

<body>

<header>

<h1>NOOB STORE</h1>

<p>Best Products at Best Prices</p>

</header>

<nav>

<a href="#">Home</a>

<a href="#products">Products</a>

<a href="#contact">Contact</a>

</nav>

<div class="hero">

<h2>Welcome To Our Store</h2>

<p>Shop Your Favourite Products Online!</p>

</div>

<div class="search">

<input type="text" id="search"

placeholder="Search products..."

oninput="searchProducts()">

</div>

<h2 style="text-align:center">Our Products</h2>

<div class="products" id="products">

<div class="product">

<img src="https://placehold.co/300x200?text=Headphones">

<h3>Headphones</h3>

<p class="price">Rs. 1500</p>

<button onclick="order('Headphones',1500)">Order Now</button>

</div>

<div class="product">

<img src="https://placehold.co/300x200?text=Watch">

<h3>Smart Watch</h3>

<p class="price">Rs. 2500</p>

<button onclick="order('Smart Watch',2500)">Order Now</button>

</div>

<div class="product">

<img src="https://placehold.co/300x200?text=Shoes">

<h3>Shoes</h3>

<p class="price">Rs. 3000</p>

<button onclick="order('Shoes',3000)">Order Now</button>

</div>

<div class="product">

<img src="https://placehold.co/300x200?text=Mobile">

<h3>Mobile</h3>

<p class="price">Rs. 25000</p>

<button onclick="order('Mobile',25000)">Order Now</button>

</div>

</div>

<footer id="contact">

<h3>Contact Us</h3>

<p>NOOB STORE © 2026</p>

</footer>

<script>

function order(name, price) {

  let phone = "923001234567";

  let message = "Hello! I want to order " +

    name + " for Rs. " + price;

  window.open(

    "https://wa.me/" + phone +

    "?text=" + encodeURIComponent(message),

    "_blank"

  );

}

function searchProducts() {

  let input = document.getElementById("search")