Shopping Website Project in ASP.NET:
How to create Shopping Website Project in ASP.NET Part-1
Here is the source code of project that is helpful for you...
 |
| Shopping website |
Step:1- First create a website with name (myshopping) and then add one webpage that name is " Main.aspx" and select language Visual Basic.
Main.aspx (HTML Design):
<head runat="server">
<title>My Shopping cart</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
<link href="Style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function IMG3_onclick() {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="header">
<div class="block1">
</div>
<div class="block2">
<ul>
<li><a href="#">Specials</a></li>
<li><a href="Search.aspx">Search</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="Signin.aspx">Create an account</a></li>
<li><a href="Login.aspx">Customer Login</a></li>
</ul>
</div>
<div class="block3" style="width: 168px">
<a href="#"></a>
<asp:ImageButton ID="ImageButton17" runat="server" ImageUrl="~/images/cart.jpg" />
<span>Shopping Cart<asp:Label ID="cart" runat="server" Font-Size="Small" ForeColor="Red"
Text="*"></asp:Label></span>
</div>
<a href="#"><img src="images/name.jpg" alt="" width="396" height="117" /></a><img src="images/pic1.jpg" alt="" height="117" style="width: 360px" /><br />
<ul class="menu" style="width: 784px">
<li><a href="view.aspx?ref=true"><img src="images/but1.jpg" alt="Home" width="135" height="36" id="IMG2" onclick="return IMG2_onclick()" /></a></li>
<li><a href="Login.aspx"><img src="images/but2.jpg" alt="" width="130" height="36" id="IMG3" onclick="return IMG3_onclick()" /></a></li>
<li><a href="#"><img src="images/but3.jpg" alt="" width="130" height="36" /></a></li>
<li><a href="#"><img src="images/but4.jpg" alt="" width="130" height="36" id="IMG1" onclick="return IMG1_onclick()" /></a></li>
<li><a href="#"><img src="images/but5.jpg" alt="" width="130" height="36" /></a></li>
<li><img src="images/butclean.jpg" alt="" width="111" height="36" /></li>
</ul>
</div>
<div id="content">
<div class="left">
<img src="images/title1.jpg" alt="" width="198" height="30" /><br />
<ul>
<li class="dots"><a href="robot.aspx">Robot Electrinics</a></li>
<li class="dots"><a href="#">Remote Controls</a></li>
<li class="dots"><a href="#">Programers</a></li>
<li class="dots"><a href="#">Boards</a></li>
<li class="dots"><a href="#">Motors</a></li>
<li class="dots"><a href="#">Batteries</a></li>
<li class="dots"><a href="#">Robots</a></li>
<li class="dots"><a href="#">Micro Controllers</a></li>
<li class="dots"><a href="#">Components</a></li>
<li class="dots"><a href="#">Sensor</a></li>
<li class="dots"><a href="#">Other</a></li>
<li class="dots"><a href="#">Specials..</a></li>
<li class="dots"><a href="#">New Product</a></li>
</ul>
<img src="images/title2.jpg" alt="" width="198" height="30" /><br />
<ul>
<li class="dots"><a href="#">Sale</a></li>
<li class="dots"><a href="#">Pro Order</a></li>
<li><a href="#">Coming Soon</a></li>
</ul>
</div>
<div id="footer">
Copyright ©2018 CODER BABA All Rights Reserved / <a href="#" class="powered"><strong>Powered by company name</strong></a><br />
<a href="#" class="terms">Terms of Use</a> / <a href="#" class="terms">Privacy Policy</a>
</div> <div class="right" style="width: 526px; height: 1px; z-index: 100; left: 326px; position: absolute; top: 260px;">
<div class="information">
<fieldset style="height: 74px" >
<legend >Welcome</legend>
<br />
<br />
Welcome to :
<asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Label"></asp:Label>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/sign_out1.gif" />
<br />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/home.GIF" /><asp:ImageButton
ID="ImageButton3" runat="server" ImageUrl="~/images/sea.GIF" /><asp:ImageButton ID="ImageButton4"
runat="server" ImageUrl="~/images/ModiyPass.GIF" /><asp:ImageButton ID="ImageButton5"
runat="server" ImageUrl="~/images/ModiyPhone1.GIF" /><br />
<br />
<asp:Panel ID="Panel1" runat="server" Height="199px" Width="469px">
<br />
<br />
Enter old Password:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<br />
Enter the New
Password:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label><br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" Width="117px" /></asp:Panel>
</fieldset>
</div>
</div>
</div>
</form>
</body>
</html>
..................................................................................................................................................
Step:2- Create style.css file
*{
margin:0px;
padding:0px
}
img{border:0px}
html{
width:100%;
height:100%;
}
body{
width:766px;
margin:auto;
font-family:Tahoma;
font-size:11px;
}
.block1{
background-image:url(images/bg1.gif);
background-position:topleft;
background-repeat:repeat-x;
width:219px;
height:85px;
border-right:1px solid #001742;
padding:5px 0 0 35px;
float:left
}
.block1 li{
list-style-type:none;
color:#FFFFFF;
font-family:Tahoma;
font-weight:bold;
margin:15px 0 0 0;
float:left;
line-height:15px;
vertical-align:top
}
.block1 li img{
vertical-align:text-top
}
.select{
width:108px;
font-size:10px;
height:15px;
vertical-align:middle;
margin:0 0 0 5px;
display:inline;
font-family:Tahoma;
}
.squ{
padding:1px 8px 3px 0
}
.block2{
float:left;
background-image:url(images/bg2.gif);
background-position:top left;
background-repeat:repeat-x;
width:310px;
height:90px;
border-left:1px solid #007EAB;
border-right:1px solid #007EAB
}
.block2 a, .block3 span{
color:#FFFFFF;
font-family:Tahoma;
font-weight:bold;
text-decoration:none
}
.block2 ul{
margin:20px 0 0 35px
}
.block2 li{
list-style-type:none;
width:120px;
float:left;
background-image:url(images/arrow.gif);
background-position:0px 1px;
background-repeat:no-repeat;
padding:0 0 0 15px;
margin:0 0 7px 0;
}
.block3{
background-image:url(images/bg1.gif);
background-position:topleft;
background-repeat:repeat-x;
width:172px;
height:69px;
float:left;
border-left:1px solid #001742;
padding:21px 0 0 26px;
}
.block3 img{
float:left;
padding:0 10px 0 0
}
.block3 span{
display:block;
padding:0 0 10px 0
}
.block3 strong{color:#FFF845}
#header{
float:left
}
.menu li, .menu img{
float:left;
list-style-type:none
}
.menu{
float:left
}
#content{
float:left;
margin:1px 0 0 0;
border-top:1px solid #303B4F;
width:100%;
padding:5px 0 6px 0
}
.left{
float:left;
display:inline;
margin:0 0 0 5px;
border:1px solid #5D6B84;
width:198px
}
.left ul{
padding:17px 0 14px 30px;
float:left
}
.left li{
width:136px;
list-style-type:none;
padding:1px 0 3px 0;
}
.left li a{
background-image:url(images/arrow.gif);
background-position:0px 2px;
background-repeat:no-repeat;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
text-decoration:none;
color:#00234D;
padding:0 0 1px 25px
}
.dots{
background-image:url(images/dots.gif);
background-position:bottom left;
background-repeat:repeat-x
}
.style1{margin:0 0 14px 0}
.right{
float:left;
padding:0 0 0 5px
}
.item{
background-image:url(images/bordbg.gif);
background-position:top left;
background-repeat:repeat-y;
width:274px;
margin:0 3px 3px 0;
float:left
}
*html .item{
margin:0 0 3px 0
}
.item img{
float:left
}
.item div{
margin:6px 7px 5px 7px;
float:left
}
.items{
padding:0 30px 5px 0;
}
.item h1{
font-family:Tahoma;
font-size:11px;
font-weight:bold;
color:#00214B;
text-decoration:underline;
padding:7px 0 7px 0
}
.item span{
display:block;
padding:0 5px 5px 0;
width:115px;
font-size:10px;
font-family:Tahoma;
float:left;
color:#333A43
}
.item span strong{
display:block;
clear:both
}
.item p{
color:#666D75;
font-size:11px;
}
.item p strong{
font-family:Tahoma;
font-size:18px;
color:#FF3000;
margin:0 10px 0 0
}
#footer{
width:100%;
float:left;
border-top:4px solid #6479A0;
padding:10px 0 15px 0;
text-align:center;
color:#00214B
}
.powered{
color:#00214B
}
.terms{
color:#0051B6
}
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 10;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
.....................................................................................................................................
Download Shopping Website Project #1: Click Here
No comments:
Post a Comment