Для верстки сайта с помощью библиотеки Bootstrap будем использовать колоночную сетку, а так же Reboot - набор изменений для отдельных элементов CSS в едином файле.
Начинаем с шапки и оборачиваем её в тег header. В контексте правильного создания сайтов лучше будет создать не просто ссылки, а именно список, внутри которого есть элементы, внутри которых и содержится ссылка. Это будет правильнее и с точки зрения продвижения сайта.
Стили
Шапка готова
При наведении элемент меняет цвет на синий, это можно иправить.
В нижнем же левом углу показан адрес, на который ведет ссылка. В данном случае это просто заглушка #.
Второй небольшой блок с логотипом, кнопкой и пр. тоже можно отнести к шапке. И элементы в нем будем размещать именно с помощью колонок.
Сначала определяем сколько занимает элемент места.
В данном случае логотипу вместе с надписью необходимо 4 колонки. Перед ним есть отступ в одну колонку. Поэтому в классе элемента должно появиться следующее обозначение
<div class="col-md-4 offset-md-1">
Так же прописываем класс для второго элемента.
<div class="col-md-2 offset-md-2">
И третьего
<div class="col-md-2">
И не забываем о структуре построения файла. Обязательно сначала создаем блок container, в нем создаем блок row и только внутри него размещаем колонки.
И дальше нам остается сверстать элементы и subheader и прописать стили.
Что важно отметить:
*когда вы задаете блоку полупрозрачный фон с помощью свойства opacity: 0.6; он по умолчанию «припишет» это же свойство своим элементам. Чтобы этого избежать лучше использовать значение rgba(0, 0, 0, .6);
*логотип можно обернуть в тег ссылки, поэтому обязательно указываем ему свойство display: block.
Вторая колонка с номером телефона в html выглядит так
Для удобства телефон лучше указать в виде ссылки и обратите внимание на атрибут href. Прописываем его именно в таком формате и без пробелов. Внутри же тега <a> телефон можно указать как угодно.
<a href="tel:84957970988" class="subheader_phone">8 495 797 09 88</a>
Добавляем кнопку.
Шапка готова. Для первой секции (дадим ей класс promo) необходимо построить ту же систему. Container — row — col.
Причем за строку будет считаться весь обведенный контент. Он занимает 10 колонок и отступ 1 колонки слева.
Разместили контент и переходим к стилизации.
После этого нам нужно поправить момент с шапкой сайта, а точнее расположить фоновую картинку правильно
Мы можем сделать это, используя свойство position.
Для этого родительскому блоку прописываем position: relative;
а блоку с шапкой position: absolute; и обязательно 100%-ую ширину.
Первый блок готов
