Skip to content
Submitted 2 months ago

Equilibrium Card Page Using CSS Flex

Nafis Sazzad Niloy•150
@methane-js
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud because I have successfully learned how to display an image on the hover of an another image from this project

What challenges did you encounter, and how did you overcome them?

The challenge was to display the eye icon with a cyan background on the hover of the equilibrium's image.

But when I used the position: absolute property with flexbox, I easily done the task.

What specific areas of your project would you like help with?

If the code can be shorten, please tell me.

Community feedback

  • Marzia Jalili•4,230
    @MarziaJaliliPosted 2 months ago

    Hi there!

    Hope you're having a great day.

    Here's how you can get the font "Outfit" for the project:

    • The reason it doesn't apply the font despite having the line font-family: "Outfit", sans-serif in the body selector is because you haven't linked the font to the project from Google.

    • Set the code below in the style.css file to get the job done:

    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap');

    This ensures that the project will use the specified font.

    Other than this the project looks outstanding!

    Keep up the great work 😎

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord