generate a css code for following code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products - Beauty Salon</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">Beauty Salon</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
</ul>
</nav>
</header>
<main>
<section class="products-container">
<h1>Our Products</h1>
<div class="product-grid">
<div class="product-card">
<img src="https://via.placeholder.com/300" alt="Shampoo">
<h3>Hydrating Shampoo</h3>
<p class="price">$24.99</p>
<button class="btn">Add to Cart</button>
</div>
<div class="product-card">
<img src="https://via.placeholder.com/300" alt="Conditioner">
<h3>Nourishing Conditioner</h3>
<p class="price">$22.99</p>
<button class="btn">Add to Cart</button>
</div>
<div class="product-card">
<img src="https://via.placeholder.com/300" alt="Hair Mask">
<h3>Repairing Hair Mask</h3>
<p class="price">$29.99</p>
<button class="btn">Add to Cart</button>
</div>
<div class="product-card">
<img src="https://via.placeholder.com/300" alt="Styling Cream">
<h3>Styling Cream</h3>
<p class="price">$18.99</p>
<button class="btn">Add to Cart</button>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>