<body>
<div class="main_section">
<!-- логотип и титульник -->
<div class="container main_section__conteiner-titul">
<div class="left_titul">
<div class="left_titul__first-elipce elipce">
<div class="elipce__substract substract-elipce">
<img src="/src/img/исходник 1_cut-photo.ru.png" alt="Лого">
</div>
</div>
</div>
<h1 class="main_section__titul titul-menu"><strong>Высшая Школа Гештальта</strong></h1>
</div>
<!-- блок левого контента первой секции -->
<div class="container main_section__content">
<div class="left_wrapper">
<div class="left_wrapper__block-title wrapper-title">
<h2><strong>НАБОР НОВОЙ ГРУППЫ В НИЖНЕМ НОВГОРОДЕ</strong></h2>
<div class="wrapper-title__elipce elipce-title"></div>
</div>
<div class="left_wrapper__border-text border-text">
<p>ПРОГРАММА<br />ПРОФЕССИОНАЛЬНЫХ<br />ТРЕНИНГОВ<br />“ГЕШТАЛЬТ-ПОДХОД:<br />ТЕОРИЯ И ПРАКТИКА”</p>
</div>
<div class="left-wrapper__block-nambers nambers">
<div class="nambers__items non">
<p><strong>+79036579275</strong>
</p>
<div class="non__elipce elipce-title"></div>
</div>
<div class="nambers__items non">
<p><strong>+79036579275</strong></p>
<div class="non__elipce elipce-title"></div>
</div>
</div>
<div class="left-wrapper__block-name name">
<div class="name__block name_name">
<p><strong>Олеся</strong></p>
</div>
<div class="name__block name_name">
<p><strong>Любовь</strong></p>
</div>
</div>
</div>
<!-- правая сторона контента -->
<div class="right-wrapper">
<div class="right-wrapper__border right_border">
<div class="right-wrapper__border-yelow border-month-start">
<div class="border-yelow__month month">
<h3>2023</h3>
<h4>Февраль</h4>
</div>
<div class="border-yelow__start border-start">
<div class="start-up">
<p>Старт программы</p>
</div>
<div class="start-down">
<p>ДЛЯ 1-2 СТУПЕНИ<br>(очно-зачное обучение)</p>
</div>
</div>
</div>
<!-- Кнопка связаться -->
<div class="right-wrapper__border-green border-gre">
<div class="right-wrapper__button button">
<a href="https://www.youtube.com/watch?v=C_ACRhB0nAw">Записаться</a>
<img src="/src/img/МЕСЕНДЖЕРЫ.svg" alt="Месенджер">
</div></a>
</div>
</div>
</div>
</div>
</div>
<code lang="css">
.container
width: 1140px
margin: 0 auto
.main_section
height: 800px
background: #3C3C3C
overflow: hidden
&__conteiner-titul
display: flex
flex-direction: row
margin-bottom: 140px
&__content
display: flex
flex-direction: row
.right-wrapper
margin-top: -70px
.left_titul
position: relative
top: -60px
&__first-elipce
position: absolute
&__substract
position: absolute
.elipce
width: 265px
height: 265px
border-radius: 50%
background: linear-gradient(180deg, #455004 20.83%, rgba(163, 190, 0, 0) 100%)
display: flex
justify-content: center
align-items: center
&__substract
width: 196.99px
height: 196.99px
border-radius: 50%
background: #FFFFFF
.substract-elipce
display: flex
justify-content: center
align-items: center
.titul-menu
margin: 0 auto
margin-top: 46px
font-size: 48px
background: linear-gradient(180deg, rgba(170, 192, 5, 0) 0%, #7C9100 28.13%)
-webkit-background-clip: text
-webkit-text-fill-color: transparent
font-family: 'Roboto'
line-height: 56px
.wrapper-title
position: relative
width: 553px
height: 48px
background: #FFF8F8
border-radius: 100px
margin: 0 auto
display: flex
justify-content: center
align-items: center
margin-bottom: 30px
h2
font-size: 20px
&__elipce
position: absolute
left: -10px
.elipce-title
width: 32.79px
height: 32.79px
border-radius: 50%
background: #A8C100
.border-text
position: relative
border: 7px solid transparent
width: 543px
height: 270px
margin-bottom: 23px
border-image: linear-gradient(#465004 , #BED803)
-moz-border-image: -moz-linear-gradient(#465004 , #BED803)
-webkit-border-image: -webkit-linear-gradient(#465004 , #BED803)
border-image-slice: 1
margin-right: 37px
p
margin-top: 20px
margin-left: 28px
font-family: 'Roboto'
font-style: normal
font-weight: 900
font-size: 40px
line-height: 47px
color: #A8C100
.nambers
position: relative
width: 543px
height: 50px
display: inline
margin: 0 auto
display: flex
justify-content: center
align-items: center
margin-left: -36px
&__items
width: 193.64px
height: 36.36px
background: #FFFFFF
border-radius: 100px
display: flex
justify-content: center
align-items: center
.non
position: relative
margin: 0 auto
display: flex
justify-content: center
align-items: center
margin-left: 70px
transition: 1s
&:hover
transform: scale(1.2)
&__elipce
position: absolute
left: -10px
p
font-size: 20px
.name
margin-top: -10px
width: 569px
height: 40px
display: flex
justify-content: center
align-items: center
.name_name
width: 193px
height: 38px
margin: 0 auto
display: flex
justify-content: center
align-items: center
&:first-child
margin-left: 30px
&:last-child
margin-left: -0px
p
font-size: 24px
color: #FFFFFF
.right_border
height: 500px
width: 550px
.border-month-start
height: 240px
width: 550px
display: flex
flex-direction: row
.border-yelow
display: flex
flex-direction: row
.border-gre
height: 200px
width: 520px
display: flex
justify-content: center
align-items: flex-end
.month
height: 200px
width: 150px
border-right: 1px solid #000000
margin-right: 12px
h3
margin-left: auto
margin-right: auto
width: 2em
margin-top: 60px
font-size: 50px
color: #A8C100
h4
margin-left: auto
margin-right: auto
width: 3.7em
font-size: 32px
color: #FFFFFF
.border-start
height: 200px
width: 350px
.start-up
height: 100px
width:350px
border-bottom: 1px solid #000000
display: flex
align-items: flex-end
p
margin-left: auto
margin-right: auto
font-size: 40px
color: #A8C100
margin-bottom: 5px
.start-down
height: 100px
width: 350px
display: flex
text-align: center
p
margin-top: 10px
font-size: 24px
margin-left: auto
margin-right: auto
color: #FFFFFF
.button
width: 462.88px
height: 102.99px
background: linear-gradient(180deg, #D2F200 -238.56%, #91A700 -138.56%)
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
border-radius: 100px
margin-bottom: 15px
display: flex
justify-content: center
flex-direction: row
align-items: center
transition: 1s
&:hover
transform: scale(1.2)
a
margin-left: 10px
font-size: 40px
color: #FFFFFF
margin-right: 40px
transition: 1s
&:hover
transform: scale(1.2)
a
text-decoration: none
</code>
