varzin

Как самое простое решение вам подойдет вот этот очень популярный плагин. https://wordpress.org/plugins/contact-form-7/scree...

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

Можно так попробовать.

// Для примера за проверяемый день я возьму сегодняшний 
var today = new Date();

// Узнаем какой это день недели
var day = today.getDay();

// Если 6 или 0 (СБ или ВС), то weekend = true
var weekend = (day == 6) || (day == 0);

Ну и дальше, если true, то добавляете просто CSS-класс, который и красит день.

Например вот так codepen.io/varzin/pen/rFfhH

Обратите внимание, что мы теперь выводим не просто значения, а обрамляем их тегами. И вот их и оформляем через CSS.

Для выполнения вашей задачи достаточно знать базовый синтаксис JS и арифметику.
Для упрощения синтаксиса используйте jQuery. Чтобы подключить его, пропишите перед подключением вашего файла скриптов например следующее:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Ниже конкретно ваш пример с комментариями.
Что-то может быть не точно, я быстро написал, но принцип вам будет понятен.
codepen.io/varzin/pen/PqRWNY

Один из примеров отличной быстрой галереи fotorama.io

Как готовый вариант можно использовать pagePiling.js
alvarotrigo.com/pagePiling

Как вариант можно анимировать свойства CSS через transition

jsfiddle.net/varzin/9woqt7pn/1

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

Пример:

.wrapper {
    background-image:
        url(bg-left.jpg),
        url(bg-right.jpg),
        url(bg-cover.jpg);
    background-size:
        100px 50px,
        auto,
        cover;
    background-position:
        left top,
        right top,
        center;
    background-repeat:
        no-repeat;
}