Александр

Во-первых, можно использовать плагин jQuery Mask
Во-вторых,
<input type="text" onfocus="this.value='+7'" >
Минус этого способа в том, что отчищается все при повторном фокусе. Если нужно дать возможность писать только цифры, можно на onkeydown проверять введенный символ и если этот символ не число - возвращать false, тогда выводиться не будет.

Потому что maxlength работает только с типом text

Для класса со слайдером

background-repeat: no-repeat;
background-size: cover;

Большее о background
Большее о background size

rotate
Можно попробовать наложить их друг на друга и задать разный z-index, а можно через margin завадать отступы вручную.

slick + в текст в блок

В блок нужно поместить изображение (img), задать ему:
postion:absolute;
При этом для блока
postion:releative;
Дальше поместить изображение в центр блока через

top: 50%;
left:50%;
transform: translate(50%,-50%);

и задать ему
display:block;
Дальше, при наведении на блок

.block:hover {
background: #333;
}
.block:hover > img {
display:block;
}

col-md-3 - это класс, который в стандартной bootstrap сетке дает ширину блока в в 25%. Можешь указать отступ в col-md-offset-3 - это будет отступать 25% от края экрана, у тебя получится блок по середине, но так же нужно прописать col-sm-offset-0 для того что бы на малых устройствах отступа не было.
Есть другой способ с display: table. Тут подробнее про все способы