Preview Card Challenge

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 4 years ago

  Hi,

  It looks like you need to do quite a bit more work on this I'm afraid. Here are some suggestions

  • position centrally using flexbox / grid, not by using margins.
  • once that's done, add a little padding to the outer wrapper to stop content from hitting the sides
  • don't use width 60% on the component. Instead, give it a max-width in rem/px
  • Similar on each flex child. You don't need widths on those. Flex children can manage their sizing with flex-grow -shrink -basis if needed, or properties like min-/max- width
  • change the colors and sizes to match the design
  • font-family should include a fallback in the stack, not just one family name
  • you're mis-using ul/li elements in this. Each pair like '10K companies' could be one list item, not two. If using a list on here, you should only have one unordered list in the whole component. You can use spans to wrap the number and word separately to style if you want
  • try to use margin in only one direction (mostly) on your child elements like paragraphs headings etc. You will find spacings easier to control
  • images have to have alt text
  • font size must never be in px. You need to convert to rem (the font size you want / 16)
  • looks like border radius is missing. It can be on the component with overflow hidden set
  • to get the image looking closer, make it less opaque and add mix-blend-mode multiply

  Good luck

  00
• 

  Gilang Aditya•425

  @madegilangaditya

  Posted about 4 years ago

  Hi, well done for your first challenge, I have little suggestion for your container border radius. Instead of put it on every div, better put in main class div and add overflow:hidden so your image will not overlap your main div border radius

  00
• 

  Mike Doughty•25

  @YekimCodes

  Posted about 4 years ago

  Nice work!!

  00