Carousel Bootstrap4

<!DOCTYPE html>
<html>
<head>
	<title>CAROUSEL BOOTSTRAP4 | 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 BOOTSTRAP4">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container mt-5">
		<form class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 col-12 mt-2 mb-2">
                <div id="menuCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://source.unsplash.com/random/" class="img-fluid" 
                            alt="name 1" title="name 1">
                            <div class="carousel-caption">
                                <h4 class="bold txt-shadow">
                                   <a href="#">
                                      <i class="fa fa-globe"></i> name 1
                                    </a>
                                </h4>
                                <p ></p>
                            </div>   
                        </div>
                        <div class="carousel-item">
                            <img src="https://source.unsplash.com/random/" class="img-fluid" 
                            alt="name 2" title="name 2">
                            <div class="carousel-caption">
                                <h4 class="bold txt-shadow">
                                   <a href="#">
                                      <i class="fa fa-globe"></i> name 2
                                    </a>
                                </h4>
                                <p ></p>
                            </div>   
                        </div>      
                        <div class="carousel-item">
                            <img src="https://source.unsplash.com/random/" class="img-fluid" 
                            alt="name 3" title="name 3">
                            <div class="carousel-caption">
                                <h4 class="bold txt-shadow">
                                   <a href="#">
                                      <i class="fa fa-globe"></i> name 3
                                    </a>
                                </h4>
                                <p ></p>
                            </div>   
                        </div>     
                        <div class="carousel-item">
                            <img src="https://source.unsplash.com/random/" class="img-fluid" 
                            alt="name 4" title="name 4">
                            <div class="carousel-caption">
                                <h4 class="bold txt-shadow">
                                   <a href="#">
                                      <i class="fa fa-globe"></i> name 4
                                    </a>
                                </h4>
                                <p ></p>
                            </div>   
                        </div>             
                    </div>
                    <a class="carousel-control-prev" href="#menuCarousel" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#menuCarousel" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
		</form>
	  </div>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
.txt-shadow{
    text-shadow: 1px 1px 1px #000;
}
.txt-shadow a{
    text-decoration: none;
    color: #fff;
}
#menuCarousel{
    border: 2px solid #000;
    width: 100%;
}
#menuCarousel img{
    width: 100%;
    height: 400px;
}
#menuCarousel p{
    opacity: 0;
}
#menuCarousel h4{
    position: absolute;
    bottom: 0px;
    background: rgba(0,0,0,0.5);
    padding: 5px;
    width: 100%;
    text-align: center;
    font-size: 1rem;
}
.carousel-caption{
    position: absolute;
    right: 4%;
    bottom: 0px;
    left: 4%;
    z-index: 100;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}

                                    
Arrows Defense Game

Arrows Defense Game

Background div gradient

Background div gradient

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Convertir une div en image

Convertir une div en image

Input file style02

Input file style02

Lightbox gallery style01

Lightbox gallery style01

Loading style water animation

Loading style water animation

Social Media Icons

Social Media Icons

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Titre section avec une bande style01

Titre section avec une bande style01

login page green one

login page green one

toggle switch style01

toggle switch style01