Skip to content
Submitted almost 3 years ago

NFT Card Component Using HTML5 and CSS3 (SCSS)

Osman Nuri ERDOĞAN•330
@osmannurierdogan
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

How I can add the hover effect on the main image?

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @osmannurierdogan ,

    I have some suggestions regarding your solution:

    • There should be two landmark components as children of the body element - a main (which will be the card ) and a footer (which will be the attribution).

    • Anything with a hover style in a design means it's interactive. you need to add an interactive element<a> around the image and Equilibrium #3429, Jules Wyvern.like this:

    • Page should contain a level-one heading, in this challenge , you can use <h1> instead of <h3> it would be like this : <h1 class="card__title"> <a href="#"> Equilibrium #3429</a></h1>

    • Images must have alternate text

    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in (icon-clock.svg, /icon-ethereum.svg", icon-view.svg).

    • The alt text of the avatar shouldn't be alt="Creator Image " , it should be Jules Wyvern .

    • Tips for writing 'good' alt text.

    • the link should be wrapping the original image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

    • You can use an unordered list<ul> to wrap `class="card__information" and in each <li>, there would be <img > and<p> (to wrap the text never use <span > for meaningful content ).

    • No need for <div class="card__seperator"></div> , you can use border-top to theclass="card-creator" .(there is <hr> in HTML do the same )

    • No need for <span> , <p class="card__creator--information" >Creation of <a href="#">Jules Wyvern<a></p>

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>like this:

    body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; 
min-height: 100vh;

    • an explicit width is not a good way . Remove the width from the card component and change it to max width instead. That will let it shrink a little when it needs to*/

    • Never use px for font-size.

    Lastly , I recommend not to change base html size. This has huge accessibility implications for those of us with different font size or zoom requirements.

    Overall your solution is good , Hopefully this feedback helps.

    Marked as helpful
    0
    Osman Nuri ERDOĞAN•330
    @osmannurierdoganPosted almost 3 years ago

    Hello @PhoenixDev22, I am very grateful for your answer. I will search it and update my solution. Also thanks a lot for your recommendations. I started to learning css approximately 1.5 years ago but I did not pay attention on it, I rarely write css because of that I am not good at on it. Nevertheless, I again started pay attention on css to become expert and I hope I will one day. :) Thanks a lot...

    1
  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Osman, great job! Congratulations on completing the challenge.

    You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution

    Hope this help ;) And keep it up!

    Marked as helpful
    0
    Osman Nuri ERDOĞAN•330
    @osmannurierdoganPosted almost 3 years ago

    @denielden Hi Deniel, I am very grateful for your answer. I will search it and update my solution. Thanks a lot :)

    1
  • Abdellah el aajjouri•190
    @abdellahelaajjouriPosted almost 3 years ago

    Wow amazing job osman

    0
    Osman Nuri ERDOĞAN•330
    @osmannurierdoganPosted almost 3 years ago

    @abdellahelaajjouri Thank you Abdellah. I'm appreciated that.

    1

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