<div class="alert success">
<span class="closebtn" onclick="this.parentElement.style.display='none';"><i class="fas fa-times"></i></span>
<i class="fas fa-check-circle"></i>
<strong>Success!</strong> <span class="alert-des">This is a success message.</span>
</div>
<div class="alert info">
<span class="closebtn" onclick="this.parentElement.style.display='none';"><i class="fas fa-times"></i></span>
<i class="fas fa-info-circle"></i>
<strong>Info!</strong> <span class="alert-des">This is an info message.</span>
</div>
<div class="alert warning">
<span class="closebtn" onclick="this.parentElement.style.display='none';"><i class="fas fa-times"></i></span>
<i class="fas fa-exclamation-triangle"></i>
<strong>Warning!</strong> <span class="alert-des">This is a warning message.</span>
</div>
<div class="alert danger">
<span class="closebtn" onclick="this.parentElement.style.display='none';"><i class="fas fa-times"></i></span>
<i class="fas fa-times-circle"></i>
<strong>Danger!</strong> <span class="alert-des">This is a danger message.</span>
</div>
/* Alert css start */
.alert {
padding: 20px;
color: #4f4f4f;
border-radius: 5px;
margin-bottom: 15px;
position: relative;
display: flex;
align-items: center;
}
.alert:hover {
background-color: white;
}
.alert strong {
padding-right: 10px;
}
.closebtn {
position: absolute;
top: 10px;
right: 0;
color: rgb(59, 59, 59);
font-size: 12px;
cursor: pointer;
}
.fa, .fas {
margin-right: 10px;
}
.success {
background-color: #def0d8;
}
.info {
background-color: #daecf8;
}
.warning {
background-color: #fbf9e4;
}
.danger {
background-color: #f3dfe0;
}
.fa-check-circle, .fas fa-check-circle {
color: #4CAF50;
}
.fa-info-circle, .fas fa-info-circle {
color: #2196F3;
}
.fa-exclamation-triangle, .fas fa-exclamation-triangle {
color: #ff9800;
}
.fa-times-circle, .fas fa-times-circle {
color: #f44336;
}
.closebtn:hover {
color: black;
}
@media only screen and (max-width: 600px) {
.alert {
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.fa, .fas {
margin-right: 10px;
margin-bottom: 10px;
}
}
/* Alert css end */
<script>
// Get all alert elements
var alerts = document.getElementsByClassName("alert");
// Show all alerts
for (var i = 0; i < alerts.length; i++) {
alerts[i].style.display = "flex";
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
We use cookies to improve your experience. By using our site, you agree to our cookie policy.