Responsive card design

Community feedback

• 

  DocForLoop•630

  @DocForLoop

  Posted 10 months ago

  Hi,

  Welcome, I see some issues in your code here are my suggestions:

  • I would use semantic HTML , like main, section, footer
  • I would put every css rules to the separate css file
  • In figma design file there are the correct colors, fonts ,spacings that you can use
  • I would dowload the font files and in css I would use @font-face rules
  • Your h3 element set to display:flex, but it is unnecessary ,because it is not a flex container.

  I hope it will be helpful. All the best!

  01

  Marked as helpful
• 

  Wisdom•230

  @Unifies

  Posted 10 months ago

  Hi Ebunoluwa, nice work!

  It seems though that you designed this without looking through the style guide. We are supposed to match the colors as much as possible but your chosen colors, background colors and fonts are different from what was given - please check the style guide for every challenge you work on in order to recreate the design as exact as possible.

  Given fonts and colors for this challenge were this:

  • The font family is the Outfit font - Family: Outfit. Grab the embed code for the font from this link and include in your HTML file.
  • White: hsl(0, 0%, 100%) [card container]
  • Slate 300: hsl(212, 45%, 89%) [body background color]
  • Slate 500: hsl(216, 15%, 48%) [color for light text]
  • Slate 900: hsl(218, 44%, 22%) [font color for bold text]
  • Weights: 400, 700

  -- Give a box shadow to the container div and some margin-bottom before the attributions for a cleaner result.

  In order to create a clean, reusable code though, it is recommended to create colors, fonts, and sizes as variables like so:

  :root {
      /* Colors */
      --White: hsl(0, 0%, 100%);
      --Slate-300: hsl(212, 45%, 89%);
      --Slate-500: hsl(216, 15%, 48%);
      --Slate-900: hsl(218, 44%, 22%);
      /* Fonts */
      --fs-h2: 0.95rem;
      --fs-p: 0.85rem;
      --fw-400: 400;
      --fw-700: 700;
  }
  

  and then you can use them for styling like background-color: var(--Slate-300);.

  Reason being: These things may change in a real project, so when it does all you have to do is change them from the root instead of searching in the whole css file/s. --Slate-300 is a custom name, you can name it anything you want. But for readability giving it a meaningful name would be better.

  Other little code changes you might consider making:

  Delete the imported comments in the code that only tell you what to do and move the attribution styling to the external CSS file and delete that block of code from your HTML file

  These don't affect your code in any way but will be a good edit for a cleaner code.

  01