Верстка блока на bootstrap 4 заезжающего поверх слайдера

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

Верстать мы будем следующее:

И так тут присутствует фон (скачать), сетка (mdbootstrap.com/layout/layout-grid/), различное выравнивание и кнопка (mdbootstrap.com/components/buttons/).

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

<div id="bstext">
    <div class="container">
        <div class="well">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <p>Продукция<br />соответствует ГОСТ<br />18599-2001</p>
                    <div class="eee text-right"><p>Трубы ПНД питьевые<br />Трубы ПНД технические<br />Фитинги ПНД<br />Краны ПНД шаровые</p></div>
                </div>
                <div class="col-md-8 mb-4 text-center">
                    <p class="p11 mt-md-4">Наше предприятие может предложить</p>
                    <p class="p22">Вам продукцию по самым выгодным ценам</p>
                    <p><a class="btn btn-danger btn-rounded" data-toggle="modal" data-target="#centralModal">РАСЧИТАТЬ СТОМОСТЬ</a></p>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-4 mb-4">
                    <p>Собственное<br/>производство<br/>в Московской области</p>
                </div>
                <div class="col-md-4 mb-4">
                    <p>Проектирование<br/>трубопровода<br/>Консультация</p>
                </div>
                <div class="col-md-4 mb-4">
                    <p>Собственный автопарк<br/>с возможностью заказа<br/>машины</p>
                </div>
            </div>
        </div>
    </div>
</div>

Выглядит это так:

Здесь мы использовали стандартную сетку, выравнивание и кнопку + я сразу добавил пару дополнительных классов для элементов, которых пока нет, но мы их сейчас создадим, начнем с id=»bstext» — это обвертка с фоном, открываем файл style.css и прописываем следующие стили,

#bstext {
    margin: -99px auto 0px; /*заезжаем вверх на слайдер, на 99 пикселей*/
    background-color: #e6e6e673; /*если по каким то причинам фон картинка не отобразился, заливаем цветом*/
    background-image: url(../img/wool-diagonal-for-light-background.png); /*делаем фон картинку*/
    background-repeat: repeat; /*повторяем картинку по вертикали и горизонтали*/
    z-index: 1; /*положение элемента*/
    padding: 0; /*убираем отступы*/
}

в итоге получаем.

Далее оформляем еще один блок обвертку class=»well», пропишем для него следующие стили

.well {
    background: #E6E6E6; /*заливка блока*/
    color: #38545F; /*цвет шрифта*/
    box-shadow: 0px 1px 7px #38545F; /*тени*/
    position: relative; /*позиционирование*/
}

получаем.

По сути осталось разобраться с отступами и выделить границы, перекрасить фон у блока, ну и увеличить местами шрифт.

Начнем с отступов и границ

.well>.row {
    margin-right: 0px; /*обнуляем отступ по правому краю*/
    margin-left: 0px; /*обнуляем отступ по левому краю*/
}
.well>.row>.mb-4 {
    border: 1px solid #38545F; /*задаем границы блокам*/
    margin-bottom: 0px !important; /*обнуляем отступ по нижнему краю*/
    padding-top: 10px; /*задаем отступ сверху для контента*/

}

Теперь увеличим шрифты:

p.p11 {
    margin-bottom: 15px; /*задаем отступ*/
    color: #000000; /*задаем цвет шрифта*/
    font-size: 20px; /*размер шрифта*/
}
p.p22 {
    color: #000000; /*задаем цвет шрифта*/
    font-size: 20px; /*размер шрифта*/
}

Ну и осталось перекрасить блок с классом eee

.eee {
    background: #38545F; /*заливка блока*/
    color: #fff !important; /*задаем цвет шрифта*/
    margin-left: -15px; /*регулируем отступы*/
    margin-right: -15px; /*регулируем отступы*/
    margin-bottom: -1px; /*регулируем отступы*/
    padding: 15px 15px 1px 0; /*регулируем отступы для контента*/
}

На выходе получаем.