├── mobile_shope
    ├── assets
    │   ├── Banner1.png
    │   ├── Banner2.png
    │   ├── blog
    │   │   ├── blog1.jpg
    │   │   ├── blog2.jpg
    │   │   ├── blog3.jpg
    │   │   └── empty_cart.png
    │   ├── products
    │   │   ├── 1.png
    │   │   ├── 10.png
    │   │   ├── 11.png
    │   │   ├── 12.png
    │   │   ├── 13.png
    │   │   ├── 14.png
    │   │   ├── 15.png
    │   │   ├── 2.png
    │   │   ├── 3.png
    │   │   ├── 4.png
    │   │   ├── 5.png
    │   │   ├── 6.png
    │   │   └── 8.png
    │   ├── banner1-cr-500x150.jpg
    │   └── banner2-cr-500x150.jpg
    ├── html template
    │   ├── assets
    │   │   ├── Banner1.png
    │   │   ├── Banner2.png
    │   │   ├── blog
    │   │   │   ├── blog1.jpg
    │   │   │   ├── blog2.jpg
    │   │   │   ├── blog3.jpg
    │   │   │   └── empty_cart.png
    │   │   ├── products
    │   │   │   ├── 1.png
    │   │   │   ├── 2.png
    │   │   │   ├── 3.png
    │   │   │   ├── 4.png
    │   │   │   ├── 5.png
    │   │   │   ├── 6.png
    │   │   │   ├── 8.png
    │   │   │   ├── 10.png
    │   │   │   ├── 11.png
    │   │   │   ├── 12.png
    │   │   │   ├── 13.png
    │   │   │   ├── 14.png
    │   │   │   └── 15.png
    │   │   ├── banner1-cr-500x150.jpg
    │   │   └── banner2-cr-500x150.jpg
    │   ├── sass
    │   │   ├── include
    │   │   │   ├── global.scss
    │   │   │   ├── special-price.scss
    │   │   │   ├── variables.scss
    │   │   │   ├── typography.scss
    │   │   │   ├── color.scss
    │   │   │   └── top-sale.scss
    │   │   └── style.scss
    │   ├── package.json
    │   ├── style.css.map
    │   ├── style.css
    │   ├── index.js
    │   ├── cart.html
    │   ├── product.html
    │   └── index.html
    ├── Template
    │   ├── _banner-ads.php
    │   ├── ajax.php
    │   ├── _banner-area.php
    │   ├── notFound
    │   │   ├── _wishlist_notFound.php
    │   │   └── _cart_notFound.php
    │   ├── _blogs.php
    │   ├── _top-sale.php
    │   ├── _new-phones.php
    │   ├── _special-price.php
    │   ├── _wishilist_template.php
    │   ├── _cart-template.php
    │   └── _products.php
    ├── product.php
    ├── functions.php
    ├── cart.php
    ├── index.php
    ├── database
    │   ├── DBController.php
    │   ├── Product.php
    │   ├── Cart.php
    │   └── shopee.sql
    ├── style.css
    ├── footer.php
    ├── header.php
    └── index.js
└── README.md


/mobile_shope/assets/Banner1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/Banner1.png


--------------------------------------------------------------------------------
/mobile_shope/assets/Banner2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/Banner2.png


--------------------------------------------------------------------------------
/mobile_shope/assets/blog/blog1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/blog/blog1.jpg


--------------------------------------------------------------------------------
/mobile_shope/assets/blog/blog2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/blog/blog2.jpg


--------------------------------------------------------------------------------
/mobile_shope/assets/blog/blog3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/blog/blog3.jpg


--------------------------------------------------------------------------------
/mobile_shope/assets/products/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/1.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/10.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/11.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/12.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/13.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/14.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/15.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/2.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/3.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/4.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/5.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/6.png


--------------------------------------------------------------------------------
/mobile_shope/assets/products/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/products/8.png


--------------------------------------------------------------------------------
/mobile_shope/assets/blog/empty_cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/blog/empty_cart.png


--------------------------------------------------------------------------------
/mobile_shope/assets/banner1-cr-500x150.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/banner1-cr-500x150.jpg


--------------------------------------------------------------------------------
/mobile_shope/assets/banner2-cr-500x150.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/assets/banner2-cr-500x150.jpg


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/Banner1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/Banner1.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/Banner2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/Banner2.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/blog/blog1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/blog/blog1.jpg


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/blog/blog2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/blog/blog2.jpg


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/blog/blog3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/blog/blog3.jpg


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/1.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/2.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/3.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/4.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/5.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/6.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/8.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/10.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/11.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/12.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/13.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/14.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/products/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/products/15.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # mobiel_store
2 |  Here are an example of mobile friendly ecommerce website. ... clear images of the items with prices and short descriptions below.
3 | 


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/blog/empty_cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/blog/empty_cart.png


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/banner1-cr-500x150.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/banner1-cr-500x150.jpg


--------------------------------------------------------------------------------
/mobile_shope/html template/assets/banner2-cr-500x150.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zmoussam/mobile_store/HEAD/mobile_shope/html template/assets/banner2-cr-500x150.jpg


--------------------------------------------------------------------------------
/mobile_shope/html template/sass/include/global.scss:
--------------------------------------------------------------------------------
1 | /* global classes */
2 | button, button:focus{
3 |     outline: none !important;
4 |     box-shadow: none !important;
5 | }


--------------------------------------------------------------------------------
/mobile_shope/html template/sass/include/special-price.scss:
--------------------------------------------------------------------------------
1 | /* Special Price section Template */
2 | 
3 | #special-price{
4 |     .grid .grid-item{
5 |         margin-right:1.2rem;
6 |         margin-top:1rem;
7 |     }
8 | }


--------------------------------------------------------------------------------
/mobile_shope/html template/sass/include/variables.scss:
--------------------------------------------------------------------------------
1 | $font-baloo : "Baloo Thambi 2" ,cursive;
2 | $font-raleway : "Raleway" ,cursive;
3 | $font-rubik : "Rubik",cursive;
4 | $color-primary:#003859;
5 | $color-second:#00A5C4;
6 | $color-yellow:#FFD289;


--------------------------------------------------------------------------------
/mobile_shope/Template/_banner-ads.php:
--------------------------------------------------------------------------------
1 | <!-- Banner Ads  -->
2 | <section id="banner_adds">
3 |     <div class="container py-5 text-center">
4 |         <img src="./assets/banner1-cr-500x150.jpg" alt="banner1" class="img-fluid">
5 |         <img src="./assets/banner2-cr-500x150.jpg" alt="banner1" class="img-fluid">
6 |     </div>
7 | </section>
8 | <!-- !Banner Ads  -->
9 | 


--------------------------------------------------------------------------------
/mobile_shope/html template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mobileshopee",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start":"sass ./sass/style.scss style.css --watch"
 9 |   },
10 |   "author": "zakaria moussammi",
11 |   "license": "ISC"
12 | }
13 | 


--------------------------------------------------------------------------------
/mobile_shope/html template/sass/style.scss:
--------------------------------------------------------------------------------
1 | /* Sass Template  */
2 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Raleway&family=Rubik&display=swap');
3 | @import'./include/variables.scss';
4 | @import'./include/global.scss';
5 | @import'./include/typography.scss';
6 | @import'./include/color.scss';
7 | @import'./include/top-sale.scss';
8 | @import'./include/special-price.scss';


--------------------------------------------------------------------------------
/mobile_shope/html template/sass/include/typography.scss:
--------------------------------------------------------------------------------
 1 | /* typography classes */
 2 | .font-baloo{
 3 |     font-family: $font-baloo;
 4 | }
 5 | .font-rale{
 6 |     font-family: $font-raleway;
 7 | }
 8 | .font-rubik{
 9 |     font-family: $font-rubik;
10 | }
11 | .font-size-12{
12 |     font-size: 12px;
13 | }
14 | .font-size-14{
15 |     font-size: 16px;
16 | }
17 | .font-size-20{
18 |     font-size: 20px;
19 | }


--------------------------------------------------------------------------------
/mobile_shope/product.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // include header.php file
 3 | include ('header.php');
 4 | ?>
 5 | 
 6 | <?php
 7 | 
 8 | /*  include products */
 9 | include ('Template/_products.php');
10 | /*  include products */
11 | 
12 | /*  include top sale section */
13 | include ('Template/_top-sale.php');
14 | /*  include top sale section */
15 | 
16 | ?>
17 | 
18 | <?php
19 | // include footer.php file
20 | include ('footer.php');
21 | ?>
22 | 
23 | 


--------------------------------------------------------------------------------
/mobile_shope/Template/ajax.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // require MySQL Connection
 4 | require ('../database/DBController.php');
 5 | 
 6 | // require Product Class
 7 | require ('../database/Product.php');
 8 | 
 9 | // DBController object
10 | $db = new DBController();
11 | 
12 | // Product object
13 | $product = new Product($db);
14 | 
15 | if (isset($_POST['itemid'])){
16 |     $result = $product->getProduct($_POST['itemid']);
17 |     echo json_encode($result);
18 | }


--------------------------------------------------------------------------------
/mobile_shope/html template/sass/include/color.scss:
--------------------------------------------------------------------------------
 1 | /* color Template */
 2 | .color-primary{
 3 | color: $color-primary;
 4 | }
 5 | 
 6 | .color-primary-bg{
 7 |     background: $color-primary;
 8 | }
 9 | .color-second{
10 |     color:$color-second;
11 | }
12 | .color-second-bg{
13 |     background:$color-second;
14 | }
15 |  .color-yellow{
16 |      color:$color-yellow;
17 |  }
18 |  
19 |  .color-yellow-bg{
20 |      background:$color-yellow;
21 |  }
22 | 
23 | 


--------------------------------------------------------------------------------
/mobile_shope/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // require MySQL Connection
 4 | require ('database/DBController.php');
 5 | 
 6 | // require Product Class
 7 | require ('database/Product.php');
 8 | 
 9 | // require Cart Class
10 | require ('database/Cart.php');
11 | 
12 | 
13 | // DBController object
14 | $db = new DBController();
15 | 
16 | // Product object
17 | $product = new Product($db);
18 | $product_shuffle = $product->getData();
19 | 
20 | // Cart object
21 | $Cart = new Cart($db );
22 | 


--------------------------------------------------------------------------------
/mobile_shope/Template/_banner-area.php:
--------------------------------------------------------------------------------
 1 | <!-- Owl-carousel -->
 2 | <section id="banner-area">
 3 |     <div class="owl-carousel owl-theme">
 4 |         <div class="item">
 5 |             <img src="./assets/Banner1.png" alt="Banner1">
 6 |         </div>
 7 |         <div class="item">
 8 |             <img src="./assets/Banner2.png" alt="Banner2">
 9 |         </div>
10 |         <div class="item">
11 |             <img src="./assets/Banner1.png" alt="Banner3">
12 |         </div>
13 |     </div>
14 | </section>
15 | <!-- !Owl-carousel -->
16 | 


--------------------------------------------------------------------------------
/mobile_shope/html template/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["sass/style.scss","sass/include/global.scss","sass/include/typography.scss","sass/include/variables.scss","sass/include/color.scss","sass/include/top-sale.scss","sass/include/special-price.scss"],"names":[],"mappings":"AAAA;AACQ;ACDR;AACA;EACI;EACA;;;ACHJ;AACA;EACI,aCFU;;;ADId;EACI,aCJY;;;ADMhB;EACI,aCNU;;;ADQd;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AEjBJ;AACA;EACA,ODCe;;;ACEf;EACI,YDHW;;;ACKf;EACI,ODLU;;;ACOd;EACI,YDRU;;;ACUb;EACI,ODVS;;;ACab;EACI,YDdS;;;AELd;AAEI;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;AAAA;EAEI;EACA,OFtBO;EEuBP;;AAEJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;ACrCR;AAGI;EACI;EACA","file":"style.css"}


--------------------------------------------------------------------------------
/mobile_shope/cart.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | ob_start();
 3 | // include header.php file
 4 | include ('header.php');
 5 | ?>
 6 | 
 7 | <?php
 8 | 
 9 | /*  include cart items if it is not empty */
10 | count($product->getData('cart')) ? include ('Template/_cart-template.php') :  include ('Template/notFound/_cart_notFound.php');
11 | /*  include cart items if it is not empty */
12 | 
13 | /*  include top sale section */
14 | count($product->getData('wishlist')) ? include ('Template/_wishilist_template.php') :  include ('Template/notFound/_wishlist_notFound.php');
15 | /*  include top sale section */
16 | 
17 | 
18 | /*  include top sale section */
19 | include ('Template/_new-phones.php');
20 | /*  include top sale section */
21 | 
22 | ?>
23 | 
24 | <?php
25 | // include footer.php file
26 | include ('footer.php');
27 | ?>
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/mobile_shope/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | ob_start();
 3 | // include header.php file
 4 | include ('header.php');
 5 | ?>
 6 | 
 7 | <?php
 8 | 
 9 | /*  include banner area  */
10 | include ('Template/_banner-area.php');
11 | /*  include banner area  */
12 | 
13 | /*  include top sale section */
14 | include ('Template/_top-sale.php');
15 | /*  include top sale section */
16 | 
17 | /*  include special price section  */
18 | include ('Template/_special-price.php');
19 | /*  include special price section  */
20 | 
21 | /*  include banner ads  */
22 | include ('Template/_banner-ads.php');
23 | /*  include banner ads  */
24 | 
25 | /*  include new phones section  */
26 | include ('Template/_new-phones.php');
27 | /*  include new phones section  */
28 | 
29 | /*  include blog area  */
30 | include ('Template/_blogs.php');
31 | /*  include blog area  */
32 | 
33 | ?>
34 | 
35 | 
36 | <?php
37 | // include footer.php file
38 | include ('footer.php');
39 | ?>


--------------------------------------------------------------------------------
/mobile_shope/Template/notFound/_wishlist_notFound.php:
--------------------------------------------------------------------------------
 1 | <!-- Shopping cart section  -->
 2 | 
 3 | <section id="cart" class="py-3 mb-5">
 4 |     <div class="container-fluid w-75">
 5 |         <h5 class="font-baloo font-size-20">Wishlist</h5>
 6 | 
 7 |         <!--  shopping cart items   -->
 8 |         <div class="row">
 9 |             <div class="col-sm-9">
10 |                 <!-- Empty Cart -->
11 |                 <div class="row border-top py-3 mt-3">
12 |                     <div class="col-sm-12 text-center py-2">
13 |                         <img src="./assets/blog/empty_cart.png" alt="Empty Cart" class="img-fluid" style="height: 200px;">
14 |                         <p class="font-baloo font-size-16 text-black-50">Empty Wishlist</p>
15 |                     </div>
16 |                 </div>
17 |                 <!-- .Empty Cart -->
18 |             </div>
19 |         </div>
20 |         <!--  !shopping cart items   -->
21 |     </div>
22 | </section>
23 | <!-- !Shopping cart section  -->


--------------------------------------------------------------------------------
/mobile_shope/database/DBController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | 
 4 | class DBController
 5 | {
 6 |     // Database Connection Properties
 7 |     protected $host = 'localhost';
 8 |     protected $user = 'root';
 9 |     protected $password = '';
10 |     protected $database = "shopee";
11 | 
12 |     // connection property
13 |     public $con = null;
14 | 
15 |     // call constructor
16 |     public function __construct()
17 |     {
18 |         $this->con = mysqli_connect($this->host, $this->user, $this->password, $this->database);
19 |         if ($this->con->connect_error){
20 |             echo "Fail " . $this->con->connect_error;
21 |         }
22 |     }
23 | 
24 |     public function __destruct()
25 |     {
26 |         $this->closeConnection();
27 |     }
28 | 
29 |     // for mysqli closing connection
30 |     protected function closeConnection(){
31 |         if ($this->con != null ){
32 |             $this->con->close();
33 |             $this->con = null;
34 |         }
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/mobile_shope/html template/sass/include/top-sale.scss:
--------------------------------------------------------------------------------
 1 | /* to sale template*/ 
 2 | #top-sale{
 3 |     .owl-carousel .item .product a{
 4 |         overflow: hidden;
 5 |     }
 6 |     .owl-carousel .item .product img{
 7 |         transition: transform .5s ease;
 8 |     }
 9 | 
10 |     .owl-carousel .item .product img:hover{
11 |         transform: scale(1.1);
12 |     }
13 |     .owl-carousel .owl-nav button{
14 |         position:absolute;
15 |         top:30%;
16 |         outline: none;
17 |     }
18 | 
19 |     .owl-carousel .owl-nav button.owl-prev{
20 |         left: 0;
21 |     }
22 |     
23 |     .owl-carousel .owl-nav button.owl-prev span,
24 |     .owl-carousel .owl-nav button.owl-next span{
25 |         font-size:35px;
26 |         color:$color-primary;
27 |         padding: 0 1rem;
28 |     }
29 |     .owl-carousel .owl-nav button.owl-prev span{
30 |         margin-left:-4rem;
31 |     }
32 | 
33 |     .owl-carousel .owl-nav button.owl-next{
34 |         right:0;
35 |     }
36 | 
37 |     .owl-carousel .owl-nav button.owl-next span{
38 |         margin-right:-4rem;
39 |     }
40 | 
41 | }


--------------------------------------------------------------------------------
/mobile_shope/database/Product.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // Use to fetch product data
 4 | class Product
 5 | {
 6 |     public $db = null;
 7 | 
 8 |     public function __construct(DBController $db)
 9 |     {
10 |         if (!isset($db->con)) return null;
11 |         $this->db = $db;
12 |     }
13 | 
14 |     // fetch product data using getData Method
15 |     public function getData($table = 'product'){
16 |         $result = $this->db->con->query("SELECT * FROM {$table}");
17 | 
18 |         $resultArray = array();
19 | 
20 |         // fetch product data one by one
21 |         while ($item = mysqli_fetch_array($result, MYSQLI_ASSOC)){
22 |             $resultArray[] = $item;
23 |         }
24 | 
25 |         return $resultArray;
26 |     }
27 | 
28 |     // get product using item id
29 |     public function getProduct($item_id = null, $table= 'product'){
30 |         if (isset($item_id)){
31 |             $result = $this->db->con->query("SELECT * FROM {$table} WHERE item_id={$item_id}");
32 | 
33 |             $resultArray = array();
34 | 
35 |             // fetch product data one by one
36 |             while ($item = mysqli_fetch_array($result, MYSQLI_ASSOC)){
37 |                 $resultArray[] = $item;
38 |             }
39 | 
40 |             return $resultArray;
41 |         }
42 |     }
43 | 
44 | }


--------------------------------------------------------------------------------
/mobile_shope/Template/notFound/_cart_notFound.php:
--------------------------------------------------------------------------------
 1 | <!-- Shopping cart section  -->
 2 | <section id="cart" class="py-3 mb-5">
 3 |     <div class="container-fluid w-75">
 4 |         <h5 class="font-baloo font-size-20">Shopping Cart</h5>
 5 | 
 6 |         <!--  shopping cart items   -->
 7 |         <div class="row">
 8 |             <div class="col-sm-9">
 9 |                 <!-- Empty Cart -->
10 |                 <div class="row border-top py-3 mt-3">
11 |                     <div class="col-sm-12 text-center py-2">
12 |                         <img src="./assets/blog/empty_cart.png" alt="Empty Cart" class="img-fluid" style="height: 200px;">
13 |                         <p class="font-baloo font-size-16 text-black-50">Empty Cart</p>
14 |                     </div>
15 |                 </div>
16 |                 <!-- .Empty Cart -->
17 |             </div>
18 |             <!-- subtotal section-->
19 |             <div class="col-sm-3">
20 |                 <div class="sub-total border text-center mt-2">
21 |                     <h6 class="font-size-12 font-rale text-success py-3"><i class="fas fa-check"></i> Your order is eligible for FREE Delivery.</h6>
22 |                     <div class="border-top py-4">
23 |                         <h5 class="font-baloo font-size-20">Subtotal ( <?php echo isset($subTotal) ? count($subTotal) : 0; ?> item):&nbsp; <span class="text-danger">$<span class="text-danger" id="deal-price"><?php echo isset($subTotal) ? $Cart->getSum($subTotal) : 0; ?></span> </span> </h5>
24 |                         <button type="submit" class="btn btn-warning mt-3">Proceed to Buy</button>
25 |                     </div>
26 |                 </div>
27 |             </div>
28 |             <!-- !subtotal section-->
29 |         </div>
30 |         <!--  !shopping cart items   -->
31 |     </div>
32 | </section>
33 | <!-- !Shopping cart section  -->


--------------------------------------------------------------------------------
/mobile_shope/Template/_blogs.php:
--------------------------------------------------------------------------------
 1 | 
 2 | <!-- Blogs -->
 3 | <section id="blogs">
 4 |     <div class="container py-4">
 5 |         <h4 class="font-rubik font-size-20">Latest Blogs</h4>
 6 |         <hr>
 7 | 
 8 |         <div class="owl-carousel owl-theme">
 9 |             <div class="item">
10 |                 <div class="card border-0 font-rale mr-5" style="width: 18rem;">
11 |                     <h5 class="card-title font-size-16">Upcoming Mobiles</h5>
12 |                     <img src="./assets/blog/blog1.jpg" alt="cart image" class="card-img-top">
13 |                     <p class="card-text font-size-14 text-black-50 py-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p>
14 |                     <a href="#" class="color-second text-left">Go somewhere</a>
15 |                 </div>
16 |             </div>
17 |             <div class="item">
18 |                 <div class="card border-0 font-rale mr-5" style="width: 18rem;">
19 |                     <h5 class="card-title font-size-16">Upcoming Mobiles</h5>
20 |                     <img src="./assets/blog/blog2.jpg" alt="cart image" class="card-img-top">
21 |                     <p class="card-text font-size-14 text-black-50 py-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p>
22 |                     <a href="#" class="color-second text-left">Go somewhere</a>
23 |                 </div>
24 |             </div>
25 |             <div class="item">
26 |                 <div class="card border-0 font-rale mr-5" style="width: 18rem;">
27 |                     <h5 class="card-title font-size-16">Upcoming Mobiles</h5>
28 |                     <img src="./assets/blog/blog3.jpg" alt="cart image" class="card-img-top">
29 |                     <p class="card-text font-size-14 text-black-50 py-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p>
30 |                     <a href="#" class="color-second text-left">Go somewhere</a>
31 |                 </div>
32 |             </div>
33 |         </div>
34 |     </div>
35 | </section>
36 | <!-- !Blogs -->
37 | 


--------------------------------------------------------------------------------
/mobile_shope/html template/style.css:
--------------------------------------------------------------------------------
  1 | /* Sass Template  */
  2 | @import url("https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Raleway&family=Rubik&display=swap");
  3 | /* global classes */
  4 | button, button:focus {
  5 |   outline: none !important;
  6 |   box-shadow: none !important;
  7 | }
  8 | 
  9 | /* typography classes */
 10 | .font-baloo {
 11 |   font-family: "Baloo Thambi 2", cursive;
 12 | }
 13 | 
 14 | .font-rale {
 15 |   font-family: "Raleway", cursive;
 16 | }
 17 | 
 18 | .font-rubik {
 19 |   font-family: "Rubik", cursive;
 20 | }
 21 | 
 22 | .font-size-12 {
 23 |   font-size: 12px;
 24 | }
 25 | 
 26 | .font-size-14 {
 27 |   font-size: 16px;
 28 | }
 29 | 
 30 | .font-size-20 {
 31 |   font-size: 20px;
 32 | }
 33 | 
 34 | /* color Template */
 35 | .color-primary {
 36 |   color: #003859;
 37 | }
 38 | 
 39 | .color-primary-bg {
 40 |   background: #003859;
 41 | }
 42 | 
 43 | .color-second {
 44 |   color: #00A5C4;
 45 | }
 46 | 
 47 | .color-second-bg {
 48 |   background: #00A5C4;
 49 | }
 50 | 
 51 | .color-yellow {
 52 |   color: #FFD289;
 53 | }
 54 | 
 55 | .color-yellow-bg {
 56 |   background: #FFD289;
 57 | }
 58 | 
 59 | /* to sale template*/
 60 | #top-sale .owl-carousel .item .product a {
 61 |   overflow: hidden;
 62 | }
 63 | #top-sale .owl-carousel .item .product img {
 64 |   transition: transform 0.5s ease;
 65 | }
 66 | #top-sale .owl-carousel .item .product img:hover {
 67 |   transform: scale(1.1);
 68 | }
 69 | #top-sale .owl-carousel .owl-nav button {
 70 |   position: absolute;
 71 |   top: 30%;
 72 |   outline: none;
 73 | }
 74 | #top-sale .owl-carousel .owl-nav button.owl-prev {
 75 |   left: 0;
 76 | }
 77 | #top-sale .owl-carousel .owl-nav button.owl-prev span,
 78 | #top-sale .owl-carousel .owl-nav button.owl-next span {
 79 |   font-size: 35px;
 80 |   color: #003859;
 81 |   padding: 0 1rem;
 82 | }
 83 | #top-sale .owl-carousel .owl-nav button.owl-prev span {
 84 |   margin-left: -4rem;
 85 | }
 86 | #top-sale .owl-carousel .owl-nav button.owl-next {
 87 |   right: 0;
 88 | }
 89 | #top-sale .owl-carousel .owl-nav button.owl-next span {
 90 |   margin-right: -4rem;
 91 | }
 92 | 
 93 | /* Special Price section Template */
 94 | #special-price .grid .grid-item {
 95 |   margin-right: 1.2rem;
 96 |   margin-top: 1rem;
 97 | }
 98 | 
 99 | /*# sourceMappingURL=style.css.map */
100 | 


--------------------------------------------------------------------------------
/mobile_shope/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Raleway&family=Rubik&display=swap");
  2 | /*              Sass Template           */
  3 | /*  global classes  */
  4 | button, button:focus {
  5 |     outline: none !important;
  6 |     box-shadow: none !important;
  7 | }
  8 | 
  9 | /* typography classes */
 10 | .font-baloo {
 11 |     font-family: "Baloo Thambi 2", cursive;
 12 | }
 13 | 
 14 | .font-rale {
 15 |     font-family: "Raleway", cursive;
 16 | }
 17 | 
 18 | .font-rubik {
 19 |     font-family: "Rubik", cursive;
 20 | }
 21 | 
 22 | .font-size-12 {
 23 |     font-size: 12px;
 24 | }
 25 | 
 26 | .font-size-14 {
 27 |     font-size: 14px;
 28 | }
 29 | 
 30 | .font-size-16 {
 31 |     font-size: 16px;
 32 | }
 33 | 
 34 | .font-size-20 {
 35 |     font-size: 20px;
 36 | }
 37 | 
 38 | /* Color Template  */
 39 | .color-primary {
 40 |     color: #003859;
 41 | }
 42 | 
 43 | .color-primary-bg {
 44 |     background: #003859;
 45 | }
 46 | 
 47 | .color-second {
 48 |     color: #00A5C4;
 49 | }
 50 | 
 51 | .color-second-bg {
 52 |     background: #00A5C4;
 53 | }
 54 | 
 55 | .color-yellow {
 56 |     color: #FFD289;
 57 | }
 58 | 
 59 | .color-yellow-bg {
 60 |     background: #FFD289;
 61 | }
 62 | 
 63 | /*  top sale template   */
 64 | #top-sale .owl-carousel .item .product a {
 65 |     overflow: hidden;
 66 | }
 67 | #top-sale .owl-carousel .item .product img {
 68 |     transition: transform 0.5s ease;
 69 | }
 70 | #top-sale .owl-carousel .item .product img:hover {
 71 |     transform: scale(1.1);
 72 | }
 73 | #top-sale .owl-carousel .owl-nav button {
 74 |     position: absolute;
 75 |     top: 30%;
 76 |     outline: none;
 77 | }
 78 | #top-sale .owl-carousel .owl-nav button.owl-prev {
 79 |     left: 0;
 80 | }
 81 | #top-sale .owl-carousel .owl-nav button.owl-prev span,
 82 | #top-sale .owl-carousel .owl-nav button.owl-next span {
 83 |     font-size: 35px;
 84 |     color: #003859;
 85 |     padding: 0 1rem;
 86 | }
 87 | #top-sale .owl-carousel .owl-nav button.owl-prev span {
 88 |     margin-left: -4rem;
 89 | }
 90 | #top-sale .owl-carousel .owl-nav button.owl-next {
 91 |     right: 0;
 92 | }
 93 | #top-sale .owl-carousel .owl-nav button.owl-next span {
 94 |     margin-right: -4rem;
 95 | }
 96 | 
 97 | /*   Special Price Section Template */
 98 | #special-price .grid .grid-item {
 99 |     margin-right: 1.2rem;
100 |     margin-top: 1rem;
101 | }
102 | 
103 | /*# sourceMappingURL=style.css.map */
104 | 


--------------------------------------------------------------------------------
/mobile_shope/html template/index.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function(){
 2 | 
 3 |     // banner owl carousel
 4 |     $("#banner-area .owl-carousel").owlCarousel({
 5 |         dots: true,
 6 |         items: 1
 7 |     });
 8 |      // top sale owl carousel
 9 |      $("#top-sale .owl-carousel").owlCarousel({
10 |         loop: true,
11 |         nav: true,
12 |         dots: false,
13 |         responsive : {
14 |             0: {
15 |                 items: 1
16 |             },
17 |             600: {
18 |                 items: 3
19 |             },
20 |             1000 : {
21 |                 items: 5
22 |             }
23 |         }
24 |     });
25 | 
26 |     // isotope filter
27 |     var $grid = $(".grid").isotope({
28 |         itemSelector : '.grid-item',
29 |         layoutMode : 'fitRows'
30 |     });
31 | 
32 |     
33 |     // filter items on button click
34 |     $(".button-group").on("click", "button", function(){
35 |         var filterValue = $(this).attr('data-filter');
36 |         $grid.isotope({ filter: filterValue});
37 |     })
38 | 
39 |     
40 |     // new phones owl carousel
41 |     $("#new-phones .owl-carousel").owlCarousel({
42 |         loop: true,
43 |         nav: false,
44 |         dots: true,
45 |         responsive : {
46 |             0: {
47 |                 items: 1
48 |             },
49 |             600: {
50 |                 items: 3
51 |             },
52 |             1000 : {
53 |                 items: 5
54 |             }
55 |         }
56 |     });
57 | 
58 |      // blogs owl carousel
59 |      $("#blogs .owl-carousel").owlCarousel({
60 |         loop: true,
61 |         nav: false,
62 |         dots: true,
63 |         responsive : {
64 |             0: {
65 |                 items: 1
66 |             },
67 |             600: {
68 |                 items: 3
69 |             }
70 |         }
71 |     })
72 | 
73 |      // product qty section
74 |      let $qty_up = $(".qty .qty-up");
75 |      let $qty_down = $(".qty .qty-down");
76 |      // let $input = $(".qty .qty_input");
77 |  
78 |      // click on qty up button
79 |      $qty_up.click(function(e){
80 |          let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
81 |          if($input.val() >= 1 && $input.val() <= 9){
82 |              $input.val(function(i, oldval){
83 |                  return ++oldval;
84 |              });
85 |          }
86 |      });
87 |  
88 |         // click on qty down button
89 |         $qty_down.click(function(e){
90 |          let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
91 |          if($input.val() > 1 && $input.val() <= 10){
92 |              $input.val(function(i, oldval){
93 |                  return --oldval;
94 |              });
95 |          }
96 |      });
97 |  
98 | });
99 | 


--------------------------------------------------------------------------------
/mobile_shope/Template/_top-sale.php:
--------------------------------------------------------------------------------
 1 | <!-- Top Sale -->
 2 | <?php
 3 | 
 4 | shuffle($product_shuffle);
 5 | 
 6 | // request method post
 7 | if($_SERVER['REQUEST_METHOD'] == "POST"){
 8 |     if (isset($_POST['top_sale_submit'])){
 9 |         // call method addToCart
10 |         $Cart->addToCart($_POST['user_id'], $_POST['item_id']);
11 |     }
12 | }
13 | ?>
14 | <section id="top-sale">
15 |     <div class="container py-5">
16 |         <h4 class="font-rubik font-size-20">Top Sale</h4>
17 |         <hr>
18 |         <!-- owl carousel -->
19 |         <div class="owl-carousel owl-theme">
20 |             <?php foreach ($product_shuffle as $item) { ?>
21 |                 <div class="item py-2">
22 |                     <div class="product font-rale">
23 |                         <a href="<?php printf('%s?item_id=%s', 'product.php',  $item['item_id']); ?>"><img src="<?php echo $item['item_image'] ?? "./assets/products/1.png"; ?>" alt="product1" class="img-fluid"></a>
24 |                         <div class="text-center">
25 |                             <h6><?php echo  $item['item_name'] ?? "Unknown";  ?></h6>
26 |                             <div class="rating text-warning font-size-12">
27 |                                 <span><i class="fas fa-star"></i></span>
28 |                                 <span><i class="fas fa-star"></i></span>
29 |                                 <span><i class="fas fa-star"></i></span>
30 |                                 <span><i class="fas fa-star"></i></span>
31 |                                 <span><i class="far fa-star"></i></span>
32 |                             </div>
33 |                             <div class="price py-2">
34 |                                 <span>$<?php echo $item['item_price'] ?? '0' ; ?></span>
35 |                             </div>
36 |                             <form method="post">
37 |                                 <input type="hidden" name="item_id" value="<?php echo $item['item_id'] ?? '1'; ?>">
38 |                                 <input type="hidden" name="user_id" value="<?php echo 1; ?>">
39 |                                 <?php
40 |                                 if (in_array($item['item_id'], $Cart->getCartId($product->getData('cart')) ?? [])){
41 |                                     echo '<button type="submit" disabled class="btn btn-success font-size-12">In the Cart</button>';
42 |                                 }else{
43 |                                     echo '<button type="submit" name="top_sale_submit" class="btn btn-warning font-size-12">Add to Cart</button>';
44 |                                 }
45 |                                 ?>
46 | 
47 |                             </form>
48 |                         </div>
49 |                     </div>
50 |                 </div>
51 |             <?php } // closing foreach function ?>
52 |         </div>
53 |         <!-- !owl carousel -->
54 |     </div>
55 | </section>
56 | <!-- !Top Sale -->


--------------------------------------------------------------------------------
/mobile_shope/Template/_new-phones.php:
--------------------------------------------------------------------------------
 1 | <!-- New Phones -->
 2 | <?php
 3 | shuffle($product_shuffle);
 4 | 
 5 | // request method post
 6 | if($_SERVER['REQUEST_METHOD'] == "POST"){
 7 |     if (isset($_POST['new_phones_submit'])){
 8 |         // call method addToCart
 9 |         $Cart->addToCart($_POST['user_id'], $_POST['item_id']);
10 |     }
11 | }
12 | ?>
13 | <section id="new-phones">
14 |     <div class="container">
15 |         <h4 class="font-rubik font-size-20">New Phones</h4>
16 |         <hr>
17 | 
18 |         <!-- owl carousel -->
19 |         <div class="owl-carousel owl-theme">
20 |             <?php foreach ($product_shuffle as $item) { ?>
21 |                 <div class="item py-2 bg-light">
22 |                     <div class="product font-rale">
23 |                         <a href="<?php printf('%s?item_id=%s', 'product.php',  $item['item_id']); ?>"><img src="<?php echo $item['item_image'] ?? "./assets/products/1.png"; ?>" alt="product1" class="img-fluid"></a>
24 |                         <div class="text-center">
25 |                             <h6><?php echo  $item['item_name'] ?? "Unknown";  ?></h6>
26 |                             <div class="rating text-warning font-size-12">
27 |                                 <span><i class="fas fa-star"></i></span>
28 |                                 <span><i class="fas fa-star"></i></span>
29 |                                 <span><i class="fas fa-star"></i></span>
30 |                                 <span><i class="fas fa-star"></i></span>
31 |                                 <span><i class="far fa-star"></i></span>
32 |                             </div>
33 |                             <div class="price py-2">
34 |                                 <span>$<?php echo $item['item_price'] ?? '0' ; ?></span>
35 |                             </div>
36 |                             <form method="post">
37 |                                 <input type="hidden" name="item_id" value="<?php echo $item['item_id'] ?? '1'; ?>">
38 |                                 <input type="hidden" name="user_id" value="<?php echo 1; ?>">
39 |                                 <?php
40 |                                 if (in_array($item['item_id'], $Cart->getCartId($product->getData('cart')) ?? [])){
41 |                                     echo '<button type="submit" disabled class="btn btn-success font-size-12">In the Cart</button>';
42 |                                 }else{
43 |                                     echo '<button type="submit" name="top_sale_submit" class="btn btn-warning font-size-12">Add to Cart</button>';
44 |                                 }
45 |                                 ?>
46 |                             </form>
47 |                         </div>
48 |                     </div>
49 |                 </div>
50 |             <?php } // closing foreach function ?>
51 |         </div>
52 |         <!-- !owl carousel -->
53 | 
54 |     </div>
55 | </section>
56 | <!-- !New Phones -->


--------------------------------------------------------------------------------
/mobile_shope/database/Cart.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | // php cart class
  4 | class Cart
  5 | {
  6 |     public $db = null;
  7 | 
  8 |     public function __construct(DBController $db)
  9 |     {
 10 |         if (!isset($db->con)) return null;
 11 |         $this->db = $db;
 12 |     }
 13 | 
 14 |     // insert into cart table
 15 |     public  function insertIntoCart($params = null, $table = "cart"){
 16 |         if ($this->db->con != null){
 17 |             if ($params != null){
 18 |                 // "Insert into cart(user_id) values (0)"
 19 |                 // get table columns
 20 |                 $columns = implode(',', array_keys($params));
 21 | 
 22 |                 $values = implode(',' , array_values($params));
 23 | 
 24 |                 // create sql query
 25 |                 $query_string = sprintf("INSERT INTO %s(%s) VALUES(%s)", $table, $columns, $values);
 26 | 
 27 |                 // execute query
 28 |                 $result = $this->db->con->query($query_string);
 29 |                 return $result;
 30 |             }
 31 |         }
 32 |     }
 33 | 
 34 |     // to get user_id and item_id and insert into cart table
 35 |     public  function addToCart($userid, $itemid){
 36 |         if (isset($userid) && isset($itemid)){
 37 |             $params = array(
 38 |                 "user_id" => $userid,
 39 |                 "item_id" => $itemid
 40 |             );
 41 | 
 42 |             // insert data into cart
 43 |             $result = $this->insertIntoCart($params);
 44 |             if ($result){
 45 |                 // Reload Page
 46 |                 header("Location: " . $_SERVER['PHP_SELF']);
 47 |             }
 48 |         }
 49 |     }
 50 | 
 51 |     // delete cart item using cart item id
 52 |     public function deleteCart($item_id = null, $table = 'cart'){
 53 |         if($item_id != null){
 54 |             $result = $this->db->con->query("DELETE FROM {$table} WHERE item_id={$item_id}");
 55 |             if($result){
 56 |                 header("Location:" . $_SERVER['PHP_SELF']);
 57 |             }
 58 |             return $result;
 59 |         }
 60 |     }
 61 | 
 62 |     // calculate sub total
 63 |     public function getSum($arr){
 64 |         if(isset($arr)){
 65 |             $sum = 0;
 66 |             foreach ($arr as $item){
 67 |                 $sum += floatval($item[0]);
 68 |             }
 69 |             return sprintf('%.2f' , $sum);
 70 |         }
 71 |     }
 72 | 
 73 |     // get item_it of shopping cart list
 74 |     public function getCartId($cartArray = null, $key = "item_id"){
 75 |         if ($cartArray != null){
 76 |             $cart_id = array_map(function ($value) use($key){
 77 |                 return $value[$key];
 78 |             }, $cartArray);
 79 |             return $cart_id;
 80 |         }
 81 |     }
 82 | 
 83 |     // Save for later
 84 |     public function saveForLater($item_id = null, $saveTable = "wishlist", $fromTable = "cart"){
 85 |         if ($item_id != null){
 86 |             $query = "INSERT INTO {$saveTable} SELECT * FROM {$fromTable} WHERE item_id={$item_id};";
 87 |             $query .= "DELETE FROM {$fromTable} WHERE item_id={$item_id};";
 88 | 
 89 |             // execute multiple query
 90 |             $result = $this->db->con->multi_query($query);
 91 | 
 92 |             if($result){
 93 |                 header("Location :" . $_SERVER['PHP_SELF']);
 94 |             }
 95 |             return $result;
 96 |         }
 97 |     }
 98 | 
 99 | 
100 | }


--------------------------------------------------------------------------------
/mobile_shope/footer.php:
--------------------------------------------------------------------------------
 1 | </main>
 2 | <!-- !start #main-site -->
 3 | 
 4 | <!-- start #footer -->
 5 | <footer id="footer" class="bg-dark text-white py-5">
 6 |     <div class="container">
 7 |         <div class="row">
 8 |             <div class="col-lg-3 col-12">
 9 |                 <h4 class="font-rubik font-size-20">Mobile Shopee</h4>
10 |                 <p class="font-size-14 font-rale text-white-50">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p>
11 |             </div>
12 |             <div class="col-lg-4 col-12">
13 |                 <h4 class="font-rubik font-size-20">Newslatter</h4>
14 |                 <form class="form-row">
15 |                     <div class="col">
16 |                         <input type="text" class="form-control" placeholder="Email *">
17 |                     </div>
18 |                     <div class="col">
19 |                         <button type="submit" class="btn btn-primary mb-2">Subscribe</button>
20 |                     </div>
21 |                 </form>
22 |             </div>
23 |             <div class="col-lg-2 col-12">
24 |                 <h4 class="font-rubik font-size-20">Information</h4>
25 |                 <div class="d-flex flex-column flex-wrap">
26 |                     <a href="#" class="font-rale font-size-14 text-white-50 pb-1">About Us</a>
27 |                     <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Delivery Information</a>
28 |                     <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Privacy Policy</a>
29 |                     <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Terms & Conditions</a>
30 |                 </div>
31 |             </div>
32 |             <div class="col-lg-2 col-12">
33 |                 <h4 class="font-rubik font-size-20">Account</h4>
34 |                 <div class="d-flex flex-column flex-wrap">
35 |                     <a href="#" class="font-rale font-size-14 text-white-50 pb-1">My Account</a>
36 |                     <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Order History</a>
37 |                     <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Wish List</a>
38 |                     <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Newslatters</a>
39 |                 </div>
40 |             </div>
41 |         </div>
42 |     </div>
43 | </footer>
44 | <!-- !start #footer -->
45 | 
46 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
47 | <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
48 | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
49 | 
50 | <!-- Owl Carousel Js file -->
51 | <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
52 | 
53 | <!--  isotope plugin cdn  -->
54 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI=" crossorigin="anonymous"></script>
55 | 
56 | <!-- Custom Javascript -->
57 | <script src="index.js"></script>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/mobile_shope/Template/_special-price.php:
--------------------------------------------------------------------------------
 1 | <!-- Special Price -->
 2 | <?php
 3 | $brand = array_map(function ($pro){ return $pro['item_brand']; }, $product_shuffle);
 4 | $unique = array_unique($brand);
 5 | sort($unique);
 6 | shuffle($product_shuffle);
 7 | 
 8 | // request method post
 9 | if($_SERVER['REQUEST_METHOD'] == "POST"){
10 |     if (isset($_POST['special_price_submit'])){
11 |         // call method addToCart
12 |         $Cart->addToCart($_POST['user_id'], $_POST['item_id']);
13 |     }
14 | }
15 | 
16 | $in_cart = $Cart->getCartId($product->getData('cart'));
17 | 
18 | ?>
19 | <section id="special-price">
20 |     <div class="container">
21 |         <h4 class="font-rubik font-size-20">Special Price</h4>
22 |         <div id="filters" class="button-group text-right font-baloo font-size-16">
23 |             <button class="btn is-checked" data-filter="*">All Brand</button>
24 |             <?php
25 |             array_map(function ($brand){
26 |                 printf('<button class="btn" data-filter=".%s">%s</button>', $brand, $brand);
27 |             }, $unique);
28 |             ?>
29 |         </div>
30 | 
31 |         <div class="grid">
32 |             <?php array_map(function ($item) use($in_cart){ ?>
33 |                 <div class="grid-item border <?php echo $item['item_brand'] ?? "Brand" ; ?>">
34 |                     <div class="item py-2" style="width: 200px;">
35 |                         <div class="product font-rale">
36 |                             <a href="<?php printf('%s?item_id=%s', 'product.php',  $item['item_id']); ?>"><img src="<?php echo $item['item_image'] ?? "./assets/products/13.png"; ?>" alt="product1" class="img-fluid"></a>
37 |                             <div class="text-center">
38 |                                 <h6><?php echo $item['item_name'] ?? "Unknown"; ?></h6>
39 |                                 <div class="rating text-warning font-size-12">
40 |                                     <span><i class="fas fa-star"></i></span>
41 |                                     <span><i class="fas fa-star"></i></span>
42 |                                     <span><i class="fas fa-star"></i></span>
43 |                                     <span><i class="fas fa-star"></i></span>
44 |                                     <span><i class="far fa-star"></i></span>
45 |                                 </div>
46 |                                 <div class="price py-2">
47 |                                     <span>$<?php echo $item['item_price'] ?? 0 ?></span>
48 |                                 </div>
49 |                                 <form method="post">
50 |                                     <input type="hidden" name="item_id" value="<?php echo $item['item_id'] ?? '1'; ?>">
51 |                                     <input type="hidden" name="user_id" value="<?php echo 1; ?>">
52 |                                     <?php
53 |                                     if (in_array($item['item_id'], $in_cart ?? [])){
54 |                                         echo '<button type="submit" disabled class="btn btn-success font-size-12">In the Cart</button>';
55 |                                     }else{
56 |                                         echo '<button type="submit" name="top_sale_submit" class="btn btn-warning font-size-12">Add to Cart</button>';
57 |                                     }
58 |                                     ?>
59 |                                 </form>
60 |                             </div>
61 |                         </div>
62 |                     </div>
63 |                 </div>
64 |             <?php }, $product_shuffle) ?>
65 |         </div>
66 |     </div>
67 | </section>
68 | <!-- !Special Price -->
69 | 


--------------------------------------------------------------------------------
/mobile_shope/header.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Mobile Shopee</title>
 7 | 
 8 |     <!-- Bootstrap CDN -->
 9 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10 | 
11 |     <!-- Owl-carousel CDN -->
12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
13 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha256-kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />
14 | 
15 |     <!-- font awesome icons -->
16 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
17 | 
18 |     <!-- Custom CSS file -->
19 |     <link rel="stylesheet" href="style.css">
20 | 
21 |     <?php
22 |     // require functions.php file
23 |     require ('functions.php');
24 |     ?>
25 | 
26 | </head>
27 | <body>
28 | 
29 | <!-- start #header -->
30 | <header id="header">
31 |     <div class="strip d-flex justify-content-between px-4 py-1 bg-light">
32 |         <p class="font-rale font-size-12 text-black-50 m-0">hello world</p>
33 |         <div class="font-rale font-size-14">
34 |             <a href="#" class="px-3 border-right border-left text-dark">Login</a>
35 |             <a href="#" class="px-3 border-right text-dark">Whishlist (0)</a>
36 |         </div>
37 |     </div>
38 | 
39 |     <!-- Primary Navigation -->
40 |     <nav class="navbar navbar-expand-lg navbar-dark color-second-bg">
41 |         <a class="navbar-brand" href="#">Mobile Shopee</a>
42 |         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
43 |             <span class="navbar-toggler-icon"></span>
44 |         </button>
45 |         <div class="collapse navbar-collapse" id="navbarNav">
46 |             <ul class="navbar-nav m-auto font-rubik">
47 |                 <li class="nav-item active">
48 |                     <a class="nav-link" href="#">On Sale</a>
49 |                 </li>
50 |                 <li class="nav-item">
51 |                     <a class="nav-link" href="#">Category</a>
52 |                 </li>
53 |                 <li class="nav-item">
54 |                     <a class="nav-link" href="#">Products <i class="fas fa-chevron-down"></i></a>
55 |                 </li>
56 |                 <li class="nav-item">
57 |                     <a class="nav-link" href="#">Blog</a>
58 |                 </li>
59 |                 <li class="nav-item">
60 |                     <a class="nav-link" href="#">Category <i class="fas fa-chevron-down"></i></a>
61 |                 </li>
62 |                 <li class="nav-item">
63 |                     <a class="nav-link" href="#">Coming Soon</a>
64 |                 </li>
65 |             </ul>
66 |             <form action="#" class="font-size-14 font-rale">
67 |                 <a href="cart.php" class="py-2 rounded-pill color-primary-bg">
68 |                     <span class="font-size-16 px-2 text-white"><i class="fas fa-shopping-cart"></i></span>
69 |                     <span class="px-3 py-2 rounded-pill text-dark bg-light"><?php echo count($product->getData('cart')); ?></span>
70 |                 </a>
71 |             </form>
72 |         </div>
73 |     </nav>
74 |     <!-- !Primary Navigation -->
75 | 
76 | </header>
77 | <!-- !start #header -->
78 | 
79 | <!-- start #main-site -->
80 | <main id="main-site">


--------------------------------------------------------------------------------
/mobile_shope/Template/_wishilist_template.php:
--------------------------------------------------------------------------------
 1 | <!-- Shopping cart section  -->
 2 | <?php
 3 | if ($_SERVER['REQUEST_METHOD'] == 'POST'){
 4 |     if (isset($_POST['delete-cart-submit'])){
 5 |         $deletedrecord = $Cart->deleteCart($_POST['item_id']);
 6 |     }
 7 | 
 8 |     if(isset($_POST['cart-submit'])){
 9 |         $Cart->saveForLater($_POST['item_id'], 'cart', 'wishlist');
10 |     }
11 | }
12 | ?>
13 | 
14 | <section id="cart" class="py-3 mb-5">
15 |     <div class="container-fluid w-75">
16 |         <h5 class="font-baloo font-size-20">Wishlist</h5>
17 | 
18 |         <!--  shopping cart items   -->
19 |         <div class="row">
20 |             <div class="col-sm-9">
21 |                 <?php
22 |                 foreach ($product->getData('wishlist') as $item) :
23 |                     $cart = $product->getProduct($item['item_id']);
24 |                     $subTotal[] = array_map(function ($item){
25 |                         ?>
26 |                         <!-- cart item -->
27 |                         <div class="row border-top py-3 mt-3">
28 |                             <div class="col-sm-2">
29 |                                 <img src="<?php echo $item['item_image'] ?? "./assets/products/1.png" ?>" style="height: 120px;" alt="cart1" class="img-fluid">
30 |                             </div>
31 |                             <div class="col-sm-8">
32 |                                 <h5 class="font-baloo font-size-20"><?php echo $item['item_name'] ?? "Unknown"; ?></h5>
33 |                                 <small>by <?php echo $item['item_brand'] ?? "Brand"; ?></small>
34 |                                 <!-- product rating -->
35 |                                 <div class="d-flex">
36 |                                     <div class="rating text-warning font-size-12">
37 |                                         <span><i class="fas fa-star"></i></span>
38 |                                         <span><i class="fas fa-star"></i></span>
39 |                                         <span><i class="fas fa-star"></i></span>
40 |                                         <span><i class="fas fa-star"></i></span>
41 |                                         <span><i class="far fa-star"></i></span>
42 |                                     </div>
43 |                                     <a href="#" class="px-2 font-rale font-size-14">20,534 ratings</a>
44 |                                 </div>
45 |                                 <!--  !product rating-->
46 | 
47 |                                 <!-- product qty -->
48 |                                 <div class="qty d-flex pt-2">
49 | 
50 |                                     <form method="post">
51 |                                         <input type="hidden" value="<?php echo $item['item_id'] ?? 0; ?>" name="item_id">
52 |                                         <button type="submit" name="delete-cart-submit" class="btn font-baloo text-danger pl-0 pr-3 border-right">Delete</button>
53 |                                     </form>
54 | 
55 |                                     <form method="post">
56 |                                         <input type="hidden" value="<?php echo $item['item_id'] ?? 0; ?>" name="item_id">
57 |                                         <button type="submit" name="cart-submit" class="btn font-baloo text-danger">Add to Cart</button>
58 |                                     </form>
59 | 
60 | 
61 |                                 </div>
62 |                                 <!-- !product qty -->
63 | 
64 |                             </div>
65 | 
66 |                             <div class="col-sm-2 text-right">
67 |                                 <div class="font-size-20 text-danger font-baloo">
68 |                                     $<span class="product_price" data-id="<?php echo $item['item_id'] ?? '0'; ?>"><?php echo $item['item_price'] ?? 0; ?></span>
69 |                                 </div>
70 |                             </div>
71 |                         </div>
72 |                         <!-- !cart item -->
73 |                         <?php
74 |                         return $item['item_price'];
75 |                     }, $cart); // closing array_map function
76 |                 endforeach;
77 |                 ?>
78 |             </div>
79 |         </div>
80 |         <!--  !shopping cart items   -->
81 |     </div>
82 | </section>
83 | <!-- !Shopping cart section  -->


--------------------------------------------------------------------------------
/mobile_shope/index.js:
--------------------------------------------------------------------------------
  1 | $(document).ready(function(){
  2 | 
  3 |     // banner owl carousel
  4 |     $("#banner-area .owl-carousel").owlCarousel({
  5 |         dots: true,
  6 |         items: 1
  7 |     });
  8 | 
  9 |     // top sale owl carousel
 10 |     $("#top-sale .owl-carousel").owlCarousel({
 11 |         loop: true,
 12 |         nav: true,
 13 |         dots: false,
 14 |         responsive : {
 15 |             0: {
 16 |                 items: 1
 17 |             },
 18 |             600: {
 19 |                 items: 3
 20 |             },
 21 |             1000 : {
 22 |                 items: 5
 23 |             }
 24 |         }
 25 |     });
 26 | 
 27 |     // isotope filter
 28 |     var $grid = $(".grid").isotope({
 29 |         itemSelector : '.grid-item',
 30 |         layoutMode : 'fitRows'
 31 |     });
 32 | 
 33 |     // filter items on button click
 34 |     $(".button-group").on("click", "button", function(){
 35 |         var filterValue = $(this).attr('data-filter');
 36 |         $grid.isotope({ filter: filterValue});
 37 |     })
 38 | 
 39 | 
 40 |     // new phones owl carousel
 41 |     $("#new-phones .owl-carousel").owlCarousel({
 42 |         loop: true,
 43 |         nav: false,
 44 |         dots: true,
 45 |         responsive : {
 46 |             0: {
 47 |                 items: 1
 48 |             },
 49 |             600: {
 50 |                 items: 3
 51 |             },
 52 |             1000 : {
 53 |                 items: 5
 54 |             }
 55 |         }
 56 |     });
 57 | 
 58 |     // blogs owl carousel
 59 |     $("#blogs .owl-carousel").owlCarousel({
 60 |         loop: true,
 61 |         nav: false,
 62 |         dots: true,
 63 |         responsive : {
 64 |             0: {
 65 |                 items: 1
 66 |             },
 67 |             600: {
 68 |                 items: 3
 69 |             }
 70 |         }
 71 |     })
 72 | 
 73 | 
 74 |     // product qty section
 75 |     let $qty_up = $(".qty .qty-up");
 76 |     let $qty_down = $(".qty .qty-down");
 77 |     let $deal_price = $("#deal-price");
 78 |     // let $input = $(".qty .qty_input");
 79 | 
 80 |     // click on qty up button
 81 |     $qty_up.click(function(e){
 82 | 
 83 |         let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
 84 |         let $price = $(`.product_price[data-id='${$(this).data("id")}']`);
 85 | 
 86 |         // change product price using ajax call
 87 |         $.ajax({url: "template/ajax.php", type : 'post', data : { itemid : $(this).data("id")}, success: function(result){
 88 |                 let obj = JSON.parse(result);
 89 |                 let item_price = obj[0]['item_price'];
 90 | 
 91 |                 if($input.val() >= 1 && $input.val() <= 9){
 92 |                     $input.val(function(i, oldval){
 93 |                         return ++oldval;
 94 |                     });
 95 | 
 96 |                     // increase price of the product
 97 |                     $price.text(parseInt(item_price * $input.val()).toFixed(2));
 98 | 
 99 |                     // set subtotal price
100 |                     let subtotal = parseInt($deal_price.text()) + parseInt(item_price);
101 |                     $deal_price.text(subtotal.toFixed(2));
102 |                 }
103 | 
104 |             }}); // closing ajax request
105 |     }); // closing qty up button
106 | 
107 |     // click on qty down button
108 |     $qty_down.click(function(e){
109 | 
110 |         let $input = $(`.qty_input[data-id='${$(this).data("id")}']`);
111 |         let $price = $(`.product_price[data-id='${$(this).data("id")}']`);
112 | 
113 |         // change product price using ajax call
114 |         $.ajax({url: "template/ajax.php", type : 'post', data : { itemid : $(this).data("id")}, success: function(result){
115 |                 let obj = JSON.parse(result);
116 |                 let item_price = obj[0]['item_price'];
117 | 
118 |                 if($input.val() > 1 && $input.val() <= 10){
119 |                     $input.val(function(i, oldval){
120 |                         return --oldval;
121 |                     });
122 | 
123 | 
124 |                     // increase price of the product
125 |                     $price.text(parseInt(item_price * $input.val()).toFixed(2));
126 | 
127 |                     // set subtotal price
128 |                     let subtotal = parseInt($deal_price.text()) - parseInt(item_price);
129 |                     $deal_price.text(subtotal.toFixed(2));
130 |                 }
131 | 
132 |             }}); // closing ajax request
133 |     }); // closing qty down button
134 | 
135 | 
136 | });


--------------------------------------------------------------------------------
/mobile_shope/Template/_cart-template.php:
--------------------------------------------------------------------------------
  1 | <!-- Shopping cart section  -->
  2 | <?php
  3 | if ($_SERVER['REQUEST_METHOD'] == 'POST'){
  4 |     if (isset($_POST['delete-cart-submit'])){
  5 |         $deletedrecord = $Cart->deleteCart($_POST['item_id']);
  6 |     }
  7 | 
  8 |     // save for later
  9 |     if (isset($_POST['wishlist-submit'])){
 10 |         $Cart->saveForLater($_POST['item_id']);
 11 |     }
 12 | }
 13 | ?>
 14 | 
 15 | <section id="cart" class="py-3 mb-5">
 16 |     <div class="container-fluid w-75">
 17 |         <h5 class="font-baloo font-size-20">Shopping Cart</h5>
 18 | 
 19 |         <!--  shopping cart items   -->
 20 |         <div class="row">
 21 |             <div class="col-sm-9">
 22 |                 <?php
 23 |                 foreach ($product->getData('cart') as $item) :
 24 |                     $cart = $product->getProduct($item['item_id']);
 25 |                     $subTotal[] = array_map(function ($item){
 26 |                         ?>
 27 |                         <!-- cart item -->
 28 |                         <div class="row border-top py-3 mt-3">
 29 |                             <div class="col-sm-2">
 30 |                                 <img src="<?php echo $item['item_image'] ?? "./assets/products/1.png" ?>" style="height: 120px;" alt="cart1" class="img-fluid">
 31 |                             </div>
 32 |                             <div class="col-sm-8">
 33 |                                 <h5 class="font-baloo font-size-20"><?php echo $item['item_name'] ?? "Unknown"; ?></h5>
 34 |                                 <small>by <?php echo $item['item_brand'] ?? "Brand"; ?></small>
 35 |                                 <!-- product rating -->
 36 |                                 <div class="d-flex">
 37 |                                     <div class="rating text-warning font-size-12">
 38 |                                         <span><i class="fas fa-star"></i></span>
 39 |                                         <span><i class="fas fa-star"></i></span>
 40 |                                         <span><i class="fas fa-star"></i></span>
 41 |                                         <span><i class="fas fa-star"></i></span>
 42 |                                         <span><i class="far fa-star"></i></span>
 43 |                                     </div>
 44 |                                     <a href="#" class="px-2 font-rale font-size-14">20,534 ratings</a>
 45 |                                 </div>
 46 |                                 <!--  !product rating-->
 47 | 
 48 |                                 <!-- product qty -->
 49 |                                 <div class="qty d-flex pt-2">
 50 |                                     <div class="d-flex font-rale w-25">
 51 |                                         <button class="qty-up border bg-light" data-id="<?php echo $item['item_id'] ?? '0'; ?>"><i class="fas fa-angle-up"></i></button>
 52 |                                         <input type="text" data-id="<?php echo $item['item_id'] ?? '0'; ?>" class="qty_input border px-2 w-100 bg-light" disabled value="1" placeholder="1">
 53 |                                         <button data-id="<?php echo $item['item_id'] ?? '0'; ?>" class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button>
 54 |                                     </div>
 55 | 
 56 |                                     <form method="post">
 57 |                                         <input type="hidden" value="<?php echo $item['item_id'] ?? 0; ?>" name="item_id">
 58 |                                         <button type="submit" name="delete-cart-submit" class="btn font-baloo text-danger px-3 border-right">Delete</button>
 59 |                                     </form>
 60 | 
 61 |                                     <form method="post">
 62 |                                         <input type="hidden" value="<?php echo $item['item_id'] ?? 0; ?>" name="item_id">
 63 |                                         <button type="submit" name="wishlist-submit" class="btn font-baloo text-danger">Save for Later</button>
 64 |                                     </form>
 65 | 
 66 | 
 67 |                                 </div>
 68 |                                 <!-- !product qty -->
 69 | 
 70 |                             </div>
 71 | 
 72 |                             <div class="col-sm-2 text-right">
 73 |                                 <div class="font-size-20 text-danger font-baloo">
 74 |                                     $<span class="product_price" data-id="<?php echo $item['item_id'] ?? '0'; ?>"><?php echo $item['item_price'] ?? 0; ?></span>
 75 |                                 </div>
 76 |                             </div>
 77 |                         </div>
 78 |                         <!-- !cart item -->
 79 |                         <?php
 80 |                         return $item['item_price'];
 81 |                     }, $cart); // closing array_map function
 82 |                 endforeach;
 83 |                 ?>
 84 |             </div>
 85 |             <!-- subtotal section-->
 86 |             <div class="col-sm-3">
 87 |                 <div class="sub-total border text-center mt-2">
 88 |                     <h6 class="font-size-12 font-rale text-success py-3"><i class="fas fa-check"></i> Your order is eligible for FREE Delivery.</h6>
 89 |                     <div class="border-top py-4">
 90 |                         <h5 class="font-baloo font-size-20">Subtotal ( <?php echo isset($subTotal) ? count($subTotal) : 0; ?> item):&nbsp; <span class="text-danger">$<span class="text-danger" id="deal-price"><?php echo isset($subTotal) ? $Cart->getSum($subTotal) : 0; ?></span> </span> </h5>
 91 |                         <button type="submit" class="btn btn-warning mt-3">Proceed to Buy</button>
 92 |                     </div>
 93 |                 </div>
 94 |             </div>
 95 |             <!-- !subtotal section-->
 96 |         </div>
 97 |         <!--  !shopping cart items   -->
 98 |     </div>
 99 | </section>
100 | <!-- !Shopping cart section  -->


