Блок преимуществ
Приверы блоков преимуществ
Вот предоставлен пример верстки блока преимуществ для примера на первом рисунке
<div class="el_advantagesBlock_xxxxxx clearfix"> <div class="el_advantagesList_xxxxxx row"> <div class="el_advantagesItem_xxxxxx col"> <div> <p class="title">Уникальная цена</p> <div class="infoBlock row"> <div class="image col"> <p class="image-flex"> <span class="el"><img src="advantages1.png" alt=""></span> </p> </div> <div class="text col">Наши цены гораздо ниже рыночных, покупайте, у нас очень выгодно!</div> </div> </div> </div> <div class="el_advantagesItem_xxxxxx col"> <div> <p class="title">Доставка по всей стране</p> <div class="infoBlock row"> <div class="image col"> <p class="image-flex"><span class="el"><img src="advantages2.png" alt=""></span></p> </div> <div class="text col">Мы работаем с ведущими транспортынми компаниями, а это скорость и надежность</div> </div> </div> </div> <div class="el_advantagesItem_xxxxxx col"> <div> <p class="title">Широкий ассортимент</p> <div class="infoBlock row"> <div class="image col"> <p class="image-flex"><span class="el"><img src="advantages3.png" alt=""></span></p> </div> <div class="text col">Широкий ассортимент климатической техники, электрооборудования и многое другое</div> </div> </div> </div> <div class="el_advantagesItem_xxxxxx col"> <div> <p class="title">Полный пакет документов</p> <div class="infoBlock row"> <div class="image col"> <p class="image-flex"><span class="el"><img src="advantages4.png" alt=""></span></p> </div> <div class="text col">Гарантия на продукцию, сертификация качества на всю предоставляемую продукцию</div> </div> </div> </div> </div> </div>
.el_advantagesBlock_xxxxxx { } .el_advantagesBlock_xxxxxx .el_advantagesList_xxxxxx { } .el_advantagesBlock_xxxxxx .el_advantagesList_xxxxxx .el_advantagesItem_xxxxxx { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; margin-bottom: 30px; } @media (max-width: 1060px) { .el_advantagesBlock_xxxxxx .el_advantagesList_xxxxxx .el_advantagesItem_xxxxxx { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media (max-width: 520px) { .el_advantagesBlock_xxxxxx .el_advantagesList_xxxxxx .el_advantagesItem_xxxxxx { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 30px; } } .el_advantagesItem_xxxxxx { } .el_advantagesItem_xxxxxx > div { border: 1px solid #e1e1e1; border-radius: 5px; height: 100%; } .el_advantagesItem_xxxxxx .title { border-top-left-radius: 3px; border-top-right-radius: 3px; padding: 6px; margin: -1px; font-size: 1.5rem; font-weight: bold; text-align: center; color: #ffffff; } .el_advantagesItem_xxxxxx:nth-child(1) .title { background: #4fad25; } .el_advantagesItem_xxxxxx:nth-child(2) .title { background: #2091c9; } .el_advantagesItem_xxxxxx:nth-child(3) .title { background: #23b6ec; } .el_advantagesItem_xxxxxx:nth-child(4) .title { background: #5bcc28; } .el_advantagesItem_xxxxxx .infoBlock { padding: 10px 10px; } .el_advantagesItem_xxxxxx .infoBlock .image { -ms-flex: 0 0 70px; flex: 0 0 70px; max-width: 70px; } .el_advantagesItem_xxxxxx .infoBlock .text { line-height: 1.3; font-size: 1.2rem; }