Skip to content
OverviewSolutions
10
Comments
30

Madiha Khan

@madkn1311India420 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Madiha Khan•420
    @madkn1311

    Hello Raph,

    Great job on the design...!!!😊

    The image paths should have a forward slash instead of backward slash.

    Also, images should have an alt attribute for better accessibility for screen readers.

    Marked as helpful
  • Madiha Khan•420
    @madkn1311

    Hello Gigachad,

    Great job on the design...!!!

    You can use the icons from font-awesome. All you have to do is include the font-awesome cdn to access the icons and then you can customise them however you like.

    All the best for the next challenge. 😊

    Marked as helpful
  • Madiha Khan•420
    @madkn1311

    Hello Emir,

    You have done an amazing job with this challenge.

    The only thing I would suggest is that you should really read the report that is generated, as it helps a lot in improving the code.

    In your code, you have used the paragraph tag everywhere instead you should have used appropriate tags for headings, for instance, there should always be a level one heading that is h1 and they should be used in order such as h1, h2, so on and not randomly.

    Other than that I think it's perfect..!! 😊

    Marked as helpful
  • Madiha Khan•420
    @madkn1311

    Hello Fransisco,

    You have designed the card quite well.

    Here are some things that you need to change

    You need to remove the background from your html code and place it in the styling of the body.

    body
{
background-image: url("./images/pattern-background-desktop.svg");
}

    1. To center the card vertically use min-height: 100vh in the body instead of plain height as min-height allows responsive behaviour and adjusts according to the screen sizes.

    2. Always add an alt attribute to the images for better accessibility.

    All the best for the next challenge 😊

    Marked as helpful
  • Madiha Khan•420
    @madkn1311

    Hello Raph,

    The design of your card looks great. :)

    You need to include the following code in the body.

    body {
  background-image: url("../images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

    1. Since your css file is in a folder, you have to set the image path with ../ that states that the image is located in the folder one level up from the current folder.

    2. Using background-size: contain; makes the entire image fit to the background space.

    Marked as helpful
  • Madiha Khan•420
    @madkn1311

    Hello Ali,

    You have designed the card quite well. :)

    To fix the background you need to include the following code in the body.

    body{
    background-color: hsl(225, 100%, 94%);
    background-image: url("../images/pattern-background-desktop.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

    1. You were using background instead of background-image property. Also, you have to be careful in setting the path of the image. In your case your css file is in a folder so that is why you have to set the path with ../ as this states that the image is located in the folder one level up from the current folder.

    2. Using background-size: contain; ensures that the entire background image will fit the background area.

    To center the card you need to include the following code once again in the body.

    body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    1. We use min-height instead of plain height because it enables responsive behavior and it will adjust according to the screen size.

    2. Also remove the media query since it is not needed in this case, instead add max-width to the container class as it also enables responsiveness and adjusts the size accordingly.

    Marked as helpful
View more comments