I thought I could finish this in a few hours, so I thought then why not make it IE10 and IE11 compatible and why not not use flexbox and grid. I know it's kinda stupid. But, that's what I did. But it took me more than a day to complete it. So um... there's that. And oh Now I know that I need to be more grateful to flexbox and other modern css thingies. Gosh, without them things would be so damn hard. You have no idea how many hours I spent thinking about how to make the card both horizontally and vertically centered. No joke. However, I learned a lot in the process that I'm glad about. Like:
- How to use
tabindex
to make unfocusable elements focusable. - The slightly disappointing fact that you can't use ::pseudo classes (::before and ::after etc.) on elements like
<img>
,<br>
and<hr>
- The astounding discovery that there is in fact a
background-position
property in css. Thanks @Atharva-Shandilya for that. Hope it's okay that I snooped around your Github repo and profile without permission. - Reminding that I can use multiple box-shadows by separating them by commas.
- And finally I learned How the
top:50%
left:50%
transform: translate(-50%, -50%)
trick works.
I don't have a specific question to ask but, any feedback on the project or code would be greatly appreciated 😊.
And yeah there are some animations too!