Skip to content
Submitted over 1 year ago

NFT-preview-card HTML and Vanilla CS

shalomkerry•260
@shalomkerry
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

it took me more time than I thought. getting the image hover effect took time. i learnt I can use the link tag 'a' to manipulate it which became really handy. Another thing I struggled with was naming CSS. I figured it would be good to learn naming in my current beggining steps will benefit me. I found the BEM method while searching for the best method I might have to learn it before learning other challenges.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Alysson Gomes•470
    @EONRaider

    Hello. Take a look at CUBE CSS if you're interested in methodology. You can still use BEM along with it but it will also help you structure your code.

    Marked as helpful
  • Marcos Travaglini•6,210
    @Blackpachamame

    Greetings! you have done a great job 😎

    📌 Some suggestions

    • To improve the semantics of your HTML, you can change your <div class="attribution"> to a <footer class="attribution">
    • For what purpose have you placed your image in dropbox and then called it from your site? This will only make the image take longer to load. You just needed to import it from its folder like this: src="./image-equilibrium.jpg"
    • Same for avatar image: src="./image-avatar.png"
    • Add a padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same result
    Marked as helpful

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