Skip to content
Submitted about 2 years ago

NFT preview card component

Galina McKoy•150
@GalinaM-G
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

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

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    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
    2
    Galina McKoy•150
    @GalinaM-GPosted about 2 years ago

    @vanzasetia Hello! Thank you for taking time to answer my questions. Your comment on the alt text for the image is very helpful! Best, Galina

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @GalinaM-G No problem! 👍

    0
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    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
    1
    Galina McKoy•150
    @GalinaM-GPosted about 2 years ago

    @correlucas Hello, Lucas!

    Thank you very much for the article and a solution to my problem.

    Best and happy coding to you too!

    1
    Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    @GalinaM-G de nada Galina =)

    Marked as helpful
    0
  • Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    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
    1
    Galina McKoy•150
    @GalinaM-GPosted about 2 years ago

    @md5dalton Hi! Thank you for answering my questions with very useful information and advice. My problem was that I couldn’t work out where to put “transition: .5s; “ in the code). It hard and challenging, but very exiting to build a website at the begging, but I hope to get better soon.

    Thank you again for your help. Best, Galina

    1
  • Nugget•60
    @NuggxtPosted about 2 years ago

    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
    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