All comments

• 

  Fahith K.R.M.•160

  @FahithKRMSubmitted 4 months ago

  

  Blog preview card Design

  1

  60
  

  P

  gatep5•20

  @gatep5Posted 4 months ago

  @Fahith K.R.M.

  Good work on this solution! Just keep in mind for the future that the design files provide the width for the main part of the card (384px) as well as the border radius (20px) that should be used. Fixing that width should help the main image inside the card be closer to the size of the design.

  Also, you can use an overall padding inside the main container to push the contents away from the edge. In this case the design file showed a 24px padding. Just be sure to change your box-sizing to border-box so that it will not grow the size of the container by adding the padding.

  2
• 

  Mudassir-Coder•160

  @Mudassir-CoderSubmitted 4 months ago

  What are you most proud of, and what would you do differently next time?

  I feel very comfortable to do this awesome projects

  

  I created this using the CSS BOX Model which is really helpful.

  1

  50
  

  P

  gatep5•20

  @gatep5Posted 4 months ago

  Hi @Mudassir-Coder!

  Good job on this first assignment! Few things that my help to get your code looking pixel perfect with the design:

  1. You can use flexbox to center the card element in the page by applying display: flex to your wrapper class and using justify-content: center, align-items: center, and height: 100vh.

  2. Make sure that the width of the main wrapper matches the width from the design file (320px). Also use padding in the wrapper to push the image and the text away from the edge. That way you don't have to specify a width for the img container.

  Hopefully you were able to look at the figma design file that was provided. I know I had to reference it to get the drop shadow correct. Great work!

  0