Boxes alert messages using CSS

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>

Leave a Reply