@Mansur05

Как реализовать это?

Необходимо реализовать этот блок. На фоне изображение (Горы и солнце на белом. Для наглядности ограничил направляющими в фотошопе). У "заголовок" отступ от верхнего border 260px, неужели через padding это сделать? А как потом с мобильной версией? Может есть реализация с бутстрапом?

5e68f5f7e9902485550169.png

Текущий код:

<main>
    <div class="container text-left">
        <div class="main__content">
            <h1 class="main__title">Заголовок</h1>
            <p class="main__text">Здесь будет текст</p>
            <button class="main__button">Заказать</button>
        </div>
    </div>
</main>


На main пробовал вешать background:

main {
    background: url("img/main.png") no-repeat;
    background-size: cover;
}


Результат не тот что на макете.
  • Вопрос задан
  • 129 просмотров
Пригласить эксперта
Ответы на вопрос 5
joeberetta
@joeberetta
Читай: https://epdf.pub/google-for-dummies.html
Я бы сделал так:
Блоку даем дисплей: флекс.
Вертикальное центрирование элементов
Марджин для Заголовок и Здесь будет текст
И чтобы пиксель-перфект был поиграемся с лайн-хэйт у Заголовка
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn
CEO iAmStudio, предприниматель.
1. Вешать надо на контейнер. Если же main на странице несколько — бегом читать документацию.
2. Позиционировать либо отступами (да да, padding или margin), либо, скажем, флексами.
3. И точно так же позиционировать на мобилке под запросы. При этом конечно, оптимальнее mibile-first подход.

Ну и чисто от меня — пикчу можно сделать gif без фона и спозиционировать справа. А фон оставить hex-ом/rgb, если правильно подойти к вопросу, то качество будет хорошее, и при этом весить меньше. Правда от лесенки трудно будет избавиться. Под пикчей я подразумеваю именно горы и солнце.
Ответ написан
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Ответ написан
HistoryART
@HistoryART
Молодой и дерзкий
background-size: cover;
- растягивает картинку на весь блок, а в вашем случае скорее нужно
background-size: 100% auto;
значение.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы