diff --git a/.idea/ecommerce-1.iml b/.idea/ecommerce-1.iml
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/ecommerce-1.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..28a804d
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..1e991ce
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ecommerce-1.iml" filepath="$PROJECT_DIR$/.idea/ecommerce-1.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/admin/admin_logout.php b/admin/admin_logout.php
new file mode 100644
index 0000000..8ece399
--- /dev/null
+++ b/admin/admin_logout.php
@@ -0,0 +1,19 @@
+<?php
+session_start();
+session_destroy();
+if(isset($_POST['logout'])) {
+    header('location: index.php');
+}
+?>
+<html>
+<head>
+
+</head>
+<body style="background:gray">
+<div style="color:skyblue  margin: auto; text-align: center;" >
+    <p style="color:skyblue">for logout the admin panal</p>
+    <tr style="font_color:white"> <input type="submit" name="logout" value="logout"></tr>
+</div>
+</body>
+
+</html>
diff --git a/admin/view_products.php b/admin/view_products.php
index 2e57b8c..7323dcc 100644
--- a/admin/view_products.php
+++ b/admin/view_products.php
@@ -3,6 +3,10 @@
     header('location: login.php?not_admin=You are not Admin!');
 }
 ?>
+<head>
+
+    <link rel="stylesheet" type="text/css" href="admin/assets/css/bootstrap.min.css">
+</head>
 <div class="row">
     <div class="col-sm-12">
         <h1>Products</h1>
@@ -37,7 +41,7 @@
                     <tr>
                         <th scope="row"><?php echo ++$i; ?></th>
                         <td><?php echo $pro_title; ?></td>
-                        <td><img class="img-thumbnail" src='product_images/<?php echo $pro_image;?>' width='80' height='80'></td>
+                        <td><img class="img-thumbnail zoom" src='product_images/<?php echo $pro_image;?>' width='80' height='80'></td>
                         <td><?php echo $pro_price; ?>/-</td>
                         <td><a href="index.php?edit_pro=<?php echo $pro_id?>" class="btn btn-primary">
                                 <i class="fa fa-edit"></i> Edit
diff --git a/all_products.php b/all_products.php
index 17e016e..8e00b8f 100644
--- a/all_products.php
+++ b/all_products.php
@@ -8,6 +8,7 @@
     <meta charset="UTF-8">
     <title>My Online Shop</title>
     <link rel="stylesheet" type="text/css" href="css/mystyle.css">
+    <link rel="stylesheet" type="text/css" href="admin/assets/css/bootstrap.min.css">
 </head>
 <body>
     <div class="main_wrapper">
@@ -42,7 +43,7 @@
                     <?php getBrands(); ?>
                 </ul>
             </div>
-            <div id="content_area">
+            <div id="content_area"  style="background-color: #9E9E9E;">
                 <div class="shopping_cart">
                     <?php cart(); ?>
                     <span style="float: right;
diff --git a/cart.php b/cart.php
index e9c1e34..c22d9f3 100644
--- a/cart.php
+++ b/cart.php
@@ -42,7 +42,7 @@
                     <?php getBrands(); ?>
                 </ul>
             </div>
-            <div id="content_area">
+            <div id="content_area"  style = "background-color: #9E9E9E;">
                 <?php
                 global $con;
                 $ip = getIp();
diff --git a/css/mystyle.css b/css/mystyle.css
index c101f45..b8d26fa 100644
--- a/css/mystyle.css
+++ b/css/mystyle.css
@@ -181,5 +181,44 @@ body {
     padding-top: 40px;
     color: black;
 }
-
+ul.gallery{    
+margin-left: 3vw;     
+margin-right:3vw;  
+}    
+
+.zoom {      
+-webkit-transition: all 0.35s ease-in-out;    
+-moz-transition: all 0.35s ease-in-out;    
+transition: all 0.35s ease-in-out;     
+cursor: -webkit-zoom-in;      
+cursor: -moz-zoom-in;      
+cursor: zoom-in;  
+}     
+
+.zoom:hover,  
+.zoom:active,   
+.zoom:focus {
+/**adjust scale to desired size, 
+add browser prefixes**/
+-ms-transform: scale(2.5);    
+-moz-transform: scale(2.5);  
+-webkit-transform: scale(2.5);  
+-o-transform: scale(2.5);  
+transform: scale(2.5);    
+position:relative;      
+z-index:100;  
+}
+
+/**To keep upscaled images visible on mobile, 
+increase left & right margins a bit**/  
+@media only screen and (max-width: 768px) {   
+ul.gallery {      
+margin-left: 15vw;       
+margin-right: 15vw;
+}
+
+/**TIP: Easy escape for touch screens,
+give gallery's parent container a cursor: pointer.**/
+.DivName {cursor: pointer}
+}
 
diff --git a/customer_login.php b/customer_login.php
index bf27801..3109927 100644
--- a/customer_login.php
+++ b/customer_login.php
@@ -33,11 +33,11 @@
             </tr>
             <tr>
                 <td align="right"><b>Email: </b></td>
