Scribd
Upload
152 views17 pages

Dr. B. C. Roy Engineering College, Durgapur: TH TH

This document contains code for an e-commerce website created by students as a mini project. It includes HTML, CSS, and descriptions of code for the home, about, products, and contact pages. The code provides the structure and styling for an online shopping site with information about the business, product display, and customer contact forms.

Uploaded by

Demon Venom
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
152 views17 pages

Dr. B. C. Roy Engineering College, Durgapur: TH TH

This document contains code for an e-commerce website created by students as a mini project. It includes HTML, CSS, and descriptions of code for the home, about, products, and contact pages. The code provides the structure and styling for an online shopping site with information about the business, product display, and customer contact forms.

Uploaded by

Demon Venom
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Dr. B. C.

ROY ENGINEERING COLLEGE, Durgapur

MINI PROJECT ON E-commerce Shopping Site


LAB E-Commerce (IT-793A)

Submitted To: MANAS KUMAR ROY


Submitted By: Group Members:
Md. Izhar Akhter Md Izhar Akhter
Dumpy Das Dumpy Das
B.tech:4th year Monalisha Karmakar
Semester: 7th Sneha Kumari
Department: Information Technology Simran Kumari
Registration No/University Roll No:
161200110155/12000216032
161200110148/12000216039
Home Page Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>TechCart</title>
</head>
<body>
<div id="container">
<div id="mainpic">
<h1>MISD<span class="lighter"> Enterprises</span></h1>
<h2>Next Stop Of CLothing</h2>
</div>
<div id="menu">
<ul>
<li class="menuitem"><a href="index.html">Home</a></li>
<li class="menuitem"><a href="about.html">About</a></li>
<li class="menuitem"><a href="product.html">Products</a></li>
<li class="menuitem"><a href="contacts.html">Contact Us</a></li>
</ul>
</div>
<div id="content">
<h2>Express Yourself.It's hard to be nice if you don't feel comfrotable </h2>
<p>&nbsp;</p>
<p>&nbsp;</p
<h3>E-Commerce</h3>
<br>
<p>E-commerce (electronic commerce) is the activity of electronically buying or selling
of products on online services or over the Internet. Electronic commerce draws on technologies
such as mobile commerce, electronic funds transfer, supply chain management, Internet
marketing, online transaction processing, electronic data interchange (EDI), inventory
management systems, and automated data collection systems. E-commerce is in turn driven by
the technological advances of the semiconductor industry, and is the largest sector of the
electronics industry.
Modern electronic commerce typically uses the World Wide Web for at least one part of the
transaction's life cycle although it may also use other technologies such as e-mail. Typical e-
commerce transactions include the purchase of online books (such as Amazon) and music
purchases (music download in the form of digital distribution such as iTunes Store), and to a less
extent, customized/personalized online liquor store inventory services.There are three areas of e-
commerce: online retailing, electronic markets, and online auctions. E-commerce is supported by
electronic business.
E-commerce businesses may also employ some or all of the followings:
Online shopping for retail sales direct to consumers via Web sites and mobile apps, and
conversational commerce via live chat, chatbots, and voice assistants.
Providing or participating in online marketplaces, which process third-party business-to-
consumer (B2C) or consumer-to-consumer (C2C) sales
Business-to-business (B2B) buying and selling;
Gathering and using demographic data through web contacts and social media
Business-to-business (B2B) electronic data interchange
Marketing to prospective and established customers by e-mail or fax (for example, with
newsletters)
Engaging in pretail for launching new products and services
Online financial exchanges for currency exchanges or trading purposes.</p>
<p>&nbsp;</p>
<div id="footer"><h>Developed By: Izhar,Dumpy,Sneha,Monalisha</a></h></div>
</div>
</div>
</body>
</html>
About Page Code:
<html>
<head>
<link rel="stylesheet" href ="d.css" type="text/css">
<style>
text-align: center;
</style>
</head>
<body>
<div>
<div style="text-align:center">
<h1>About Us</h1>
<p id="k">The copy that defines your Shoe and Wearing line must be appealing and
impeccable. It’s a critical part of fascinating your prospects, and fashioning a great eCommerce
site that sells.

