ReDI Project No. 1 - HTML & CSS
Design a simple e-commerce product page using HTML and basic CSS. This page should display a product with details like an image, name, price, description, and an "Add to Cart" button.
Requirements: HTML Structure:
- Create a new HTML file (e.g., index.html). The page should have a with the company logo and a navigation bar with links to "Home", "Shop", "Contact". Below the header, add a main section to display the products Add a footer with basic information like contact details and social media links. Products List Section:
Inside the section, create a container for the products list. Include an image of the product. Add the product name as a heading h1. Display the product price. Write a brief description of the product in a paragraph.
- Basic CSS Styling:
Use a <style> tag within the of your HTML file to add basic CSS. Style the header to have a background color and properly spaced navigation links. Center the product image and make it responsive. Style the product name, price, and description with appropriate font sizes and colors. Additional Guidelines:
- Use semantic HTML elements where appropriate.
- Ensure the page is visually appealing and easy to navigate.
- Make sure the product image is responsive and fits well on different screen sizes.
- The "Add to Cart" button should have a hover effect to enhance user interaction.
Submission: Complete the HTML and CSS code as described. Test the page in a web browser to ensure it looks good on different screen sizes. Submit the final HTML file (e.g., index.html) for review. Good luck, and have fun creating your e-commerce product page!