Довольно часто маленьким компаниям, занимающимся различными услугами, требуется реклама в интернете. Я видел много одностраничных сайтов подобного рода, порою владельцы таких контор запускают рекламу, пользуясь шаблонами гугла, которые, на мой взгляд, слишком уж топорные. Зато над созданием такого сайта не нужно ломать голову, справится и школьник. В конце концов много ли надо? Кратко рассказать о деятельности компании, указать телефон, адрес, подключить карту, вставить фотографии — и всё готово. По сути перед нами — продолжение уличной рекламы в сети, те же вывески, только у «вывесок» в интернете гораздо больше возможностей.
Я решил внести свою лепту и создал шаблон, который сгодится для рекламы небольшой компании. Что важно: в таком шаблоне можно указать цены на услуги, это очень удобно, так как клиенты предпочитают видеть цены сразу. Тематика услуг, которые указаны в качестве примера, мне близка, это аналог одностраничного сайта, который я когда-то создавал по своей прихоти и которого уже не существует. Поэтому мне не пришлось искать контент для примера, фото в галерее, тексты и прайс я взял из старых файлов, остальные фотографии я нашёл на сайте бесплатных фотографий unsplash (отдельное спасибо тем, кто выкладывает такие фотографии!).
Структура
Основа шаблона — плагин fullPage для постраничного скроллинга. Очень удобная библиотека, со множеством функций, прекрасно работает с мощной gsap, которая тоже подключена, чтобы анимировать объекты. По большому счёту это всё, что нужно знать тому, кто хочет воспользоваться данным шаблоном.
Остаётся лишь подставить свою информацию (название компании, логотип, телефон), тексты и заменить изображения.
Из-за того, что секции в данном случае привязаны к высоте окна, желательно, чтобы ваши изображения пропорционально соответствовали тем, которые в примере, иначе вам придётся мучить себя борьбой с размерами. Не забудьте также в HTML удалить span.exemple со словом «пример» и удалите его в файле style.css.
<div class="description">
<p>
<span class="exemple">пример</span>
Сеть мастерских «Мастер-Маги» предоставляет комплекс услуг...
</p>
</div>В самом низу странички — галерея fancybox. Логичнее было бы в этом месте поместить интерактивную карту, с указанием адресов. Хотя кому-то, быть может, галерея подойдёт больше (если контора имеет только один адрес, например). Поэтому div#mainCarousel можно удалить и на это место вставить карту.
Если производите кардинальные изменения в шаблоне, не забывайте отключать скрипты и стили подключённых библиотек, если в них уже нет необходимости, старайтесь, чтобы не было ничего лишнего.
Важное, на мой взгляд, дополнение — это наличие тёмной темы. Из-за того что некоторые браузеры сами создают тёмную тему страниц интернета, по своему усмотрению, и способны изуродовать любой красивый сайт, наличие тёмной темы уже не является блажью дизайнера, это необходимость; исключение составляют тёмные сайты, имеющие одну единственную тёмную тему. В правом углу шапки сайта находится кнопка переключения тем:
<div class="user-toggle">
<div role="status" class="[ visually-hidden ][ js-mode-status ]" hidden></div>
<button class="[ toggle-button ] [ js-mode-toggle ]">
<span class="[ toggle-button__text ] [ js-mode-toggle-text ]">Включить тему "dark"</span>
<span class="toggle-button__icon" aria-hidden="true"></span>
</button>
</div>Если вы не хотите видеть переключатель и планируете поместить в это место что-то другое, то можно всему div.user-toggle добавить атрибут hidden.
<div class="user-toggle" hidden>Кнопка скроется, но если в браузере выставлена тёмная тема, то на сайте тема переключится автоматически. Информацию по скрипту можно посмотреть здесь.
Внешний вид
Шаблон имеет три цветовых подборки, которые я назвал «Гранж», «Гламур» и «Красное вино». По умолчанию активна тема «Гранж». Я вдохновился градиентами emma и немножко переделал их. Получилось что-то нейтральное. Такая тема унивесальна и подойдёт для чего угодно, для какой угодно деятельности. Однако если речь о салонах красоты или создании икебаны, например, то лучше подключить тему «Гламур», она немного жеманная, хотя и в ней есть способность перевоплощаться и подстраиваться. В файле style.css закомметируйте первую тему и раскомментируйте вторую:
:root {
--color-mode: 'light';
/*-------------------------------
=Theme I "Grunge" (Тема I "Гранж")
-------------------------------- */
/* --color-dark: #033649;
--color-dark-alpha: rgba(3, 54, 73, 0.9);
--color-dark-07: #034652;
--color-dark-05: #036564;
--color-light: #f7f3d8;
--color-light-alpha: rgba(247, 243, 216, 0.9);
--color-light-02: #e5fdc9;
--color-light-03: #d4fee6;
--color-light-04: #85c9c8;
--color-alternate-1: #556270;
--color-alternate-2: #C44D58;
--color-moon: #fddd52;
--color-sun: #fb925b;
--color-log-0: #fde152;
--color-log-1: #fa715f;
--color-log-2: #db1174;
--color-log-3: #9b4ca7; */
/*-----------------------------------
=Theme II "Glamour" (Тема II "Гламур")
---------------------------------- */
--color-dark: #283355;
--color-dark-alpha: rgba(40, 51, 85, 0.9);
--color-dark-07: #43448d;
--color-dark-05: #6658a3;
--color-light: #ffffff;
--color-light-alpha: rgba(255, 255, 255, 0.9);
--color-light-02: #f0f1fa;
--color-light-03: #ced1ee;
--color-light-04: #79d3fb;
--color-alternate-1: #4279c0;
--color-alternate-2: #fc86a9;
--color-moon: #c1cde9;
--color-sun: #ffd17e;
--color-log-0: #fcd679;
--color-log-1: #48acd0;
--color-log-2: #035ea4;
--color-log-3: #7603a4;Посмотрите, как будет смотреться ваш сайт. Если речь идёт об автомеханике, услугах тату-салонов или ремонте часов, попробуйте третью тему «Красное вино», она темнее и контрастней остальных и практически не выходит за пределы одной гаммы. Вы также можете придумать свою тему и подключить её.
Два бесплатных шрифта, которые я подключил, на мой взгляд, идеально подходят для той деятельности, которая указана в примере, и сочетаются с анимацией, но вы можете их изменить. Тогда вам возможно придётся править размеры шрифтов.
Как видите, всё очень просто, достаточно минимальных знаний, при наличие контента можно управиться за пару часов, больше времени уйдёт на работу с фотографиями и картинками. Кнопки прайса оформлены при помощи масок, заданных кодом svg:
.download__prices li:nth-child(1) button:after {
--mask-img: url('data:image/svg+xml,\ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">\<path d="M.11 61.93c-.5-7.11.75-15.18 2.16-22.54 ..."/>\</svg>');
}Вы также можете подключить svg следующим образом:
.download__prices li:nth-child(1) button:after {
--mask-img: url(../images/shoes.svg#shoes-msk);
}Необходимо лишь задать в svg идентификатор пути или группе:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path id="shoes-msk" d="M.11 61.93c-.5-7.11.75-15.18 2.16-22.54 ..."/>
</svg>Здесь можно настроить замену фона масок, подключив его к кнопке переключения на тёмную тему, тогда при нажатии на кнопку цвет объектов будет меняться, но для этого необходимо задать отдельное правило в цветовой теме, которую вы выбрали.
Однако если вы не разбираетесь в svg или у вас нет подходящих векторных изображений, то можно вообще убрать маски и вставить обычные изображения png, с пустым фоном, или просто написать название услуг в теге заголовка, например <h3>Изготовление ключей</h3>.
Последнее
Для тех кто хочет как можно быстрее подключить шаблон алгоритм выполнения примерно следующий:
- пройдите на github и скопируйте код
- пройдите по ссылкам и скачайте актуальные версии скриптов:
- подключите скрипты и стили
- вставьте собственный контент
- в файле style.css выберете цветовую тему