Верстка промо-страницы для сайта re:Store

Одна из прежних работ - верстка промо-страницы для сайта компании re:Store.

Страница посвящена работам творческих людей, которые периодически читают лекции в рамках проекта Академия re:Store.

Мое участие:

• верстка страницы;
• сопровождающие JS-скрипты (управление параллаксом и слайдерами картинок).

Адрес страницы: http://www.re-store.ru/promo/start-something-new/

Внешний вид:

CSS transiton «наоборот»

При верстке иногда надо сделать CSS-переход (transition) при отведении мышки не таким, как при наведении. То есть, при наведении мышки - один эффект, при отведении мышки другой эффект (не такой, как при наведении).

Это возможно, и для этого в псевдоклассе :hover надо прописать еще один transition. Тот, что прописан в :hover, будет иметь более высокий приоритет, и перекроет transition, прописанный в самом классе. В итоге:

• при наведении мышки будет использован transition, записанный в псевдоклассе :hover
• при отведении мышки будет использован transition, записанный в основном классе

Пример (при наведении - смена цвета, при отведении - переворот):

See the Pen VemvqR by borshak (@borshak) on CodePen.

Данный прием подсмотрел на сайте CSS-Tricks.

Верстка промо-страницы для сайта re:Store

Очередная работа - верстка промо-страницы для сайта компании re:Store.

Страница посвящена совместной акции с Амедиатекой.

Мое участие:

• верстка страницы;
• анимация.

Адрес страницы: http://www.re-store.ru/promo/amediateka/

Внешний вид:

Верстка страницы для сайта сети магазинов LEGO

Очередная работа - верстка промо-страницы для сайта сети магазинов LEGO.

Мое участие:

• верстка страницы;
• сопровождающие JS-скрипты (подключение и адаптация плагина для имитации снега).

Кстати, снег создан с помощью плагина SnowFall - он написан на нативном JavaScript, использует для анимации CSS3, легко модифицируется, и имеет гибкие настройки.
Демо-страница плагина | плагин на GitHub.

Но вернемся к нашей странице.

Адрес страницы: http://mir-kubikov.ru/gifts/

Внешний вид:

Верстка праздничной промо-страницы для сайта re:Store

Очередная работа - верстка промо-страницы для сайта компании re:Store.

Страница посвящена скидкам на зимние праздники.

Мое участие:

• верстка страницы.

Адрес страницы: http://www.re-store.ru/promo/ny-2016/

Внешний вид:

Верстка промо-страницы для сайта UNOde50

Очередная работа - верстка промо-страницы для сайта сети бутиков UNOde50.

Мое участие:

• верстка страницы;
• сопроводительные JS-скрипты (управление слайдерами картинок, анимация шапки, проверка формы обратной связи).

Адрес страницы: http://unode50.ru/b2b/

Внешний вид:

И все таки Sublime...

Раньше я писал, что редактор Atom удобнее, чем Notepad++.

И это, разумеется, так.

Но я все же полностью перешел на Sublime Text.

Причина - в скорости запуска и скорости работы самого редактора.

Верстка промо-страницы к 10-летию компании re:Store

Буду постепенно выкладывать свои работы - их много, но начинать с чего-то стоит.

Первой будет недавняя - верстка промо-страницы к 10-летию компании re:Store.

Мое участие:

• верстка (по готовому макету от дизайнера);
• адаптивность в пределах предоставленного макета ("резиновая верстка"), автомасштабирование фотографий в зависимости от разрешения экрана;
• анимация;
• вспомогательные JS-скрипты (для работы слайдера истории, для проверки формы обратной связи).

Адрес страницы: http://www.re-store.ru/promo/10Y/

Внешний вид: