Как бы вы сверстали следующий блок?

Question

Интересно мнение других, чтобы придти к лучшему варианту. Хотел сделать эллипс в качестве background-image (картинка имеется в макете), парня вставить с помощью position: absolute, а текст просто в div

Был и второй вариант, чтобы картинка была в одном div с текстом, поставить их с помощью flex

В общем это просто 2 идеи. Очень хочется узнать, как вообще лучше в точки зрения корректности? Есть ли какие-то стандарты/советы?

P.S. Как доп вопрос, как можно нарисовать такой почти эллипс красивый?

Прикрепляю код:

sass

    main
        position: relative
        height: 768px
    
        background: #fbfbfb url(../img/hero/ellipse.png) no-repeat bottom right 
        
    .hero
        &-block
            
            display: flex
        &__title
            font-size: 80px
            color: #1f1f24
            margin-top: 0px
            margin-bottom: 22px
            line-height: 1
        &__subtitle
            font-size: 25px
            color: #8993ad
        &-image
            position: absolute
            right: 300px
            bottom: 0

html

    <main>
            <header class="header">
                <div class="container">
                    <div class="header-block">
                        <nav class="main-nav">
                            <ul class="main-nav__list">
                                <li class="main-nav__item">Услуги</li>
                                <li class="main-nav__item">Портфолио</li>
                                <li class="main-nav__item">Стоимость</li>
                            </ul>
                        </nav>
                        <div class="main-text">
                            <a class="main-text__tel" href="tel +7 (499) 995-55-77:">+7 (499) 995-55-77</a>
                            <button class="button main-text__button">Заказать звонок</button>
                        </div>
                    </div>
    
                </div>
            </header>
    
            <section class="hero">
                <div class="container">
                    <div class="hero-block">
                        <div class="hero-text">
                            <h1 class="hero__title">Дмитрий Алексеев</h1>
                            <span class="hero__subtitle">Frontent-разработчик и веб-верстальщик</span>
                        </div>
    
                    </div>
    
    
                </div>
    
            </section>
            <div class="hero-image"><img src="img/hero/man.png" alt=""></div>
        </main>

Answer 1

Использована технология SVG, иконки от font-awesome

Смотреть на весь экран

Вот здесь доделанная версия: https://codepen.io/topicstarter/pen/MWaeGjV

* {
  text-decoration: none;
  box-sizing: border-box;
}

.items {
  position: relative;
}

.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.top a {
  margin-right: 14px;
  position: relative;
}

.btn {
  color: red;
  border: 1px solid;
  padding: 10px 16px;
}

.tel {
  color: #000;
}

a.active {
  color: red;
}

a.active:after {
  content: "";
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  width: 100%;
  height: 2px;
  background: red;
}

@media (max-width: 768px) {
  .top a {
    font-size: 14px;
  }
  .btn {
    padding: 4px 8px;
  }
  a.active:after {
    top: calc(100% + 5px);
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="items">
  <svg viewBox="0 0 302 152" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style>
      rect{transform-origin: center;transform: rotate(45deg)}
     .fa{font-size: 10px;}
    </style>
    <linearGradient id="lg" x1="0" x2="0" y1="0" y2="1">
        <stop stop-color="#ff8560" offset="30%" />
        <stop stop-color="#ff3194" offset="50%" />
   </linearGradient>
  </defs>
  <rect width="150" height="150" x="200" y="-20" ry="60" fill="url(#lg)"/>
  <image href="https://purepng.com/public/uploads/medium/purepng.com-business-manbusinessmanbusinesssalesrevenuegenerating-1421526838123dykkm.png"
           width="70px" height="220px" x="190" y="-10"/>
  
  <text x="80" y="80" text-anchor="middle" font-size="14px" font-weight="700">
    Дмитрий Алексеев
  </text>
  <text x="72" y="93" text-anchor="middle" font-size="6px" fill="#ccc">
    Frontend разработчик и веб верстальщик
  </text>

  <text class="fa" x="40" y="40" font-size="3px" fill="url(#lg)"></text>
  <text class="fa" x="2" y="80" font-size="3px" fill="url(#lg)"></text>
  <text class="fa" x="30" y="140" font-size="3px" fill="url(#lg)"></text>
  <text class="fa" x="150" y="60" font-size="3px" fill="url(#lg)"></text>
  <text class="fa" x="160" y="100" font-size="3px" fill="url(#lg)"></text>
</svg>

  <div class="top">
    <p>
      <a href="#">Услуги</a>
      <a href="#" class="active">Портфолио</a>
      <a href="#">Стоимость</a>
    </p>
    <div class="about">
      <a href="#" class="tel">+7(499) 995-55-77</a>
      <a href="#" class="btn"> Заказать звонок</a>
    </div>
    <!--about-->
  </div>
  <!--top-->
</div>
<!--items-->

БЛОГ НА HUSL

Как бы вы сверстали следующий блок?

Ответы (1 шт):