The Word of God Holistic Wellness Institute
"Helping The World DISCOVER THE WAY of LOVE!"
html 5 and css codes for make a shop website
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.
source: https://canseo.ir/web-design/
Views: 1
Comment
About
Praise Jesus Christ!
May God Bless & Prosper You!
"Holistic Wellness and Health"
Health, Education, and Social Service: Crisis Intervention/Life Empowerment (323) 73-LIGHT
Appointments (323) 402-0422
Loving to Learn Online Store
"Over 300 Low Priced, Quality Products"
Your Holistic Wellness: Spirit, Body and Mind
TIME IS RUNNING OUT!
© 2025 Created by Drs Joshua and Sherilyn Smith.
Powered by
You need to be a member of The Word of God Holistic Wellness Institute to add comments!
Join The Word of God Holistic Wellness Institute