Не могу сверстать данный элемент

Question

Помогите сверстать данную часть

CSS

.second{
    display: flex;
    flex: 1 1 0;
}

.scnd__itm{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 83px 114px 89px 193px;

        &:last-child{
        margin-right: 214px;

    }
}
.scnd__itm--name{
    font-size: 25px;
}
.scnd__itm--content{
    margin-top: 15px;
    color: #95989A;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
.scnd__itm--image{
    max-height: ;
}

 <div class="scnd__itm">
               <img src="icons/2.svg" class="scnd__itm--icon" alt="">
               <h1 class='scnd__item--name'>UI/UX DESIGN</h1>
               <span class="scnd__itm--content">Let you’ll one had. Gathering replenish behold open subdue signs place hath meat image fly. Whose together. Over there you, fill herb set had likeness</span>
            </div>

Answer 1

В общем сделав такой код, появилось, что то похожее на необходимое мне, осталось только доработать.

//main:../style.less
html{
    font-size:15px;
}
Body{
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
}
*,
*:before,
*:after{
    box-sizing: border-box;
}

a{
    color: #fff;
    text-decoration: none;
}
.container{
    width: 100%;
    max-width: 1921px;
    margin: 0 auto;
    padding: 0 15px;

    overflow: hidden;
}

.second{
    display: flex;
    flex: 1 1 calc(33.33 - 30 * 2/3);
}

.scnd__itm{
    display: flex;
    justify-content: space-between;

    margin: 83px 0 89px 0;

        &:last-child{
//        margin-right: 214px;

    }
}
.itm__inner{
    margin-left: 67px;
}

.scnd__itm--name{
    margin: 0;
    font-size: 25px;
}
.scnd__itm--content{
    margin-top: 15px;
    color: #95989A;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
.scnd__itm--icon{
    object-fit:cover;
}

    <div class="container">
        <div class="second">

            <div class="scnd__itm">

                <img src="http://placehold.it/117x123" class="scnd__itm--icon" alt="">

                <div class="itm__inner">

                   <h1 class='scnd__itm--name'>UI/UX DESIGN</h1>
                   <span class="scnd__itm--content">Let you’ll one had. Gathering replenish behold open subdue signs place hath meat image fly. Whose together. Over there you, fill herb set had likeness</span>

                </div>

            </div>

             <div class="scnd__itm">

                 <img src="http://placehold.it/117x123" class="scnd__itm--icon" alt="">

                     <div class="itm__inner">

                       <h1 class='scnd__itm--name'>UI/UX DESIGN</h1>
                       <span class="scnd__itm--content">Let you’ll one had. Gathering replenish behold open subdue signs place hath meat image fly. Whose together. Over there you, fill herb set had likeness</span>

                    </div>

            </div>

             <div class="scnd__itm">

               <img src="http://placehold.it/117x123" class="scnd__itm--icon" alt="">

                   <div class="itm__inner">

                       <h1 class='scnd__itm--name'>UI/UX DESIGN</h1>
                       <span class="scnd__itm--content">Let you’ll one had. Gathering replenish behold open subdue signs place hath meat image fly. Whose together. Over there you, fill herb set had likeness</span>

                    </div>

            </div>

        </div>
    </div>

БЛОГ НА HUSL

Не могу сверстать данный элемент

Ответы (1 шт):