HTML | CSS | Flexbox

Hello Dwayne, Great as usual, my friend. Keep up the good work.

• HTML:

I have identified a small issue. There are 2 missing closing </div> tags right before </main>.

Here is the updated code: Just add </div> </div> before </main>.

• CSS:

In the :root, you have a typo in the variable --spacing-small. You wrote 0.5erm instead of 0.5rem.

Here is the updated code: --spacing-small: 0.5rem;

I hope you find this helpful. Thanks.

Greetings! you have done a great job 😎

📌 Some suggestions

• You can use the gap property in the body to separate your main from your footer
• You can apply display: block to the image to remove the white space generated underneath
• I'm not sure if an a can go inside a picture tag. You could better use a div for this case

Hello Dwayne!

Your project looks great!

It's quite a challenge to add that hover effect properly. I noticed that yours is missing the eye image when hovered over. Here's how you can do it:

HTML

<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
  <div class="icon">
    <img src="images/icon-view.svg" alt="icon-view" class="icon-view">
  </div>

CSS

.pic {
   width: 300px;
   background: url('images/icon-view.svg') center center no-repeat;
   background-color: $Cyan-hover;
   background-size: cover;
   margin: auto;
   border-radius: 10px;
}
.icon {
   display: grid;
   justify-content: center;
   align-items: center;
   position: absolute;
   opacity: 0;
   background-color: $Cyan-hover;
   width: 300px;
   height: 300px;
   border-radius: 10px;
}
icon:hover {
   opacity: .5;
   cursor: pointer;
}

Just don't forget to change the class names to match yours.

I hope it helps!

Other than that, you did an excelent job!