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

                                    
Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Card Bootstrap4 01

Card Bootstrap4 01

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Image hover Inspiration styles

Image hover Inspiration styles

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Simple Table With UIKIT

Simple Table With UIKIT

SwiperJS style01

SwiperJS style01

Timeline style04

Timeline style04

bootstrap4 tabs

bootstrap4 tabs

page scroll progress bar

page scroll progress bar