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.