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

                                    
Cards box with title

Cards box with title

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Form login b4 01

Form login b4 01

Image hover Flip Flap Style

Image hover Flip Flap Style

Image hover effects style

Image hover effects style

Organization Chart

Organization Chart

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Texte Block Posts Style01

Texte Block Posts Style01

Titre section avec une bande style01

Titre section avec une bande style01

texte animate css

texte animate css

texte animate effects style 01

texte animate effects style 01

toggle switch style01

toggle switch style01