1
1

пока не выходит разместить иконки в разделе "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. ничего не изменилось.


Vladimir A
4 years ago






та же проблема, код все тот же , что в файле от лектора точь в точь написан но все преимущества идут продряд вниз повертикали

не могу сделать две колонки рядом друг с другом по 4 штуки

Valerie Olšanská
4 years ago

Один ответ