Как вы думаете, из какого блока был свёрстан этот блок на скриншоте №1? 🧐

На размышление 30 секунд 😂

Кто-то скажет что без 4х колоночного блока тут не обойтись. Но проблема в том, что 4х колоночного блока нет в Геткурсе. Как же сделать подобную конструкцию, чтобы картинка была слева, а описание товара или любое другое текстовое составляющее было справа от неё?

На самом деле здесь используется блок "Две колонки с произвольным контентом". Всё, что нужно сделать это поставить блок желаемой картинки и блок текста друг за другом (скриншот №2). А затем применить чуть-чуть магии называемой CSS 😎

После того как мы поставили блоки так, как показано на скриншоте, нам нужно поставить следующие стили в блок:

.flex-container .flex-column {
align-items: center;
}

.part-image,
.part-text {
max-width: calc(50% - 20px);
}

.part-text {
padding-left: 30px;
}

Так мало стилей? Да! Мы всего лишь поменяли структуру ширины блоков изображения и текста, в следствии чего они встали в один ряд друг с другом, а так же зацентрировали их относительно друг-друга. Ну а дальнейшая стилизация уже зависит от вашей фантазии, дерзайте 😉

#полезная_фишка

Тема кнопок всегда будет актуальна, ведь как-то надо привлекать внимание пользователей, верно? 😌

Из необычных эффектов на кнопке вот такое светлое пятно, которое придаёт соблазна на неё тыкнуть. В принципе можно положить заранее заготовленную подобную картинку на бэкграунд, правда тут есть "но". Картинка это растр. И если ваша кнопка достаточно большая, то при адаптации этот растр "пережмёт" в такое кривое нечто, что это будет безумно криво смотреться.

Такой эффект достигается с помощью радиального градиента на самой кнопке. Вот пример CSS, который используется для кнопки на скриншоте к посту, и прочие стили, которые задают подобный формат кнопке:

.btn {
    background: radial-gradient(53.6% 103.93% at 28.4% 50.81%, #d58ecf 0%, #bb4056 100%);
    border-radius: 10px;
    font-size: 20px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    padding-left: 45px;
    padding-right: 45px;
}

В то же время важно в настройках кнопки оставить поля цветов пустыми (скриншот №2), и применить настройки. Тогда данный CSS вполне хорошо ляжет на саму кнопку. Вы можете поиграться и поставить свои цвета, которые являются главными у вас в проекте 😊

#полезная_фишка