CSSBattle Target#4

#css #webdev #beginners #programming

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

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.