Building Stats card using html and css

Community feedback

• 

  Rahul Kumar•570

  @rahulkumar215Posted 9 months ago

  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

  Marked as helpful

  0

  ---

  

  zaid333sa•180

  @zaid333saPosted 9 months ago

  Hi rahul, and thanks for the comment, it's really helpfull and I appretiate your time writing the comment, I will update my code and fix the issues 😅@rahulkumar215

  1