<section class="experts">
<div class="experts__statistics">
<div class="experts__body">
<div class="experts__number">2m</div>
<div class="experts__value">Users</div>
</div>
<div class="experts__body">
<div class="experts__number">78</div>
<div class="experts__value">Countries</div>
</div>
<div class="experts__body">
<div class="experts__number">10.000+</div>
<div class="experts__value">Medical experts</div>
</div>
<div class="experts__decor experts__decor_one"></div>
<div class="experts__decor experts__decor_two"></div>
<div class="experts__decor experts__decor_three"></div>
</div>
<div class="container">
<div class="experts__block">
<div class="experts__title">Talk to<span>experts.</span></div>
<div class="experts__text">Book appointments or submit queries into thousands of forums concerning health
issues and prevention against noval Corona Virus.</div>
<div class="experts__button"><a href="" class="button">Features</a></div>
</div>
<div class="experts__img"><img src="./img/COroNA/Group 26.png" alt=""></div>
</div>
</section>
.experts {
background: #fafbfd;
&__statistics {
position: relative;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 auto;
height: 117px;
width: 654px;
background: #fff;
border-radius: 16px;
box-shadow: 0px 2px 24px 0px rgba(88, 126, 236, 0.15);
margin-bottom: 79.07px;
}
&__decor {
z-index: -1;
border-radius: 30px;
background: #ec5863;
&_one {
position: absolute;
top: 84.5px;
left: -28px;
height: 66px;
width: 66px;
transform: rotate(45deg);
border-radius: 16px;
}
&_two {
position: absolute;
top: -35px;
left: 200px;
height: 97px;
width: 97px;
transform: rotate(105deg);
}
&_three {
position: absolute;
top: 0px;
left: 590px;
width: 127.467px;
height: 127.467px;
transform: rotate(-30deg);
}
}
&__number {
color: #ec5863;
font-size: 36px;
letter-spacing: 5.04px;
font-family: Rubik-Bold;
font-weight: 700;
text-align: center;
}
&__value {
color: #000;
text-align: center;
letter-spacing: 4.07px;
font-family: Rubik-Bold;
font-size: 11px;
font-weight: 700;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
&__block {
margin-right: 104.83px;
}
&__title {
color: #000;
font-family: Rubik-bold;
font-size: 44px;
font-style: normal;
font-weight: 700;
line-height: 126%;
span {
color: #587eec;
}
margin-bottom: 12.07px;
}
&__text {
color: #616161;
font-family: Rubik-Regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 138.5%;
letter-spacing: 0.96px;
margin-bottom: 24px;
}
margin-bottom: 195.59px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="experts">
<div class="experts__statistics">
<div class="experts__bodies">
<div class="experts__body">
<div class="experts__number">2m</div>
<div class="experts__value">Users</div>
</div>
<div class="experts__body">
<div class="experts__number">78</div>
<div class="experts__value">Countries</div>
</div>
<div class="experts__body">
<div class="experts__number">10.000+</div>
<div class="experts__value">Medical experts</div>
</div>
</div>
<div class="experts__decor-items">
<div class="experts__decor experts__decor_one"></div>
<div class="experts__decor experts__decor_two"></div>
<div class="experts__decor experts__decor_three"></div>
</div>
</div>
<div class="container">
<div class="experts__block">
<div class="experts__title">Talk to<span> experts.</span></div>
<div class="experts__text">Book appointments or submit queries into thousands of forums concerning
health
issues and prevention against noval Corona Virus.</div>
<div class="experts__button"><a href="" class="button">Features</a></div>
</div>
<div class="experts__img"><img src="./img/COroNA/Group 26.png" alt=""></div>
</div>
</section>
</body>
</html>
.experts {
background: #fafbfd;
&__statistics {
position: relative;
top: 0;
left: 0;
margin: 0 auto;
height: 117px;
width: 654px;
margin-bottom: 79.07px;
}
&__bodies {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 100%;
background: #fff;
border-radius: 16px;
box-shadow: 0px 2px 24px 0px rgba(88, 126, 236, 0.15);
position: relative;
z-index: 1;
}
&__decor-items {
position: relative;
top: -100%;
z-index: 0;
}
&__decor {
border-radius: 30px;
background: #ec5863;
&_one {
position: absolute;
top: 84.5px;
left: -28px;
height: 66px;
width: 66px;
transform: rotate(45deg);
border-radius: 16px;
}
&_two {
position: absolute;
top: -35px;
left: 200px;
height: 97px;
width: 97px;
transform: rotate(105deg);
}
&_three {
position: absolute;
top: 0px;
left: 590px;
width: 127.467px;
height: 127.467px;
transform: rotate(-30deg);
}
}
&__number {
color: #ec5863;
font-size: 36px;
letter-spacing: 5.04px;
font-family: Rubik-Bold;
font-weight: 700;
text-align: center;
}
&__value {
color: #000;
text-align: center;
letter-spacing: 4.07px;
font-family: Rubik-Bold;
font-size: 11px;
font-weight: 700;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
&__block {
margin-right: 104.83px;
}
&__title {
color: #000;
font-family: Rubik-bold;
font-size: 44px;
font-style: normal;
font-weight: 700;
line-height: 126%;
span {
color: #587eec;
}
margin-bottom: 12.07px;
}
&__text {
color: #616161;
font-family: Rubik-Regular;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 138.5%;
letter-spacing: 0.96px;
margin-bottom: 24px;
}
margin-bottom: 195.59px;
}