Адаптивный шаблон сайта кулинарной тематики CookPage

Адаптивный шаблон сайта CookPage

Шаблон CookPage построен с применением фреймворка Bootstrap, что обеспечивает его полную адаптивность к просмотру на любом мобильном устройстве с любым разрешением экрана.
В дизайне применены анимационные эффекты с плавными переходами и поочередного появления картинок и блоков по мере прокрутки окна браузера.
В шаблоне имеется галерея фотографий с фильтром просмотра по темам. При клике по уменьшенному изображению открывается слайдер с увеличенными картинками.

Кулинарная тема шаблона используется лишь как пример заполнения сайта контентом. Данный шаблон может удачно использоваться для сайта любой тематической направленности.

Скриншоты шаблона

Особенности шаблона CookPage

- Все комментарии в основных файлах, подлежащих редактированию, написаны на русском языке.
- Контент сайта наполнен содержимым на русском языке. Это упрощает задачу для не опытных веб-мастеров. Достаточно заменить лишь те фрагменты шаблона, где присутствует русскоязычный текст.
- Главная страница сайта разбита на отдельные секции и блоки, которые обозначены соответствующими комментариями внутри кода. Это на много упростит задачу редактирования шаблона.
- Главный файл стилей style.css систематизирован по отдельным блокам, которые отделены друг от друга комментариями.
- Шаблон содержит два блока с эффектами параллакса. Для смены очерёдности показа блоков вы можете менять их местами (вверх, вниз).
- Верхнее меню занимает фиксированное положение при прокрутке, что упрощает навигацию по странице.
- Галерея (слайдер) фото имеет несколько разделов, переход в каждый из которых осуществляется нажатием на фильтр, в нашем случае: ВСЕ | ЗАВТРАКИ | ОБЕДЫ | УЖИНЫ.
При нажатии на уменьшенное изображение появляется слайдер просмотра увеличенных картинок.
Для того, чтобы отнести изображение к определённой категории, необходимо блоку DIV, в котором находится картинка, присвоить конкретное свойство (класс). В нашем случае, это: class="breakfast или dinner или lunch".
- для работы с анимацией блоков меняйте значения в фрагментах кода типа:
<div class="menu-item wow bounceInRight" data-wow-offset="150" data-wow-delay="0.7s" data-wow-duration="1.5s"> контент </div>

Где:
1. wow bounceInRight - одна из разновидностей анимационного эффекта.
2. data-wow-offset — расстояние в пикселях от нижней границы браузера до верхней части элемента, при котором начинается анимация.
3. data-wow-delay — задержка в секундах перед началом анимации.
4. data-wow-duration — продолжительность анимации в секундах.
5. data-wow-iteration — количество повторений анимационного эффекта.

Для отмены эффектов необходимо удалить лишь указанные выше значения класса блока DIV, оставив при этом сторонние классы, типа: menu-item.

В комплекте с шаблоном CookPage в скачиваемом архиве имеется инструкция по редактированию данного проекта будущего сайта. В ней найдёте общие и конкретные советы по редактированию контента шаблона, по замене текстовой информации и медиа файлов.


Скачать адаптивный шаблон CookPage.rar [3,74 Mb] (cкачиваний: 9)

Автор: Saah | Просмотров: 59 | 17-10-2019,Чт, 00:42  

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

@
Похожие публикации