Saturday, 16 June 2018

Shopping Website Project in ASP.NET Part1

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> &nbsp;&nbsp;
        
        </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">
        &nbsp;<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>
                &nbsp;<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 &copy;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 />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />
                Welcome to :
                <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Label"></asp:Label>
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/sign_out1.gif" />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp;&nbsp;<br />
                &nbsp;&nbsp;
                <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 />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                <br />
                <asp:Panel ID="Panel1" runat="server" Height="199px" Width="469px">
                    <br />
                    <br />
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Enter old Password:
                    &nbsp;&nbsp; &nbsp; &nbsp;
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                    <br />
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Enter the New
                    Password:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    <br />
                    <br />
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    &nbsp; &nbsp; &nbsp;&nbsp;
                    <asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label><br />
                    <br />
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                    &nbsp;&nbsp; &nbsp; &nbsp;
                    <asp:Button ID="Button1" runat="server" Text="Submit" Width="117px" /></asp:Panel>
            </fieldset>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp;
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp; &nbsp;
                            
                            
                            </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

Popular Posts