Как сделать то что показано на картинке?

Question

[NeMo]

Делаю сайт и хотел сделать на нём также, но без стрелок просто три картинки и текст под ними.В html и css.(Делаю сайт в codepen)
Вот сама картинка: https://habrastorage.org/webt/60/70/88/6070880d0b3...
Сайт откуда картинка: https://www.minecraft.net/ru-ru/

Comments

[Froggyweb]

bootstrap css второе лучше

[NeMo]

Froggyweb, ???

[Froggyweb]

тебе нужно изучить технологию css хотя бы базово

[NeMo]

Froggyweb, Я и прошу поэтому помощь.

[Froggyweb]

Егор Хохлов, ну на фрилвнс. конечно могут тут сверстать, но для тебя это будет филькина грамота. Например куда это вставить. Базовые вещи нужно знать
если скинешь песочницу и свои попытки реализации то будет проще....

Answer 1

[Vadim Kinev]

<style>
    section{
        width: 100%;
    }
    .wrapper{
        max-width: 1050px;
        margin: 0 auto;
        background: grey;
    }
    .flex-container{
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
        padding-top: 50px;
    }

    .box-item .img-container{
        width: 100%;
    }

    .box-item .text-container{
       width: 100%;
    }

    .box-item .img-container img{
        object-fit: contain;
    }

    .box-item{
        width: 200px;
        text-align: center;
    }

    .box-item a{
        font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: greenyellow;
    margin-top: 25px;
    }
    .box-item a:hover {
    text-decoration: underline!important;
    color: green;
    }

    .box-item p{
        font-size: 14px;
    font-family: 'Noto Sans';
    line-height: 20px;
    font-weight: 400;
    text-transform: none;
    margin-top: 15px;
    }
</style>

<section>
    <div class="wrapper">
        <div class="flex-container">
            <div class="box-item">
                <div class="img-container">
                    <img src="https://www.minecraft.net/content/dam/minecraft/home/Games_Subnav_Dungeona-228x350.png" alt="">
                </div>
                <div class="text-container">
                    <h5><a href="">Minecraft</a></h5>
                    <p>Исследуй собственный уникальный мир, переживи ночь и создай все, что только сможешь вообразить!</p>
                </div>
            </div>
        </div>
    </div>
</section>

Comments

[NeMo]

Воууу спасибо

[NeMo]

Подскажи как добавить ещё 2 элемента.

Answer 2

[StiflerProger]

https://codepen.io/stiflerproger/pen/OJWzywR