Css Mesaj Kutucukları

<div class="success">
    <span>Mesajınız başarılı bir şekilde gönderildi.</span>
</div>
 
<div class="warning">
    <span>Veri kaybı yaşamamak için başvurunuzu belirli aralıklarla kaydetmeyi unutmayın.</span>
</div>
 
<div class="info">
    <span>Başvurular ekte sunulan formlar doldurularak yapılmalıdır. Forma uygun olarak yapılmayan veya eksik doldurulan başvurular kabul edilmeyecektir.</span>
</div>
 
<div class="error">
    <span>Hatalı bir işlem yaptınız. Geriye dönüp kontrol ediniz.</span>
</div>

.warning, .error, .info, .success {
    padding: 20px 20px 20px 40px;
    margin-bottom: 15px;
    border-style: solid;
    border-width: 1px;
    background-position: 10px 10px;
    background-repeat: no-repeat;
}
 
.warning {
    background-color: #f8fad5;
    background-image: url(images/warning.png);
    border-color: #e5d35b;
}
 
.error {
    background-color: #f5dfdf;
    background-image: url(images/error.png);
    border-color: #ce9e9e;
}
 
.info {
    background-color: #dfeff5;
    background-image: url(images/info.png);
    border-color: #9ebcce;
}
 
.success {
    background-color: #e8f5df;
    background-image: url(images/success.png);
    border-color: #9ece9e;
}