Кнопки СТАРТ и СТОП для video

Стояла задача вставить на сайт видео с помощью тега <video> фоном.  Сам файл видео находится на хостинге. Также необходимо было, чтобы пользователь сам мог запустить и остановить видео. По умолчанию видео стоит на месте и показывает черны экран. Чтобы черного экрана не было необходимо указать аттрибут poster.

Далее добавил иконки, которым задал id указанные в скрипте

 

 

Как подключить wow к сайту

Для создания красивых эффектов при загрузке сайта и переходе между секциями используют скрипт WOW.js в связке со стилями animate.css. В <head> необходимо подключить стили:

Перед закрывающимся тегом <body> необходимо вставить

Для работы WOW необходимо, чтобы был подключен jQuery. Теперь к анимируемым элементам необходимо добавить классы wow и класс эффекта анимации. Но просто добавить их недостаточно, необходимо в скриптах запустить инициализацию

Теперь все должно работать.

Админ панель на лендинг

Необходимо, чтобы заказчик сам менял данные на лендинге. Подходящих скриптов найти не удалось. Нашел только сервис edit-content.com/sites. Это именно сервис, а не скрипт. В настройках сервиса настраивается  доступ к сайту по фтп и можно производить редактирование заранее размеченных (с помощью класса editable) областей. Данный сервис бесплатный, так я прочитал в одной статье. Но спустя две недели использования пришло письмо, ваш тестовый период заканчивается, платите деньги. Для одного сайта -10$ в месяц. За бугром это может и копейки, по у нас — это деньги.

Стал искать дальше и нашел. На хостинге hostland.ru есть очень удобный файловый менеджер, а в нем — WYSIWYG редакторы.  Не могу сказать, чтобы они работали идеально, но для моих задач вполне подошел CKEditor. Он позволяет менять тексты, ссылки, картинки, таблицы — именно то, что и было нужно.

Есть очень простое решение, называется textolite. Оно скачивается с сайта разработчика и папки копируются в директорию сайта. textolite создает что-то наподобие примитивной системы управления сайтом. В бесплатной версии можно менять текстовое содержимое сайта, чего зачастую бывает достаточно.

Добавить шрифты в css

Обычно шрифты подключаются из fonts.google.com. Однако, часто в PSD макетах для верстки используются шрифты, отсутствующие там. В таком случае приходится искать шрифты в других местах и скачивать архив с ними.  Для подключения новых шрифтов в файле стилей необходимо прописать следующее:

 

Увеличить изображение при наведении

Необходимо, чтобы при наведении мыши на картинку, она увеличивалась. Сделать это можно с помощью следующего css кода:

 

Где брать шаблоны оформления элементов сайта

Очень часто заказчик хочет чтобы его сайт выглядел красиво и эффектно и при этом сам не знает как. В таком случае можно посмотреть примеры оформления на следующем сайте: atuin.ru/blog/

Там можно найти  красивое и нестандартное оформление:

  • Списков
  • Таблиц
  • Иконок
  • Видео
  • И многое другое

Скопировать код в верстку очень просто, html код добавляется на страницу, а css свойства дописываются в файл стилей.