Здравствуйте! сегодня делал сайт и возникла нужда в созданию отдельного блока с неким уведомлением пользователей.
Вот я и решил что данные блоки нужны не только мне, по этому сел и написал несколько вариантов таких блоков.
Сделал пять вариантов:
Первый вариант
Код
<div class="block_inf">
<p>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
Встреча с клиентом - после оформления заказа, специалист
компании встречается с заказчиком для того, чтобы узнать
какой именно веб-сайт хочет клиент (сайт-визитку, сайт-бизнес,
лендинг-пейдж), чем занимается компания (какие товары или
услуги предоставляет), какие цели и задачи ставит заказчик.
</p>
</div>
Второй вариант
Код
<div class="block_inf inf_1">
<p>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
Встреча с клиентом - после оформления заказа, специалист
компании встречается с заказчиком для того, чтобы узнать
какой именно веб-сайт хочет клиент (сайт-визитку, сайт-бизнес,
лендинг-пейдж), чем занимается компания (какие товары или
услуги предоставляет), какие цели и задачи ставит заказчик.
</p>
</div>
Третий вариант
Код
<div class="block_inf inf_2">
<p>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
Встреча с клиентом - после оформления заказа, специалист
компании встречается с заказчиком для того, чтобы узнать
какой именно веб-сайт хочет клиент (сайт-визитку, сайт-бизнес,
лендинг-пейдж), чем занимается компания (какие товары или
услуги предоставляет), какие цели и задачи ставит заказчик.
</p>
</div>
Четвёртый вариант
Код
<div class="block_inf inf_3">
<p>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
Встреча с клиентом - после оформления заказа, специалист
компании встречается с заказчиком для того, чтобы узнать
какой именно веб-сайт хочет клиент (сайт-визитку, сайт-бизнес,
лендинг-пейдж), чем занимается компания (какие товары или
услуги предоставляет), какие цели и задачи ставит заказчик.
</p>
</div>
Пятый вариант
Код
<div class="block_inf inf_4">
<p>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
Встреча с клиентом - после оформления заказа, специалист
компании встречается с заказчиком для того, чтобы узнать
какой именно веб-сайт хочет клиент (сайт-визитку, сайт-бизнес,
лендинг-пейдж), чем занимается компания (какие товары или
услуги предоставляет), какие цели и задачи ставит заказчик.
</p>
</div>
Теперь подключим стили для наших блоков
в самый конец вашей таблице стилей добавьте код
Код
.block_inf {
margin: 10px;
border: 1px solid #E4E4E4;
padding: 20px;
box-sizing:border-box;
background: #FFF;
color: #6F6F6F;
font-size: 13px;
border-left: 7px solid #6F6F6F;
}
.block_inf i {
font-size: 30px;
position: absolute;
left: 30px;
}
.block_inf p {
display: block;
padding-left: 40px;
}
.inf_1 {border-left: 7px solid #6EC88C;}
.inf_2 {border-left: 7px solid #C81F2B;}
.inf_3 {border-left: 7px solid #C83FAA;}
.inf_4 {border-left: 7px solid #527FC8;}
.inf_1 i {color: #6EC88C;}
.inf_2 i {color: #C81F2B;}
.inf_3 i {color: #C83FAA;}
.inf_4 i {color: #527FC8;}
Я использовал в коде разные классы для того чтобы вы могли использовать на одной страницы любое количество блоков одновременно
Теперь главное! подключим шрифтовые иконки
В таблицу стилей в самый верх
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
Цитата
Если вы уже подключали их то вам этого делать не нужно!
Так же если вам нужна другая иконка вы можете её легко поменять на ту что вам нужна, для замены иконки вам нужно выбрать одну из иконок на сайте fontawesome.ru затем скопировать код с их него сайта и в нужном блоке сменить эту строчку
Код
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
на код который вы скопировали с сайта.
Список иконок можно посмотреть тут
http://fontawesome.ru/all-icons/
waak 
web_master 
