NFT Preview Card Component

Hello Romana

Great work completely the challenge!!

I've got some observations with your code.

1. You created a style.css file and placed it in the design folder. I would recommend creating a separate folder called css for all your stylesheets moving forward. This would make your code more accessible and easier to work on by other programmers in a team.

2. You forgot a piece of style in the head section of your html code. Check the head section of your code to move it and put it in your style sheets instead.

I suggest moving it to the style.css file you created and remove it from the html file since you already created an external stylesheet.

1. This is about your active state. I noticed that on hover your image doesn't show the overlay and the icon-view. It was quite a challenge for me to do it initially but it is quite easy now. All you have to do is add the following codes to your html and css files.

On the html document do this:

Add a div with class overlay to overlay the color And add the icon-view.svg found in images folder inside the div

      <div class="imageContainer">
        <img src="./images/image-equilibrium.jpg" alt="image-equilibrium" />
/* add the overlay div and inside add the icon-view icon */
        <div class="overlay">
          <img class="icon-view" src="images/icon-view.svg" alt="icon-view">
        </div>
      </div>

In the css document add the following code to display the overlay and icon-view on hover

/* make the image container position: relative. this will make it possible to have an overlay on it */
      .imageContainer {
        position: relative;
      }

/* make the overlay div absolute position to have it move around to where you want */
      .overlay {
        position: absolute;
        display: none;
        background-color: hsla(178, 100%, 50%, 0.1);
        top: 0;
        left: 0;
        border-radius: 10px;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

/* this will position the icon view right in the center of the overlay div */
      .icon-view {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }

/* finally this will reveal the overlay and its content on hover */
      .imageContainer:hover .overlay {
        display: block;
      }

1. Finally I also noticed there's no active state for the h1 content "Equilibrium" and the name of the creator which you enclosed in a span

You can easily fix that by creating a :hover state for both of them

h1:hover {
cursor: pointer;
 color: hsl(178, 100%, 50%);
}

span.author {
cursor: pointer;
color: hsl(178, 100%, 50%);
}

I hope this helps. Have a great one!!!

there is no need to give the body a margin value.

To center the main on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

You forgot to add the hover effect to the design.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING