Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Equilibrium Card

Louayโ€ข 40

@Louay003

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello Louay, congratulations for your new solution!

Here's some tips for you:

1.The NFT IMAGE is not displaying due an error to import.Note that if you're using the folder locally the live server recognizes the image location, but with a live solution you need to indicate where the image is. Remember, when the image is inside the repository folder use dot slash ./ and if is inside a subfolder use dot dot slash ../ If the image is the same folder of the html without folder just add normal path.

Here's the correct import: background-image: url(./image-equilibrium.jpg);

#image-container {
    width: 100%;
    height: 55%;
    margin-bottom: 15px;
    background-image: url(./image-equilibrium.jpg);
    background-size: cover;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

โœŒ๏ธ I hope this helps you and happy coding!

Marked as helpful

0
Louayโ€ข 40

@Louay003

Posted

Thank You So Much For The Note Sir.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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