-                <td><input type="text" name="email"  placeholder="Enter email" required></td>
+                <td><input class="form-control" type="text" name="email"  placeholder="Enter email" required></td>
             </tr>
             <tr>
                 <td align="right"><b>Password:</b></td>
-                <td><input type="password" name="pass" placeholder="Enter password" required></td>
+                <td><input class="form-control" type="password" name="pass" placeholder="Enter password" required></td>
             </tr>
             <tr align="center">
                 <td colspan="2"><a href="checkout.php?forgot_pass">Forgot Password? </a></td>
diff --git a/customer_register.php b/customer_register.php
index 499950b..022a90f 100644
--- a/customer_register.php
+++ b/customer_register.php
@@ -41,6 +41,7 @@
     <meta charset="UTF-8">
     <title>My Online Shop</title>
     <link rel="stylesheet" type="text/css" href="css/mystyle.css">
+    <link rel="stylesheet" type="text/css" href="admin/assets/css/bootstrap.min.css">
 </head>
 <body>
     <div class="main_wrapper">
@@ -88,31 +89,31 @@
                     </span>
                 </div>
 
-                    <form action="customer_register.php" method="post" enctype="multipart/form-data">
+                    <form action="customer_register.php" method="post"    style="background: gray;" enctype="multipart/form-data">
                         <table align="center" width="750">
                             <tr align="center">
-                                <td colspan="3"><h2>create an Account </h2></td>
+                                <td colspan="3"><h2 class="h6">create an Account </h2></td>
                             </tr>
                             <tr>
                                 <td align="right">Name: </td>
-                                <td><input name="c_name" required></td>
+                                <td><input class="form-control" name="c_name" required></td>
                             </tr>
                             <tr>
                                 <td align="right">Email: </td>
-                                <td><input name="c_email" required></td>
+                                <td><input class="form-control" name="c_email" required></td>
                             </tr>
                             <tr>
                                 <td align="right">Password: </td>
-                                <td><input type="password" name="c_pass" required></td>
+                                <td><input class="form-control" type="password" name="c_pass" required></td>
                             </tr>
                             <tr>
                                 <td align="right">Image: </td>
-                                <td><input type="file" name="c_image" required></td>
+                                <td><input   class="btn btn-primary" type="file" name="c_image" required></td>
                             </tr>
                             <tr>
-                                <td align="right">Country: </td>
+                                <td  align="right">Country: </td>
                                 <td>
-                                    <select name="c_country">
+                                    <select  class="btn btn-primary" name="c_country">
                                         <option>Select a Country </option>
                                         <option>Afghanistan </option>
                                         <option>Pakistan</option>
@@ -123,18 +124,18 @@
                             </tr>
                             <tr>
                                 <td align="right">City: </td>
-                                <td><input name="c_city" required></td>
+                                <td><input class="form-control" name="c_city" required></td>
                             </tr>
                             <tr>
                                 <td align="right">Contact: </td>
-                                <td><input name="c_contact" required pattern=".*"></td>
+                                <td><input class="form-control" name="c_contact" required pattern=".*"></td>
                             </tr>
                             <tr>
                                 <td align="right">Address: </td>
-                                <td><input name="c_address" required></td>
+                                <td><input class="form-control" name="c_address" required></td>
                             </tr>
                             <tr align="center">
-                                <td colspan="3"><input type="submit" name="register" value="Create Account"></td>
+                                <td colspan="3"><input style="float:right" class="btn btn-primary" type="submit" name="register" value="Create Account"></td>
                             </tr>
                         </table>
 
diff --git a/functions/functions.php b/functions/functions.php
index ca58bd1..94c20ab 100644
--- a/functions/functions.php
+++ b/functions/functions.php
@@ -25,7 +25,7 @@ function getBrands(){
     }
 }
 
