Alert Bootstrap4 style02

<!DOCTYPE html>
<html>
<head>
	<title>ALERT BOOTSTRAP4 STYLE02 | 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="ALERT BOOTSTRAP4 STYLE02">
	<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 href="style.css" rel="stylesheet">
</head>
<body>
	<div class="notif-msg">
		<div class="alert alert-success alert-dismissible">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong><i class="fa fa-check"></i> Aththentification avec succéss.</strong>
		</div>
		<div class="alert alert-danger alert-dismissible">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong><i class="fa fa-warning"></i> Le nom de l'utilisateur ou le mot de passe est incorrect.</strong>
		</div>
		<div class="alert alert-warning alert-dismissible">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<strong><i class="fa fa-signal"></i> Vérifiez votre connexion.</strong>
		</div>
	</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>
.notif-msg{
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 999;
    width: 40%;
}
.alert{
    border-radius: 0px;
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #fafafa;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.alert-danger{border-left: 6px solid #DC143C;color: #DC143C;}
.alert-warning{border-left: 6px solid #F4821F;color: #F4821F;}
.alert-success{border-left: 6px solid #33b35a;color: #33b35a;}

                                    
Vidéo background en html5 style02

Vidéo background en html5 style02

Vidéo background en html5 style01

Vidéo background en html5 style01

Triangle Background css 01

Triangle Background css 01

Table Responsive with css 01

Table Responsive with css 01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Input range slider HTML style03

Input range slider HTML style03

Image hover style border top

Image hover style border top

Image hover 04

Image hover 04

Drag and drop or upload input file

Drag and drop or upload input file

Card Bootstrap4 01

Card Bootstrap4 01

Blog post card 01

Blog post card 01

Alert Bootstrap4 style01

Alert Bootstrap4 style01