@xiibrightside
Posted
Hello, congratulations on attempting this challenge, here are a few tips that should help resolve your issues :-
-
You should give the background color ( Pale Blue ) value to the body tag not the container class so that the background Pale Blue covers the entire screen.
-
You also wanna center the container div, use either of the two code snippets below to center it properly
- for wrapper element
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);or - for the body tag
display: flex; align-items: center; justify-content: center; height: calc(100vh + 25px);the use of either depends on whether you want a specific div centered or all the elements on the screen centered.
-
The box had a shadow around it, use the box-shadow property to get that effect
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; -
And lastly avoid using too many divs, a container was more than enough for this project the rest of the elements i.e. the image( QR code ), the heading and the para can all be styled without having to use wrapper divs around them.
Goodluck with your future projects !!
Marked as helpful
