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;
  }