Задать вопрос
Joulence
@Joulence
Раньше изучал веб, теперь python

Как сверстать такой блок?

62a743c121ceb539821171.png

При вёрстке появился вопрос, как можно сверстать эту секцию? Больше интересует как расположить картинку
fruits.png

<header>
            <div class="container">
                <nav>
                    <div class="nav-button">
                        <button>Sign up</button>
                    </div>
                </nav>
                <div class="nav-background">
                    <img src="img/header/fruits.png" alt="fruits">
                </div>
                <div class="header__text">
                    <h1 class="header__text-title">
                        There is no Sincerer<br>
                        Love than the <span>love<br>
                            of food</span>.
                    </h1>
                    <h2 class="header__text-subtitle">
                        Lorem ipsum dolor sit amet, consectetur adipiscing.
                    </h2>
                    <div class="header__text-button">
                        <a href="#">Place an Order</a>
                    </div>
                </div>
            </div>
        </header>


header {
    height: 874px;
    background: #f4f5f7;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 68%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 68%, 0% 100%)
}

header nav {
    padding-top: 47px
}

header nav .nav-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    z-index: 1
}

header nav .nav-button button {
    cursor: pointer;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    border: none;
    background: #6ece0f;
    width: 115px;
    height: 44px;
    border-radius: 10px;
    -webkit-transition: all;
    transition: all
}

header nav .nav-button button:hover {
    background: #30e31b
}

.nav-background {
    position: absolute;
    top: 0;
    right: 0;
    height: 1000px;
    z-index: -1
}

.header__text-title {
    line-height: 2
}

.header__text-title span {
    color: #5fb709
}

.header__text-subtitle {
    color: #313131;
    font-size: 21px;
    margin-bottom: 50px
}

.header__text-button a {
    text-decoration: none;
    background: #5fb709;
    color: #fff;
    padding: 15px 15px;
    border-radius: 5px;
    font-size: 25px
}
  • Вопрос задан
  • 136 просмотров
Подписаться 1 Простой 4 комментария
Пригласить эксперта
Ответы на вопрос 1
Обычно дизайнера рисуют картинки подобные.
А так, я думаю что главный блок нужно обвернуть в position: relative; а блок с картинкой в position: absolute; ну и блок с картинкой расположить куда надо top:0; right:0;

Главному блоку можно задать overflow: hidden;
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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