иконки на одном уровне по горизонту
пока не выходит разместить иконки в разделе "8 причин начать работать с нами"
В начале не получалось блоки с иконкой и текстом раскинуть по вертикали.
Решение: поменять основное направление колонки:
.many_reasons .col {
display: flex;
flex-direction: column;
justify-content: space-between;
}
но все же, отличие от макета есть иконки в обоих колонках не на одном уровне, а в макете они ровненько стоят в одной линии.
вот мой код:
<section class="many_reasons">
<div class="container">
<div class="row">
<div class="reason_btn">преимущества</div>
<div class="reasons_header">8 причин начать работать с нами</div>
<div class="col">
<div class="reason">
<img src="/src/icons/wallet.png" alt="only_transfers">
<div class="reason_text">
<h1>Никаких наличных, оплата происходит автоматически</h1>
<h2>Стоимость поездки оплачивается пассажиром с привязанной банковской карты, т.е. нет никаких рисков связанных с перевозкой наличности как для пассажира, так и для водителя, Вам не нужно искать мелкие деньги для размена.</h2>
</div>
</div>
<div class="reason">
<img src="/src/icons/notes.png" alt="high profit">
<div class="reason_text">
<h1>Высокий доход с гарантированными
выплатами</h1>
<h2>Мы выплачиваем заработную плату на личную банковскую карту водителя! Вам не нужно оформлять ООО, ИП, платить налоги, подавать декларацию, оплачивать бухгалтерские услуги и ведение банковского счета.</h2>
</div>
</div>
<div class="reason">
<img src="/src/icons/car_key.png" alt="easy connection">
<div class="reason_text">
<h1>Комфортное, прозрачное и простое
подключение</h1>
<h2>Мы подключаем дистанционно и бесплатно, Вам нет необходимости приезжать к нам! Вы присылаете нам копии документов, мы регистрируем Вас и присылаем данные для подключения, через 1-2 дня Вы можете начинать работать!</h2>
</div>
</div>
<div class="reason">
<img src="/src/icons/call_center.png" alt="phone support">
<div class="reason_text">
<h1>Круглосуточная поддержка</h1>
<h2>В Uber действует круглосуточная поддержка водителей по электронной почте. Если что-то непонятно, Вы всегда можете задать вопрос через On-line консультацию.</h2>
</div>
</div>
</div>
<div class="col">
<div class="reason">
<img src="/src/icons/presentation.png" alt="commision 8% and bonuses">
<div class="reason_text">
<h1>Комиссия 8% + БОНУСЫ</h1>
<h2>У нас минимальная комиссия и мы выплачиваем бонусы за каждую поездку, некоторые наши конкуренты оставляют бонусы себе. Мы работаем честно и с нами водители зарабатывают больше!</h2>
</div>
</div>
<div class="reason">
<img src="/src/icons/flex_work.png" alt="flexible work hours">
<div class="reason_text">
<h1>Работа в удобное время, никаких
графиков</h1>
<h2>Вы просто нажимаете кнопку выйти на линию для начала работы, когда решите закончить, нажимаете выйти с линии. Вы можете подрабатывать только утром, вечером, в выходные или праздничные дни! </h2>
</div>
</div>
<div class="reason">
<img src="/src/icons/location.png" alt="many orders">
<div class="reason_text">
<h1>Всегда большое количество заказов
</h1>
<h2>Приложение показывает, где на данный момент больше всего заказов и где действуют повышенные тарифы. У Вас не будет простоя и холостых пробегов. Наши пассажиры всегда приятные и абсолютно неконфликтные люди, которых приятно возить.</h2>
</div>
</div>
<div class="reason">
<img src="/src/icons/car_no_stickers.png" alt="no need of taxi signs">
<div class="reason_text">
<h1>Без шашечек и наклеек
</h1>
<h2>Вам не нужно менять цвет, устанавливать «шашки» на автомобиль и обклеивать его наклейками.</h2>
</div>
</div>
</div>
</div>
</section>
.many_reasons .col {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 40px;
height: 835px;
}
.many_reasons .reason_btn{
display: flex;
width: 112px;
height: 24px;
background-color: #000000;
margin-top: 70px;
border: none;
justify-content: center;
color: #ffffff;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
text-decoration: none;
}
.many_reasons .reasons_header{
color: #222222;
font-size: 38px;
font-weight: 700;
text-transform: uppercase;
margin-top: 38px;
text-align: center;
}
.many_reasons .reason {
display: flex;
justify-items: center;
align-content: center;
}
.many_reasons img {
justify-self: center;
align-self: center;
}
.many_reasons .reason_text {
/* width: 340px; */
margin-left: 25px;
line-height: 21px;
text-align: justify;
}
.many_reasons .reason h2 {
color: #202020;
font-size: 15px;
font-weight: 300;
margin-bottom: none;
}
.many_reasons .reason h1 {
color: #1eacc7;
font-size: 17px;
font-weight: 400;
}
Пробовал поместить кнопку и header в row над колонками, в отдельный блок(wrapper), остановился на row.
Пробовал придать значение justify-self:space-evenly/space-between/space-around. ничего не изменилось.