DEV Community

Prakhar Tandon
Prakhar Tandon

Posted on

CSSBattle Target#4

Hey everyone👋,
I am back with the CSSBattle Series✨!

This article is for Target#4 "Ups n Downs" on CSSBattle

Target 4 Ups n Downs

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)