QR-CODE-COMPONENT

Hello!! It looks great!! I have a few suggestions that might be useful for you:

1. Try not to you fixed sizes (like width: 375px at line 20 in the Style.css file), use max-width instead, this help you to have room for screen less than 375px.
2. In order to avoid the <br/> tag, you could use:
   1. Use padding in the div.card-text element, to narrow the space to achieve the line break
   2. Use a max-width with ch unit, and reduce the number of characters per line
3. If you want to use better names for the colors, you could CSS Custom Properties for them:

   :root {
      --clr-white: hsl(0, 0%, 100%);
      --clr-light-gray: hsl(212, 45%, 89%);
      --clr-grayish-blue: hsl(220, 15%, 55%);
      --clr-dark-blue: hsl(218, 44%, 22%);
   }
   

   and use them in their respected places:

   html {
      background-color: var(--clr-light-gray);
   }
   
   /* ... */
   
   h2 {
      padding-top: 20px;
      color: var(--clr-dark-blue);
   }
   
   p {
      color: var(--clr-grayish-blue);
   }
   
   /* ... */
   
   .attribute a {
      color: var(--clr-light-gray)
      /* ... */
   

   This way, you don't have to guess the color by HSL code

Hey @MauRamos0

1. Theres bugs in your Image elements

In your index.html code

<img src="/images/image-qr-code.png" class="card-image">

You should add period (.) into it

<img src="./images/image-qr-code.png" class="card-image">

2. Add semantic HTML

By using semantic HTML, you provide more meaning to the content of your website or web application, making it easier to understand for both humans and machines. You can add them in your code by following suggestion

• You can wrap your container code into main tag
• Update your h2 into h1 to define the main heading of a web page

before

<h2>
  Improve your front-end<br />
  skills by building projects
</h2>

after adding semantic tag

<h1>
  Improve your front-end<br />
  skills by building projects
</h1>

• Also you can wrap your attribution selector code into footer tag

before adding semantic tag

<div class="attribution">
      Challenge by
      .......
</div>

after adding semantic tag

<footer class="attribution">
      Challenge by
      .......
</footer >

I hope you find it useful! 😄

HAPPY CODING 👾

Some recommendations regarding your code could be of interest to you.

HTML

In order to fix the accessibility issues:

• You need to replace <div class="container"> with the <main class="container"> tag and <div class="attribution"> with the <footer class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
• Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you should use one <h1> element in the <main> tag. You can replace your <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your front-end skills by building projects</h1> element.

After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

CSS

• In order to center the card easily and correctly, you can use flexbox and min-height: 100vh to the body

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

• After adding them, you can remove margin from the .container because flexbox already makes the card centered and you don't need to use margin

.container {
  /* margin: 0 auto; */
  /* margin-top: 100px; */
}

• And you don't need .card because it doesn't work so you can remove it

/* 
.card {
  width: 375px;
  align-items: center;
} 
*/

Hope I am helpful. :)

Hello 👋, Congratulations on completing the challenge 🎉.

i have some feedback might can useful for you

the part why qr code image does'nt loaded because you implement wrong relative path. it's make the link actually refer to https://mauramos0.github.io/images/image-qr-code.png instead https://mauramos0.github.io/frontendchallenges/images/image-qr-code.png to fix it you can remove first slash

<img src="images/image-qr-code.png" class="card-image">

or add dot at first

<img src="./images/image-qr-code.png" class="card-image">

TIP: There are 2 types of paths, namely relative paths and absolute paths

Reference: here

anyways, overral is good, nice solution 🙌