-function getPro($flag = ''){
+function getPro($flag = '',$search_pro=''){
     global $con;
     $get_pro = "";
     if(!isset($_GET['cat']) && !isset($_GET['brand']) && !isset($_GET['search'])) {
@@ -39,9 +39,14 @@ function getPro($flag = ''){
     } else if(isset($_GET['brand'])){
         $pro_brand_id = $_GET['brand'];
         $get_pro = "select * from products where pro_brand = '$pro_brand_id'";
-    } else if(isset($_GET['search'])){
-        $search_query = $_GET['user_query'];
-        $get_pro = "select * from products where pro_keywords like '%$search_query%'";
+    } else if(isset($_GET['search']) || $search_pro != ''){
+        $search_query = '';
+        if($search_pro == '')
+            $search_query = $_GET['user_query'];
+        else {
+            $search_query = $search_pro;
+            $get_pro = "select * from products where pro_keywords like '%$search_query%'";
+        }
     }
     $run_pro = mysqli_query($con,$get_pro);
     $count_pro = mysqli_num_rows($run_pro);
@@ -57,8 +62,8 @@ function getPro($flag = ''){
         $pro_image = $row_pro['pro_image'];
         echo "
                 <div class='single_product'>
-                    <h3>$pro_title</h3>
-                    <img src='admin/product_images/$pro_image' width='180' height='180'>
+                    <h3 class='h6'>$pro_title</h3>
+                    <img src='admin/product_images/$pro_image' class='img-thumbnail zoom' width='180' height='180'>
                     <p> <b> 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>
diff --git a/index.php b/index.php
index 40a0cbb..e3d06e7 100644
--- a/index.php
+++ b/index.php
@@ -6,32 +6,59 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta class="viewport" content="width=device-width, initial-scale=1.0">
     <title>My Online Shop</title>
+    <link rel="stylesheet" type="text/css" href="admin/assets/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="css/mystyle.css">
+    <script>
+        function check_input(q){
+            console.log(q);
+            if(q == ''){
+                document.getElementById('products_box').innerHTML = '';
+            }
+            else {
+                var http = new XMLHttpRequest();
+                http.onreadystatechange = function () {
+                    if (http.readyState == 4 && http.status == 200){
+                        document.getElementById('products_box').innerHTML = http.responseText;
+                    }
+                }
+                http.open('get','search_products.php?pro=' + q);
+                http.send();
+            }
+        }
+
+
+    </script>
 </head>
 <body>
-    <div class="main_wrapper">
+    <div class="main_wrapper" >
         <div class="header_wrapper">
-            <a href="index.php"><img id="logo" src="images/logo.jpg"></a>
-            <img id="banner" src="images/banner.gif">
+                <a href="index.php"><img class="col-sm-9" id="logo" src="images/logo.jpg"></a>
+                <img class="row-md-9" id="banner" src="images/banner.gif">
+
         </div>
-        <div class="menubar">
-            <ul id="menu">
+        <div class="menubar" class="container">
+            <ul id="menu" class="col-sm-12">
                 <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="#">Sign Up</a></li>
                 <li><a href="cart.php">Cart</a></li>
                 <li><a href="#">Contact Us</a></li>
+
             </ul>
             <div id="form">
                 <form method="get" action="results.php">
-                    <input type="text" name="user_query" placeholder="Search products">
-                    <input type="submit" name="search" value="Search">
+                   <div class="row">
+                       <input type="text" name="user_query" onkeyup="check_input(this.value)" placeholder="Search products">
+                       <input type="submit" name="search" value="Search">
+
+                   </div>
                 </form>
             </div>
         </div>
-        <div class="content_wrapper">
+        <div class="content_wrapper" class="col-md-9">
             <div id="sidebar">
                 <div class="sidebar_title">Categories </div>
                 <ul class="cats">
@@ -42,8 +69,8 @@
                     <?php getBrands(); ?>
                 </ul>
             </div>
-            <div id="content_area">
-                <div class="shopping_cart">
+            <div id="content_area"     style="background-color: #9E9E9E;">
+                <div class="shopping_cart" class="col-sm-9">
                     <?php cart(); ?>
                     <span style="float: right;
                     font-size: 18px; padding: 5px;line-height: 40px;">
@@ -69,14 +96,14 @@
                         ?>
                     </span>
                 </div>
-                <div class="products_box">
+                <div id="products_box" class="col-sm-12" class="products_box" class="img-thumbnail zoom">
                     <?php getPro(); ?>
                 </div>
 
             </div>
         </div>
         <div id="footer">
-            <h2> &copy; 2018 by Muhammad Ali Makhdoom</h2>
+            <h2> &copy; 2018 by Muhammad ali Makhdoom</h2>
         </div>
     </div>
 </body>
diff --git a/logout.php b/logout.php
index 7efdf20..e72121a 100644
--- a/logout.php
+++ b/logout.php
@@ -1,5 +1,16 @@
 <?php
 session_start();
 session_destroy();
-header('location: index.php');
-?>
\ No newline at end of file
+    	   
+//header('location: index.php');
+?>
+   <html>
+	   <head>
+	   </head>
+	  <body>
+	  <div style="color:skyblue">
+        <input type="submit" name="logout">for logout the admin panal</input>
+</div>
+	  </body>
+	  
+</html>
\ No newline at end of file
diff --git a/search_products.php b/search_products.php
new file mode 100644
index 0000000..0bafa29
--- /dev/null
+++ b/search_products.php
@@ -0,0 +1,12 @@
+<?php
+require "functions/functions.php";
+$pro = $_GET['pro'];
+echo "
+            
+                    <img src='admin/product_images/$pro_image' class='img-thumbnail' width='180' height='180'>
+                    <p> <b> 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>
+             
+        ";
+

create an Account			create an Account
Name:
Email:
Password:
Image:
Country:	Country:	- @@ -123,18 +124,18 @@
City:
Contact:
Address: