Верстка, CSS, HTML, SVG

Помогите с HTML и CSS

Как реализовать подобную тему?
ОГ
Олег Галочкин
853
Что тут собственно верстать ?
Вот на черновой вариант сверстал за 15 минут думою поймёшь что как доделать
стили специально в тегах поместил чтоб тебе было понятно что к чему
люди вон денег хотят за это

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin: 0;
padding: 0;
font-size: 0;
}
</style>
<body>
<div style="width: 100vw;background: yellow;text-align: center;">

<div style="display: inline-block;width: 33vw;height: 33vh;border: red 1px solid;">
<div style="position:absolute;width: 32vw;font-size: calc( 1vw + 1vh ); text-align: right;margin: 0.5em;
margin-right: 1em;">
1111 1111 111 11 111 111 1111 1111 111 111 1111 1111 111
11 111 111 1111 1111 111 111 1111 1111 111 11 111 111 1111
1111 1111 111 11 111 111 1111 1111 111 111 1111 1111 111
11 111 111 1111 1111 111 111 1111 1111 111 11 111 111 1111
</div>
</div>
<div style="display: inline-block;width: 33vh;height: 33vh;border: red 1px solid;border-radius: 50%;">

</div>
<div style="display: inline-block;width: 33vw;height: 33vh;border: red 1px solid;">

</div>

</div>
<div style="width: 100vw;height: 33vh;background: cyan;text-align: center;">

<div style="display: inline-block;width: 33vw;height: 33vh;border: red 1px solid;">
<div style="position:absolute;font-size: 16px;">

</div>
</div>
<div style="display: inline-block;width: 33vh;height: 33vh;border: red 1px solid;border-radius: 50%;">

</div>
<div style="display: inline-block;width: 33vw;height: 33vh;border: red 1px solid;">
<div style="position:absolute;width: 32vw;font-size: calc( 1vw + 1vh ); text-align: left;margin: 0.5em;
margin-left: 0.5em;">
2222 2222 222 22 222 222 2222 2222 222 222 2222 2222 222
22 222 222 2222 2222 222 222 2222 2222 222 22 222 222 2222
2222 2222 222 22 222 222 2222 2222 222 222 2222 2222 222
22 222 222 2222 2222 222 222 2222 2222 222 22 222 222 2222
</div>
</div>
</div>
<div style="width: 100vw;height: 33vh;background: magenta;text-align: center;">

<div style="display: inline-block;width: 33vw;height: 33vh;border: red 1px solid;">
<div style="position:absolute;width: 32vw;font-size: calc( 1vw + 1vh ); text-align: right;margin: 0.5em;
margin-right: 1em;">
3333 3333 333 33 333 333 3333 3333 333 333 3333 3333 333
33 333 333 3333 3333 333 333 3333 3333 333 33 333 333 3333
3333 3333 333 33 333 333 3333 3333 333 333 3333 3333 333
33 333 333 3333 3333 333 333 3333 3333 333 33 333 333 3333
</div>
</div>
<div style="display: inline-block;width: 33vh;height: 33vh;border: red 1px solid;border-radius: 50%;">

</div>
<div style="display: inline-block;width: 33vw;height: 33vh;border: red 1px solid;">

</div>
</div>

</body>
</html>

⚤
Алексей А
Алексей А
66 306
Лучший ответ
Олег Галочкин Спасибо огромное. Очень выручили

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