all_product.php

<?php 

include ("includes/db.php");
include ("functions/functions.php");


?><!Doctype HTML>
<head>
<title>Ecommerce Layout</title>
<link rel="stylesheet" href="styles/style.css"
media="all"/>

</head>

<body>

<!-----Main Container Starts--->
<div class="main_wrapper">



<!-----Header Section Starts--->

<div class="header_wrapper">
 <a href="index.php"><img src="images/logo.gif" style="float:left"></a>
 <img src="images/ad_banner.gif" style="float:right">







</div>


<!-----Header Section Ends--->



<!-----navbar Section Starts--->
<div id="navbar">

<ul id="menu">
<li><a href="index.php">Home</a></li>
<li><a href="all_products.php">All Products</a></li>
<li><a href="my_account.php">My account</a></li>
<li><a href="user_register.php">Sign Up</a></li>
<li><a href="cart.php">Shopping Cart</a></li>
<li><a href="contact.php">Contact Us</a></li></ul>



<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">

<input type="text" name="user_query" placeholder="Search a Product"/>
<input type="submit" name="search" value="Search"/>


</form>
</div>



</div>


<!-----navbar Section Ends--->

<!-----content Area Starts--->
<div class="content_wrapper">

<div id="right_content">right_content<div id="headline">Headline<div id="headline_content"><b>Welcome Guest</b><b style="color:yellow" >Shopping Cart:</b><span>Items:-  Price:-</span></div></div>

<div id=products_box>

<?php 

$get_products="select * from products";
$run_products=mysqli_query($con,$get_products);
while($row_products=mysqli_fetch_array($run_products)){

$pro_id=$row_products['product_id'];
$pro_title=$row_products['product_title'];
$pro_cat=$row_products['cat_id'];
$pro_brand=$row_products['brand_id'];
$pro_desc=$row_products['product_desc'];
$pro_price=$row_products['product_price'];
$pro_image=$row_products['product_img1'];

echo"<div id='single_product'>
<h3>$pro_title</h3>
<img src='admin_area/product_images/$pro_image'width='180' height='180'/><br/>
<p><b>Price:Rs: $pro_price</b></p>
<a href='details.php?pro_id=$pro_id' style='float:left;'>Details</a>
<a href='index.php?add_cart=$pro_id'>
<button style="float:right">Add to cart</button></a></div>";

}




} ?>


</div>


</div>

<div id="left_sidebar">left_sidebar</div>
          <div id="sidebar_title">Categories</div>
            <ul id="cats">


<?php getCats(); ?>


                           

</ul>

  <div id="sidebar_title">Brands</div>
            <ul id="cats">
                             


<?php getBrands();  ?>


</ul>
</div> 
<!-----content Area Ends--->




<!-----Footer Area Starts--->
<div class=footer>
<h1 style=" color:#000; text-align:center; padding-top:10px;">&copy; - By SystemWebTech</h1>


</div>
<!-----Footer Area Ends--->
</div>

<!-----Main Container End--->

</HTML> <!-----css reset code starts --->

save in style folder with name styles.css styles/style.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}


<!-----css reset code End --->


.body {background:#39C;}

.main_wrapper{



width:1000px;
height:auto;
margin:auto;



}

.header_wrapper{

width:1000px;
height:100px;
background:#FFF;


}



#navbar{


width:1000px;
height:50px;
background:#999;
color:#FFF;



}

#menu{

padding:0;
line-height:36px;
margin-top:5px;
float:left;
}

#menu li{

list-style:none;
display:inline;



}


#menu a{

color:#FFF;
text-decoration:none;
font-size:18px;
margin:5px;
padding:10px;

}


#menu a:hover{

text-decoration:underline;
colr:#333;
font-weight:bolder




}
#form{float:right; line-height:50px; padding-right:5px;} 
.content_wrapper{



width:1000px;
height:auto;
background:#F96;


}
#right_content{

width:800px;

background:#FCC;
float:right;
}

#left_sidebar{

width:200px;

background:#000;
float:left;

}

.footer{

width:1000px;
height:100px;
background:#999;
color:#FFF;
clear:both;
}

#sidebar_title{

 background:#FFF;
 color:#000;
 padding:10px;
 font-size:22px;
 font-family:"Palatino Linotype","Book Antiqua", Palatino , serif;
 }

#cats{
 text-align:center;
 padding:10px;

}

#cats li{

 list-style:none;
 margin:5px;

}

#cats a{color:#FFF; font-size:20px; text-decoration:none; margin:5px; }

#cats a:hover{ color:#F93; text-decoration:underline; font-weight:bold;}
#headline {background:#000; color:#FFF; float:right; width:780px;height:35px; padding:10px;}

#headline_content{float:right}

#products_box{

width:780px;
padding:10px;
margin-left:30px;

margin-top:10px;

margin-bottom:10px;
text-align:center;
margin-left:
margin-left:


}

#single_product{float:left; padding:10px; margin-right:10px;}
#single_product img{border:2px solid #333;}