Не пойму, как сделать сверстать правую часть экрана
Как сверстать часть, где круг на заднем плане, а слова "Пиши!" и т.д. на переднем. Круг у меня .circle, и он вообще не показывается почему то. А также, как сделать, чтобы он на заднем плане был?
body{
margin: 0;
box-sizing: border-box;
}
header{
display: flex;
}
.leftbg{
background: linear-gradient(117.75deg, #F33F3F 4.6%, rgba(187, 62, 3, 0.59) 94.28%);
width:45%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.rightbg{
background-color: #FFFEEC;
width:60%;
height: 100vh;
}
.circle{
border-radius: 100%;
background-color: rgb(161, 60, 60);
z-index:1;
width: 47.25%;
height: 47.25%;
}
.words span{
z-index:99
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>start</title>
</head>
<body>
<header class="header">
<div class="leftbg">
<svg width="419" height="180" viewBox="0 0 419 180" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
<g filter="url(#filter0_d_233_3)">
<path d="M71.08 58H83L92.12 114H83.32L81.72 102.88V103.04H71.72L70.12 114H61.96L71.08 58ZM80.68 95.44L76.76 67.76H76.6L72.76 95.44H80.68ZM102.789 58H116.229C120.603 58 123.883 59.1733 126.069 61.52C128.256 63.8667 129.349 67.3067 129.349 71.84V100.16C129.349 104.693 128.256 108.133 126.069 110.48C123.883 112.827 120.603 114 116.229 114H102.789V58ZM116.069 106C117.509 106 118.603 105.573 119.349 104.72C120.149 103.867 120.549 102.48 120.549 100.56V71.44C120.549 69.52 120.149 68.1333 119.349 67.28C118.603 66.4267 117.509 66 116.069 66H111.589V106H116.069ZM139.213 58H148.093L153.853 101.44H154.013L159.773 58H167.853L159.373 114H147.693L139.213 58ZM178.48 58H187.28V114H178.48V58ZM211.711 114.8C207.444 114.8 204.217 113.6 202.031 111.2C199.844 108.747 198.751 105.253 198.751 100.72V97.52H207.071V101.36C207.071 104.987 208.591 106.8 211.631 106.8C213.124 106.8 214.244 106.373 214.991 105.52C215.791 104.613 216.191 103.173 216.191 101.2C216.191 98.8533 215.657 96.8 214.591 95.04C213.524 93.2267 211.551 91.0667 208.671 88.56C205.044 85.36 202.511 82.48 201.071 79.92C199.631 77.3067 198.911 74.3733 198.911 71.12C198.911 66.6933 200.031 63.28 202.271 60.88C204.511 58.4267 207.764 57.2 212.031 57.2C216.244 57.2 219.417 58.4267 221.551 60.88C223.737 63.28 224.831 66.7467 224.831 71.28V73.6H216.511V70.72C216.511 68.8 216.137 67.4133 215.391 66.56C214.644 65.6533 213.551 65.2 212.111 65.2C209.177 65.2 207.711 66.9867 207.711 70.56C207.711 72.5867 208.244 74.48 209.311 76.24C210.431 78 212.431 80.1333 215.311 82.64C218.991 85.84 221.524 88.7467 222.911 91.36C224.297 93.9733 224.991 97.04 224.991 100.56C224.991 105.147 223.844 108.667 221.551 111.12C219.311 113.573 216.031 114.8 211.711 114.8ZM236.436 58H260.436V66H245.236V80.8H257.316V88.8H245.236V106H260.436V114H236.436V58ZM271.739 107.92C271.739 103.92 272.379 100.507 273.659 97.68C274.939 94.8 277.232 91.6267 280.539 88.16C283.792 84.6933 286.032 81.7333 287.259 79.28C288.539 76.8267 289.179 74.2667 289.179 71.6C289.179 69.2 288.779 67.5467 287.979 66.64C287.232 65.68 286.112 65.2 284.619 65.2C281.579 65.2 280.059 67.04 280.059 70.72V76.72H271.739V71.28C271.739 66.7467 272.859 63.28 275.099 60.88C277.339 58.4267 280.592 57.2 284.859 57.2C289.125 57.2 292.379 58.4267 294.619 60.88C296.859 63.28 297.979 66.7467 297.979 71.28C297.979 74.6933 297.152 78.0267 295.499 81.28C293.899 84.5333 291.099 88.2667 287.099 92.48C284.485 95.2533 282.725 97.52 281.819 99.28C280.912 100.987 280.459 102.827 280.459 104.8V106H297.179V114H271.739V107.92ZM310.33 105.52H318.81V114H310.33V105.52ZM344.528 114.8C340.208 114.8 336.901 113.573 334.608 111.12C332.315 108.667 331.168 105.2 331.168 100.72V71.28C331.168 66.8 332.315 63.3333 334.608 60.88C336.901 58.4267 340.208 57.2 344.528 57.2C348.848 57.2 352.155 58.4267 354.448 60.88C356.741 63.3333 357.888 66.8 357.888 71.28V100.72C357.888 105.2 356.741 108.667 354.448 111.12C352.155 113.573 348.848 114.8 344.528 114.8ZM344.528 106.8C347.568 106.8 349.088 104.96 349.088 101.28V70.72C349.088 67.04 347.568 65.2 344.528 65.2C341.488 65.2 339.968 67.04 339.968 70.72V101.28C339.968 104.96 341.488 106.8 344.528 106.8Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_233_3" x="0.959961" y="0.199997" width="417.928" height="179.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="30.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_233_3"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_233_3" result="shape"/>
</filter>
</defs>
</svg>
</div>
<div class="rightbg">
<div class="words">
<div class="circle"></div>
<span>Прочти!</span>
<span>Напиши!</span>
<span>Вдохновись!</span>
<span>Вдохновляй!</span>
</div>
<div class="dayadvise">
<span>Эдвайс дня:</span>
<div class="advise">
<div class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit”</div>
<div class="author">Amin Kipkeev</div>
</div>
</div>
</div>
</header>
</body>
</html>