I’m trying to apply two different background colors to a subscription card. They are being applied correctly using ::before and ::after pseudo-elements, but the issue is that I want to apply a border radius to the end of the first background. I’ve tried multiple methods, but I’m still unable to apply it. Is there a way to achieve this? Thanks.
My currenct card:
Required:
<div className={styles.footer_first_box}>
<div className={styles.footer_first_box_inner}>
<span className={styles.footer_first_box_heading}>Subscribe</span>
<span className={styles.footer_first_box_content}>
To get latest information from us, and updated news.
</span>
<div className={styles.email_btn_div}>
<input
name="email"
id="email"
type="text"
className={styles.footer_email_input}
placeholder="Enter your email"
/>
<button className={styles.footer_primary_button}>Subscribe</button>
</div>
</div>
</div>
Scss:
.footer_first_box {
width: 80%;
height: 100%;
background-color: #17005a;
border-radius: $font-size-medium;
padding: 20px 40px 20px 40px;
position: relative;
@media (max-width: 640px) {
width: 100%;
padding: 20.15px;
border-radius: 13.44px;
}
@media (min-width: 641px) and (max-width: 1024px) {
width: 100%;
padding: 20.15px;
border-radius: 13.44px;
}
}
4