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

                                    
3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Bootstrap4 datepicker

Bootstrap4 datepicker

Form login b4 01

Form login b4 01

Image hover 01

Image hover 01

Input range slider HTML style02

Input range slider HTML style02

Profile page with b4

Profile page with b4

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Timeline style08

Timeline style08

Triangle Background css 01

Triangle Background css 01

Vidéo background en html5 style01

Vidéo background en html5 style01

login page green one

login page green one