Info Message Box
Warning Message Box
Success Message Box
Error Message Box
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Askiw Boxes</title>
<style>
#askiw-boxes .askiw-boxes {
text-align: center;
width: 300px;
height: auto;
border: 1px solid #000;
margin: 0 auto 15px;
padding: 20px;
font-size: 14;
font-weight: bold;
}
#askiw-boxes .info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
#askiw-boxes .warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
#askiw-boxes .success {
background-color: #B9FFAB;
border-color: #97CE8C;
color: #116400;
}
#askiw-boxes .error {
background-color: #EBB1B1;
border-color: #B54444;
color: #973939;
}
</style>
</head>
<body id="askiw-boxes">
<div class="info askiw-boxes">
Info Message Box
</div>
<div class="warning askiw-boxes">
Warning Message Box
</div>
<div class="success askiw-boxes">
Success Message Box
</div>
<div class="error askiw-boxes">
Error Message Box
</div>
</body>
</html>