Skip to content
Submitted almost 3 years ago

NFT preview card component

bem, sass/scss
Galina McKoy•150
@GalinaM-G
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, I would really appreciate if someone would help me to find out:

  1. I haven't found the way to apply the transition property to card image in the active state. Could you direct me how to do it correctly, please?

  2. Are there some other ways to separate two span elements so they stick to oposite sides?

  3. What is the best way to add fonts to a project? @import, link or @font-face?

Thank you very much in advance! Best,

Galina

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Galina McKoy! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    Regarding the hover effect of the NFT image, I would recommend getting the HTML right first. So, I suggest fixing the alternative text of the image. When I was doing this challenge, I made the anchor tag navigate to the Equilibrium image. So, the alternative text was "Preview Equilibrium". This way, the screenreader users will know that if they click the image then it will allow them to preview the image.

    Now for the overlay:

    • I suggest using pseudo-elements rather using HTML elements. This way, the HTML markup doesn't contain decorative elements.
    • Then, create a pseudo-element from the interactive element.
    • After that, make the pseudo-element cover the entire image.
    • Then, for the :hover effect (a:hover::after), use background properties to show the eye icon and the cyan background color.
    • Lastly, for the cyan background color I suggest using the hsla color format. Then, for the alpha value, reduce it to 0.6.

    For your second question, I would assume that you are talking about the two span elements inside the card__info. If that's the case then using flexbox will be my recommendation. But, I would suggest swapping the span elements with paragraph elements instead. Always wrap text content with a meaningful element.

    For importing font family from Google Fonts, I suggest using link tags instead of @import. By using link tags the loading speed of the site would be faster than using @import. It's because, with @import inside the stylesheet, it will make the browser has to download another stylesheet inside the stylesheet. While using link, the browser can download both stylesheets without having to wait until the first stylesheet is finished. I suggest taking a look at the waterfall at the Network tab to understand this.

    That's it! I hope you find this useful! 🙂

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas

    Hello Galina, congratulations for your solution!

    Answering your question:

    In my opinion the best way to import font is by using @import in the CSS but the method that load the font faster it's inside the html through <link>. Here's a good article about it: https://css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them/ To add the transition add to the parent element transition: all ease 0.3s for a smooth transition.

    Hope this helps, happy coding

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Galina. Congratulations on finishing the challenge.

    For your first question, add a pseudo element to .card__link and add some styling to it:

    .card__link {
    position: relative;
}
.card__link::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    transition: .5s;
}
.card__link:hover::after {
    background-color: hsla(178, 100%, 50%, 0.4); 
   /* This is just an example, use the color provided in style-guide.md */
}

    For your second question, the way you did it is the best way by using flex box with justify-content: space-between.

    And for your last question, I'd advise you to go with <link/> since it's inside <head></head/> it will be one of first to be loaded rather than using @import which means it will be loaded after the CSS file has been loaded. Not that there will be a significant difference either way in an application this small.

    I hope that helps. Please feel free to ask if you need further explanation👌

    Marked as helpful
  • Nugget•60
    @Nuggxt

    For transitions you can use Pseudo-classes so for img {}. You can do ```img:active{ transition: scale(1.1);}

    To separate the 2 spans. If they are in the same div use ( justify-content: space-between; )

    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