This HTML5 code is a simple template for a store site:
<!DOCTYPE html>
<html
lang="en"> <head
> <meta charset
="UTF-8"> <meta name
="viewport" content="width=device-width, initial-scale=1.0"> <title
>فروشگاه آنلاین</title
> <
link rel
="stylesheet" href
="styles.css"> </head
> <body
> <header
> <div class
="container"> <h1
>فروشگاه آنلاین من</h1
> </div
> </header
> <nav
> <ul
> <li
><a href
="#">خانه</a
></li
> <li
><a href
="#">محصولات</a
></li
> <li
><a href
="#">درباره ما</a
></li
> <li
><a href
="#">تماس با ما</a
></li
> </ul
> </nav
><section class
="products"> <div class
="container"> <div class
="product"> <img src
="product1.jpg" alt
=""> <h2
>product name</h2
> <p
> Price
: 99,000 Tomans</p
> <a href
="#" class
="btn">Add to cart</a
> </div
> <!
-- Other products
--> </div
> </section
><footer
> <p
>Designed by me | All rights reserved</p
> </footer
> </body
> </html
>This is just a basic template and it needs more codes in the products, shopping cart, payment, etc sections to turn it into a full store. But this will be a good starting point for you.
give me css style modern for this htm,l
This CSS code gives a modern style to that HTML template:
*{
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
header {
background: #333;
color: #fff;
padding: 1rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
nav {
background: #ddd;
padding: 1rem 0;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav li a {
color: #333;
text-decoration: none;
padding: 1rem 2rem;
}
.products .product {
border: 1px solid #ddd;
padding: 1rem;
margin-bottom: 2rem;
}
.products img {
width: 100px;
}
.products h2 {
margin: 0 0 0.5rem 0;
}
.products .btn {
background: #333;
color: #fff;
padding: 0.5rem 1rem;
text-decoration: none;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem;
}
@media (min-width: 700px) {
.products .product {
display: flex;
align-items: center;
}
.products img {
width: 200px;
margin-right: 1rem;
}
}
This CSS code includes a simple grid layout, modern font, attractive colors and responsive measurements that will make your online store look attractive and modern.
If you need more changes, you can edit the CSS to give your site a completely individual look.
The HTML:
I used semantic HTML5 elements like <header>, <section>, and <footer> to divide the main parts of the page. This makes the code more readable and accessible.
The <nav
> contains an unordered list <ul
> with navigation links. This creates a simple nav menu.
The .hero section contains a large heading, paragraph and call-to-action button. This is the initial area that captures a visitor's attention.
There are empty <section> elements for features, products, testimonials and footer that you can populate with relevant content.
The CSS:
I only provided basic styles for body, header and .hero section.
You'll need to add styles for:
The nav elements
The .features section
The .product section (product cards)
The .testimonials section (testimonial cards)
The footer
The .container class is used to center align content within a maximum width. This creates a responsive layout.
<a href="https://canseo.ir/web-design/">canseo wordpress</a>
Additional details:
Adding content to the empty sections
Styling the nav menu
Styling product & testimonial cards
Adding media queries for responsiveness on mobile
Adding
I recommend:
Using a CSS framework like Bootstrap or Tailwind for quick responsive styling
Adding
Gathering testimonials from actual customers
Providing useful information in the footer
Addingcontact form for inquiries
If you do continue developing the page:
Focus on the user experience
Keep it simple and clutter-free
Add responsive media queries
Test it across devices
Let me know if you have any other questions! I'd be happy to provide more tips or recommendations as you build out the website.