Задать вопрос
valentikus
@valentikus
html

Как правильно сверстать блок?

Подскажите как лучше сверстать такой вот блок?
63e8dae43427d945590919.png
не используя при этом картинок как фон. а так что бы просто цветными блоками?
  • Вопрос задан
  • 87 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
moryachello
@moryachello
Всего понемножку, много не бывает.
немного наркомании 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="section-main">
            <div class="main">
                <div class="main-left">
                    <h1>Тут твой длинный и красивый заголовок на пловину экран</h1>
                    <p>тут описание и все дела ут описание и все дела ут описание и все дела ут описание и все дела тут
                        описание и все дела ут описание и все дела ут описание и все дела ут описание и все дела</p>
                    <button>Кнопка без стилей</button>
                </div>
                <div class="main-right">

                </div>
            </div>
            <div class="bloks">
                <div class="blok1"></div>
                <div class="blok2">
                    <div class="inner1">
                        <div class="fill1"></div>
                        <div class="fill2"></div>
                        <div class="fill3"></div>
                    </div>
                    <div class="inner2"></div>

                </div>
            </div>
        </div>
    </div>
</body>

<style>
    .container {
        width: 90%;
        margin: 0 auto;
        max-width: 1200px;
    }

    .section-main {
        height: 100vh;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-evenly;
    }

    h1 {
        font-size: 50px;
        font-weight: 300;
    }

    h1,
    p {
        max-width: 450px;
    }

    .main,
    .bloks {
        display: flex;
        padding: 60px 0px;
    }

    .bloks {
        justify-content: space-between;
        gap: 50px;
    }


    .main-left,
    .main-right {
        width: 50%;
    }

    .blok1 {
        width: 200px;
        height: 300px;
        border-radius: 0 100% 100% 0 / 0 60% 60% 0;
        background: #f1f5f9;
    }


    .blok2 {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        width: 100%;

        height: 100%;
    }

    .inner1,
    .inner2 {
        display: flex;
        height: 130px;
        width: 100%;
        gap: 50px;
    }

    .inner2 {
        background: #ffdd58;
        border-radius: 10% 10% 10% 30% / 0% 100% 100% 200%;

    }

    .fill1 {
        background: #ffe3fb;
        width: 30%;
        border-radius: 100% 100% 0 0 / 140% 140% 0 0;
    }

    .fill2 {
        background: #15837b;
        width: 30%;
        border-radius: 5% 74% 55% 100% / 1% 100% 99% 170%;
    }

    .fill3 {
        background: #7df1e8;
        width: 60%;
        height: 450%;
        position: relative;
        top: -350%;
        border-radius: 100% 0 0 0% /65% 0 0 0;
    }
</style>

</html>
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Вот мой вариант:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="block1">
        <div class="inner-block1"></div>
    </div>
    <div class="block2">
        <div class="inner-block2"></div>
    </div>
    <div class="block3">
        <div class="inner-block3"></div>
    </div>
</body>
<style>
.block1{
width: 200px;
height: 300px;
overflow: hidden;

}
.inner-block1{
    width: 300px;
    border-radius: 50%;
    height: 400px;
    background-color: brown;
}
.block2{
width: 800px;
height: 80px;
overflow: hidden;
border-radius: 50px;
   border-top-left-radius: 2px;
 /*Отступы для читабельности*/margin-top: 30px;
}
.inner-block2{
    width: 800px;
   
    height: 80px;
    background-color: rgb(42, 165, 54);
   
}
.block3{
width: 400px;
height: 200px;
overflow: hidden;
 /*Отступы для читабельности*/margin-top: 30px;
}
.inner-block3{
    width: 400px;
    border-radius: 50%;
    height: 400px;
    background-color: rgb(42, 108, 165);
}
</style>
</html>

Все просто. Делаем простые фигуры и обрезаем их с помощью оверфлова(Или же просто делаем скругление в определенных местах)
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы