-
Notifications
You must be signed in to change notification settings - Fork 0
/
card.html
1 lines (1 loc) · 10.3 KB
/
card.html
1
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script type="text/html" src="{require('index.js')}"></script> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>متجر عربي | عربة المشتريات</title> <link href="css/style.css" rel="stylesheet"></head> <body> <div class="container-fluid"> <div class="row"> <nav class="navbar custom-navbar navbar-expand-lg"> <div class="container-fluid"> <div class="top"> <button class="navbar-toggler float-left btn-icon" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars fa-lg"></i> </button> <a href="card.html" class="btn btn-icon float-left d-lg-none" id="btn-shoppingcart" title="عربة الشراء" data-toggle="tooltip" data-placement="bottom"> <i class="fas fa-shopping-cart fa-1x"></i> </a> <a href="." class="navbar-brand"> <img src="imgs/logo.png" alt="متجر عربي"> </a> </div> <form class="form-inline"> <input type="search" class="form-control search-bar" placeholder="ابحث ...."> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle search-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> اختر فئة </button> <div class="dropdown-menu dropdown-menu-right custom-dropdown" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">رجالي</a> <a class="dropdown-item" href="#">نسائي</a> <a class="dropdown-item" href="#">اطفال</a> </div> </div> <button type="submit" class="btn submit-search-btn"> بحث </button> </form> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a href="." class="nav-link">الصفحة الرئيسية</a> </li> <li class="nav-item dropdown"> <a href="" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">اقسام المتجر</a> <ul class="dropdown-menu dropdown-menu-right"> <li> <a href="" class="dropdown-item">رجالي</a> </li> <li> <a href="" class="dropdown-item">نسائي</a> </li> <li> <a href="" class="dropdown-item">اطفال</a> </li> </ul> </li> <li class="nav-item"> <a href="search.html" class="nav-link">البحث المتقدم</a> </li> <li class="nav-item"> <a href="contact.html" class="nav-link">تواصل معنا</a> </li> <li class="d-none d-lg-block"> <a href="card.html" class="btn btn-icon" id="btn-shoppingcart" title="عربة الشراء" data-toggle="tooltip" data-placement="bottom"> <i class="fas fa-shopping-cart"></i> </a> </li> </ul> </div> </div> </nav> </div> <div class="container"> <div class="row"> <ol class="breadcrumb custom-breadcrumb"> <li> <a href=".">الصفحة الرئيسية</a> </li> <li class="active">عربة المشتريات</li> </ol> </div> <div class="container borders-between"> <div class="row d-block"> <h1 class="text-reset text-right custom-heading">عربة المشتريات</h1> <form id="form-checkout" action="payment.html"> <table class="custom-table w-100"> <thead> <tr> <th>المنتج</th> <th>السعر</th> <th>العدد المطلوب</th> <th class="hide-on-small">السعر الإجمالي</th> <th></th> </tr> </thead> <tbody> <tr data-product-info data-product-price="400"> <td> <div class="media custom-media"> <img src="imgs/lacoste_1.jpg" alt="تي شيرت رجالي من لاكوست" class="d-none d-md-block"> <div class="media-body"> <h4>تي شيرت رجالي من لاكوست</h4> <div class="text-muted"> ملابس رجالي </div> </div> </div> </td> <td> 400$ </td> <td> <input name="product1" type="hidden" value="تي شيرت رجالي من لاكوست"> <select name="quantity1" class="form-control custom-form-control quantity" data-product-quantity> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="selected">3</option> </select> </td> <td class="total-price-for-product hide-on-small"> 1200$ </td> <td> <button class="btn btn-danger custom-btn custom-btn-danger" data-remove-from-cart> <span class="d-none d-md-block">حذف</span> <i class="far fa-trash-alt d-block d-md-none"></i> </button> </td> </tr> <tr data-product-info data-product-price="300"> <td> <div class="media custom-media"> <img src="imgs/tshirt.jpg" alt="تي شيرت أديداس" class="d-none d-md-block"> <div class="media-body"> <h4>تي شيرت أديداس</h4> <div class="text-muted"> ملابس رجالي </div> </div> </div> </td> <td>300$</td> <td> <input name="product2" type="hidden" value="تي شيرت أديداس"> <select name="quantity2" class="form-control custom-form-control quantity" data-product-quantity> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> <td class="total-price-for-product hide-on-small"> 300$ </td> <td> <button class="btn btn-danger custom-btn-danger custom-btn" data-remove-from-cart> <span class="d-none d-md-block">حذف</span> <i class="far fa-trash-alt d-block d-md-none"></i> </button> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5" class="total-price"> <span class="text-muted"> <span class="text-muted"> السعر الإجمالي للمنتجات: </span> <span id="total-price-for-all-products">1500</span> دولار </span> </td> </tr> </tfoot> </table> <button type="submit" class="btn custom-btn2 custom-btn-with-icon"> <span> إكمال عمليّة الشّراء <i class="fas fa-dollar-sign fa-lg"></i> </span> </button> </form> </div> <div class="row suggestions"> <h3 class="custom-heading col-12"> اقترحنا لك </h3> <div class="row carousel-most-sold"> <div class="col-md-4 col-lg-3"> <div class="card custom-card"> <div class="overlay"> <button class="custom-product btn btn-secondary add-card-btn"> اضافة للعربة <i class="fas fa-cart-plus"></i> </button> </div> <img src="imgs/most_sold_2.jpg" alt=""> <div class="card-body"> <div class="clearfix"> <h4 class="float-right">فلورا تي شيرت</h4> <div class="float-left price">200$</div> </div> <div class="rating"> <i class="fa fa-star active"></i> <i class="fa fa-star active"></i> <i class="fa fa-star active"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="clearfix"> <button class="btn custom-product add-card-btn btn-secondary d-block d-lg-none float-left"> اضافة للعربة <i class="fas fa-cart-plus"></i> </button> </div> </div> </div> </div> <div class="col-md-4 col-lg-3"> <div class="card custom-card"> <div class="overlay"> <button class="custom-product btn btn-secondary add-card-btn"> اضافة للعربة <i class="fas fa-cart-plus"></i> </button> </div> <img src="imgs/most_sold_1.jpg" alt=""> <div class="card-body"> <div class="clearfix"> <h4>شير بلوزه من نافي</h4> <div class="price">200$</div> </div> <div class="rating"> <i class="fa fa-star active"></i> <i class="fa fa-star active"></i> <i class="fa fa-star active"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="clearfix"> <button class="btn custom-product add-card-btn btn-secondary d-block d-lg-none float-left"> اضافة للعربة <i class="fas fa-cart-plus"></i> </button> </div> </div> </div> </div> <div class="col-md-4 col-lg-3"> <div class="card custom-card"> <div class="overlay"> <button class="custom-product btn btn-secondary add-card-btn"> اضافة للعربة <i class="fas fa-cart-plus"></i> </button> </div> <img src="imgs/most_sold_3.jpg" alt=""> <div class="card-body"> <div class="clearfix"> <h4>جاكيت ولادي</h4> <div class="price">200$</div> </div> <div class="rating"> <i class="fa fa-star active"></i> <i class="fa fa-star active"></i> <i class="fa fa-star active"></i> <i class="fa fa-star active"></i> <i class="fa fa-star"></i> </div> <div class="clearfix"> <button class="btn custom-product add-card-btn btn-secondary d-block d-lg-none float-left"> اضافة للعربة <i class="fas fa-cart-plus"></i> </button> </div> </div> </div> </div> <div class="col-md-4 col-lg-3 d-none d-lg-block"> <div class="card custom-card"> <div class="overlay"> <button class="custom-product btn btn-secondary add-card-btn"> اضافة للعربة <i class="fas fa-cart-plus"></i> </button> </div> <img src="imgs/hm_3.jpg" alt=""> <div class="card-body"> <div class="clearfix"> <h4>جاكيت ولادي</h4> <div class="price">200$</div> </div> <div class="rating"> <i class="fa fa-star active"></i> <i class="fa fa-star active"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="clearfix"> <button class="btn custom-product add-card-btn btn-secondary d-block d-lg-none float-left"> اضافة للعربة <i class="fas fa-cart-plus"></i> </button> </div> </div> </div> </div> </div> </div> </div> </div> <div id="footer" class="row"> <div id="brand-logo" class="col-12 text-center"> <span>المتجر وكيل معتمد لكبرى الشركات العالمية</span> <div class="img-container"> <img src="imgs/lacoste.png" alt=""> <img src="imgs/adidas.png" alt=""> <img src="imgs/puma.png" alt=""> <img src="imgs/polo.png" alt=""> </div> </div> <div id="footer-nav" class="col-12 text-center"> <div class="footer-logo"> <a href="./"> <img src="imgs/logo_footer.png" alt=""> </a> </div> <div id="footer-nav-links" class="col-12 d-none d-md-block"> <a href=".">الرئيسية</a> <a href="search.html">البحث المتقدم</a> <a href="contact.html">تواصل معنا</a> </div> <div class="newsletter col-md-6 offset-md-3"> <form> <label for="footer-email"> تابع النشرة البريدية لأحدث العروض </label> <br> <div class="input-group"> <input type="email" class="form-control custom-form" placeholder="البريد الاكتروني" name="email" required> <button type="submit" class="btn search-btn custom-btn2">متابعة</button> </div> </form> </div> </div> <div class="footer-copyright-social col-12 d-block text-center"> <div class="container"> <div class="clearfix"> <div class="copyright float-lg-right"> </div> <div class="social-icons float-lg-left"> <a href="#"> <i class="fab fa-facebook-square fa-lg"></i> </a> <a href="#"> <i class="fab fa-twitter-square fa-lg"></i> </a> <a href="#"> <i class="fab fa-instagram-square fa-lg"></i> </a> </div> </div> </div> </div> </div> </div> <script src="main.js"></script></body> </html>