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

                                    
Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Arrows Defense Game

Arrows Defense Game

Image hover 02

Image hover 02

Image hover 04

Image hover 04

Lightbox gallery style01

Lightbox gallery style01

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Planète animée style01

Planète animée style01

Tablet style code texte

Tablet style code texte

Timeline style04

Timeline style04

Timeline style05

Timeline style05

Transitions Animations SVG Style01

Transitions Animations SVG Style01

toggle switch style02

toggle switch style02