alert-message

<div style="text-align: left;"><b><span style="font-family: inherit; font-size: large;">Alert Message</span></b></div><br />

<div class="alert-message success">success message : You successfully read this important message.<i class="fa fa-check-circle"></i></div><br />

<div class="alert-message alert">Alert message : This alert needs your attention.<i class="fa fa-info-circle"></i></div><br />

<div class="alert-message warning">Warning message : Warning! Best check yo self.<i class="fa fa-exclamation-triangle"></i></div><br />

<div class="alert-message error">Error message : Oh snap! Change a few things up.<i class="fa fa-exclamation-circle"></i></div><br />

.alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;border-radius:2px;color:#39484d;}
.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.alert-message span{font-size:14px!important}
.alert-message i{font-size:22px;text-align:left;display:inline-block;
position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.alert-message.success{background-color:#00acd6;color:#fff}
.alert-message.success a,.alert-message.success span{color:#fff}
.alert-message.alert{background-color:#0073b7;color:#fff}
.alert-message.alert a,.alert-message.alert span{color:#fff}
.alert-message.warning{background-color:#efa666;color:#fff}
.alert-message.warning a,.alert-message.warning span{color:#fff}
.alert-message.error{background-color:#f56c7e;color:#fff}
.alert-message.error a,.alert-message.error span{color:#fff}
.fa-check-circle:before{content:"\f058"}
.fa-info-circle:before{content:"\f05a"}
.fa-exclamation-triangle:before{content:"\f071"}
.fa-exclamation-circle:before{content:"\f06a"}

Alert Message

success message : You successfully read this important message.

Alert message : This alert needs your attention.

Warning message : Warning! Best check yo self.

Error message : Oh snap! Change a few things up.