CSSBattle Target#4

Hey everyone👋,
I am back with the CSSBattle Series✨!
This article is for Target#4 "Ups n Downs" on CSSBattle

The best approach I could come up till now is stated below.

<p><p id="b"><p><style>
body{
display:flex;
margin:134 50;
background:#62306D}
p{
width:100;height:100;
background:#F7EC7D;
border-radius:0 0 50% 50%}
#b{
transform:rotate(180deg);
position:relative;top:-100

This was my shortest solution condensing to 196 characters.

Another approach using the CSS grids is as follows

<p><p id="b"><p><style>
body{
margin:-16 50;
background:#62306D;
display:grid;
grid-template-rows:150px 150px;
}
p{
width:100;height:100;
background:#F7EC7D;
border-radius:0 0 50% 50%;
grid-row:2;
}
#b{
transform:rotate(180deg) translateY(100px);

Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.

Want to connect?

You can connect with me here