Simple E-commerce Landing Page HTML, CSS
👤 Sharing: AI
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple E-commerce Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">MyStore</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero-content">
<h1>Welcome to MyStore</h1>
<p>Your one-stop shop for amazing products!</p>
<a href="#" class="cta-button">Shop Now</a>
</div>
</section>
<section class="featured-products">
<h2>Featured Products</h2>
<div class="product-grid">
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>Description of product 1. This is a great product!</p>
<span class="price">$19.99</span>
<a href="#" class="add-to-cart">Add to Cart</a>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>Description of product 2. You'll love this one!</p>
<span class="price">$29.99</span>
<a href="#" class="add-to-cart">Add to Cart</a>
</div>
<div class="product">
<img src="product3.jpg" alt="Product 3">
<h3>Product 3</h3>
<p>Description of product 3. Perfect for any occasion.</p>
<span class="price">$39.99</span>
<a href="#" class="add-to-cart">Add to Cart</a>
</div>
</div>
</section>
<footer>
<p>© 2023 MyStore. All rights reserved.</p>
</footer>
</body>
</html>
```
```css
/* style.css */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 1.5em;
font-weight: bold;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.hero {
background-color: #ddd;
padding: 50px 0;
text-align: center;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.hero h1 {
font-size: 3em;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2em;
margin-bottom: 30px;
}
.cta-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
.featured-products {
padding: 50px 0;
text-align: center;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.product {
border: 1px solid #ccc;
padding: 20px;
text-align: left; /* override the parent's text-align:center */
border-radius: 5px;
background-color: #fff;
}
.product img {
width: 100%;
max-height: 200px; /* Added a max-height for consistent image sizes */
object-fit: cover; /* Preserve aspect ratio and cover the area */
margin-bottom: 10px;
}
.product h3 {
margin-top: 0;
font-size: 1.2em;
}
.product p {
margin-bottom: 10px;
}
.price {
font-weight: bold;
color: #007bff;
display: block; /* Ensures it takes up the full width */
margin-bottom: 10px;
}
.add-to-cart {
background-color: #28a745;
color: #fff;
padding: 8px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 0.9em;
display: inline-block; /* Important for proper spacing */
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
```
**Explanation:**
**HTML (`index.html`):**
* **`<!DOCTYPE html>`:** Declares the document type as HTML5.
* **`<html lang="en">`:** The root element of the page, specifying the language as English.
* **`<head>`:**
* **`<meta charset="UTF-8">`:** Sets the character encoding for the document to UTF-8, which supports a wide range of characters.
* **`<meta name="viewport" content="width=device-width, initial-scale=1.0">`:** Configures the viewport for responsive design. `width=device-width` sets the page width to the device screen width. `initial-scale=1.0` sets the initial zoom level when the page is first loaded.
* **`<title>Simple E-commerce Landing Page</title>`:** Sets the title of the page, which appears in the browser tab.
* **`<link rel="stylesheet" href="style.css">`:** Links the external CSS file (`style.css`) to style the page.
* **`<body>`:** Contains the visible content of the page.
* **`<header>`:** The header section, typically containing the navigation bar.
* **`<nav>`:** The navigation bar.
* **`<div class="logo">MyStore</div>`:** A `div` containing the logo text.
* **`<ul>`:** An unordered list for the navigation links.
* **`<li><a>...</a></li>`:** List items containing the links.
* **`<section class="hero">`:** The hero section (often the main visual section at the top).
* **`<div class="hero-content">`:** A `div` to contain the content of the hero section.
* **`<h1>`:** The main heading.
* **`<p>`:** A paragraph of introductory text.
* **`<a href="#" class="cta-button">Shop Now</a>`:** A call-to-action button (CTA).
* **`<section class="featured-products">`:** A section for displaying featured products.
* **`<h2>`:** A heading for the section.
* **`<div class="product-grid">`:** A `div` that acts as a grid container for the products.
* **`<div class="product">`:** A `div` representing a single product.
* **`<img src="product1.jpg" alt="Product 1">`:** An image of the product. Make sure you have images named `product1.jpg`, `product2.jpg`, and `product3.jpg` in the same directory as your HTML file (or update the paths if the images are in a different directory).
* **`<h3>`:** The product name.
* **`<p>`:** The product description.
* **`<span class="price">`:** The product price.
* **`<a href="#" class="add-to-cart">Add to Cart</a>`:** An "Add to Cart" button.
* **`<footer>`:** The footer section, typically containing copyright information.
* **`<p>`:** Copyright text.
**CSS (`style.css`):**
* **`body`:**
* `font-family: sans-serif;`: Sets the default font for the page.
* `margin: 0; padding: 0;`: Removes default margins and padding from the `body` element, ensuring content starts at the edge of the screen.
* `background-color: #f4f4f4;`: Sets a light gray background color.
* `color: #333;`: Sets a dark gray text color.
* **`header`:**
* `background-color: #333;`: Sets a dark gray background color.
* `color: #fff;`: Sets the text color to white.
* `padding: 10px 0;`: Adds padding to the top and bottom.
* **`nav`:**
* `display: flex;`: Enables flexbox layout.
* `justify-content: space-between;`: Distributes items evenly with the first item aligned to the start and the last item aligned to the end.
* `align-items: center;`: Vertically aligns items to the center.
* `max-width: 1200px;`: Sets a maximum width for the navigation bar.
* `margin: 0 auto;`: Centers the navigation bar horizontally.
* `padding: 0 20px;`: Adds padding to the left and right.
* **`.logo`:**
* `font-size: 1.5em;`: Sets the font size.
* `font-weight: bold;`: Makes the text bold.
* **`nav ul`:**
* `list-style: none;`: Removes bullet points from the list.
* `padding: 0; margin: 0;`: Removes default padding and margins.
* `display: flex;`: Enables flexbox layout for the list items.
* **`nav ul li`:**
* `margin-left: 20px;`: Adds spacing between the list items.
* **`nav ul li a`:**
* `color: #fff;`: Sets the link color to white.
* `text-decoration: none;`: Removes underlines from the links.
* **`.hero`:**
* `background-color: #ddd;`: Sets a light gray background color.
* `padding: 50px 0;`: Adds padding to the top and bottom.
* `text-align: center;`: Centers the text.
* **`.hero-content`:**
* `max-width: 800px;`: Sets a maximum width for the content.
* `margin: 0 auto;`: Centers the content horizontally.
* `padding: 0 20px;`: Adds padding to the left and right.
* **`.hero h1`:**
* `font-size: 3em;`: Sets the font size.
* `margin-bottom: 20px;`: Adds margin below the heading.
* **`.hero p`:**
* `font-size: 1.2em;`: Sets the font size.
* `margin-bottom: 30px;`: Adds margin below the paragraph.
* **`.cta-button`:**
* `background-color: #007bff;`: Sets a blue background color.
* `color: #fff;`: Sets the text color to white.
* `padding: 10px 20px;`: Adds padding to the button.
* `text-decoration: none;`: Removes underlines.
* `border-radius: 5px;`: Rounds the corners.
* `font-weight: bold;`: Makes the text bold.
* **`.featured-products`:**
* `padding: 50px 0;`: Adds padding to the top and bottom.
* `text-align: center;`: Centers the text.
* **`.product-grid`:**
* `display: grid;`: Enables grid layout.
* `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));`: Creates a responsive grid with columns that are at least 300px wide and fill the available space.
* `gap: 20px;`: Adds spacing between the grid items.
* `max-width: 1200px;`: Sets a maximum width.
* `margin: 0 auto;`: Centers the grid horizontally.
* `padding: 0 20px;`: Adds padding to the left and right.
* **`.product`:**
* `border: 1px solid #ccc;`: Adds a border.
* `padding: 20px;`: Adds padding.
* `text-align: left;`: Aligns the text to the left.
* `border-radius: 5px;`: Rounds the corners.
* `background-color: #fff;`: Sets a white background.
* **`.product img`:**
* `width: 100%;`: Makes the image fill the width of its container.
* `max-height: 200px;`: Sets a maximum height for the images.
* `object-fit: cover;`: Ensures that the image covers the entire area without stretching, cropping if necessary.
* `margin-bottom: 10px;`: Adds margin below the image.
* **`.product h3`:**
* `margin-top: 0;`: Removes the default top margin.
* `font-size: 1.2em;`: Sets the font size.
* **`.product p`:**
* `margin-bottom: 10px;`: Adds margin below the paragraph.
* **`.price`:**
* `font-weight: bold;`: Makes the text bold.
* `color: #007bff;`: Sets the color to blue.
* `display: block;`: Makes the price a block-level element, so it takes up the full width.
* `margin-bottom: 10px;`: Adds margin below the price.
* **`.add-to-cart`:**
* `background-color: #28a745;`: Sets a green background color.
* `color: #fff;`: Sets the text color to white.
* `padding: 8px 15px;`: Adds padding.
* `text-decoration: none;`: Removes underlines.
* `border-radius: 5px;`: Rounds the corners.
* `font-size: 0.9em;`: Sets the font size.
* `display: inline-block;`: Makes it an inline-block element to control spacing.
* **`footer`:**
* `background-color: #333;`: Sets a dark gray background.
* `color: #fff;`: Sets the text color to white.
* `text-align: center;`: Centers the text.
* `padding: 20px 0;`: Adds padding.
**How to Run This Code:**
1. **Save the HTML:** Save the HTML code above as `index.html`.
2. **Save the CSS:** Save the CSS code above as `style.css` in the *same* directory as `index.html`.
3. **Get Images:** Find or create three images and name them `product1.jpg`, `product2.jpg`, and `product3.jpg`. Place these images in the same directory as `index.html` and `style.css`. If you don't have images handy, you can use placeholder images online (search for "placeholder image generator") or temporarily remove the `<img>` tags.
4. **Open in Browser:** Open `index.html` in your web browser (e.g., Chrome, Firefox, Safari, Edge). You should see the landing page displayed.
This is a basic example. To make it a real e-commerce site, you'd need to add:
* **Backend Logic:** A server-side language (like Python, Node.js, PHP, etc.) and a database to handle product information, user accounts, orders, and payments.
* **JavaScript:** To handle interactions like adding items to a cart, updating quantities, and submitting forms.
* **Error Handling:** Proper error messages and validation.
* **Security:** Implement security measures to protect user data and prevent attacks.
* **Responsiveness:** Ensure the website works well on different screen sizes using media queries in CSS. The provided code already has some responsive features thanks to `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));` and the viewport meta tag.
* **More Features:** Shopping cart functionality, user authentication, product search, and more.
👁️ Viewed: 9
Comments