An alert dialog box is mostly used to give a warning message to the users. For example, if one input
field requires to enter some text but the user does not provide any input, then as a part of validation,
you can use an alert box to give a warning message.
Ex:- E-commerce Websites, Social Media Websites, Coding Platforms,etc.
<div class="alert-container normal-alert" id="normal-alrt">
<div class="alert success">
<span class="message"><i class="fa-solid fa-circle-check"></i>
Success</span>
</div>
<div class="alert failed">
<span class="message"><i class="fa-solid fa-circle-exclamation"></i>
Error</span>
</div>
<div class="alert warning">
<span class="message"><i class="fa-solid fa-triangle-exclamation"></i>
Warning</span>
</div>
<div class="alert info">
<span class="message"><i class="fa-solid fa-circle-info"></i>
Information</span>
</div>
</div>
<div class="alert-container cross-alert" id="close-alrt">
<div class="alert success">
<span class="message"><i class="fa-solid fa-circle-check"></i>
Success</span>
<span class="close"><i class="fa-solid fa-xmark"></i></span>
</div>
<div class="alert failed">
<span class="message"><i class="fa-solid fa-circle-exclamation"></i>
Error</span>
<span class="close"><i class="fa-solid fa-xmark"></i></span>
</div>
<div class="alert warning">
<span class="message"><i class="fa-solid fa-triangle-exclamation"></i>
Warning</span>
<span class="close"><i class="fa-solid fa-xmark"></i></span>
</div>
<div class="alert info">
<span class="message"><i class="fa-solid fa-circle-info"></i>
Information</span>
<span class="close"><i class="fa-solid fa-xmark"></i></span>
</div>
</div>
<div class="alert-container message-alert" id="msg-alrt">
<div class=" alert success">
<div>
<span class="message"><i class="fa-solid fa-circle-check"></i>
Success</span>
<div class="des">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<span class="close"><i class="fa-solid fa-xmark"></i></span>
</div>
<div class="alert failed">
<div>
<span class="message"><i class="fa-solid fa-circle-exclamation"></i>
Error</span>
<div class="des">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<span class="close"><i class="fa-solid fa-xmark"></i></span>
</div>
<div class="alert warning">
<div>
<span class="message"><i class="fa-solid fa-triangle-exclamation"></i>
Warning</span>
<div class="des">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<span class="close"><i class="fa-solid fa-xmark"></i></span>
</div>
<div class="alert info">
<div>
<span class="message"><i class="fa-solid fa-circle-info"></i>
Information</span>
<div class="des">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<span class="close"><i class="fa-solid fa-xmark"></i></span>
</div>
</div>