If you have E-Commerce store carrying apparel or clothing items, that requires compelling
fashion descriptions written for each item, arm your sales and marketing team with skilfully
written descriptions by proficient copywriters at VerticalWriting. Our fashion catalog writers
deliver both interesting and in-depth product information that your customers could be looking
for.
To turn customer desire into sales, we infuse the extra flare through our well written and
compelling apparel and clothing details and fine-points. We are also adept at perceiving the
major attributes of your product line based on photographs.</p>
</div>
<body background="bg.jpeg">
</div>
</body>
</html>
Product Page Code:
<!DOCTYPE html>
<html>
<head>

<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.price {
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
</style>
</head>
<body>

<h2 style="text-align:center">Product Card</h2>


<div class="card">
<img src="g1.jpg" alt="Denim Jeans" style="width:100%">
<h1>Leather Men's Shoe</h1>
<p class="price">Rs 600</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem
jeamsun denim lorem jeansum.</p>
<p><button>Add to Cart</button></p>
</div>
<div class="card">
<img src="g2.jpg" alt="Denim Jeans"style="width:100%">
<h1>Ladies Glory</h1>
<p class="price">Rs 5000</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem
jeamsun denim lorem jeansum.</p>
<p><button>Add to Cart</button></p>
</div>
<div class="card">
<img src="j1.jpg" alt="Denim Jeans"style="width:100%">
<h1>Leather Jacket</h1>
<p class="price">Rs 1000</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem
jeamsun denim lorem jeansum.</p>
<p><button>Add to Cart</button></p>
</div>
<div class="card">
<img src="j2.jpg" alt="Denim Jeans"style="width:100%">
<h1>Coat</h1>
<p class="price">Rs 10000</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem
jeamsun denim lorem jeansum.</p>

<p><button>Add to Cart</button></p>
</div>
<div class="card">
<img src="shoe.jpg" alt="Denim Jeans"style="width:100%">
<h1>Canvas</h1>
<p class="price">Rs 1000</p>
<p>Some text about the jeans. Super slim and comfy lorem ipsum lorem jeansum. Lorem
jeamsun denim lorem jeansum.</p>
<p><button>Add to Cart</button></p>
</div>
</body>
</html>
Contact Us Code:
<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

*{
box-sizing: border-box;
}
/* Style inputs */
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;

}
/* Style the container/contact section */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
}
/* Create two columns that float next to eachother */
.column {
float: left;
width: 50%;
margin-top: 6px;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on
top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column, input[type=submit] {
width: 100%;
margin-top: 0;
}

}
</style>

</head>
<body>
<div class="container">
<div style="text-align:center">
<h2>Contact Us</h2>
<p>Swing by for a cup of coffee, or leave us a message:</p>
</div>
<div class="row">
<div class="column">
<img src="cc.png" style="width:100%">
</div>
<div class="column">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">India</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>

</div>
</body>
</html>
CSS Code:
body {
margin: 0;
padding: 0;
text-align: left;
font: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #061C37;
background-color: #FCFBEF;
background-image:url(images/background.png);
background-repeat:repeat-x;
}
{

margin: 0 auto 0 auto;


text-align:left;}
#container
{
display: block;
height:auto;
position: relative;
width: 940px;
}
#mainpic h1
{
position:absolute;
text-align:right;
font-size:30px;
color:#AB970C;
left:600px;
top:220px;
}
#mainpic h2
{
position:absolute;
text-align:right;
color:#776906;
left:600px;
top:252px;
}
#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;
}
.lighter
{
color:#F2D76A;
}
#menu
{
background-image:url(images/menu.png);
background-repeat:no-repeat;
width:1200px;
height:69px;
float:left;
clear:both;
}
#content{
width:880px;
height:auto;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
}
#footer{
width:inherit;
height:auto;
}
#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#F5EB67;
}
a,a:visited
{
color:#E4CA10;
text-decoration:none;
font-weight:bold;
}
#menu ul {
list-style: none;
padding: 0px;
margin-left:auto;
width:900px;
}
#menu li {
list-style: none;
padding: 0px;
display: inline;
}
#menu a,#menu a:visited {
float: left;
width: 150px;
height: 40px;
display: block;
text-align: center;
text-decoration: none;
color:#3C3504;
font-weight: bold;
padding-top: 16px;
font-size: 17px;
}
#menu a:hover{
color:#B39311;
}
#content p
{
}
html, body {
text-align: center;
}
p {text-align: left;}
#k
{
Color:brown;
text-allign: center;
font-size: 30px;
float: right;
}

You might also like