<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Handcrafted Show Piece and Idols</title> <link rel="stylesheet" href="style.css"/> </head> <body> <header> <!-- Header content goes here --> </header> <section> <div class="product"> <img src="https://source.unsplash.com/300x200/?flower" alt="Flower 1"> <h3>Flower 1</h3> <p>Description of Flower 1</p> <button class="button">Buy Now</button> </div> <!-- Add more flowers here in similar structure --> <div class="product"> <img src="https://picsum.photos/300" alt="Flower 2"> <h3>Flower 2</h3> <p>Description of Flower 2</p> <button class="button">Buy Now</button> </div> </section> <footer class="footer"> <p>Copyright © 2024 Your Company</p> <a href="#">Terms of Service</a> </footer> </body> <style> /* Here is some starter CSS code for your page. You can customize these styles as needed. */ body { font-family: Arial, Helvetica, sans-serif; } header { background-color: #333; color: #fff; padding: 10px; } section { display: flex; flex-wrap: wrap; justify-content: space-between; } .product { width: 30%; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; padding: 20px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 5px; } .product img { width: 80%; margin-bottom: 10px; } .product h3 { font-size: 1.4rem; margin-bottom: 10px; } .product p { font-size: 1rem; line-height: 1.4; text-align: center; } .button{ background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .footer { background-color: #f2f2f2; padding: 20px; border-top: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; } .footer p { font-size: 0.8rem; } .footer a { color: #333; text-decoration: none; font-size: 0.8rem; } @media screen and (max-width: 768px) { section { display: block; margin: 20px auto; max-width: 500px; } .product { width: 100%; } } </style> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter