-
Notifications
You must be signed in to change notification settings - Fork 0
/
product.html
1 lines (1 loc) · 12.6 KB
/
product.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> <a href="#">ملابس رجالي</a> </li> <li class="active">قميص تك فت بيز </li> </ol> </div> <div class="col-12 borders-between"> <div class="row"> <div class="col-lg-5 col-md-9 offset-md-2 offset-lg-1"> <div class="carousel slide" id="carousel-product-imgs" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="imgs/product_1.jpg"> </div> <div class="carousel-item"> <img src="imgs/product_2.jpg"> </div> </div> <div class="carousel-indicators m-0 custom-indicators"> <img src="imgs/product_1.jpg" data-target="#carousel-product-imgs" data-slide-to="0" class="active"> <img src="imgs/product_2.jpg" data-target="#carousel-product-imgs" data-slide-to="1"> </div> </div> </div> <div class="col-lg-5"> <form id="form-product-selection" class="borders-between"> <div class="row"> <div class="product-category block-100"> ملابس رجالي </div> <div class="clearfix w-100"> <div class="float-right"> <h2> قميص تك فت بيز </h2> </div> <div class="float-left price large"> 35$ </div> </div> </div> <div class="row"> <p class="product-descripton"> حقق اقصى اداء اثناء تمارينك الرياضية مع هذا القميص الذي يمنحك الراحة ويدعم عضلاتك </p> </div> <div class="row brand-and-rating"> <div class="col-6"> <div class="brand"> الماركة : <img src="imgs/adidas_small.png" alt=""> </div> </div> <div class="col-6"> <div class="clearfix"> <div class="rating float-left"> <i class="fas fa-star active"></i> <i class="fas fa-star active"></i> <i class="fas fa-star active"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <div class="row size-and-color"> <div class="col-md-6"> المقاسات المتاحة : <br> <div class="product-option"> <label>S <input type="radio" name="size" value="sm"> </label> </div> <div class="product-option active"> <label>M <input type="radio" name="size" value="m" checked="checked"> </label> </div> <div class="product-option"> <label>L <input type="radio" name="size" value="l"> </label> </div> <div class="product-option"> <label>XL <input type="radio" name="size" value="xl"> </label> </div> </div> <div class="col-md-6"> الألوان المتاحة : <br> <div class="product-option color-option" style="background-color:#ffaf32"> <label> <input type="radio" name="color" value="orange"> </label> </div> <div class="product-option color-option" style="background-color:#ff322c"> <label> <input type="radio" name="color" value="red"> </label> </div> <div class="product-option color-option" style="background-color:#ac38b6"> <label> <input type="radio" name="color" value="purple"> </label> </div> <div class="product-option color-option active" style="background-color:#00c1ce"> <label> <input type="radio" name="color" value="blue" checked="checked"> </label> </div> </div> </div> <div class="row product-quantity"> <div class="col2"> <div class="clearfix"> <div class="float-right lable"> العدد المطلوب : </div> <div class="float-left"> <select class="form-control custom-form"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <button type="submit" class="btn custom-btn2 btn-with-icon"> <span> اضافة لعربة الشراء <i class="fas fa-cart-plus"></i> </span> </button> </div> </div> </form> </div> </div> <div class="more-description"> <div class="col-12"> <h3 class="custom-heading heading-with-border-bottom heading-inline"> وصف المنتج </h3> <p> حقق اقصى اداء اثناء تمارينك الرياضية مع هذا القميص الذي يمنحك الراحة ويدعم عضلاتك </p> <ul> <li>درزات ناعمة لتخفيف الاحتكاك و التشققات</li> <li>مصنع من 88% بوليستر</li> <li>مستورد</li> </ul> </div> </div> <div class="row"> <div class="comments block-100"> <h3 class="custom-heading heading-inline heading-with-border-bottom"> التعليقات على المنتج </h3> <div class="borders-between"> <div class="row"> <div class="media"> <img src="imgs/reviewer_1.jpg"> <div class="media-body"> <h4 class="media-heading"> محمد هاني </h4> <div class="rating"> <span class="fas fa-star active"></span> <span class="fas fa-star active"></span> <span class="fas fa-star active"></span> <span class="fas fa-star active"></span> <span class="fas fa-star"></span> </div> <p> منتج جيد جدا أنصح بشرائه مصنوع من اقمشة عالية الجودة </p> </div> </div> </div> <div class="row"> <div class="media"> <img src="imgs/reviewer_2.jpg"> <div class="media-body"> <h4 class="media-heading"> متى محمود </h4> <div class="rating"> <span class="fas fa-star active"></span> <span class="fas fa-star active"></span> <span class="fas fa-star active"></span> <span class="fas fa-star active"></span> <span class="fas fa-star"></span> </div> <p> السعر مرتفع قليلا </p> </div> </div> </div> </div> </div> </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>