Responsive result page using css flexbox

Community feedback

• 

  Saad Hisham•1,750

  @Saad-HishamPosted over 1 year ago

  Hi there! Excellent work on your project✨ I have a few tips that could make it even better.

  First, for accessibility, it's better to wrap your card in a <main> tag instead of a <div>

  Secondly, to match the design, it's better to use the font specified in the style guide file. Here's how you can add fonts to your site:

  1:Find a suitable font: You can use any font you like, but make sure it's licensed for web use. Google Fonts is a popular resource for free web fonts.
  

  2:Include the font in your HTML file: You can do this using the link tag in the head section of your HTML file. Here's an example:
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  

  3:Use the font in your CSS: Once you've included the font in your HTML file, you can use it in your CSS using the font-family property. For example:
  body {
    font-family: 'Open Sans', sans-serif;
  }
  

  Another tip is to change the hover color to a gradient to match the design. You can do this by adding a linear-gradient property to the background property of the :hover state. For example:

  .button:hover {
    background: linear-gradient(180deg, rgba(103,67,255,1) 34%, rgba(49,44,235,1) 100%);
  }
  

  Lastly, it's important to use the correct sizes. You did a great job relying on your eyes, but using graphics software like Photoshop can help you get the correct sizes.

  Overall, it was a great job. Keep it up 🔥

  Marked as helpful

  0

  ---

  

  Abolude Abdullah•80

  @Abolude30Posted over 1 year ago

  @Saad-Hisham thanks a lot. I really appreciate the feedback, being a newbie I would appreciate all the help I could get.

  1