Please checkout my implementation.
I did not include mobile styles. I'm aware of this. Probably I'll be making those changes later. But you can feel free to checkout the Desktop version.
I did not use any css framework. I decided to write all my styles.
You can make this a bit more responsive on mobile
I was unable to find a solution for vertical/horizontal centre alignment without assigning height in css. Is it compulsory using height when alignment vertical/horizontal ?
Any suggestions on how I can improve are welcome!
To do the vertical and horizontal alignment you can use flex box set the body to a height of 100vh and align items center and justify content center this would do the trick e.g of the code
body {
display: flex;
Justify content: center;
align items: center;
height:100vh;
}
I was unable to find a solution for vertical/horizontal centre alignment without assigning height in css. Is it compulsory using height when alignment vertical/horizontal ?
Any suggestions on how I can improve are welcome!
On the mobile view there is an initial margin this can be removed by setting the root margin to 0 like this
* {
Margin:0;
}