Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Grocery Website</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<h1>Welcome to our Grocery Website</h1>
	</header>

	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</nav>

	<main>
		<h2>Featured Products</h2>
		<ul>
			<li>
				<img src="product1.jpg" alt="Product 1">
				<h3>Product 1</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<button>Add to Cart</button>
			</li>
			<li>
				<img src="product2.jpg" alt="Product 2">
				<h3>Product 2</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<button>Add to Cart</button>
			</li>
			<li>
				<img src="product3.jpg" alt="Product 3">
				<h3>Product 3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<button>Add to Cart</button>
			</li>
		</ul>
	</main>

	<footer>
		<p>&copy; 2023 Grocery Website</p>
	</footer>

</body>
</html>
header {
	background-color: #333;
	color: #fff;
	padding: 20px;
	text-align: center;
}

nav {
	background-color: #444;
	color: #fff;
	padding: 10px;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

nav li {
	float: left;
}

nav li a {
	display: block;
	color: #fff;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

nav li a:hover {
	background-color: #333;
}

main {
	padding: 20px;
}

h2 {
	text-align: center;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

li {
	margin: 10px;
	text-align: center;
}

img {
	max-width: 200px;
	max-height: 200px;
}

button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
}
Editor is loading...