Верстка нестандартного блока услуг. Часть 1

Верстка нестандартного блока услуг

От автора: на красивых, качественных лендингах используются блоки с интересными эффектами и нестандартным расположением элементов. В этом уроке мы приступим к верстке подобных блоков. В создаваемом блоке будут присутствовать наклонные линии, красивый эффект по наведению, раскрытие описания по клику и прочее. В уроке блок будет называться «Наши услуги», но в своих проектах вы сможете использовать данный блок для чего угодно: для описания, для характеристик, для преимуществ и т.д. В данном уроке мы с вами создадим разметку и назначим необходимые стили для блока.

По результатам урока мы сверстаем блок услуг без использования эффектов, где в качестве картинок будем использовать иконки, все остальные элементы будут реализовываться при помощи возможностей CSS.

скачать исходники

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Nadya

    А модальное окно получается общее для всех услуг?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree