Hana

Hi txosca.

You provided a creative solution for hovering the image. However, I think its better solution to use pseudo-elements ::before and ::after. This way the hover effect will always appear over the image. You can check out my codepen to study ::before/::after here. Try adding the class for the div containing the image and use something like the code below.

Also I dont think its a good idea to mix in-line and external css in one project. It creates a big mess.

I hope this helps!

.div-image {
  position: relative;
}

.div-image:hover::after {
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background-color: hsla(178, 100%, 50%, 0.7);
}

.div-image:hover::before {
  content:"";
  position: absolute;
  inset: 0;
  background-image: url(images/icon-view.svg);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100;
}

Hi leverh, nice job!

You wrongly placed the end of the </div> in your html (you meant it under the attribution?) - I think its the root of your problems.

I would place the attribution outside of the main section, and create a separate footer containing it. Then, you should remove "display: flex" and "align-items:center" from the body tag and place them in the .main tag. This way your footer will appear at the end at all screen-sizes and will be not affected by the flexbox.

Also, you should remove .card {"margin-top: 18rem"} and .main {"height:100vh} from your media (this crops your content only on the height of mobile screen).

Suggestions for accesibility:

• instead of <section class="main>, use just <main> tag;

Hope this helps!

Hi Osama, nice job!

When you use "%" on width, the card will shrink on smaller screens. Instead, you can use "rem" - then the cards width will remain the same even on smaller screens, so you wont need any special media queries for responsiveness.

Other suggestions:

• use "rem" istead of "px" for "font-size", so the users can change it in their browsers - its considered a better habit for accesibility;

• its better to use semantic elements instead of non-semantic, so you should use <main> instead of <div>;

• headings should start at <h1> level, also the document should contain at least one level-one heading, so you should use <h1> instead of <h2>;

Keep up the good work! ☺

Hi Jimmy, nice job!

My suggestions:

• You can add multiple classes in "element.classList.add()" or "element.classList.remove()", so your JS code will be a little bit shorter;

• when there is no text content in the <button> tag, you should add the "aria-label" to label the element or "aria-labelledby" referencing to some other element with accesible name;

• there are no margins around the content in the design;

Other than that your solution is great, keep up the good work!

Hi Tomasso, nice job!

The main difference between ids and classes is that id can be used only on one element, while classes can be use for one ore more elements. The second thing is that ids are more specific, so they take precedence in your css. Generally classes are more common, because you can reuse them on other elements in greater projects.

Other suggestions:

• you should prefer semantic elements against non-semantic, so use <main> instead of <div>;

• the document should have at least one <h1> landmark, so use <h1> on the heading instead of <p>;

• the shadow around the card appears to be a little bit lighter than your solution, also the heading has a greater "font-weight"

Keep up the good work!