E-commerce Website Sorce code:-
HTML:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Ecommerc web prc.css">
<title>Ecommerc web prc</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
</head>
<body>
<header>
<!-- nav1 start -->
<nav class="nav1">
<div class="left">
<span>Welcome to E-shop</span>
<a href="#">Register</a> OR
<a href="#">Login</a>
</div>
<div class="right">
<a href="https://www.facebook.com/profile.php?id=100044131279369"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/_x_devil_02/https://www.instagram.com/_x_devil_02/"><i class="fa fa-instagram"></i></a>
<i class="fa fa-whatsapp"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
</div>
</nav>
<!-- nav1 end-->
<!-- nav2 start-->
<nav class="nav2">
<div class="nav2-left">
<i class="fa fa-phone"></i> +91 8607705489..
<i class="fa fa-envelope"></i> yc36565@gmail.com
</div>
<div class="nav2-center">
<h1>Devil <span>store</span></h1>
<p>Everything for everyone</p>
</div>
<div class="nav2-right">
<i class="fa fa-map"></i> Contact us
</div>
</nav>
<!--- nav2 end -->
<!-- nav3 start-->
<nav class="nav3">
<ul>
<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#"><i class="fa fa-user"></i>Boy</a></li>
<li><a href="#"><i class="fa fa-users"></i>Accessories</a></li>
<li><a href="#"><i class="fa fa-caret-down"></i>Toy's</a>
<ul>
<li><a href="#"><i class="fa fa-clipboard"></i>woodan</a></li>
<li><a href="#"><i class="fa fa-clipboard"></i>woodan</a></li>
<li><a href="#"><i class="fa fa-clipboard"></i>woodan</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-calendar-check-o"></i>Special</a></li>
<li><a href="#"><i class="fa fa-search"></i>Find</a></li>
</ul>
</nav>
<!-- nav3 end -->
<!-- New Section Start-->
<section class="featured">
<div class="featured-text">
<button>Coming Soon</button>
<h2>Our new deigns</h2>
</div>
</section>
<!-- New Section End-->
</header>
<!--Latest Section Start-->
<section class="latest">
<div class="product-intro">
<h1>New <span>Arrivals</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, debitis.</p>
</div>
<div class="card-container">
<div class="card">
<div>
<img src="img/1.jpg" alt="logo">
</div>
<h1>Branded Shoes</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.599</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
<div class="card">
<div>
<img src="img/2.jpg" alt="logo">
</div>
<h1>Branded Shoes</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.599</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
<div class="card">
<div>
<img src="img/3.jpg" alt="logo">
</div>
<h1>Branded Shoes</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.599</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
<div class="card">
<div>
<img src="img/4.jpg" alt="logo">
</div>
<h1>Branded Shoes</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.599</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
</div>
<div class="card-container">
<div class="card">
<div>
<img src="img/t-shirt1.jpg" alt="1">
</div>
<h1>Branded T-shirt</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.599</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
<div class="card">
<div>
<img src="img/t-shirt2.jpg" alt="2">
</div>
<h1>Branded T-shirt</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.599</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
<div class="card">
<div>
<img src="img/t-shirt3.jpg" alt="3">
</div>
<h1>Branded T-shirt</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.599</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
<div class="card">
<div>
<img src="img/t-shirt1.jpg" alt="4">
</div>
<h1>Branded T-shirt</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.599</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
</div>
</section>
<!--Latest Section End-->
<!--Best Sale Product Section Start-->
<section class="latest">
<div class="product-intro">
<h1>Best <span>Sall</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, debitis.</p>
</div>
<div class="card-container">
<div class="card">
<div>
<img src="img/t-shirt1.jpg" alt="0">
</div>
<h1>T-shirt</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.399</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
<div class="card">
<div>
<img src="img/t-shirt2.jpg" alt="0">
</div>
<h1>T-shirt</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.399</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
<div class="card">
<div>
<img src="img/t-shirt3.jpg" alt="0">
</div>
<h1>T-shirt</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.399</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
<div class="card">
<div>
<img src="img/t-shirt2.jpg" alt="0">
</div>
<h1>T-shirt</h1>
<span>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
<p>Rs.399</p>
<button>Add to cart</button>
<button class="btn">Buy</button>
</div>
</div>
</section>
<!--Best Sale Product Section End-->
<section class="trends">
<div class="product-intro">
<h1>Top<span>Trends</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, debitis.</p>
</div>
</section>
<footer>
<div>
<h1>Devil <span>store</span></h1>
<p>Everything for everyone</p>
</div>
<div>
<a href="https://www.facebook.com/profile.php?id=100044131279369"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/_x_devil_02/https://www.instagram.com/_x_devil_02/"><i class="fa fa-instagram"></i></a>
<i class="fa fa-whatsapp"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
<p><br>Desing by Yogesh Chauhan</p>
</div>
<div>
<p>
@2022 Copyright All Rights Reserved
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
</body>
</html>
E-commerce Website:-
Creating an e-commerce website can seem like a daunting task, but it can be accomplished with some planning and effort. Here are the steps you can follow to create an e-commerce website:
1. Define your target audience: Who are you trying to reach with your e-commerce website? What are their needs, interests, and buying habits? Understanding your target audience will help you create a website that speaks directly to them.
2. Choose a platform: There are several e-commerce platforms to choose from, such as Shopify, WooCommerce, Magento, and BigCommerce. Choose a platform that is easy to use, flexible, and offers the features and integrations you need.
3. Choose a domain name: Pick a domain name that is easy to remember and relevant to your e-commerce business. Make sure it's not already taken by checking domain availability on websites like GoDaddy or Namecheap.
4. Design your website: Choose a design that is visually appealing and easy to navigate. Make sure it matches your brand's look and feel, and includes all the necessary elements, such as product categories, shopping cart, and checkout.
5. Set up payment processing: Choose a payment gateway that integrates with your e-commerce platform and is secure and reliable.
6. Add products: Start by adding your products to your e-commerce website. Make sure you include high-quality images and detailed product descriptions.
7. Optimize for search engines: Use keywords in your titles, meta descriptions, and product descriptions to help your website rank higher in search results.
8. Promote your website: Share your e-commerce website on your social media channels and through email marketing campaigns.
9. Encourage customers to leave reviews and share your products with their friends and family.
10. Measure your results: Use analytics tools like Google Analytics to track your website's traffic and sales. This will help you see what's working and what's not, and make changes accordingly.
By following these steps, you can create a successful e-commerce website that helps you reach your target audience and sell your products online. Good luck!
E-commerce Website In Hindi:-ई-कॉमर्स वेबसाइट बनाना एक कठिन काम लग सकता है, लेकिन इसे कुछ योजना और प्रयास से पूरा किया जा सकता है। ई-कॉमर्स वेबसाइट बनाने के लिए आप यहां दिए गए चरणों का पालन कर सकते हैं:
1. अपने लक्षित दर्शकों को परिभाषित करें: आप अपनी ई-कॉमर्स वेबसाइट से किस तक पहुंचने का प्रयास कर रहे हैं? उनकी जरूरतें, रुचियां और खरीदारी की आदतें क्या हैं? अपने लक्षित दर्शकों को समझने से आपको एक ऐसी वेबसाइट बनाने में मदद मिलेगी जो उनसे सीधे बात करती है।
2. एक प्लेटफ़ॉर्म चुनें: चुनने के लिए कई ई-कॉमर्स प्लेटफ़ॉर्म हैं, जैसे कि Shopify, WooCommerce, Magento और BigCommerce। एक ऐसा प्लेटफ़ॉर्म चुनें जो उपयोग में आसान हो, लचीला हो, और आपको आवश्यक सुविधाएँ और एकीकरण प्रदान करता हो।
3. एक डोमेन नाम चुनें: ऐसा डोमेन नाम चुनें जो याद रखने में आसान हो और आपके ई-कॉमर्स व्यवसाय के लिए प्रासंगिक हो। GoDaddy या Namecheap जैसी वेबसाइटों पर डोमेन की उपलब्धता की जाँच करके सुनिश्चित करें कि इसे पहले ही नहीं ले लिया गया है।
4. अपनी वेबसाइट डिज़ाइन करें: ऐसा डिज़ाइन चुनें जो देखने में आकर्षक हो और नेविगेट करने में आसान हो। सुनिश्चित करें कि यह आपके ब्रांड के रंग-रूप से मेल खाता हो, और इसमें उत्पाद श्रेणियां, शॉपिंग कार्ट और चेकआउट जैसे सभी आवश्यक तत्व शामिल हों।
5. पेमेंट प्रोसेसिंग सेट करें: ऐसा पेमेंट गेटवे चुनें जो आपके ई-कॉमर्स प्लेटफॉर्म के साथ एकीकृत हो और सुरक्षित और विश्वसनीय हो।
6. उत्पाद जोड़ें: अपने उत्पादों को अपनी ई-कॉमर्स वेबसाइट पर जोड़कर प्रारंभ करें। सुनिश्चित करें कि आप उच्च-गुणवत्ता वाली छवियां और विस्तृत उत्पाद विवरण शामिल करते हैं।
7. खोज इंजन के लिए अनुकूलित करें: अपनी वेबसाइट को खोज परिणामों में उच्च रैंक में मदद करने के लिए अपने शीर्षक, मेटा विवरण और उत्पाद विवरण में कीवर्ड का उपयोग करें।
8. अपनी वेबसाइट का प्रचार करें: अपनी ई-कॉमर्स वेबसाइट को अपने सोशल मीडिया चैनलों और ईमेल मार्केटिंग अभियानों के माध्यम से साझा करें।
9. ग्राहकों को समीक्षा छोड़ने और अपने उत्पादों को अपने दोस्तों और परिवार के साथ साझा करने के लिए प्रोत्साहित करें।
10. अपने परिणाम मापें: अपनी वेबसाइट के ट्रैफ़िक और बिक्री को ट्रैक करने के लिए Google Analytics जैसे एनालिटिक्स टूल का उपयोग करें। इससे आपको यह देखने में मदद मिलेगी कि क्या काम कर रहा है और क्या नहीं, और तदनुसार परिवर्तन करें।
इन चरणों का पालन करके, आप एक सफल ई-कॉमर्स वेबसाइट बना सकते हैं जो आपको अपने लक्षित दर्शकों तक पहुँचने और अपने उत्पादों को ऑनलाइन बेचने में मदद करती है। आपको कामयाबी मिले!
Youtube channel:- x devil 02
Instagram Link :- _x_devil_02
CSS:-
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
scroll-behavior: smooth;
font-family: 'Josefin Sans', sans-serif;
}
:root{
--primary: #1c971c;
--secondary:rgb(15,10, 29,0.849);
--light:#2f3640;
}
header{
width: 100%;
height: 100vh;
}
.nav1{
width: 100%;
height: 80px;
align-items: center;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
box-shadow: 2px 0px 3px gray;
text-align: center;
}
.nav1 .left{
flex-basis: 50%;
letter-spacing: 2px;
}
.nav1 .left a{
text-decoration: none;
color:var(--primary);
font-weight: bold;
margin: 0px 5px;
}
.right{
flex-basis: 50%;
}
.right a{
color: #fff;
}
.right i{
font-size: 20px;
margin: 0px 15px;
background: var(--primary);
padding: 8px;
cursor: pointer;
transition: .4s ease-in-out;
}
.nav1 .right i:hover{
transform: rotate(360deg);
}
.nav2{
width: 100%;
height: 120px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
text-align: center;
}
.nav2 .nav2-left,.nav2 .nav2-center,.nav2 .nav2-right{
flex-basis: 30%;
margin: auto;
cursor: pointer;
}
.nav2 .nav2-left i{
margin-left: 15px;
}
.nav2 .nav2-center h1{
color: var(--primary);
font-size: 2rem;
font-weight: bold;
letter-spacing: 5px;
}
.nav2 .nav2-center span{
color: var(--secondary);
}
.nav2 .nav2-center p{
color: gray;
margin-top: 5px;
font-size: 15px;
}
.nav2 .nav2-right{
margin: 0px 5px;
}
.nav3{
width: 100%;
height: 70px;
line-height: 70px;
}
.nav3 ul{
list-style: none;
text-align: center;
}
.nav3 ul li{
display: inline-block;
width: 150px;
position: relative;
z-index: 99;
}
.nav3 ul li a{
text-decoration: none;
color: black;
font-weight: 500;
display: block;
}
.nav3 ul li a:hover{
color: var(--primary);
}
.nav3 ul li i{
color: var(--primary);
margin: 0px 5px;
}
.nav3 ul ul {
position: absolute;
top: 70px;
left: 0px;
display: none;
}
.nav3 ul ul li{
background-color: wheat;
border-bottom: 1px solid var(--primary);
}
.nav3 ul li:hover>ul{
display: block;
}
.featured{
width: 100%;
height: 60vh;
background: linear-gradient(to right,rgba(0,0,0,0.8)20%,rgba(255,255,255,0.8)),url(img/logo2.jpg);
background-size: cover;
background-position: top;
position: relative;
}
.featured-text{
max-width: 500px;
position: absolute;
top: 50%;
left: 10%;
color: white;
text-align: center;
padding: 10px;
font-size: 2rem;
letter-spacing: 5px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.featured-text button{
padding: 10px 20px;
border: none;
outline: none;
background-color: var(--secondary);
margin: 20px 0px;
color: white;
}
.latest{
padding: 50px 100px;
}
.product-intro{
text-align: center;
}
.product-intro h1{
color: var(--primary);
letter-spacing: 0.2rem;
font-size: 2rem;
font-weight: bolder;
}
.product-intro h1 span{
color: var(--secondary);
}
.product-intro p{
color: gray;
margin: 15px 0px;
}
.card-container{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin: 4rem 0;
}
.card-container .card{
flex-basis: 20%;
padding: 0.8rem;
position: relative;
}
.card img{
width: 100%;
transition: 0.5s ease-in-out;
}
.card i{
color: goldenrod;
margin: 10px 0px;
}
.card button{
color: white;
background-color: var(--secondary);
border: none;
outline: none;
margin-top: 15px;
padding: 5px 20px;
border-radius: 5px;
}
.card .btn{
color: #fff;
background-color: rgb(59, 51, 4);
}
.card:hover img, .card:hover h1{
width: 80%;
color: var(--primary);
}
.card::before{
content: '20% off';
width: 25%;
height: 25px;
line-height: 25px;
color: white;
position: absolute;
top: 0;
left: 0;
background-color: var(--primary);
padding: 0px 4px;
transform: rotate(-20deg);
}
.trends{
padding: 50px 100px;
background-color: rgba(0,0,0,0.01);
}
footer{
background-color: var(--secondary);
color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
text-align: center;
padding: 2rem;
}
footer div{
flex-basis: 30%;
}
footer h1{
letter-spacing: 0.05rem;
}
footer h1 span{
color: var(--primary);
}
footer p{
font-size: 1rem;
}
footer i{
margin: 0px 5px;
}
Comments
Post a Comment