NFT Preview Card

Hi Brian McDowell, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

Example:

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

To make it easier to make the project responsive, prefer to use max-width rather than width, by doing this we will have more responsive content on smaller screens!

The rest is great!

I hope it helps... 👍

well done🤖. Now you just have to put the <img> and <p> tags into a separate div and then give the flex. it will work. and don't give too much margin. see the reference image and give it accordingly.

Hello, Brian! 👋

In this case, use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.

For your information, anchor tags are for navigation. The button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.

Some suggestions regarding alternative text:

• The alternative text for the Equilibrium image should not be hyphenated. Alternative text is used by screen readers to pronounce the image to the users to describe the image. So, it should be human-readable.
• Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
• For your information, decorative images are images that don't need to exist on the page. They don't add any information and serve only aesthetic purposes.
• Alternative text for the avatar should be the person's name.

For the hover effect of the Equilibrium image, you can use CSS to create the overlay. So, for the HTML the img is wrapped with a. Then, use pseudo-element and background properties to create the overlay. You can see my solution for your reference.

NFT Card Preview Component | HTML CSS Sass coding challenge solution

I hope this helps. Happy coding!