Add this link in the header file of your html page

Copy

	<link rel="stylesheet" href="../styles/main.css">
	<script src="https://kit.fontawesome.com/5548c84970.js" crossorigin="anonymous"></script>

view raw alert.html delivered with ❤ by emgithub

Warning alert

Error alert

Info alert

Success alert

Copy

	<h2><u> Warning alert</u></h2>
	<div class="alert-warning-wrapper">
	<span class="warning-msg">
	<span class="fas fa-exclamation-circle"></span>
	<span class="msg">Warning: This is a warning alert!</span>
	</span>
	<span class="fas fa-times"></span>
	</div>
	<!-- error alert -->
	<h2><u> Error alert</u></h2>
	<div class="alert-error-wrapper">
	<span class="error-msg">
	<span class="fas fa-exclamation-circle"></span>
	<span class="msg">Warning: This is an error alert!</span>
	</span>
	<span class="fas fa-times"></span>
	</div>
	<!-- info alert -->
	<h2><u> Info alert</u></h2>
	<div class="alert-info-wrapper">
	<span class="info-msg">
	<span class="fas fa-exclamation-circle"></span>
	<span class="msg">Warning: This is an info alert!</span>
	</span>
	<span class="fas fa-times"></span>
	</div>
	<!-- success alert -->
	<h2><u> Success alert</u></h2>
	<div class="alert-success-wrapper">
	<span class="success-msg">
	<span class="fas fa-exclamation-circle"></span>
	<span class="msg">Success: This is a success alert!</span>
	</span>
	<span class="fas fa-times"></span>
	</div>

view raw alert.html delivered with ❤ by emgithub