@brasspetals
Posted
Hi, Artem! Great job on this challenge, and big kudos for finding a no JS solution!
In order to make it more "pixel-perfect", the first thing you could do is to center the whole FAQ card on the page. To do this with regular CSS, I'd first set the min-height: 100vh
in your body
. Then in your container change position
to absolute
and add the following:
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
You could also add the checked
attribute to the input of your second question, so that it's open on load as in the design.
@ArtemPonomarenko
Posted
@brasspetals Many thanks for the tips! Will implement in my next challenge! Cheers
@ApplePieGiraffe
Posted
@ArtemPonomarenko
Hey, Artem Ponomarenko!
Yes, great job!
Just letting you know another way you could center the accordion (in addition to nice way brasspetals explained) would be to set the display
property of the body
to flex
and then set its align-items
and justify-content
properties to center
.
Also, you could match your solution a little more closely to the original design by changing the direction of the gradient to top left
or something.
There are many great ways to do the same things in CSS!
Keep coding (and happy coding, too)!
@ArtemPonomarenko
Posted
@ApplePieGiraffe Thank you, much appreciated!