HTML and CSS only

Hi,

I'm not sure why the project has such a complex set up? You are calling render blocking js in the document head, which doesn't seem to be being used. I recommend you remove that.

I also think you should take another pass at this challenge tbh. There is a quite a lot of learning points that need addressing before moving on.

On mobile for me, things are not positioned right and there is loads of scroll in all directions

I suggest

• remove excessive divs in the html that aren't needed for this layout
• semantic html - use meaningful elements for the stats. Numbers don't make sense as headings, and they need to be in the same meaningful element as the word that follows them
• use css to capitalise text, don't write it like that in html
• remove all position absolutes and transforms. Create the layout with flexbox. You'll find it easiest if you style mobile first
• remove large paddings and margins
• change units in css - font sizes must never be in px, use rem/em; line-height should be unitless like 1.5;
• remove all the widths and heights. You won't need almost all of them. Just a max-width on the card, min-height on the image, maybe flex-basis 50% on desktop.
• remove visibility hidden from attribution

I hope these suggestions help your learning

By the looks of it you've tried to use transform to centre your container. You'd need to include this i believe:

position: absolute;
top: 50%;
left: 50%
transform: translate(-50%, -50%);

Your design looks very good. The only thing remaining is to center it, like @Gascoigne09 said.

Other thing that you can do is use flexbox on the body. Something like this should work:

body{
   display: flex;
   align-items: center;
   justify-content: center;
}

Let me know if this works for you. Keep coding and happy coding! =D