@dmitriu256

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

Как правильно сверстать синий фон у картинки?
609d20560a003261667211.png
Вариант 1
<section class="main">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="main-text">
                    <span class="main-text__subtitle">Welcome to Dental Clinic</span>
                    <h1 class="main-text__title">Professional,Warm and friendly Dental care for you</h1>
                    <p class="main-text__descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc odio in et, lectus sit lorem id integer.</p>
                    <button class="button">Make Appointment</button>
                </div>
            </div>
            <!-- /.col-6 -->
            <div class="col-6">
                <div class="main-img">
                    <img src="img/main/dental-main.png" alt="Dental-Main">
                </div>
            </div>
        </div>
    </div>
</section>


.main
  position: relative
  padding: 191px 0 101px 0
  border: 2px solid yellow
  background: $title-color-light
  z-index: 1
  overflow-x: hidden
  &::before
    display: block
    position: absolute
    content: ''
    width: 740px
    height: 740px
    top: 0
    right: 0
    margin-right: -130px
    margin-top: -101px
    background: $active-color
    border-radius: 50%
    z-index: -5

Вариант 2
Вместо использования main::after повесить два слоя (картинка + синий круг) фоном к секции.
.main
  position: relative
  padding: 191px 0 101px 0
  border: 2px solid yellow
  background: $title-color-light url("../img/main/Group 415.png") top 50% right 0 no-repeat
  background-size: 45%
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 1
budfy
@budfy
Верстальщик головой
Как вариант, для .main-img задать псевдоэлемент и спозиционировать его абсолютно.
Ответ написан
Ваш ответ на вопрос

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

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