Шаблон сайта
с подсказками

Переход ниже
В шаблон включёны спонтанные, но полезные советы в помощь при редактировании.
Их цель обозначить объём текстовой информации в блоках.
Заполните описание картинки
Заполните описание картинки

О шаблоне

Внутри кода шаблона присутствуют подробные комментарии на русском языке

Важные фрагменты, секции и блоки кода обёрнуты комментариями с указанием их предназначения

Это на много упростит работу по редактированию шаблона.

Для соблюдения пропорционального размещения блоков и картинок между собой, старайтесь соблюдать количество символов в тексте и размеры изображений. Исходный объём текста перед вами на лицо.
Размеры соответствующих картинок можете посмотреть в папке img.

  • Шаблон полностью адаптивный благодаря последней версии (2019 г.) фреймворка Bootstrap v4.3.1
  • На картинках указаны исходные размеры, которые желательно соблюдать при замене на свои изображения.
  • Исходный код разбит на секции и блоки, которые сопровождаются комментариями. Их можно менять местами, добавлять, удалять.

Сервис Услуги

Здесь вы можете разместить короткое описание своих услуг или товара.

Товар 1

Разместите описание товара или услуги. Можно добавить ссылку на дополнительную страницу

Услуга 1

Файл иконок размещён по адресу lib/ionicons/css/ionicons.css в этом дистрибутиве

Товар 2

В файле ionicons.css наименования сотен иконок. Их имена такие: ion-ios-calculator-outline

Услуга 2

Замените иконки на свои, меняя только их названия без расширений, пример ion-ios-calculator-outline

Товар 3

Вы легко замените цвет размещаемой иконки на свой, изменив его строкой выше, здесь код цвета #2282ff

Услуга 3

Смотреть образцы примеров на сайте https://ionicons.com/ - иконки с открытым исходным кодом

Что включено в шаблон? Секция Whu

Основные функции, благодаря которым шаблон выглядит живым

Заполните описание картинки

Шаблон полностью адаптивен к просмотру на мобильных устройствах с любым размером экрана.

Используется последняя версия (2019 г.) фреймворка Bootstrap v4.3.1.

Анимация блоков

В процессе прокрутки страницы вы наблюдаете эффекты появления блоков и выползания текстов.

Галерея фотографий

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

Блок прогресс бар

Под этими строками вы видите числа, которые начинают нарастать в значении при их появлении при прокрутке. Перезагрузите страницу F5 и просмотрите ещё раз.

261

Клиентов

437

Проектов

24

Часы поддержки

18

Работников

Секция Call ВНИМАНИЕ!

В кодах CSS и JS файлов тоже имеются комментарии на русском языке. Они помогут бустрее разобраться в структуре предложенного шаблона. Основные файлы лежат по адресам js/main.js и css/style.css

Заполните описание картинки

Рядом с этим текстом картинки современного веб-формата изображений .svg, они меньше тормозят загрузку страницы в браузере.

SVG – Scalable Vector Graphics (Масштабируемая Векторная Графика) – основанный на векторе формат для веб-разработчиков. Данный тип формата стал столь популярен благодаря тому, что его изображения возможно отображать на больших разрешениях без потери качества, так как SVG – это векторный формат.

SVG имеет небольшой вес по сравнению с другими форматами. У этого формата просто невероятные возможности. Флаги, символы, элементы интерфейса. И это только небольшой список того, как его можно использовать.

Заполните описание картинки

Рядом с этим текстом картинки современного веб-формата изображений .svg, они меньше тормозят загрузку страницы в браузере.

Толчок развития данной языковой разметке впервые был дан Консорциумом Всемирной паутины (World Wide Web Consortium), который был более известен в 1999 году как W3C. W3C дала понятие SVG – языковая разметка для создания двухмерных графических интерфейсов и изображений.

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

Секция. Слайдер комментариев

Секция Team Команда

Изображения ниже складываются при уменьшении экрана и увеличиваются в размере для охвата всей площади экрана

Заполните описание картинки

Николай Андреев

главный управляющий
Заполните описание картинки

Андрей Николаев

Сеошник
Заполните описание картинки

Валентина Ольгина

менеджер
Заполните описание картинки

Ольга Валентинова

Бухгалтер

Наши клиенты (слайдер)

Цены Секция Прайс

Описание предоставляемых услуг или цены на товарную продукцию, предоставляемую нашей организацией

500/месяц

Услуга 1

  • Раскрутка проекта
  • Продвижение сайта
  • Качество работы
  • 24/7 Поддержка
Оплатить

1000/месяц

Услуга 2

  • Раскрутка проекта
  • Продвижение сайта
  • Качество работы
  • 24/7 Поддержка
Оплатить

1500/месяц

Услуга 3

  • Раскрутка проекта
  • Продвижение сайта
  • Качество работы
  • 24/7 Поддержка
Оплатить

Секция вопрос ответ

Нажав на вопрос вы получите полноценный ответ на интересующую вас информацию

  • Для загрузки не большого количества файлов можно обойтись администраторским разделом хостинга. Заходим в клиентскую часть Вашего аккаунта, находим "Файловый менеджер", в котором должна лежать папка с названием Вашего сайта

  • При загрузке на хостинг большого количества папок и файлов с емким содержимым (видео, музыка), используются специальные программы FTP клиента. Самый простой - Total Commander, хороший бесплатный - FileZilla Client, хороший платный - CuteFTP

  • Адрес хоста (FTP Host Address): личный домен, например: sitey.ru
    Имя узла (Label for site): Любое имя для себя, потом будете на него нажимать для подключения
    Имя пользователя (FTP site User Name): логин на хосте (или смотрите тех. данные хоста)
    Пароль (FTP site Password): ваш пароль (пароль можно настроить в Вашей админ. части хоста)

  • В любой папке необходимо наличие файла index.html (index.php, index.cgi...). Обычно этот файл является главной страницей сайта или раздела. Каждый современный браузер настроен на открытие этого файла по умолчанию. Если в папке лежит файл index.html, то браузер откроет его без соответствующего набора.

  • Сайт построенный с применением технологии CSS (каскадные таблицы стилей) имеет много преимуществ и обеспечивает быстроту открытия, переходов по страницам сайта. Это достигается за счет того, что любой браузер при открытии сайта в первую очередь ищет на нем и считывает информацию из файла style.css. Название может быть любым, но расширение .css обязательно.

  • Файл style.css дает понять браузеру из чего состоит сайт, его размерность, где лежат картинки, какой шрифт, цвет, фон... разных страниц и разделов. Браузер записывает эту информацию к себе в кеш (временная память) и при продолжении работы с этим сайтом он повторно не обращается к серверу (провайдеру), на котором лежит Ваш сайт (папки, файлы)..