Carousel 8 bloc with B4

<!DOCTYPE html>
<html>
<head>
    <title>CAROUSEL 8 BLOC WITH B4 | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="CAROUSEL 8 BLOC WITH B4">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body>
	
	<div class="container mt-5 mb-5">
	    <div class="row mx-auto text-center">
		   	<h2 class="col-lg-12">Simple Carousel Bootstrap 4</h2>
		</div>
		<div class="row">
				<div class="col-lg-12">
				  <div id="Carousel" class="carousel slide"  data-ride="carousel" data-interval="6000">
					
						<div class="mt-3 mb-3 text-right">
							<a data-slide="prev" href="#Carousel" class="left carousel-control btn btn-sm btn-info">
							<i class="fa fa-chevron-left"></i>
							</a>
							<a data-slide="next" href="#Carousel" class="right carousel-control btn btn-sm btn-info">
							<i class="fa fa-chevron-right"></i>
							</a>
						</div>
						<div class="carousel-inner"><!--.carousel-inner-->
						  <div class="carousel-item active">
							<div class="row ">
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							</div><!--.row-->
						  </div><!--.carousel-item-->
						  <div class="carousel-item">
							<div class="row ">
							  	<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							</div><!--.row-->
						  </div><!--.carousel-item-->
						  <div class="carousel-item">
							<div class="row ">
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							  <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mt-3">
								 <div class="card mb-3">
								    <div class="item">
									   <img class="card-img-top img-responsive img-zoom" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" title="" alt="Image" >
									</div>
									<div class="card-body">
									   <p class="card-details">
									      <span class="titre">Nom du jardin</span>
										  <span class="ville">Rabat</span><br>
										  <span class="cpacceuil">200 personnes au max</span><br>
										  <span class="prix">Dés 500 MAD / Jours</span><br>
										  <span nowrap>
										     <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>
											 <i>4,5</i>
										  </span>
									   </p>
									</div>
								 </div>
							  </div>
							</div><!--.row-->
						  </div><!--.carousel-item-->
						</div><!--.carousel-inner-->
						 


				  </div>
				</div>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
} 
.card-details {font-size: 14px;}
.card-details .ville{
  background-color: #FFFFFF !important;
  border-radius: 4px !important;
  border: solid 1px #222222 !important;
  color: #222222 !important;
  display: inline-block !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  font-size: 12px !important;
  line-height: 16px !important;
}
.card-details .cpacceuil{font-size: 12px;}
.card-details .prix{font-size: 12px;}
.card{
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.card hover{
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 47px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -0.5em, 0);
  transform: translate3d(0, -0.5em, 0);
}
.card-img-top{
  width: 100%;
  height: 200px;
}
  .img-zoom{
      -webkit-transition: 0.6s ease;
      transition: 0.6s ease;
      
  }
  .img-zoom:hover{
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
  }
  
  .item{
      left: 0;
      top: 0;
      position: relative;
      overflow: hidden;
  }

                                    
Animation 3d social icones avec css3

Animation 3d social icones avec css3

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Card Bootstrap4 02

Card Bootstrap4 02

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Create icon animate with svg

Create icon animate with svg

Image hover 01

Image hover 01

Nav Menu style02

Nav Menu style02

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Table bootstrap with Datatable

Table bootstrap with Datatable

Timeline style04

Timeline style04

input radio checkbox b4 style

input radio checkbox b4 style

toggle switch style03

toggle switch style03