Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Sam-52• 20

    @Sam-52

    Submitted

    This is my first solotion and first project. I do not know if this is the best way to fix this problem. I think location of the paragraph text below is not good enough. Any feedback is welcome.

    Desktop Solotion for QR Code Challenge

    2

    CamronWithrow• 120

    @CamronWithrow

    Posted

    Hi!

    I have a couple of comments that may help you out with your code.

    • The title for the card should be in an <h1> tag instead of an <h2>. Generally, you want to have a sequence of headings starting with <h1> and without skipping any headings below (so, you don't want something like <h1> followed by <h3>, or an <h2> without an <h1> above it). You can use CSS to style your <h1> so it looks like the design.
    • You also want to avoid using <br> to match the line breaks in the design. You can get the lines to break in the same place using the font size and the width of the card (your <div class="image">).
    • You can get the card centered in the browser viewport by making your <body> a flex container. In your main.css, you could add
    body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Then you wouldn't need to manually position the card.

    I hope this helps!

    Marked as helpful

    1
  • CamronWithrow• 120

    @CamronWithrow

    Posted

    Hi!

    I used flexbox as well for this challenge. To get the red "unread-notification" icon, I used ::after to style an icon after the notification message.

    Using your classes, I think it would look something like this:

    .unread .notiftext::after { content: ""; height: 0.25rem; width: 0.25rem; background-color: red; border-radius: 50%; }

    Marked as helpful

    0