However, I can provide you with an example of a simple e-commerce website using HTML code.
source code:
<!DOCTYPE html>
<html>
<head>
<title>Simple E-commerce Website</title>
<style>
/* Add some basic styles to the page */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
article {
background-color: #f9f9f9;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
padding: 20px;
text-align: center;
width: 300px;
}
article h3 {
margin-top: 0;
}
article img {
max-width: 100%;
}
button {
background-color: #333;
border: none;
color: #fff;
cursor: pointer;
padding: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Welcome to our Simple E-commerce Website!</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Featured Products</h2>
<article>
<h3>coffee</h3>
<img src="images/copy/coffee_01.png" alt="coffee">
<p>Description of coffee</p>
<button>Add to Cart</button>
</article>
<article>
<h3>coffee</h3>
<img src="images/copy/coffe_02.jpg" alt="Tea">
<p>Description of cofee</p>
<button>Add to Cart</button>
</article>
<article>
<h3>Tea</h3>
<img src="images/copy/tea_09.jpg" alt="Ice">
<p>Description of Tea</p>
<button>Add to Cart</button>
</article>
<article>
<h3>Tea</h3>
<img src="images/copy/Tea_08.jpg" alt="Ice">
<p>Description of Tea</p>
<button>Add to Cart</button>
</article>
<article>
<h3>Ice</h3>
<img src="images/copy/ice_05.jpg" alt="Ice">
<p>Description of Ice</p>
<button>Add to Cart</button>
</article>
<article>
<h3>IceCreame</h3>
<img src="images/copy/ice_06.jpg" alt="Ice">
<p>Description of Product 3</p>
<button>Add to Cart</button>
</article>
</section>
</main>
<footer>
<p>© 2023 Simple E-commerce Website , Developed By Raja's</p>
</footer>
</body>
</html>
.png)
No comments:
Post a Comment