Заметки

CSS

		
			
<style>
div {
margin-bottom: 15px;
padding: 4px 12px;
}

.danger {
background-color: #ffdddd;
border-left: 6px solid #f44336;
}

.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}

.info {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
}


.warning {
background-color: #ffffcc;
border-left: 6px solid #ffeb3b;
}
</style>

HTML

		
<h2>Заметки</h2>
<div class="danger">
<p><strong>Опасность!</strong> Some text...</p>
</div>

<div class="success">
<p><strong> Отлично! </strong> Some text...</p>
</div>

<div class="info">
<p><strong>Информация!</strong> Some text...</p>
</div>

<div class="warning">
<p><strong> Предупреждение! </strong> Some text...</p>
</div>