Building Stats card using html and css

Hello ZAID333SA,

Your Solution is good as you are just beginning. I am also myself not any expert but here are some feedback for you.

<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Lexend+Deca:[email protected]&display=swap"
  rel="stylesheet"
/>

in your importing part of the code, You Should import the local stylesheet last

<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Lexend+Deca:[email protected]&display=swap"
  rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />

like this. this helps if you want to overwrite any of the imported Css code.

If you are using flexbox then you can simply centre the container like this

body { background-color: hsl(233, 47%, 7%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }

By using absolute positioning you have to taken the element container out of the normal flow of html. So its kind of hard to make it responsive.

But here I Go, I will just show what I have updated in your code to make it more efficient and responsive.

Old -

.container { background-color: var(--Dark-desaturated-blue); display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); border-radius: 10px; overflow: hidden; }

Updated -

.container { background-color: var(--Dark-desaturated-blue); display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px; max-width: 1000px; width: 100%; height: 400px; overflow: hidden; }

Old -

.img-container { position: relative; flex-basis: 50%; }

Updated -

.img-container { position: relative; flex: 0 0 50%; }

Old -

.img-container img { height: 100%; overflow: hidden; }

Updated -

.img-container img { width: 100%; height: 100%; object-position: top; object-fit: cover; }

Old -

.content { min-width: 500px; padding: 60px; position: relative; }

Updated -

`.content { flex: 1; align-self: stretch;

display: flex; flex-direction: column; padding: 50px;

position: relative; }`

.content > p { color: var(--Slightly-transparent-white); line-height: 1.8; font-size: 15px; margin-bottom: 50px; }

Updated -

.content > p { color: var(--Slightly-transparent-white); line-height: 1.8; font-size: 15px; margin-bottom: auto; }

And now Finally for Responsive Design

Old -

@media (max-width: 767px) { .container { flex-direction: column-reverse; } .img-container img { width: 100%; } .content { text-align: center; } }

Updated -

@media screen and (max-width: 935px) { .content h1 { font-size: 30px; } } @media screen and (max-width: 935px) { .container { flex-direction: column-reverse; max-height: 100%; height: 1000px; max-width: 500px; width: 100%; margin: 50px 0; } .content > p { margin-bottom: 50px; } .img-container img { width: 100%; } .content { text-align: center; } .stats { flex-direction: column; } .stat:not(:last-child){ margin-bottom: 30px; } }

Thing that will help you improve your Css skills are

• Learn about Flexbox and its properties deeply
• Learn about responsive design
• Responsive Images
• BEM CSS

and That's all.

This is the first time I am giving feedback. I have put a lot of time in writing this so kindly read it. Hop that help.

-Peace out