--------------------------------------------------------------------------------
/mobile_shope/database/shopee.sql:
--------------------------------------------------------------------------------
  1 | -- phpMyAdmin SQL Dump
  2 | -- version 4.9.2
  3 | --
  4 | -- Host: 127.0.0.1
  5 | -- Generation Time: Apr 20, 2020 at 11:01 AM
  6 | -- Server version: 10.4.10-MariaDB
  7 | -- PHP Version: 7.1.33
  8 | 
  9 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
 10 | SET AUTOCOMMIT = 0;
 11 | START TRANSACTION;
 12 | SET time_zone = "+00:00";
 13 | 
 14 | 
 15 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
 16 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
 17 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
 18 | /*!40101 SET NAMES utf8mb4 */;
 19 | 
 20 | --
 21 | -- Database: `shopee`
 22 | --
 23 | 
 24 | -- --------------------------------------------------------
 25 | 
 26 | --
 27 | -- Table structure for table `cart`
 28 | --
 29 | 
 30 | CREATE TABLE `cart` (
 31 |                         `cart_id` int(11) NOT NULL,
 32 |                         `user_id` int(11) NOT NULL,
 33 |                         `item_id` int(11) NOT NULL
 34 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 35 | 
 36 | -- --------------------------------------------------------
 37 | 
 38 | --
 39 | -- Table structure for table `product`
 40 | --
 41 | 
 42 | CREATE TABLE `product` (
 43 |                            `item_id` int(11) NOT NULL,
 44 |                            `item_brand` varchar(200) NOT NULL,
 45 |                            `item_name` varchar(255) NOT NULL,
 46 |                            `item_price` double(10,2) NOT NULL,
 47 |   `item_image` varchar(255) NOT NULL,
 48 |   `item_register` datetime DEFAULT NULL
 49 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 50 | 
 51 | --
 52 | -- Dumping data for table `product`
 53 | --
 54 | 
 55 | INSERT INTO `product` (`item_id`, `item_brand`, `item_name`, `item_price`, `item_image`, `item_register`) VALUES
 56 |                                                                                                               (1, 'Samsung', 'Samsung Galaxy 10', 152.00, './assets/products/1.png', '2020-03-28 11:08:57'), -- NOW()
 57 |                                                                                                               (2, 'Redmi', 'Redmi Note 7', 122.00, './assets/products/2.png', '2020-03-28 11:08:57'),
 58 |                                                                                                               (3, 'Redmi', 'Redmi Note 6', 122.00, './assets/products/3.png', '2020-03-28 11:08:57'),
 59 |                                                                                                               (4, 'Redmi', 'Redmi Note 5', 122.00, './assets/products/4.png', '2020-03-28 11:08:57'),
 60 |                                                                                                               (5, 'Redmi', 'Redmi Note 4', 122.00, './assets/products/5.png', '2020-03-28 11:08:57'),
 61 |                                                                                                               (6, 'Redmi', 'Redmi Note 8', 122.00, './assets/products/6.png', '2020-03-28 11:08:57'),
 62 |                                                                                                               (7, 'Redmi', 'Redmi Note 9', 122.00, './assets/products/8.png', '2020-03-28 11:08:57'),
 63 |                                                                                                               (8, 'Redmi', 'Redmi Note', 122.00, './assets/products/10.png', '2020-03-28 11:08:57'),
 64 |                                                                                                               (9, 'Samsung', 'Samsung Galaxy S6', 152.00, './assets/products/11.png', '2020-03-28 11:08:57'),
 65 |                                                                                                               (10, 'Samsung', 'Samsung Galaxy S7', 152.00, './assets/products/12.png', '2020-03-28 11:08:57'),
 66 |                                                                                                               (11, 'Apple', 'Apple iPhone 5', 152.00, './assets/products/13.png', '2020-03-28 11:08:57'),
 67 |                                                                                                               (12, 'Apple', 'Apple iPhone 6', 152.00, './assets/products/14.png', '2020-03-28 11:08:57'),
 68 |                                                                                                               (13, 'Apple', 'Apple iPhone 7', 152.00, './assets/products/15.png', '2020-03-28 11:08:57');
 69 | 
 70 | -- --------------------------------------------------------
 71 | 
 72 | --
 73 | -- Table structure for table `user`
 74 | --
 75 | 
 76 | CREATE TABLE `user` (
 77 |                         `user_id` int(11) NOT NULL,
 78 |                         `first_name` varchar(100) NOT NULL,
 79 |                         `last_name` varchar(100) NOT NULL,
 80 |                         `register_date` datetime DEFAULT NULL
 81 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 82 | 
 83 | --
 84 | -- Dumping data for table `user`
 85 | --
 86 | 
 87 | INSERT INTO `user` (`user_id`, `first_name`, `last_name`, `register_date`) VALUES
 88 |                                                                                (1, 'Daily', 'Tuition', '2020-03-28 13:07:17'),
 89 |                                                                                (2, 'Akshay', 'Kashyap', '2020-03-28 13:07:17');
 90 | 
 91 | -- --------------------------------------------------------
 92 | 
 93 | --
 94 | -- Table structure for table `wishlist`
 95 | --
 96 | 
 97 | CREATE TABLE `wishlist` (
 98 |                             `cart_id` int(11) NOT NULL,
 99 |                             `user_id` int(11) NOT NULL,
100 |                             `item_id` int(11) NOT NULL
101 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
102 | 
103 | --
104 | -- Indexes for dumped tables
105 | --
106 | 
107 | --
108 | -- Indexes for table `cart`
109 | --
110 | ALTER TABLE `cart`
111 |     ADD PRIMARY KEY (`cart_id`);
112 | 
113 | --
114 | -- Indexes for table `product`
115 | --
116 | ALTER TABLE `product`
117 |     ADD PRIMARY KEY (`item_id`);
118 | 
119 | --
120 | -- Indexes for table `user`
121 | --
122 | ALTER TABLE `user`
123 |     ADD PRIMARY KEY (`user_id`);
124 | 
125 | --
126 | -- AUTO_INCREMENT for dumped tables
127 | --
128 | 
129 | --
130 | -- AUTO_INCREMENT for table `cart`
131 | --
132 | ALTER TABLE `cart`
133 |     MODIFY `cart_id` int(11) NOT NULL AUTO_INCREMENT;
134 | 
135 | --
136 | -- AUTO_INCREMENT for table `product`
137 | --
138 | ALTER TABLE `product`
139 |     MODIFY `item_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;
140 | 
141 | --
142 | -- AUTO_INCREMENT for table `user`
143 | --
144 | ALTER TABLE `user`
145 |     MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
146 | COMMIT;
147 | 
148 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
149 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
150 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
151 | 


--------------------------------------------------------------------------------
/mobile_shope/Template/_products.php:
--------------------------------------------------------------------------------
  1 | <!--   product  -->
  2 | <?php
  3 | $item_id = $_GET['item_id'] ?? 1;
  4 | foreach ($product->getData() as $item) :
  5 |     if ($item['item_id'] == $item_id) :
  6 |         ?>
  7 |         <section id="product" class="py-3">
  8 |             <div class="container">
  9 |                 <div class="row">
 10 |                     <div class="col-sm-6">
 11 |                         <img src="<?php echo $item['item_image'] ?? "./assets/products/1.png" ?>" alt="product" class="img-fluid">
 12 |                         <div class="form-row pt-4 font-size-16 font-baloo">
 13 |                             <div class="col">
 14 |                                 <button type="submit" class="btn btn-danger form-control">Proceed to Buy</button>
 15 |                             </div>
 16 |                             <div class="col">
 17 |                                 <?php
 18 |                                 if (in_array($item['item_id'], $Cart->getCartId($product->getData('cart')) ?? [])){
 19 |                                     echo '<button type="submit" disabled class="btn btn-success font-size-16 form-control">In the Cart</button>';
 20 |                                 }else{
 21 |                                     echo '<button type="submit" name="top_sale_submit" class="btn btn-warning font-size-16 form-control">Add to Cart</button>';
 22 |                                 }
 23 |                                 ?>
 24 |                             </div>
 25 |                         </div>
 26 |                     </div>
 27 |                     <div class="col-sm-6 py-5">
 28 |                         <h5 class="font-baloo font-size-20"><?php echo $item['item_name'] ?? "Unknown"; ?></h5>
 29 |                         <small>by <?php echo $item['item_brand'] ?? "Brand"; ?></small>
 30 |                         <div class="d-flex">
 31 |                             <div class="rating text-warning font-size-12">
 32 |                                 <span><i class="fas fa-star"></i></span>
 33 |                                 <span><i class="fas fa-star"></i></span>
 34 |                                 <span><i class="fas fa-star"></i></span>
 35 |                                 <span><i class="fas fa-star"></i></span>
 36 |                                 <span><i class="far fa-star"></i></span>
 37 |                             </div>
 38 |                             <a href="#" class="px-2 font-rale font-size-14">20,534 ratings | 1000+ answered questions</a>
 39 |                         </div>
 40 |                         <hr class="m-0">
 41 | 
 42 |                         <!---    product price       -->
 43 |                         <table class="my-3">
 44 |                             <tr class="font-rale font-size-14">
 45 |                                 <td>M.R.P:</td>
 46 |                                 <td><strike>$162.00</strike></td>
 47 |                             </tr>
 48 |                             <tr class="font-rale font-size-14">
 49 |                                 <td>Deal Price:</td>
 50 |                                 <td class="font-size-20 text-danger">$<span><?php echo $item['item_price'] ?? 0; ?></span><small class="text-dark font-size-12">&nbsp;&nbsp;Inclusive of all taxes</small></td>
 51 |                             </tr>
 52 |                             <tr class="font-rale font-size-14">
 53 |                                 <td>You Save:</td>
 54 |                                 <td><span class="font-size-16 text-danger">$152.00</span></td>
 55 |                             </tr>
 56 |                         </table>
 57 |                         <!---    !product price       -->
 58 | 
 59 |                         <!--    #policy -->
 60 |                         <div id="policy">
 61 |                             <div class="d-flex">
 62 |                                 <div class="return text-center mr-5">
 63 |                                     <div class="font-size-20 my-2 color-second">
 64 |                                         <span class="fas fa-retweet border p-3 rounded-pill"></span>
 65 |                                     </div>
 66 |                                     <a href="#" class="font-rale font-size-12">10 Days <br> Replacement</a>
 67 |                                 </div>
 68 |                                 <div class="return text-center mr-5">
 69 |                                     <div class="font-size-20 my-2 color-second">
 70 |                                         <span class="fas fa-truck  border p-3 rounded-pill"></span>
 71 |                                     </div>
 72 |                                     <a href="#" class="font-rale font-size-12">Daily Tuition <br>Deliverd</a>
 73 |                                 </div>
 74 |                                 <div class="return text-center mr-5">
 75 |                                     <div class="font-size-20 my-2 color-second">
 76 |                                         <span class="fas fa-check-double border p-3 rounded-pill"></span>
 77 |                                     </div>
 78 |                                     <a href="#" class="font-rale font-size-12">1 Year <br>Warranty</a>
 79 |                                 </div>
 80 |                             </div>
 81 |                         </div>
 82 |                         <!--    !policy -->
 83 |                         <hr>
 84 | 
 85 |                         <!-- order-details -->
 86 |                         <div id="order-details" class="font-rale d-flex flex-column text-dark">
 87 |                             <small>Delivery by : Mar 29  - Apr 1</small>
 88 |                             <small>Sold by <a href="#">Daily Electronics </a>(4.5 out of 5 | 18,198 ratings)</small>
 89 |                             <small><i class="fas fa-map-marker-alt color-primary"></i>&nbsp;&nbsp;Deliver to Customer - 424201</small>
 90 |                         </div>
 91 |                         <!-- !order-details -->
 92 | 
 93 |                         <div class="row">
 94 |                             <div class="col-6">
 95 |                                 <!-- color -->
 96 |                                 <div class="color my-3">
 97 |                                     <div class="d-flex justify-content-between">
 98 |                                         <h6 class="font-baloo">Color:</h6>
 99 |                                         <div class="p-2 color-yellow-bg rounded-circle"><button class="btn font-size-14"></button></div>
100 |                                         <div class="p-2 color-primary-bg rounded-circle"><button class="btn font-size-14"></button></div>
101 |                                         <div class="p-2 color-second-bg rounded-circle"><button class="btn font-size-14"></button></div>
102 |                                     </div>
103 |                                 </div>
104 |                                 <!-- !color -->
105 |                             </div>
106 |                             <div class="col-6">
107 |                                 <!-- product qty section -->
108 |                                 <div class="qty d-flex">
109 |                                     <h6 class="font-baloo">Qty</h6>
110 |                                     <div class="px-4 d-flex font-rale">
111 |                                         <button class="qty-up border bg-light" data-id="pro1"><i class="fas fa-angle-up"></i></button>
112 |                                         <input type="text" data-id="pro1" class="qty_input border px-2 w-50 bg-light" disabled value="1" placeholder="1">
113 |                                         <button data-id="pro1" class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button>
114 |                                     </div>
115 |                                 </div>
116 |                                 <!-- !product qty section -->
117 |                             </div>
118 |                         </div>
119 | 
120 |                         <!-- size -->
121 |                         <div class="size my-3">
122 |                             <h6 class="font-baloo">Size :</h6>
123 |                             <div class="d-flex justify-content-between w-75">
124 |                                 <div class="font-rubik border p-2">
125 |                                     <button class="btn p-0 font-size-14">4GB RAM</button>
126 |                                 </div>
127 |                                 <div class="font-rubik border p-2">
128 |                                     <button class="btn p-0 font-size-14">6GB RAM</button>
129 |                                 </div>
130 |                                 <div class="font-rubik border p-2">
131 |                                     <button class="btn p-0 font-size-14">8GB RAM</button>
132 |                                 </div>
133 |                             </div>
134 |                         </div>
135 |                         <!-- !size -->
136 | 
137 | 
138 |                     </div>
139 | 
140 |                     <div class="col-12">
141 |                         <h6 class="font-rubik">Product Description</h6>
142 |                         <hr>
143 |                         <p class="font-rale font-size-14">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat inventore vero numquam error est ipsa, consequuntur temporibus debitis nobis sit, delectus officia ducimus dolorum sed corrupti. Sapiente optio sunt provident, accusantium eligendi eius reiciendis animi? Laboriosam, optio qui? Numquam, quo fuga. Maiores minus, accusantium velit numquam a aliquam vitae vel?</p>
144 |                         <p class="font-rale font-size-14">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat inventore vero numquam error est ipsa, consequuntur temporibus debitis nobis sit, delectus officia ducimus dolorum sed corrupti. Sapiente optio sunt provident, accusantium eligendi eius reiciendis animi? Laboriosam, optio qui? Numquam, quo fuga. Maiores minus, accusantium velit numquam a aliquam vitae vel?</p>
145 |                     </div>
146 |                 </div>
147 |             </div>
148 |         </section>
149 |         <!--   !product  -->
150 |     <?php
151 |     endif;
152 | endforeach;
153 | ?>


--------------------------------------------------------------------------------
/mobile_shope/html template/cart.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Mobile Shopee</title>
  7 | 
  8 |     <!-- Bootstrap CDN -->
  9 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 10 | 
 11 |     <!-- Owl-carousel CDN -->
 12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
 13 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha256-kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />
 14 | 
 15 |     <!-- font awesome icons -->
 16 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
 17 | 
 18 |     <!-- Custom CSS file -->
 19 |     <link rel="stylesheet" href="style.css">
 20 | </head>
 21 | <body>
 22 | 
 23 |     <!-- start #header -->
 24 |         <header id="header">
 25 |             <div class="strip d-flex justify-content-between px-4 py-1 bg-light">
 26 |                 <p class="font-rale font-size-12 text-black-50 m-0">Jordan Calderon 430-985 Eleifend St. Duluth Washington 92611 (427) 930-5255</p>
 27 |                 <div class="font-rale font-size-14">
 28 |                     <a href="#" class="px-3 border-right border-left text-dark">Login</a>
 29 |                     <a href="#" class="px-3 border-right text-dark">Whishlist (0)</a>
 30 |                 </div>
 31 |             </div>
 32 | 
 33 |             <!-- Primary Navigation -->
 34 |             <nav class="navbar navbar-expand-lg navbar-dark color-second-bg">
 35 |                 <a class="navbar-brand" href="#">Mobile Shopee</a>
 36 |                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 37 |                   <span class="navbar-toggler-icon"></span>
 38 |                 </button>
 39 |                 <div class="collapse navbar-collapse" id="navbarNav">
 40 |                   <ul class="navbar-nav m-auto font-rubik">
 41 |                     <li class="nav-item active">
 42 |                       <a class="nav-link" href="#">On Sale</a>
 43 |                     </li>
 44 |                     <li class="nav-item">
 45 |                       <a class="nav-link" href="#">Category</a>
 46 |                     </li>
 47 |                     <li class="nav-item">
 48 |                       <a class="nav-link" href="#">Products <i class="fas fa-chevron-down"></i></a>
 49 |                     </li>
 50 |                     <li class="nav-item">
 51 |                         <a class="nav-link" href="#">Blog</a>
 52 |                       </li>
 53 |                       <li class="nav-item">
 54 |                         <a class="nav-link" href="#">Category <i class="fas fa-chevron-down"></i></a>
 55 |                       </li>
 56 |                       <li class="nav-item">
 57 |                         <a class="nav-link" href="#">Coming Soon</a>
 58 |                       </li>
 59 |                   </ul>
 60 |                   <form action="#" class="font-size-14 font-rale">
 61 |                       <a href="#" class="py-2 rounded-pill color-primary-bg">
 62 |                         <span class="font-size-16 px-2 text-white"><i class="fas fa-shopping-cart"></i></span>
 63 |                         <span class="px-3 py-2 rounded-pill text-dark bg-light">0</span>
 64 |                       </a>
 65 |                   </form>
 66 |                 </div>
 67 |               </nav>
 68 |                <!-- !Primary Navigation -->
 69 | 
 70 |         </header>
 71 |     <!-- !start #header -->
 72 | 
 73 |     <!-- start #main-site -->
 74 |         <main id="main-site">
 75 | 
 76 |             <!-- Shopping cart section  -->
 77 |                 <section id="cart" class="py-3">
 78 |                     <div class="container-fluid w-75">
 79 |                         <h5 class="font-baloo font-size-20">Shopping Cart</h5>
 80 | 
 81 |                         <!--  shopping cart items   -->
 82 |                             <div class="row">
 83 |                                 <div class="col-sm-9">
 84 |                                     <!-- cart item -->
 85 |                                         <div class="row border-top py-3 mt-3">
 86 |                                             <div class="col-sm-2">
 87 |                                                 <img src="../assets/products/1.png" style="height: 120px;" alt="cart1" class="img-fluid">
 88 |                                             </div>
 89 |                                             <div class="col-sm-8">
 90 |                                                 <h5 class="font-baloo font-size-20">Samsung Galaxy 10</h5>
 91 |                                                 <small>by Samsung</small>
 92 |                                                 <!-- product rating -->
 93 |                                                 <div class="d-flex">
 94 |                                                     <div class="rating text-warning font-size-12">
 95 |                                                         <span><i class="fas fa-star"></i></span>
 96 |                                                         <span><i class="fas fa-star"></i></span>
 97 |                                                         <span><i class="fas fa-star"></i></span>
 98 |                                                         <span><i class="fas fa-star"></i></span>
 99 |                                                         <span><i class="far fa-star"></i></span>
100 |                                                       </div>
101 |                                                       <a href="#" class="px-2 font-rale font-size-14">20,534 ratings</a>
102 |                                                 </div>
103 |                                                 <!--  !product rating-->
104 | 
105 |                                                 <!-- product qty -->
106 |                                                     <div class="qty d-flex pt-2">
107 |                                                         <div class="d-flex font-rale w-25">
108 |                                                             <button class="qty-up border bg-light" data-id="pro1"><i class="fas fa-angle-up"></i></button>
109 |                                                             <input type="text" data-id="pro1" class="qty_input border px-2 w-100 bg-light" disabled value="1" placeholder="1">
110 |                                                             <button data-id="pro1" class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button>
111 |                                                         </div>
112 |                                                         <button type="submit" class="btn font-baloo text-danger px-3 border-right">Delete</button>
113 |                                                         <button type="submit" class="btn font-baloo text-danger">Save for Later</button>
114 |                                                     </div>
115 |                                                 <!-- !product qty -->
116 | 
117 |                                             </div>
118 | 
119 |                                             <div class="col-sm-2 text-right">
120 |                                                 <div class="font-size-20 text-danger font-baloo">
121 |                                                     $<span class="product_price">152</span>
122 |                                                 </div>
123 |                                             </div>
124 |                                         </div>
125 |                                     <!-- !cart item -->
126 |                                     <!-- cart item -->
127 |                                     <div class="row border-top py-3 mt-3">
128 |                                         <div class="col-sm-2">
129 |                                             <img src="../assets/products/2.png" style="height: 120px;" alt="cart1" class="img-fluid">
130 |                                         </div>
131 |                                         <div class="col-sm-8">
132 |                                             <h5 class="font-baloo font-size-20">Samsung Galaxy 10</h5>
133 |                                             <small>by Samsung</small>
134 |                                             <!-- product rating -->
135 |                                             <div class="d-flex">
136 |                                                 <div class="rating text-warning font-size-12">
137 |                                                     <span><i class="fas fa-star"></i></span>
138 |                                                     <span><i class="fas fa-star"></i></span>
139 |                                                     <span><i class="fas fa-star"></i></span>
140 |                                                     <span><i class="fas fa-star"></i></span>
141 |                                                     <span><i class="far fa-star"></i></span>
142 |                                                   </div>
143 |                                                   <a href="#" class="px-2 font-rale font-size-14">20,534 ratings</a>
144 |                                             </div>
145 |                                             <!--  !product rating-->
146 | 
147 |                                             <!-- product qty -->
148 |                                                 <div class="qty d-flex pt-2">
149 |                                                     <div class="d-flex font-rale w-25">
150 |                                                         <button class="qty-up border bg-light"><i class="fas fa-angle-up"></i></button>
151 |                                                         <input type="text" class="qty_input border px-2 w-100 bg-light" disabled value="1" placeholder="1">
152 |                                                         <button class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button>
153 |                                                     </div>
154 |                                                     <button type="submit" class="btn font-baloo text-danger px-3 border-right">Delete</button>
155 |                                                     <button type="submit" class="btn font-baloo text-danger">Save for Later</button>
156 |                                                 </div>
157 |                                             <!-- !product qty -->
158 | 
159 |                                         </div>
160 | 
161 |                                         <div class="col-sm-2 text-right">
162 |                                             <div class="font-size-20 text-danger font-baloo">
163 |                                                 $<span class="product_price">152</span>
164 |                                             </div>
165 |                                         </div>
166 |                                     </div>
167 |                                 <!-- !cart item -->
168 |                                 </div>
169 |                                 <!-- subtotal section-->
170 |                                 <div class="col-sm-3">
171 |                                     <div class="sub-total border text-center mt-2">
172 |                                         <h6 class="font-size-12 font-rale text-success py-3"><i class="fas fa-check"></i> Your order is eligible for FREE Delivery.</h6>
173 |                                         <div class="border-top py-4">
174 |                                             <h5 class="font-baloo font-size-20">Subtotal (2 item):&nbsp; <span class="text-danger">$<span class="text-danger" id="deal-price">152.00</span> </span> </h5>
175 |                                             <button type="submit" class="btn btn-warning mt-3">Proceed to Buy</button>
176 |                                         </div>
177 |                                     </div>
178 |                                 </div>
179 |                                 <!-- !subtotal section-->
180 |                             </div>
181 |                         <!--  !shopping cart items   -->
182 |                     </div>
183 |                 </section>
184 |             <!-- !Shopping cart section  -->
185 | 
186 |               <!-- New Phones -->
187 |               <section id="new-phones">
188 |                 <div class="container py-5">
189 |                   <h4 class="font-rubik font-size-20">New Phones</h4>
190 |                   <hr>
191 | 
192 |                         <!-- owl carousel -->
193 |                         <div class="owl-carousel owl-theme">
194 |                           <div class="item py-2 bg-light">
195 |                             <div class="product font-rale">
196 |                               <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a>
197 |                               <div class="text-center">
198 |                                 <h6>Samsung Galaxy 10</h6>
199 |                                 <div class="rating text-warning font-size-12">
200 |                                   <span><i class="fas fa-star"></i></span>
201 |                                   <span><i class="fas fa-star"></i></span>
202 |                                   <span><i class="fas fa-star"></i></span>
203 |                                   <span><i class="fas fa-star"></i></span>
204 |                                   <span><i class="far fa-star"></i></span>
205 |                                 </div>
206 |                                 <div class="price py-2">
207 |                                   <span>$152</span>
208 |                                 </div>
209 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
210 |                               </div>
211 |                             </div>
212 |                           </div>
213 |                           <div class="item py-2 bg-light">
214 |                             <div class="product font-rale">
215 |                               <a href="#"><img src="../assets/products/2.png" alt="product1" class="img-fluid"></a>
216 |                               <div class="text-center">
217 |                                 <h6>Readme Note 7</h6>
218 |                                 <div class="rating text-warning font-size-12">
219 |                                   <span><i class="fas fa-star"></i></span>
220 |                                   <span><i class="fas fa-star"></i></span>
221 |                                   <span><i class="fas fa-star"></i></span>
222 |                                   <span><i class="fas fa-star"></i></span>
223 |                                   <span><i class="far fa-star"></i></span>
224 |                                 </div>
225 |                                 <div class="price py-2">
226 |                                   <span>$152</span>
227 |                                 </div>
228 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
229 |                               </div>
230 |                             </div>
231 |                           </div>
232 |                           <div class="item py-2 bg-light">
233 |                             <div class="product font-rale">
234 |                               <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a>
235 |                               <div class="text-center">
236 |                                 <h6>Readme Note 7</h6>
237 |                                 <div class="rating text-warning font-size-12">
238 |                                   <span><i class="fas fa-star"></i></span>
239 |                                   <span><i class="fas fa-star"></i></span>
240 |                                   <span><i class="fas fa-star"></i></span>
241 |                                   <span><i class="fas fa-star"></i></span>
242 |                                   <span><i class="far fa-star"></i></span>
243 |                                 </div>
244 |                                 <div class="price py-2">
245 |                                   <span>$152</span>
246 |                                 </div>
247 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
248 |                               </div>
249 |                             </div>
250 |                           </div>
251 |                           <div class="item py-2 bg-light">
252 |                             <div class="product font-rale">
253 |                               <a href="#"><img src="../assets/products/6.png" alt="product1" class="img-fluid"></a>
254 |                               <div class="text-center">
255 |                                 <h6>Samsung Galaxy 10</h6>
256 |                                 <div class="rating text-warning font-size-12">
257 |                                   <span><i class="fas fa-star"></i></span>
258 |                                   <span><i class="fas fa-star"></i></span>
259 |                                   <span><i class="fas fa-star"></i></span>
260 |                                   <span><i class="fas fa-star"></i></span>
261 |                                   <span><i class="far fa-star"></i></span>
262 |                                 </div>
263 |                                 <div class="price py-2">
264 |                                   <span>$152</span>
265 |                                 </div>
266 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
267 |                               </div>
268 |                             </div>
269 |                           </div>
270 |                           <div class="item py-2 bg-light">
271 |                             <div class="product font-rale">
272 |                               <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a>
273 |                               <div class="text-center">
274 |                                 <h6>Readme Note 7</h6>
275 |                                 <div class="rating text-warning font-size-12">
276 |                                   <span><i class="fas fa-star"></i></span>
277 |                                   <span><i class="fas fa-star"></i></span>
278 |                                   <span><i class="fas fa-star"></i></span>
279 |                                   <span><i class="fas fa-star"></i></span>
280 |                                   <span><i class="far fa-star"></i></span>
281 |                                 </div>
282 |                                 <div class="price py-2">
283 |                                   <span>$152</span>
284 |                                 </div>
285 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
286 |                               </div>
287 |                             </div>
288 |                           </div>
289 |                           <div class="item py-2 bg-light">
290 |                             <div class="product font-rale">
291 |                               <div class="d-flex flex-column">
292 |                                 <a href="#"><img src="../assets/products/1.png" class="img-fluid" alt="pro1"></a>
293 |                                 <div class="text-center">
294 |                                   <h6>Readme Note 7</h6>
295 |                                   <div class="rating text-warning font-size-12">
296 |                                     <span><i class="fas fa-star"></i></span>
297 |                                     <span><i class="fas fa-star"></i></span>
298 |                                     <span><i class="fas fa-star"></i></span>
299 |                                     <span><i class="fas fa-star"></i></span>
300 |                                     <span><i class="far fa-star"></i></span>
301 |                                   </div>
302 |                                   <div class="price py-2">
303 |                                     <span>$122</span>
304 |                                   </div>
305 |                                   <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
306 |                                 </div>
307 |                               </div>
308 |                             </div>
309 |                           </div>
310 |                           <div class="item py-2 bg-light">
311 |                             <div class="product font-rale">
312 |                               <div class="d-flex flex-column">
313 |                                 <a href="#"><img src="../assets/products/2.png" class="img-fluid" alt="pro1"></a>
314 |                                 <div class="text-center">
315 |                                   <h6>Readme Note 7</h6>
316 |                                   <div class="rating text-warning font-size-12">
317 |                                     <span><i class="fas fa-star"></i></span>
318 |                                     <span><i class="fas fa-star"></i></span>
319 |                                     <span><i class="fas fa-star"></i></span>
320 |                                     <span><i class="fas fa-star"></i></span>
321 |                                     <span><i class="far fa-star"></i></span>
322 |                                   </div>
323 |                                   <div class="price py-2">
324 |                                     <span>$122</span>
325 |                                   </div>
326 |                                   <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
327 |                                 </div>
328 |                               </div>
329 |                             </div>
330 |                           </div>
331 |                         </div>
332 |                       <!-- !owl carousel -->
333 | 
334 |                 </div>
335 |               </section>
336 |               <!-- !New Phones -->
337 | 
338 |         </main>
339 |     <!-- !start #main-site -->
340 | 
341 |     <!-- start #footer -->
342 |         <footer id="footer" class="bg-dark text-white py-5">
343 |           <div class="container">
344 |             <div class="row">
345 |               <div class="col-lg-3 col-12">
346 |                 <h4 class="font-rubik font-size-20">Mobile Shopee</h4>
347 |                 <p class="font-size-14 font-rale text-white-50">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p>
348 |               </div>
349 |               <div class="col-lg-4 col-12">
350 |                 <h4 class="font-rubik font-size-20">Newslatter</h4>
351 |                 <form class="form-row">
352 |                   <div class="col">
353 |                     <input type="text" class="form-control" placeholder="Email *">
354 |                   </div>
355 |                   <div class="col">
356 |                     <button type="submit" class="btn btn-primary mb-2">Subscribe</button>
357 |                   </div>
358 |                 </form>
359 |               </div>
360 |               <div class="col-lg-2 col-12">
361 |                 <h4 class="font-rubik font-size-20">Information</h4>
362 |                 <div class="d-flex flex-column flex-wrap">
363 |                   <a href="#" class="font-rale font-size-14 text-white-50 pb-1">About Us</a>
364 |                   <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Delivery Information</a>
365 |                   <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Privacy Policy</a>
366 |                   <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Terms & Conditions</a>
367 |                 </div>
368 |               </div>
369 |               <div class="col-lg-2 col-12">
370 |                 <h4 class="font-rubik font-size-20">Account</h4>
371 |                 <div class="d-flex flex-column flex-wrap">
372 |                   <a href="#" class="font-rale font-size-14 text-white-50 pb-1">My Account</a>
373 |                   <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Order History</a>
374 |                   <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Wish List</a>
375 |                   <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Newslatters</a>
376 |                 </div>
377 |               </div>
378 |             </div>
379 |           </div>
380 |         </footer>
381 |         <div class="copyright text-center bg-dark text-white py-2">
382 |           <p class="font-rale font-size-14">&copy; Copyrights 2020. Desing By <a href="#" class="color-second">Daily Tuition</a></p>
383 |         </div>
384 |     <!-- !start #footer -->
385 | 
386 |     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
387 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
388 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
389 | 
390 |     <!-- Owl Carousel Js file -->
391 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
392 | 
393 |     <!--  isotope plugin cdn  -->
394 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI=" crossorigin="anonymous"></script>
395 | 
396 |     <!-- Custom Javascript -->
397 |     <script src="index.js"></script>
398 | </body>
399 | </html>


--------------------------------------------------------------------------------
/mobile_shope/html template/product.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>ecommerce</title>
  8 |     <!-- bootstrap -->
  9 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 10 |     <!--owlcourse cdn-->
 11 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 13 |     <!-- icon thems-->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha512-L7MWcK7FNPcwNqnLdZq86lTHYLdQqZaz5YcAgE+5cnGmlw8JT03QB2+oxL100UeB6RlzZLUxCGSS4/++mNZdxw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 15 |     <!--Custom CSS file-->
 16 |     <link rel="stylesheet" href="style.css">
 17 | </head>
 18 | <body>
 19 |      <!-- start #header -->
 20 |      <header id="header">
 21 |         <div class="strip d-flex justify-content-between px-4 py-1 bg-light">
 22 |             <p class="font-rale font-size-12 text-black-50 m-0">Jordan Calderon 430-985 Eleifend St. Duluth Washington 92611 (427) 930-5255</p>
 23 |             <div class="font-rale font-size-14">
 24 |                 <a href="#" class="px-3 border-right border-left text-dark">Login</a>
 25 |                 <a href="#" class="px-3 border-right text-dark">Whishlist (0)</a>
 26 |             </div>
 27 |         </div>
 28 | 
 29 |         <!-- Primary Navigation -->
 30 |         <nav class="navbar navbar-expand-lg navbar-dark color-second-bg ">
 31 |             <a class="navbar-brand" href="#">Mobile shopee</a>
 32 |             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 33 |               <span class="navbar-toggler-icon"></span>
 34 |             </button>
 35 |             <div class="collapse navbar-collapse" id="navbarNav">
 36 |               <ul class="navbar-nav m-auto font-rubik">
 37 |                 <li class="nav-item active">
 38 |                   <a class="nav-link" href="#">On sale</a>
 39 |                 </li>
 40 |                 <li class="nav-item">
 41 |                   <a class="nav-link" href="#">Category</a>
 42 |                 </li>
 43 |                 <li class="nav-item">
 44 |                   <a class="nav-link" href="#">Products<i class="fas fa-chevron-down"></i></a>
 45 |                 </li>
 46 |                
 47 |                 <li class="nav-item">
 48 |                   <a class="nav-link" href="#">Blog</a>
 49 |                 </li>
 50 |                 <li class="nav-item">
 51 |                     <a class="nav-link" href="#">Category<i class="fas fa-chevron-down"></i></a>
 52 |                   </li>
 53 |                
 54 |                 <li class="nav-item">
 55 |                   <a class="nav-link" href="#">Comming soon</a>
 56 |                 </li>
 57 |               </ul>
 58 |               <form action="#" class="font-size-14 font-rale">
 59 |                   <a href="#" class="py-2 rounded-pill color-primary-bg">
 60 |                       <span class="font-size-16 px-2 text-white"><i class="fas fa-shopping-cart"></i></span>
 61 |                       <span class="px-3 py-2 rounded-pill text-dark bg-light"></span>
 62 |                   </a>
 63 |               </form>
 64 |             </div>
 65 |           </nav>
 66 |           <!-- !Primary Navigation -->
 67 | 
 68 |     </header>
 69 |     <!-- !start #header -->
 70 |     <!-- !start #main-site-->
 71 |     <main>
 72 |        
 73 |                        <!--   product  -->
 74 |             <section id="product" class="py-3">
 75 |                 <div class="container">
 76 |                     <div class="row">
 77 |                         <div class="col-sm-6">
 78 |                             <img src="../assets/products/1.png" alt="product" class="img-fluid">
 79 |                             <div class="form-row pt-4 font-size-16 font-baloo">
 80 |                                 <div class="col">
 81 |                                     <button type="submit" class="btn btn-danger form-control">Proceed to Buy</button>
 82 |                                 </div>
 83 |                                 <div class="col">
 84 |                                     <button type="submit" class="btn btn-warning form-control">Add to Cart</button>
 85 |                                 </div>
 86 |                             </div>
 87 |                         </div>
 88 |                         <div class="col-sm-6 py-5">
 89 |                             <h5 class="font-baloo font-size-20">Samsung Galaxy 10</h5>
 90 |                             <small>by Samsung</small>
 91 |                             <div class="d-flex">
 92 |                                 <div class="rating text-warning font-size-12">
 93 |                                     <span><i class="fas fa-star"></i></span>
 94 |                                     <span><i class="fas fa-star"></i></span>
 95 |                                     <span><i class="fas fa-star"></i></span>
 96 |                                     <span><i class="fas fa-star"></i></span>
 97 |                                     <span><i class="far fa-star"></i></span>
 98 |                                   </div>
 99 |                                   <a href="#" class="px-2 font-rale font-size-14">20,534 ratings | 1000+ answered questions</a>
100 |                             </div>
101 |                             <hr class="m-0">
102 | 
103 |                             <!---    product price       -->
104 |                                 <table class="my-3">
105 |                                     <tr class="font-rale font-size-14">
106 |                                         <td>M.R.P:</td>
107 |                                         <td><strike>$162.00</strike></td>
108 |                                     </tr>
109 |                                     <tr class="font-rale font-size-14">
110 |                                         <td>Deal Price:</td>
111 |                                         <td class="font-size-20 text-danger">$<span>152.00</span><small class="text-dark font-size-12">&nbsp;&nbsp;Inclusive of all taxes</small></td>
112 |                                     </tr>
113 |                                     <tr class="font-rale font-size-14">
114 |                                         <td>You Save:</td>
115 |                                         <td><span class="font-size-16 text-danger">$152.00</span></td>
116 |                                     </tr>
117 |                                 </table>
118 |                             <!---    !product price       -->
119 | 
120 |                              <!--    #policy -->
121 |                                 <div id="policy">
122 |                                     <div class="d-flex">
123 |                                         <div class="return text-center mr-5">
124 |                                             <div class="font-size-20 my-2 color-second">
125 |                                                 <span class="fas fa-retweet border p-3 rounded-pill"></span>
126 |                                             </div>
127 |                                             <a href="#" class="font-rale font-size-12">10 Days <br> Replacement</a>
128 |                                         </div>
129 |                                         <div class="return text-center mr-5">
130 |                                             <div class="font-size-20 my-2 color-second">
131 |                                                 <span class="fas fa-truck  border p-3 rounded-pill"></span>
132 |                                             </div>
133 |                                             <a href="#" class="font-rale font-size-12">Daily Tuition <br>Deliverd</a>
134 |                                         </div>
135 |                                         <div class="return text-center mr-5">
136 |                                             <div class="font-size-20 my-2 color-second">
137 |                                                 <span class="fas fa-check-double border p-3 rounded-pill"></span>
138 |                                             </div>
139 |                                             <a href="#" class="font-rale font-size-12">1 Year <br>Warranty</a>
140 |                                         </div>
141 |                                     </div>
142 |                                 </div>
143 |                               <!--    !policy -->
144 |                                 <hr>
145 | 
146 |                             <!-- order-details -->
147 |                                 <div id="order-details" class="font-rale d-flex flex-column text-dark">
148 |                                     <small>Delivery by : Mar 29  - Apr 1</small>
149 |                                     <small>Sold by <a href="#">Daily Electronics </a>(4.5 out of 5 | 18,198 ratings)</small>
150 |                                     <small><i class="fas fa-map-marker-alt color-primary"></i>&nbsp;&nbsp;Deliver to Customer - 424201</small>
151 |                                 </div>
152 |                              <!-- !order-details -->
153 | 
154 |                              <div class="row">
155 |                                  <div class="col-6">
156 |                                         <!-- color -->
157 |                                             <div class="color my-3">
158 |                                               <div class="d-flex justify-content-between">
159 |                                                 <h6 class="font-baloo">Color:</h6> <!--here you can change product color--> 
160 |                                                 <div class="p-2 color-yellow-bg rounded-circle"><button class="btn font-size-14"></button></div>
161 |                                                 <div class="p-2 color-primary-bg rounded-circle"><button class="btn font-size-14"></button></div>
162 |                                                 <div class="p-2 color-second-bg rounded-circle"><button class="btn font-size-14"></button></div>
163 |                                               </div>
164 |                                             </div>
165 |                                         <!-- !color -->
166 |                                  </div>
167 |                                  <div class="col-6">
168 |                                    <!-- product qty section -->  
169 |                                      <div class="qty d-flex">
170 |                                          <h6 class="font-baloo">Qty</h6>
171 |                                          <div class="px-4 d-flex font-rale">
172 |                                              <button class="qty-up border bg-light" data-id="pro1"><i class="fas fa-angle-up"></i></button>
173 |                                              <input type="text" data-id="pro1" class="qty_input border px-2 w-50 bg-light" disabled value="1" placeholder="1">
174 |                                              <button data-id="pro1" class="qty-down border bg-light"><i class="fas fa-angle-down"></i></button>
175 |                                          </div>
176 |                                      </div>
177 |                                     <!-- !product qty section -->  
178 |                                  </div>
179 |                              </div>
180 | 
181 |                             <!-- size -->
182 |                                 <div class="size my-3">
183 |                                     <h6 class="font-baloo">Size :</h6>
184 |                                     <div class="d-flex justify-content-between w-75">
185 |                                         <div class="font-rubik border p-2">
186 |                                             <button class="btn p-0 font-size-14">4GB RAM</button>
187 |                                         </div>
188 |                                         <div class="font-rubik border p-2">
189 |                                             <button class="btn p-0 font-size-14">6GB RAM</button>
190 |                                         </div>
191 |                                         <div class="font-rubik border p-2">
192 |                                             <button class="btn p-0 font-size-14">8GB RAM</button>
193 |                                         </div>
194 |                                     </div>
195 |                                 </div>
196 |                             <!-- !size -->
197 | 
198 | 
199 |                         </div>
200 | 
201 |                         <div class="col-12">
202 |                             <h6 class="font-rubik">Product Description</h6>
203 |                             <hr>
204 |                             <p class="font-rale font-size-14">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat inventore vero numquam error est ipsa, consequuntur temporibus debitis nobis sit, delectus officia ducimus dolorum sed corrupti. Sapiente optio sunt provident, accusantium eligendi eius reiciendis animi? Laboriosam, optio qui? Numquam, quo fuga. Maiores minus, accusantium velit numquam a aliquam vitae vel?</p>
205 |                             <p class="font-rale font-size-14">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat inventore vero numquam error est ipsa, consequuntur temporibus debitis nobis sit, delectus officia ducimus dolorum sed corrupti. Sapiente optio sunt provident, accusantium eligendi eius reiciendis animi? Laboriosam, optio qui? Numquam, quo fuga. Maiores minus, accusantium velit numquam a aliquam vitae vel?</p>
206 |                         </div>
207 |                     </div>
208 |                 </div>
209 |             </section>
210 |         <!--   !product  -->
211 |         <!-- Top Sale -->
212 |         <section id="top-sale">
213 |             <div class="container py-5">
214 |               <h4 class="font-rubik font-size-20">Top Sale</h4>
215 |               <hr>
216 |               <!-- owl carousel -->
217 |                 <div class="owl-carousel owl-theme">
218 |                   <div class="item py-2">
219 |                     <div class="product font-rale">
220 |                       <a href="#"><img src="./assets/products/1.png" alt="product1" class="img-fluid"></a>
221 |                       <div class="text-center">
222 |                         <h6>Samsung Galaxy 10</h6>
223 |                         <div class="rating text-warning font-size-12">
224 |                           <span><i class="fas fa-star"></i></span>
225 |                           <span><i class="fas fa-star"></i></span>
226 |                           <span><i class="fas fa-star"></i></span>
227 |                           <span><i class="fas fa-star"></i></span>
228 |                           <span><i class="far fa-star"></i></span>
229 |                         </div>
230 |                         <div class="price py-2">
231 |                           <span>$152</span>
232 |                         </div>
233 |                         <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
234 |                       </div>
235 |                     </div>
236 |                   </div>
237 |                   <div class="item py-2">
238 |                     <div class="product font-rale">
239 |                       <a href="#"><img src="./assets/products/2.png" alt="product1" class="img-fluid"></a>
240 |                       <div class="text-center">
241 |                         <h6>Readme Note 7</h6>
242 |                         <div class="rating text-warning font-size-12">
243 |                           <span><i class="fas fa-star"></i></span>
244 |                           <span><i class="fas fa-star"></i></span>
245 |                           <span><i class="fas fa-star"></i></span>
246 |                           <span><i class="fas fa-star"></i></span>
247 |                           <span><i class="far fa-star"></i></span>
248 |                         </div>
249 |                         <div class="price py-2">
250 |                           <span>$152</span>
251 |                         </div>
252 |                         <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
253 |                       </div>
254 |                     </div>
255 |                   </div>
256 |                   <div class="item py-2">
257 |                     <div class="product font-rale">
258 |                       <a href="#"><img src="./assets/products/3.png" alt="product1" class="img-fluid"></a>
259 |                       <div class="text-center">
260 |                         <h6>Readme Note 7</h6>
261 |                         <div class="rating text-warning font-size-12">
262 |                           <span><i class="fas fa-star"></i></span>
263 |                           <span><i class="fas fa-star"></i></span>
264 |                           <span><i class="fas fa-star"></i></span>
265 |                           <span><i class="fas fa-star"></i></span>
266 |                           <span><i class="far fa-star"></i></span>
267 |                         </div>
268 |                         <div class="price py-2">
269 |                           <span>$152</span>
270 |                         </div>
271 |                         <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
272 |                       </div>
273 |                     </div>
274 |                   </div>
275 |                   <div class="item py-2">
276 |                     <div class="product font-rale">
277 |                       <a href="#"><img src="./assets/products/6.png" alt="product1" class="img-fluid"></a>
278 |                       <div class="text-center">
279 |                         <h6>Samsung Galaxy 10</h6>
280 |                         <div class="rating text-warning font-size-12">
281 |                           <span><i class="fas fa-star"></i></span>
282 |                           <span><i class="fas fa-star"></i></span>
283 |                           <span><i class="fas fa-star"></i></span>
284 |                           <span><i class="fas fa-star"></i></span>
285 |                           <span><i class="far fa-star"></i></span>
286 |                         </div>
287 |                         <div class="price py-2">
288 |                           <span>$152</span>
289 |                         </div>
290 |                         <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
291 |                       </div>
292 |                     </div>
293 |                   </div>
294 |                   <div class="item py-2">
295 |                     <div class="product font-rale">
296 |                       <a href="#"><img src="./assets/products/1.png" alt="product1" class="img-fluid"></a>
297 |                       <div class="text-center">
298 |                         <h6>Readme Note 7</h6>
299 |                         <div class="rating text-warning font-size-12">
300 |                           <span><i class="fas fa-star"></i></span>
301 |                           <span><i class="fas fa-star"></i></span>
302 |                           <span><i class="fas fa-star"></i></span>
303 |                           <span><i class="fas fa-star"></i></span>
304 |                           <span><i class="far fa-star"></i></span>
305 |                         </div>
306 |                         <div class="price py-2">
307 |                           <span>$152</span>
308 |                         </div>
309 |                         <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
310 |                       </div>
311 |                     </div>
312 |                   </div>
313 |                   <div class="item py-2">
314 |                     <div class="product font-rale">
315 |                       <div class="d-flex flex-column">
316 |                         <a href="#"><img src="./assets/products/1.png" class="img-fluid" alt="pro1"></a>
317 |                         <div class="text-center">
318 |                           <h6>Readme Note 7</h6>
319 |                           <div class="rating text-warning font-size-12">
320 |                             <span><i class="fas fa-star"></i></span>
321 |                             <span><i class="fas fa-star"></i></span>
322 |                             <span><i class="fas fa-star"></i></span>
323 |                             <span><i class="fas fa-star"></i></span>
324 |                             <span><i class="far fa-star"></i></span>
325 |                           </div>
326 |                           <div class="price py-2">
327 |                             <span>$122</span>
328 |                           </div>
329 |                           <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
330 |                         </div>
331 |                       </div>
332 |                     </div>
333 |                   </div>
334 |                   <div class="item py-2">
335 |                     <div class="product font-rale">
336 |                       <div class="d-flex flex-column">
337 |                         <a href="#"><img src="./assets/products/2.png" class="img-fluid" alt="pro1"></a>
338 |                         <div class="text-center">
339 |                           <h6>Readme Note 7</h6>
340 |                           <div class="rating text-warning font-size-12">
341 |                             <span><i class="fas fa-star"></i></span>
342 |                             <span><i class="fas fa-star"></i></span>
343 |                             <span><i class="fas fa-star"></i></span>
344 |                             <span><i class="fas fa-star"></i></span>
345 |                             <span><i class="far fa-star"></i></span>
346 |                           </div>
347 |                           <div class="price py-2">
348 |                             <span>$122</span>
349 |                           </div>
350 |                           <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
351 |                         </div>
352 |                       </div>
353 |                     </div>
354 |                   </div>
355 |                 </div>
356 |               <!-- !owl carousel -->
357 |             </div>
358 |           </section>
359 |         <!-- !Top Sale -->
360 | 
361 |     </main>
362 |     <!-- !start #main-site-->
363 |      <!-- start #footer -->
364 |      <footer id="footer" class="bg-dark text-white py-5">
365 |         <div class="container">
366 |           <div class="row">
367 |             <div class="col-lg-3 col-12">
368 |               <h4 class="font-rubik font-size-20">Mobile Shopee</h4>
369 |               <p class="font-size-14 font-rale text-white-50">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p>
370 |             </div>
371 |             <div class="col-lg-4 col-12">
372 |               <h4 class="font-rubik font-size-20">Newslatter</h4>
373 |               <form class="form-row">
374 |                 <div class="col">
375 |                   <input type="text" class="form-control" placeholder="Email *">
376 |                 </div>
377 |                 <div class="col">
378 |                   <button type="submit" class="btn btn-primary mb-2">Subscribe</button>
379 |                 </div>
380 |               </form>
381 |             </div>
382 |             <div class="col-lg-2 col-12">
383 |               <h4 class="font-rubik font-size-20">Information</h4>
384 |               <div class="d-flex flex-column flex-wrap">
385 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">About Us</a>
386 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Delivery Information</a>
387 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Privacy Policy</a>
388 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Terms & Conditions</a>
389 |               </div>
390 |             </div>
391 |             <div class="col-lg-2 col-12">
392 |               <h4 class="font-rubik font-size-20">Account</h4>
393 |               <div class="d-flex flex-column flex-wrap">
394 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">My Account</a>
395 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Order History</a>
396 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Wish List</a>
397 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Newslatters</a>
398 |               </div>
399 |             </div>
400 |           </div>
401 |         </div>
402 |       </footer>
403 |       <div class="copyright text-center bg-dark text-white py-2">
404 |         <p class="font-rale font-size-14">&copy; Copyrights 2020. Desing By <a href="#" class="color-second">Daily Tuition</a></p>
405 |       </div>
406 |   <!-- !start #footer -->
407 |     
408 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
409 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
410 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
411 |     <!-- Owl Carousel Js file -->
412 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
413 |     <!-- Custom Javascript -->
414 |        <script src="./index.js"></script>
415 |     <!-- isotop plugin cdn-->
416 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha512-Zq2BOxyhvnRFXu0+WE6ojpZLOU2jdnqbrM1hmVdGzyeCa1DgM3X5Q4A/Is9xA1IkbUeDd7755dNNI/PzSf2Pew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
417 | </body>
418 | </html>


--------------------------------------------------------------------------------
/mobile_shope/html template/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>ecommerce</title>
  8 |     <!-- bootstrap -->
  9 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 10 |     <!--owlcourse cdn-->
 11 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 13 |     <!-- icon thems-->
 14 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha512-L7MWcK7FNPcwNqnLdZq86lTHYLdQqZaz5YcAgE+5cnGmlw8JT03QB2+oxL100UeB6RlzZLUxCGSS4/++mNZdxw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 15 |     <!--Custom CSS file-->
 16 |     <link rel="stylesheet" href="style.css">
 17 | </head>
 18 | <body>
 19 |      <!-- start #header -->
 20 |      <header id="header">
 21 |         <div class="strip d-flex justify-content-between px-4 py-1 bg-light">
 22 |             <p class="font-rale font-size-12 text-black-50 m-0">Jordan Calderon 430-985 Eleifend St. Duluth Washington 92611 (427) 930-5255</p>
 23 |             <div class="font-rale font-size-14">
 24 |                 <a href="#" class="px-3 border-right border-left text-dark">Login</a>
 25 |                 <a href="#" class="px-3 border-right text-dark">Whishlist (0)</a>
 26 |             </div>
 27 |         </div>
 28 | 
 29 |         <!-- Primary Navigation -->
 30 |         <nav class="navbar navbar-expand-lg navbar-dark color-second-bg ">
 31 |             <a class="navbar-brand" href="#">Mobile shopee</a>
 32 |             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 33 |               <span class="navbar-toggler-icon"></span>
 34 |             </button>
 35 |             <div class="collapse navbar-collapse" id="navbarNav">
 36 |               <ul class="navbar-nav m-auto font-rubik">
 37 |                 <li class="nav-item active">
 38 |                   <a class="nav-link" href="#">On sale</a>
 39 |                 </li>
 40 |                 <li class="nav-item">
 41 |                   <a class="nav-link" href="#">Category</a>
 42 |                 </li>
 43 |                 <li class="nav-item">
 44 |                   <a class="nav-link" href="#">Products<i class="fas fa-chevron-down"></i></a>
 45 |                 </li>
 46 |                
 47 |                 <li class="nav-item">
 48 |                   <a class="nav-link" href="#">Blog</a>
 49 |                 </li>
 50 |                 <li class="nav-item">
 51 |                     <a class="nav-link" href="#">Category<i class="fas fa-chevron-down"></i></a>
 52 |                   </li>
 53 |                
 54 |                 <li class="nav-item">
 55 |                   <a class="nav-link" href="#">Comming soon</a>
 56 |                 </li>
 57 |               </ul>
 58 |               <form action="#" class="font-size-14 font-rale">
 59 |                   <a href="#" class="py-2 rounded-pill color-primary-bg">
 60 |                       <span class="font-size-16 px-2 text-white"><i class="fas fa-shopping-cart"></i></span>
 61 |                       <span class="px-3 py-2 rounded-pill text-dark bg-light"></span>
 62 |                   </a>
 63 |               </form>
 64 |             </div>
 65 |           </nav>
 66 |           <!-- !Primary Navigation -->
 67 | 
 68 |     </header>
 69 |     <!-- !start #header -->
 70 |     <!-- !start #main-site-->
 71 |     <main>
 72 |         <!-- Owl-carousel-->
 73 |         <section id="banner-area">
 74 |             <div class="owl-carousel owl-theme">
 75 |                 <div class="item">
 76 |                   <img src="./assets/Banner1.png" alt="Banner1">
 77 |                 </div>
 78 |                 <div class="item">
 79 |                   <img src="./assets/Banner2.png" alt="Banner2">
 80 |                 </div>
 81 |                 <div class="item">
 82 |                   <img src="./assets/Banner1.png" alt="Banner1">
 83 |                 </div>
 84 |             </div>
 85 |           </section>
 86 |         <!-- Owl-carousel-->
 87 |                   <!-- Top Sale -->
 88 |                   <section id="top-sale">
 89 |                     <div class="container py-5">
 90 |                       <h4 class="font-rubik font-size-20">Top Sale</h4>
 91 |                       <hr>
 92 |                       <!-- owl carousel -->
 93 |                         <div class="owl-carousel owl-theme">
 94 |                           <div class="item py-2">
 95 |                             <div class="product font-rale">
 96 |                               <a href="#"><img src="./assets/products/1.png" alt="product1" class="img-fluid"></a>
 97 |                               <div class="text-center">
 98 |                                 <h6>Samsung Galaxy 10</h6>
 99 |                                 <div class="rating text-warning font-size-12">
100 |                                   <span><i class="fas fa-star"></i></span>
101 |                                   <span><i class="fas fa-star"></i></span>
102 |                                   <span><i class="fas fa-star"></i></span>
103 |                                   <span><i class="fas fa-star"></i></span>
104 |                                   <span><i class="far fa-star"></i></span>
105 |                                 </div>
106 |                                 <div class="price py-2">
107 |                                   <span>$152</span>
108 |                                 </div>
109 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
110 |                               </div>
111 |                             </div>
112 |                           </div>
113 |                           <div class="item py-2">
114 |                             <div class="product font-rale">
115 |                               <a href="#"><img src="./assets/products/2.png" alt="product1" class="img-fluid"></a>
116 |                               <div class="text-center">
117 |                                 <h6>Readme Note 7</h6>
118 |                                 <div class="rating text-warning font-size-12">
119 |                                   <span><i class="fas fa-star"></i></span>
120 |                                   <span><i class="fas fa-star"></i></span>
121 |                                   <span><i class="fas fa-star"></i></span>
122 |                                   <span><i class="fas fa-star"></i></span>
123 |                                   <span><i class="far fa-star"></i></span>
124 |                                 </div>
125 |                                 <div class="price py-2">
126 |                                   <span>$152</span>
127 |                                 </div>
128 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
129 |                               </div>
130 |                             </div>
131 |                           </div>
132 |                           <div class="item py-2">
133 |                             <div class="product font-rale">
134 |                               <a href="#"><img src="./assets/products/3.png" alt="product1" class="img-fluid"></a>
135 |                               <div class="text-center">
136 |                                 <h6>Readme Note 7</h6>
137 |                                 <div class="rating text-warning font-size-12">
138 |                                   <span><i class="fas fa-star"></i></span>
139 |                                   <span><i class="fas fa-star"></i></span>
140 |                                   <span><i class="fas fa-star"></i></span>
141 |                                   <span><i class="fas fa-star"></i></span>
142 |                                   <span><i class="far fa-star"></i></span>
143 |                                 </div>
144 |                                 <div class="price py-2">
145 |                                   <span>$152</span>
146 |                                 </div>
147 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
148 |                               </div>
149 |                             </div>
150 |                           </div>
151 |                           <div class="item py-2">
152 |                             <div class="product font-rale">
153 |                               <a href="#"><img src="./assets/products/6.png" alt="product1" class="img-fluid"></a>
154 |                               <div class="text-center">
155 |                                 <h6>Samsung Galaxy 10</h6>
156 |                                 <div class="rating text-warning font-size-12">
157 |                                   <span><i class="fas fa-star"></i></span>
158 |                                   <span><i class="fas fa-star"></i></span>
159 |                                   <span><i class="fas fa-star"></i></span>
160 |                                   <span><i class="fas fa-star"></i></span>
161 |                                   <span><i class="far fa-star"></i></span>
162 |                                 </div>
163 |                                 <div class="price py-2">
164 |                                   <span>$152</span>
165 |                                 </div>
166 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
167 |                               </div>
168 |                             </div>
169 |                           </div>
170 |                           <div class="item py-2">
171 |                             <div class="product font-rale">
172 |                               <a href="#"><img src="./assets/products/1.png" alt="product1" class="img-fluid"></a>
173 |                               <div class="text-center">
174 |                                 <h6>Readme Note 7</h6>
175 |                                 <div class="rating text-warning font-size-12">
176 |                                   <span><i class="fas fa-star"></i></span>
177 |                                   <span><i class="fas fa-star"></i></span>
178 |                                   <span><i class="fas fa-star"></i></span>
179 |                                   <span><i class="fas fa-star"></i></span>
180 |                                   <span><i class="far fa-star"></i></span>
181 |                                 </div>
182 |                                 <div class="price py-2">
183 |                                   <span>$152</span>
184 |                                 </div>
185 |                                 <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
186 |                               </div>
187 |                             </div>
188 |                           </div>
189 |                           <div class="item py-2">
190 |                             <div class="product font-rale">
191 |                               <div class="d-flex flex-column">
192 |                                 <a href="#"><img src="./assets/products/1.png" class="img-fluid" alt="pro1"></a>
193 |                                 <div class="text-center">
194 |                                   <h6>Readme Note 7</h6>
195 |                                   <div class="rating text-warning font-size-12">
196 |                                     <span><i class="fas fa-star"></i></span>
197 |                                     <span><i class="fas fa-star"></i></span>
198 |                                     <span><i class="fas fa-star"></i></span>
199 |                                     <span><i class="fas fa-star"></i></span>
200 |                                     <span><i class="far fa-star"></i></span>
201 |                                   </div>
202 |                                   <div class="price py-2">
203 |                                     <span>$122</span>
204 |                                   </div>
205 |                                   <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
206 |                                 </div>
207 |                               </div>
208 |                             </div>
209 |                           </div>
210 |                           <div class="item py-2">
211 |                             <div class="product font-rale">
212 |                               <div class="d-flex flex-column">
213 |                                 <a href="#"><img src="./assets/products/2.png" class="img-fluid" alt="pro1"></a>
214 |                                 <div class="text-center">
215 |                                   <h6>Readme Note 7</h6>
216 |                                   <div class="rating text-warning font-size-12">
217 |                                     <span><i class="fas fa-star"></i></span>
218 |                                     <span><i class="fas fa-star"></i></span>
219 |                                     <span><i class="fas fa-star"></i></span>
220 |                                     <span><i class="fas fa-star"></i></span>
221 |                                     <span><i class="far fa-star"></i></span>
222 |                                   </div>
223 |                                   <div class="price py-2">
224 |                                     <span>$122</span>
225 |                                   </div>
226 |                                   <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
227 |                                 </div>
228 |                               </div>
229 |                             </div>
230 |                           </div>
231 |                         </div>
232 |                       <!-- !owl carousel -->
233 |                     </div>
234 |                   </section>
235 |                 <!-- !Top Sale -->
236 |                 
237 |         <!-- Special Price -->
238 |           <section id="special-price">
239 |             <div class="container">
240 |               <h4 class="font-rubik font-size-20">Special Price</h4>
241 |               <div id="filters" class="button-group text-right font-baloo font-size-16">
242 |                 <button class="btn is-checked" data-filter="*">All Brand</button>
243 |                 <button class="btn" data-filter=".Apple">Apple</button>
244 |                 <button class="btn" data-filter=".Samsung">Samsung</button>
245 |                 <button class="btn" data-filter=".Redmi">Redmi</button>
246 |               </div>
247 | 
248 |               <div class="grid">
249 |                 <div class="grid-item Apple border">
250 |                  <div class="item py-2" style="width: 200px;">
251 |                   <div class="product font-rale">
252 |                     <a href="#"><img src="../assets/products/13.png" alt="product1" class="img-fluid"></a>
253 |                     <div class="text-center">
254 |                       <h6>Apple iPhone 10</h6>
255 |                       <div class="rating text-warning font-size-12">
256 |                         <span><i class="fas fa-star"></i></span>
257 |                         <span><i class="fas fa-star"></i></span>
258 |                         <span><i class="fas fa-star"></i></span>
259 |                         <span><i class="fas fa-star"></i></span>
260 |                         <span><i class="far fa-star"></i></span>
261 |                       </div>
262 |                       <div class="price py-2">
263 |                         <span>$152</span>
264 |                       </div>
265 |                       <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
266 |                     </div>
267 |                   </div>
268 |                 </div>
269 |                 </div>
270 |                 <div class="grid-item Samsung border">
271 |                   <div class="item py-2" style="width: 200px;">
272 |                    <div class="product font-rale">
273 |                      <a href="#"><img src="../assets/products/11.png" alt="product1" class="img-fluid"></a>
274 |                      <div class="text-center">
275 |                        <h6>Samsung Galaxy 10</h6>
276 |                        <div class="rating text-warning font-size-12">
277 |                          <span><i class="fas fa-star"></i></span>
278 |                          <span><i class="fas fa-star"></i></span>
279 |                          <span><i class="fas fa-star"></i></span>
280 |                          <span><i class="fas fa-star"></i></span>
281 |                          <span><i class="far fa-star"></i></span>
282 |                        </div>
283 |                        <div class="price py-2">
284 |                          <span>$152</span>
285 |                        </div>
286 |                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
287 |                      </div>
288 |                    </div>
289 |                  </div>
290 |                  </div>
291 |                  <div class="grid-item Redmi border">
292 |                   <div class="item py-2" style="width: 200px;">
293 |                    <div class="product font-rale">
294 |                      <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a>
295 |                      <div class="text-center">
296 |                        <h6>Redmi Note 7 Pro</h6>
297 |                        <div class="rating text-warning font-size-12">
298 |                          <span><i class="fas fa-star"></i></span>
299 |                          <span><i class="fas fa-star"></i></span>
300 |                          <span><i class="fas fa-star"></i></span>
301 |                          <span><i class="fas fa-star"></i></span>
302 |                          <span><i class="far fa-star"></i></span>
303 |                        </div>
304 |                        <div class="price py-2">
305 |                          <span>$152</span>
306 |                        </div>
307 |                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
308 |                      </div>
309 |                    </div>
310 |                  </div>
311 |                  </div>
312 |                  <div class="grid-item Apple border">
313 |                   <div class="item py-2" style="width: 200px;">
314 |                    <div class="product font-rale">
315 |                      <a href="#"><img src="../assets/products/14.png" alt="product1" class="img-fluid"></a>
316 |                      <div class="text-center">
317 |                        <h6>Apple iPhone 10</h6>
318 |                        <div class="rating text-warning font-size-12">
319 |                          <span><i class="fas fa-star"></i></span>
320 |                          <span><i class="fas fa-star"></i></span>
321 |                          <span><i class="fas fa-star"></i></span>
322 |                          <span><i class="fas fa-star"></i></span>
323 |                          <span><i class="far fa-star"></i></span>
324 |                        </div>
325 |                        <div class="price py-2">
326 |                          <span>$152</span>
327 |                        </div>
328 |                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
329 |                      </div>
330 |                    </div>
331 |                  </div>
332 |                  </div>
333 |                  <div class="grid-item Samsung border">
334 |                   <div class="item py-2" style="width: 200px;">
335 |                    <div class="product font-rale">
336 |                      <a href="#"><img src="../assets/products/12.png" alt="product1" class="img-fluid"></a>
337 |                      <div class="text-center">
338 |                        <h6>Samsung Galaxy 10</h6>
339 |                        <div class="rating text-warning font-size-12">
340 |                          <span><i class="fas fa-star"></i></span>
341 |                          <span><i class="fas fa-star"></i></span>
342 |                          <span><i class="fas fa-star"></i></span>
343 |                          <span><i class="fas fa-star"></i></span>
344 |                          <span><i class="far fa-star"></i></span>
345 |                        </div>
346 |                        <div class="price py-2">
347 |                          <span>$152</span>
348 |                        </div>
349 |                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
350 |                      </div>
351 |                    </div>
352 |                  </div>
353 |                  </div>
354 |                  <div class="grid-item  Redmi border ">
355 |                   <div class="item py-2" style="width: 200px;">
356 |                     <div class="product font-rale">
357 |                       <div class="d-flex flex-column">
358 |                         <a href="#"><img src="../assets/products/4.png" class="img-fluid" alt="pro1"></a>
359 |                         <div class="text-center">
360 |                           <h6>Redmi Note 7 Pro</h6>
361 |                           <div class="rating text-warning font-size-12">
362 |                             <span><i class="fas fa-star"></i></span>
363 |                             <span><i class="fas fa-star"></i></span>
364 |                             <span><i class="fas fa-star"></i></span>
365 |                             <span><i class="fas fa-star"></i></span>
366 |                             <span><i class="far fa-star"></i></span>
367 |                           </div>
368 |                           <div class="price py-2">
369 |                             <span>$152</span>
370 |                           </div>
371 |                           <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
372 |                         </div>
373 |                       </div>
374 |                     </div>
375 |                   </div>
376 |                 </div>
377 |                 <div class="grid-item  Redmi border ">
378 |                   <div class="item py-2" style="width: 200px;">
379 |                     <div class="product font-rale">
380 |                       <div class="d-flex flex-column">
381 |                         <a href="#"><img src="../assets/products/5.png" class="img-fluid" alt="pro1"></a>
382 |                         <div class="text-center">
383 |                           <h6>Redmi Note 7 Pro</h6>
384 |                           <div class="rating text-warning font-size-12">
385 |                             <span><i class="fas fa-star"></i></span>
386 |                             <span><i class="fas fa-star"></i></span>
387 |                             <span><i class="fas fa-star"></i></span>
388 |                             <span><i class="fas fa-star"></i></span>
389 |                             <span><i class="far fa-star"></i></span>
390 |                           </div>
391 |                           <div class="price py-2">
392 |                             <span>$152</span>
393 |                           </div>
394 |                           <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
395 |                         </div>
396 |                       </div>
397 |                     </div>
398 |                   </div>
399 |                 </div>
400 |                 <div class="grid-item  Redmi border ">
401 |                   <div class="item py-2" style="width: 200px;">
402 |                     <div class="product font-rale">
403 |                       <div class="d-flex flex-column">
404 |                         <a href="#"><img src="../assets/products/6.png" class="img-fluid" alt="pro1"></a>
405 |                         <div class="text-center">
406 |                           <h6>Redmi Note 7 Pro</h6>
407 |                           <div class="rating text-warning font-size-12">
408 |                             <span><i class="fas fa-star"></i></span>
409 |                             <span><i class="fas fa-star"></i></span>
410 |                             <span><i class="fas fa-star"></i></span>
411 |                             <span><i class="fas fa-star"></i></span>
412 |                             <span><i class="far fa-star"></i></span>
413 |                           </div>
414 |                           <div class="price py-2">
415 |                             <span>$152</span>
416 |                           </div>
417 |                           <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
418 |                         </div>
419 |                       </div>
420 |                     </div>
421 |                   </div>
422 |                 </div>
423 |                 <div class="grid-item  Redmi border">
424 |                   <div class="item py-2" style="width: 200px;">
425 |                     <div class="product font-rale">
426 |                       <div class="d-flex flex-column">
427 |                         <a href="#"><img src="../assets/products/10.png" class="img-fluid" alt="pro1"></a>
428 |                         <div class="text-center">
429 |                           <h6>Redmi Note 7 Pro</h6>
430 |                           <div class="rating text-warning font-size-12">
431 |                             <span><i class="fas fa-star"></i></span>
432 |                             <span><i class="fas fa-star"></i></span>
433 |                             <span><i class="fas fa-star"></i></span>
434 |                             <span><i class="fas fa-star"></i></span>
435 |                             <span><i class="far fa-star"></i></span>
436 |                           </div>
437 |                           <div class="price py-2">
438 |                             <span>$152</span>
439 |                           </div>
440 |                           <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
441 |                         </div>
442 |                       </div>
443 |                     </div>
444 |                   </div>
445 |                 </div>
446 |                 <div class="grid-item Apple border  " >
447 |                   <div class="item py-2" style="width: 200px;">
448 |                     <div class="product font-rale">
449 |                       <div class="d-flex flex-column">
450 |                         <a href="#"><img src="../assets/products/13.png" class="img-fluid" alt="pro1"></a>
451 |                         <div class="text-center">
452 |                           <h6>Apple iPhone 10</h6>
453 |                           <div class="rating text-warning font-size-12">
454 |                             <span><i class="fas fa-star"></i></span>
455 |                             <span><i class="fas fa-star"></i></span>
456 |                             <span><i class="fas fa-star"></i></span>
457 |                             <span><i class="fas fa-star"></i></span>
458 |                             <span><i class="far fa-star"></i></span>
459 |                           </div>
460 |                           <div class="price py-2">
461 |                             <span>$252</span>
462 |                           </div>
463 |                           <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
464 |                         </div>
465 |                       </div>
466 |                     </div>
467 |                   </div>
468 |                 </div>
469 |               </div>
470 |             </div>
471 |           </section>
472 |         <!-- !Special Price -->
473 |            <!-- Banner Ads  -->
474 |            <section id="banner_adds">
475 |             <div class="container py-5 text-center">
476 |               <img src="../assets/banner1-cr-500x150.jpg" alt="banner1" class="img-fluid">
477 |               <img src="../assets/banner2-cr-500x150.jpg" alt="banner1" class="img-fluid">
478 |             </div>
479 |           </section>
480 |         <!-- !Banner Ads  -->
481 |          <!-- New Phones -->
482 |          <section id="new-phones">
483 |             <div class="container">
484 |               <h4 class="font-rubik font-size-20">New Phones</h4>
485 |               <hr>
486 | 
487 |                     <!-- owl carousel -->
488 |                     <div class="owl-carousel owl-theme">
489 |                       <div class="item py-2 bg-light">
490 |                         <div class="product font-rale">
491 |                           <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a>
492 |                           <div class="text-center">
493 |                             <h6>Samsung Galaxy 10</h6>
494 |                             <div class="rating text-warning font-size-12">
495 |                               <span><i class="fas fa-star"></i></span>
496 |                               <span><i class="fas fa-star"></i></span>
497 |                               <span><i class="fas fa-star"></i></span>
498 |                               <span><i class="fas fa-star"></i></span>
499 |                               <span><i class="far fa-star"></i></span>
500 |                             </div>
501 |                             <div class="price py-2">
502 |                               <span>$152</span>
503 |                             </div>
504 |                             <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
505 |                           </div>
506 |                         </div>
507 |                       </div>
508 |                       <div class="item py-2 bg-light">
509 |                         <div class="product font-rale">
510 |                           <a href="#"><img src="../assets/products/2.png" alt="product1" class="img-fluid"></a>
511 |                           <div class="text-center">
512 |                             <h6>Readme Note 7</h6>
513 |                             <div class="rating text-warning font-size-12">
514 |                               <span><i class="fas fa-star"></i></span>
515 |                               <span><i class="fas fa-star"></i></span>
516 |                               <span><i class="fas fa-star"></i></span>
517 |                               <span><i class="fas fa-star"></i></span>
518 |                               <span><i class="far fa-star"></i></span>
519 |                             </div>
520 |                             <div class="price py-2">
521 |                               <span>$152</span>
522 |                             </div>
523 |                             <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
524 |                           </div>
525 |                         </div>
526 |                       </div>
527 |                       <div class="item py-2 bg-light">
528 |                         <div class="product font-rale">
529 |                           <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a>
530 |                           <div class="text-center">
531 |                             <h6>Readme Note 7</h6>
532 |                             <div class="rating text-warning font-size-12">
533 |                               <span><i class="fas fa-star"></i></span>
534 |                               <span><i class="fas fa-star"></i></span>
535 |                               <span><i class="fas fa-star"></i></span>
536 |                               <span><i class="fas fa-star"></i></span>
537 |                               <span><i class="far fa-star"></i></span>
538 |                             </div>
539 |                             <div class="price py-2">
540 |                               <span>$152</span>
541 |                             </div>
542 |                             <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
543 |                           </div>
544 |                         </div>
545 |                       </div>
546 |                       <div class="item py-2 bg-light">
547 |                         <div class="product font-rale">
548 |                           <a href="#"><img src="../assets/products/6.png" alt="product1" class="img-fluid"></a>
549 |                           <div class="text-center">
550 |                             <h6>Samsung Galaxy 10</h6>
551 |                             <div class="rating text-warning font-size-12">
552 |                               <span><i class="fas fa-star"></i></span>
553 |                               <span><i class="fas fa-star"></i></span>
554 |                               <span><i class="fas fa-star"></i></span>
555 |                               <span><i class="fas fa-star"></i></span>
556 |                               <span><i class="far fa-star"></i></span>
557 |                             </div>
558 |                             <div class="price py-2">
559 |                               <span>$152</span>
560 |                             </div>
561 |                             <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
562 |                           </div>
563 |                         </div>
564 |                       </div>
565 |                       <div class="item py-2 bg-light">
566 |                         <div class="product font-rale">
567 |                           <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a>
568 |                           <div class="text-center">
569 |                             <h6>Readme Note 7</h6>
570 |                             <div class="rating text-warning font-size-12">
571 |                               <span><i class="fas fa-star"></i></span>
572 |                               <span><i class="fas fa-star"></i></span>
573 |                               <span><i class="fas fa-star"></i></span>
574 |                               <span><i class="fas fa-star"></i></span>
575 |                               <span><i class="far fa-star"></i></span>
576 |                             </div>
577 |                             <div class="price py-2">
578 |                               <span>$152</span>
579 |                             </div>
580 |                             <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
581 |                           </div>
582 |                         </div>
583 |                       </div>
584 |                       <div class="item py-2 bg-light">
585 |                         <div class="product font-rale">
586 |                           <div class="d-flex flex-column">
587 |                             <a href="#"><img src="../assets/products/1.png" class="img-fluid" alt="pro1"></a>
588 |                             <div class="text-center">
589 |                               <h6>Readme Note 7</h6>
590 |                               <div class="rating text-warning font-size-12">
591 |                                 <span><i class="fas fa-star"></i></span>
592 |                                 <span><i class="fas fa-star"></i></span>
593 |                                 <span><i class="fas fa-star"></i></span>
594 |                                 <span><i class="fas fa-star"></i></span>
595 |                                 <span><i class="far fa-star"></i></span>
596 |                               </div>
597 |                               <div class="price py-2">
598 |                                 <span>$122</span>
599 |                               </div>
600 |                               <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
601 |                             </div>
602 |                           </div>
603 |                         </div>
604 |                       </div>
605 |                       <div class="item py-2 bg-light">
606 |                         <div class="product font-rale">
607 |                           <div class="d-flex flex-column">
608 |                             <a href="#"><img src="../assets/products/2.png" class="img-fluid" alt="pro1"></a>
609 |                             <div class="text-center">
610 |                               <h6>Readme Note 7</h6>
611 |                               <div class="rating text-warning font-size-12">
612 |                                 <span><i class="fas fa-star"></i></span>
613 |                                 <span><i class="fas fa-star"></i></span>
614 |                                 <span><i class="fas fa-star"></i></span>
615 |                                 <span><i class="fas fa-star"></i></span>
616 |                                 <span><i class="far fa-star"></i></span>
617 |                               </div>
618 |                               <div class="price py-2">
619 |                                 <span>$122</span>
620 |                               </div>
621 |                               <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
622 |                             </div>
623 |                           </div>
624 |                         </div>
625 |                       </div>
626 |                     </div>
627 |                   <!-- !owl carousel -->
628 | 
629 |             </div>
630 |           </section>
631 |           <!-- !New Phones -->
632 | 
633 |                 <!-- Blogs -->
634 |                 <section id="blogs">
635 |                     <div class="container py-4">
636 |                       <h4 class="font-rubik font-size-20">Latest Blogs</h4>
637 |                       <hr>
638 |       
639 |                       <div class="owl-carousel owl-theme">
640 |                         <div class="item">
641 |                           <div class="card border-0 font-rale mr-5" style="width: 18rem;">
642 |                             <h5 class="card-title font-size-16">Upcoming Mobiles</h5>
643 |                             <img src="../assets/blog/blog1.jpg" alt="cart image" class="card-img-top">
644 |                             <p class="card-text font-size-14 text-black-50 py-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p>
645 |                             <a href="#" class="color-second text-left">Go somewhere</a>
646 |                           </div>
647 |                         </div>
648 |                         <div class="item">
649 |                           <div class="card border-0 font-rale mr-5" style="width: 18rem;">
650 |                             <h5 class="card-title font-size-16">Upcoming Mobiles</h5>
651 |                             <img src="../assets/blog/blog2.jpg" alt="cart image" class="card-img-top">
652 |                             <p class="card-text font-size-14 text-black-50 py-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p>
653 |                             <a href="#" class="color-second text-left">Go somewhere</a>
654 |                           </div>
655 |                         </div>
656 |                         <div class="item">
657 |                           <div class="card border-0 font-rale mr-5" style="width: 18rem;">
658 |                             <h5 class="card-title font-size-16">Upcoming Mobiles</h5>
659 |                             <img src="../assets/blog/blog3.jpg" alt="cart image" class="card-img-top">
660 |                             <p class="card-text font-size-14 text-black-50 py-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis non iste sequi cupiditate tempora iure. Velit accusamus saepe harum sed.</p>
661 |                             <a href="#" class="color-second text-left">Go somewhere</a>
662 |                           </div>
663 |                         </div>
664 |                       </div>
665 |                     </div>
666 |                   </section>
667 |                 <!-- !Blogs -->
668 | 
669 |     </main>
670 |     <!-- !start #main-site-->
671 |      <!-- start #footer -->
672 |      <footer id="footer" class="bg-dark text-white py-5">
673 |         <div class="container">
674 |           <div class="row">
675 |             <div class="col-lg-3 col-12">
676 |               <h4 class="font-rubik font-size-20">Mobile Shopee</h4>
677 |               <p class="font-size-14 font-rale text-white-50">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, deserunt.</p>
678 |             </div>
679 |             <div class="col-lg-4 col-12">
680 |               <h4 class="font-rubik font-size-20">Newslatter</h4>
681 |               <form class="form-row">
682 |                 <div class="col">
683 |                   <input type="text" class="form-control" placeholder="Email *">
684 |                 </div>
685 |                 <div class="col">
686 |                   <button type="submit" class="btn btn-primary mb-2">Subscribe</button>
687 |                 </div>
688 |               </form>
689 |             </div>
690 |             <div class="col-lg-2 col-12">
691 |               <h4 class="font-rubik font-size-20">Information</h4>
692 |               <div class="d-flex flex-column flex-wrap">
693 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">About Us</a>
694 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Delivery Information</a>
695 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Privacy Policy</a>
696 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Terms & Conditions</a>
697 |               </div>
698 |             </div>
699 |             <div class="col-lg-2 col-12">
700 |               <h4 class="font-rubik font-size-20">Account</h4>
701 |               <div class="d-flex flex-column flex-wrap">
702 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">My Account</a>
703 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Order History</a>
704 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Wish List</a>
705 |                 <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Newslatters</a>
706 |               </div>
707 |             </div>
708 |           </div>
709 |         </div>
710 |       </footer>
711 |       <div class="copyright text-center bg-dark text-white py-2">
712 |         <p class="font-rale font-size-14">&copy; Copyrights 2020. Desing By <a href="#" class="color-second">Daily Tuition</a></p>
713 |       </div>
714 |   <!-- !start #footer -->
715 |     
716 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
717 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
718 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
719 |     <!-- Owl Carousel Js file -->
720 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
721 |     <!-- Custom Javascript -->
722 |        <script src="./index.js"></script>
723 |     <!-- isotop plugin cdn-->
724 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha512-Zq2BOxyhvnRFXu0+WE6ojpZLOU2jdnqbrM1hmVdGzyeCa1DgM3X5Q4A/Is9xA1IkbUeDd7755dNNI/PzSf2Pew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
725 | </body>
726 | </html>


--------------------------------------------------------------------------------