<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">Simple Ecommerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="category.html">Categories</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="product.html">Product <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search...">
<div class="input-group-append">
<button type="button" class="btn btn-secondary btn-number">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<a class="btn btn-success btn-sm ml-3" href="cart.html">
<i class="fa fa-shopping-cart"></i> Cart
<span class="badge badge-light">3</span>
</a>
</form>
</div>
</div>
</nav>
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">E-COMMERCE PRODUCT</h1>
<p class="lead text-muted mb-0">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500...</p>
</div>
</section>
<div class="container">
<div class="row">
<div class="col">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="category.html">Category</a></li>
<li class="breadcrumb-item active" aria-current="page">Product</li>
</ol>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- Image -->
<div class="col-12 col-lg-6">
<div class="card bg-light mb-3">
<div class="card-body">
<a href="" data-toggle="modal" data-target="#productModal">
<img class="img-fluid" src="https://dummyimage.com/800x800/55595c/fff" />
<p class="text-center">Zoom</p>
</a>
</div>
</div>
</div>
<!-- Add to cart -->
<div class="col-12 col-lg-6 add_to_cart_block">
<div class="card bg-light mb-3">
<div class="card-body">
<p class="price">99.00 $</p>
<p class="price_discounted">149.90 $</p>
<form method="get" action="cart.html">
<div class="form-group">
<label for="colors">Color</label>
<select class="custom-select" id="colors">
<option selected>Select</option>
<option value="1">Blue</option>
<option value="2">Red</option>
<option value="3">Green</option>
</select>
</div>
<div class="form-group">
<label>Quantity :</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus" data-field="">
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" class="form-control" id="quantity" name="quantity" min="1" max="100" value="1">
<div class="input-group-append">
<button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field="">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
<a href="cart.html" class="btn btn-success btn-lg btn-block text-uppercase">
<i class="fa fa-shopping-cart"></i> Add To Cart
</a>
</form>
<div class="product_rassurance">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-truck fa-2x"></i><br/>Fast delivery</li>
<li class="list-inline-item"><i class="fa fa-credit-card fa-2x"></i><br/>Secure payment</li>
<li class="list-inline-item"><i class="fa fa-phone fa-2x"></i><br/>+33 1 22 54 65 60</li>
</ul>
</div>
<div class="reviews_product p-3 mb-2 ">
3 reviews
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
(4/5)
<a class="pull-right" href="#reviews">View all reviews</a>
</div>
<div class="datasheet p-3 mb-2 bg-info text-white">
<a href="" class="text-white"><i class="fa fa-file-text"></i> Download DataSheet</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Description -->
<div class="col-12">
<div class="card border-light mb-3">
<div class="card-header bg-primary text-white text-uppercase"><i class="fa fa-align-justify"></i> Description</div>
<div class="card-body">
<p class="card-text">
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
</p>
<p class="card-text">
Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.
</p>
</div>
</div>
</div>
<!-- Reviews -->
<div class="col-12" id="reviews">
<div class="card border-light mb-3">
<div class="card-header bg-primary text-white text-uppercase"><i class="fa fa-comment"></i> Reviews</div>
<div class="card-body">
<div class="review">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<meta itemprop="datePublished" content="01-01-2016">January 01, 2018
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
by Paul Smith
<p class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</p>
<hr>
</div>
<div class="review">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<meta itemprop="datePublished" content="01-01-2016">January 01, 2018
<span class="fa fa-star" aria-hidden="true"></span>
<span class="fa fa-star" aria-hidden="true"></span>
<span class="fa fa-star" aria-hidden="true"></span>
<span class="fa fa-star" aria-hidden="true"></span>
<span class="fa fa-star" aria-hidden="true"></span>
by Paul Smith
<p class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</p>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-light">
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-4 col-xl-3">
<h5>About</h5>
<hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
<p class="mb-0">
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
</p>
</div>
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto">
<h5>Informations</h5>
<hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
<ul class="list-unstyled">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto">
<h5>Others links</h5>
<hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
<ul class="list-unstyled">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-3 col-xl-3">
<h5>Contact</h5>
<hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
<ul class="list-unstyled">
<li><i class="fa fa-home mr-2"></i> My company</li>
<li><i class="fa fa-envelope mr-2"></i> email@example.com</li>
<li><i class="fa fa-phone mr-2"></i> + 33 12 14 15 16</li>
<li><i class="fa fa-print mr-2"></i> + 33 12 14 15 16</li>
</ul>
</div>
<div class="col-12 copyright mt-3">
<p class="float-left">
<a href="#">Back to top</a>
</p>
<p class="text-right text-muted">created with <i class="fa fa-heart"></i> by <a href="https://t-php.fr/43-theme-ecommerce-bootstrap-4.html"><i>t-php</i></a> | <span>v. 1.0</span></p>
</div>
</div>
</div>
</footer>
<!-- Modal image -->
<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="productModalLabel">Product title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="img-fluid" src="https://dummyimage.com/1200x1200/55595c/fff" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
/*
** Style Simple Ecommerce Theme for Bootstrap 4
** Created by T-PHP https://t-php.fr/43-theme-ecommerce-bootstrap-4.html
*/
.bloc_left_price {
color: #c01508;
text-align: center;
font-weight: bold;
font-size: 150%;
}
.category_block li:hover {
background-color: #007bff;
}
.category_block li:hover a {
color: #ffffff;
}
.category_block li a {
color: #343a40;
}
.add_to_cart_block .price {
color: #c01508;
text-align: center;
font-weight: bold;
font-size: 200%;
margin-bottom: 0;
}
.add_to_cart_block .price_discounted {
color: #343a40;
text-align: center;
text-decoration: line-through;
font-size: 140%;
}
.product_rassurance {
padding: 10px;
margin-top: 15px;
background: #ffffff;
border: 1px solid #6c757d;
color: #6c757d;
}
.product_rassurance .list-inline {
margin-bottom: 0;
text-transform: uppercase;
text-align: center;
}
.product_rassurance .list-inline li:hover {
color: #343a40;
}
.reviews_product .fa-star {
color: gold;
}
.pagination {
margin-top: 20px;
}
footer {
background: #343a40;
padding: 40px;
}
footer a {
color: #f8f9fa!important
}
$(document).ready(function(){
var quantity = 1;
$('.quantity-right-plus').click(function(e){
e.preventDefault();
var quantity = parseInt($('#quantity').val());
$('#quantity').val(quantity + 1);
});
$('.quantity-left-minus').click(function(e){
e.preventDefault();
var quantity = parseInt($('#quantity').val());
if(quantity > 1){
$('#quantity').val(quantity - 1);
}
});
});
