@PhoenixDev22
Posted
Hello @chiamaka-ugwu ,
I have some suggestions regarding your solution :
-
You can use
<ul>to wrap the statsclass="stats". Numbers don't make sense as h1s. -
The number and word have to be read together to make sense so need to be in the same meaningful element. so only a
spanor maybestrongtag needs to wrap the numbers. the words likecompaniesshould not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item). -
To improve the image overlay effect, I would prefer to leave the image in html and use blend modes. you can use background color, Use mix- blend mode and opacity to make it more like the design.
-
To center the component on the middle of the page , you can use the flexbox properties and
min-height: 100vhfor the<body>.
min-height: 100vh;/*using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport.Thi s also allows the body to to grow taller if the content outgrows the visible page.*/
}
-
width: 75%;Using percentages % for width can cause a lot of problem , consider usingmax-widthto the component. -
Remove the height
height: 400px;you almost never want to set it . let the content define the height . -
Use
min-heightinstead on the background image half. -
border-radiusandoverflow hiddento the container . -
You should use
emandremunits .Bothemandremare flexible, Usingpxwon't allow the user to control the font size based on their needs. -
Never use
pxfor font size.
Overall , your solution is good, Hopefully this feedback helps.
Marked as helpful
