So I'm in the process of styling my landing page with CSS based on a design I have in Figma. The page is using Bootstrap 5 as its framework, though I'm not sure if that detail matters in this case. I believe it's definitely doable, but I'm struggling to figure out the best approach to achieve the desired look.
Initially, I thought about creating three divs - Oval1, Oval2, and Oval3 - and positioning them relatively while using overflow hidden to clip them. However, resizing the ovals seems to affect the size of all the content within the column.
I know that it's possible to closely replicate the design, but I just need guidance on the most effective way to tackle this. Your assistance would be greatly appreciated. Take a look at these screenshots for reference: https://i.sstatic.net/Fyk18qBV.png
https://i.sstatic.net/8n7Yp5TK.png
<div class="col-lg-6 d-flex align-items-center login_screen_img">
<div class="text-white px-3 py-4 p-md-5 mx-md-4">
<div class="oval1"></div>
<div class="oval2"></div>
<h4 class="mb-4">We are more than just a company</h4>
<p class="small mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
.col-lg-6.d-flex.align-items-center.login_screen_img {
background-image: url(../img/login-pg-bg.png);
background-position: 45% 36%;
overflow: hidden;
}
/*shape overlays*/
.oval1 {
position: relative;
width: 319px;
height: 187px;
background: #4AC676;
opacity: 85%;
border-radius: 50%;
bottom: -330px;
left: -154px;
}
.oval2 {
position: relative;
width: 319px;
height: 187px;
background: #4AC676;
opacity: 85%;
border-radius: 50%;
bottom: -120px;
left: -100px;
}