Hi,
Today we will learn how to add notification messages in several forms, which inevitably will need to inform your visitors of something new or change that will occur or other things, let me show you a preview of this messages :
Preview
So if you like it, just follow this steps :
Step 1 : Copy paste the code bellow before the </head> Tag
<style>
.widgets4free{position:relative;font-family:tahoma;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#39484d;text-align: center;}
.widgets4free p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.widgets4free span{font-size:14px!important}
.widgets4free i{font-size:22px;text-align:left;display:inline-block;position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.widgets4free.success{background-color:#00acd6;color:#fff}
.widgets4free.success a,.widgets4free.success span{color:#fff}
.widgets4free.alert{background-color:#0073b7;color:#fff}
.widgets4free.alert a,.widgets4free.alert span{color:#fff}
.widgets4free.warning{background-color:#efa666;color:#fff}
.widgets4free.warning a,.widgets4free.warning span{color:#fff}
.widgets4free.error{background-color:#f56c7e;color:#fff}
.widgets4free.error a,.widgets4free.error span{color:#fff}
.widgets4free.happy{background-color:#FA8734;color:#fff}
.widgets4free.happy a,.widgets4free.happy span{color:#fff}
.widgets4free.link a,.widgets4free.link span{color:#fff}
.widgets4free.link{background-color:#F44242;color:#fff}
.widgets4free.hi a,.widgets4free.hi span{color:#fff}
.widgets4free.hi{background-color:#57DF69;color:#fff}
.widgets4free:hover {background-image: linear-gradient(110deg, #766D6C 0%, #606364 50%, transparent 50%, transparent 100%);background-size: 200%;background-position: 150% 0;background-repeat: no-repeat;transition: background-position .9s ease, color .15s ease;color: #eee;}</style>
Step 2 : Copy paste your selected message code and change The Red with your Message Text
<div class="widgets4free success">
Your Message Here
</div>
<div class="widgets4free alert">
Your Message Here
</div>
<div class="widgets4free warning">
Your Message Here
</div>
<div class="widgets4free link">
Your Message Here
</div>
<div class="widgets4free error">
Your Message Here
</div>
<div class="widgets4free happy">
Your Message Here
</div>
<div class="widgets4free hi">
Your Message Here
</div>
That's all, if you have any question ==> Just leave a Comment on this post *_*
