@argelomnes
Posted
Hi Darshan,
This is a good start.
- Do you mean the notch? It would be similar to how use
border-radius
to your mobile container but only applying it to the bottom of the element. - You're almost there by using flex. I suggest using
input
instead ofp
and putting theimg
inside of abutton
. Also addflex:1
to input so it takes up the rest of the space.
aside: you missed the background from the design
Marked as helpful
@Darshan-Pandya10
Posted
@argelomnes thanks ! I didn't find any background design in my zip file. How? That's why I applied simple colour to it.And Sorry but can you please write the code for that notch.i am not getting it.
@argelomnes
Posted
@Darshan-Pandya10
If it's not included, my guess is the pill-looking images should be manually coded with hsl(270, 20%, 96%)
as the body
's background-color. The following is only an estimate so feel free to change the numbers. I'll leave its positioning to you.
.notch {
background-color: white;
width: 200px;
height: 30px;
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 0 0 1rem 1rem;
}
Marked as helpful
@Darshan-Pandya10
Posted
@argelomnes thanks man I really appreciate your support.i couldn't have done it without you.