frontend-coder
9/5/2017 - 12:12 PM

Базовая разметки для верстки 5 тумб преимуществ и приоритетов в 1 ряд, простых тумб команд и так далее. Очень часто используется в верстке п

Базовая разметки для верстки 5 тумб преимуществ и приоритетов в 1 ряд, простых тумб команд и так далее. Очень часто используется в верстке простых landing pages

Curbstones for benefits: 5 in line
content_copyfile_download
HTML

<!-- 5 тумб преимуществ в ряд -->

<div class="block" id="advantage">
	<div class="container">
		<div class="row">

			<ul class="tambl_row-five clearfix">

				<li class="tambl_item-five">
				<div class="icon icon-color"></div>
						<div class="tambl_item_cont-two">
						<div class="tambl-title">продающий дизайн</div>
						<div class="title-text">	Создаем только индивидуальный дизайн </div>
					</div>
				</li>

				<li class="tambl_item-five">
	<div class="icon icon-icon-work"></div>

					<div class=" tambl_item_cont-two">
						<div class="tambl-title">методики работы </div>
						<div class="title-text">	Используем самые передовые технологии  </div>
					</div>
				</li>

				<li class="tambl_item-five">
					<div class="icon icon-clock"></div>
					<div class=" tambl_item_cont-two">
						<div class="tambl-title">пунктуальность </div>
						<div class="title-text">	Ваш проекта будет выполнен в срок </div>
					</div>
				</li>

				<li class="tambl_item-five">
				<div class="icon icon-smile"></div>

					<div class=" tambl_item_cont-two">
						<div class="tambl-title">репутация</div>
						<div class="title-text">	50% заказов мы получаем по рекомендации  </div>
					</div>
				</li>

				<li class="tambl_item-five">
					<div class="icon icon-tools"></div>
					<div class=" tambl_item_cont-two">
						<div class="tambl-title">поддержка </div>
						<div class="title-text">	Отвечаем на вопросы, обучаем бесплатно в течение недели </div>
					</div>
				</li>

				<li class="tambl_item-five">
						<div class="icon icon-exp"></div>
						<div class=" tambl_item_cont-two">
						<div class="tambl-title">опыт работы</div>
						<div class="title-text">	 Создано более 100 проектов в разных областях бизнеса. </div>
					</div>
				</li>

				<li class="tambl_item-five">
					<div class="icon icon-diamont"></div>
					<div class="tambl_item_cont-two">
						<div class="tambl-title">окупаемость</div>
						<div class="title-text">	Наши лендинги окупаются в течение 30 дней
						</div>
					</div>
				</li>

				<li class="tambl_item-five">
					<div class="icon icon-icon-command "></div>
					<div class=" tambl_item_cont-two">
						<div class="tambl-title">команда</div>
						<div class="title-text">	Лучшие специалисты будут работать над вашим проектом</div>
					</div>
				</li>
			</ul>

		</div>
	</div>
</div>

CSS / SCSS

/*  5 тумб преимуществ в ряд */
ul.tambl_row-five {
  margin: 0;
  margin-bottom: -1%;
  margin-left: -1%;
  padding: 0;
  list-style-type: none;
   }

.tambl_item-five {
  float: left;
  width: 19%;
  margin-bottom: 1%;
  margin-left: 1%;
  padding: 10px 5px;
  text-align: center; }

.tambl-title {
  text-transform: uppercase;
  color: #F89430;
  font-size: 1.125rem;
  margin: 20px 0 10px 0; }

.title-text {
  font-size: 1rem; }

.icon {
  background: url(../images/sprite.png) no-repeat;
  display: inline-block; }

.icon-clock {
  background-position: 0px -340px;
  width: 55px;
  height: 55px; }

.icon-color {
  background-position: 0px -515px;
  width: 55px;
  height: 55px; }

.icon-diamont {
  background-position: 0px -690px;
  width: 55px;
  height: 55px; }

.icon-exp {
  background-position: 0px -865px;
  width: 55px;
  height: 55px; }

.icon-ico-left {
  background-position: 0px 0px;
  width: 50px;
  height: 50px; }

.icon-ico-right {
  background-position: 0px -170px;
  width: 50px;
  height: 50px; }

.icon-icon-command {
  background-position: 0px -1040px;
  width: 55px;
  height: 55px; }

.icon-icon-work {
  background-position: 0px -1215px;
  width: 55px;
  height: 55px; }

.icon-smile {
  background-position: 0px -1390px;
  width: 55px;
  height: 55px; }

.icon-tools {
  background-position: 0px -1565px;
  width: 55px;
  height: 55px; }