Responsive Stats preview card component

Community feedback

• 

  Mohammed Fakih•1,590

  @javascriptor1Posted over 1 year ago

  Hi Nikkaburger ,

  Nice work. Here are some notes which I hope would answer your questions :

  1- To center a card component or a div in the page , There are many methods you can follow to achieve that. Here are few of them :

  1- Using flexbox. Apply these properties on the body tag :

  ` body { display: flex; align-items: center; justify-content: center; min-height: 100vh; // if you overlook this property , it won't work }

  `

  2- using Grid. body { display: grid; place-content: center; min-height: 100vh; }

  3- Using absolute positioning. Create a div and give it following properties :

  ` div { position: absolute; inset: 0; margin: auto; width: 100px; height: 100px; }

  `

  2- to create overlay over an image , do the following : Create a div and add an image as child inside the div. then style as following ; ` .img-div { width: 100%; background-color: var(--soft-violet); border-top-left-radius: 8px; border-top-right-radius: 8px; }

  img { width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; mix-blend-mode: multiply; // change this property as per your need display: block;

  `

  Hope this would help

  Keep coding 🚀

  Marked as helpful

  0
• 

  Nikkaburger•140

  @NikkaburgerPosted over 1 year ago

  Thank you very helpful

  0