CSS Grid. Верстка реального сайта

Сегодня мы на реальном примере рассмотрим верстку крутого адаптивного сайта, используя технологию CSS Grid. В данном уроке мы не будем использовать никаких фреймворков для адаптивной верстки и в полной мере насладимся чистым CSS и возможностями CSS Grid.

Смотреть урок на YouTube

Результат HTML верстки: Смотреть

Полезные материалы и референсы:

Рефересны, исходники: Скачать
Урок «Gulp для самых маленьких»
Урок «CSS Grid: Новый взгляд на адаптивную верстку сайтов»
Стартер для верстки данного примера (рекомендую использовать gulp-4): На GitHub

Код кнопки из урока (button.sass):

.button
  display: inline-block
  border: none
  color: #fff
  text-decoration: none
  background-color: $accent
  padding: 15px 45px
  font-size: 13px
  text-transform: uppercase
  font-weight: 600
  letter-spacing: 3px
  border-radius: 2px
  text-align: center
  position: relative
  outline: none
  transition: background-color .1s ease
  cursor: pointer
  &::after
    transition: background-color .2s ease
    position: absolute
    content: ''
    height: 4px
    bottom: 0
    width: 100%
    background-color: darken($accent, 50%)
    opacity: .18
    border-bottom-left-radius: 2px
    border-bottom-right-radius: 2px
    left: 0
  &:focus, &:hover
    text-decoration: none
    color: #fff
  &:hover
    background-color: lighten($accent, 5%)
    &::after
      opacity: .22
  &:active
    background-color: darken($accent, 5%)
    &::after
      opacity: .32

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих

Я - фрилансер! Базовый курс для начинающих

CSS Grid. Верстка реального сайта

Полезные материалы и референсы:

Код кнопки из урока (button.sass):

Премиум уроки от WebDesign Master

Другие уроки по теме «Веб-разработка»