Задать вопрос
@IvanLu
Начинающий веб-разработчик

Как мне в секции main сверстать так как на фото?

Код в html
<main class="section">
    <p class="section_text">
        Welcome to adventure!
    </p>
    <div class="section_card_wrap">
        <div class="section_card">
            <img class="section_card_img"
                 src="img/m-1.jpg"
                 alt="experts"/>
            <div class="section_card_right_container">
                <p class="section_card_heading">
                    Tranquility cracks
                </p>
                <p class="section_card_text">
                    We go on a visually stimulating adventure through some of most scenic and popular ravines.
                    The incredibly impressive Tranquility Cracks shows off a complex series of paths, tunnel ways and
                    awe-inspiring views.
                </p>
                <a href="#" class="section_link">Learn more...</a>
            </div>
        </div>
        <div class="section_card">
            <img class="section_card_img"
                 src="img/m-2.jpg"
                 alt="content formats"/>
            <div class="section_card_right_container">
                <p class="section_card_heading">
                    Skeleton gorge
                </p>
                <p class="section_card_text">
                    Making our way through Skeleton Gorge's ravine, along the Smuts Track.
                    Navigating through a series of ladders and mossy river boulders, we arrive at one of the famous and
                    historical white beach sand dams atop the summit.
                </p>
                <a href="#" class="section_link">Learn more...</a>
            </div>
        </div>
        <div class="section_card">
            <img class="section_card_img"
                 src="img/m-3.jpg"
                 alt="certificate"/>
            <div class="section_card_right_container">
                <p class="section_card_heading">
                    Devils peak
                </p>
                <p class="section_card_text">
                    We commence at the base of the Tafelberg start point walking the contour.
                    With unique views and possibly the best vantage point to make out the entire Lion, lying below Table
                    Mountain.
                </p>
                <a href="#" class="section_link">Learn more...</a>
            </div>
        </div>
    </div>
    <div class="section_banner">
        <div class="section_banner_text_wrap">
            <p class="section_banner_heading">
                Ready to start your adventure?
            </p>
            <p class="section_banner_text">
                Start your journey for a new impressions
            </p>
        </div>
        <button class="section_banner_button">Join us</button>
    </div>
</main>


Вот фото. мне нужно расположить три этих блока как на фото. Пробовал флексами но пока не получается

608f0184afa76961256025.png
  • Вопрос задан
  • 151 просмотр
Подписаться 1 Средний Комментировать
Решения вопроса 1
@Legal2019
Всё в имени моём... и радость и печаль...
Я бы section_card_wrap сделал бы flex, а section_card сделал бы inline-flex. Или для начала бы подглядел бы в источнике css.
Пробовал флексами но пока не получается
может стоит ещё раз изучить флексы?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы