Submitted

NFT Preview Card Component using SCSS, Flexbox and Grid.

#sass/scss

@stevednick

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

1

Accessibility Issues

0

HTML Issues

View Report

Stephen Nicholls’s questions for the community

This was very similar to the Order Card challenge and I tried to apply everything I learned from there. I found a solution for the hover effect on the image but I'm sure more elegant solutions exist and I would love to hear about them. Struggled to recreate the shadow under the card so some advice there would be great also. Otherwise very grateful for any feedback at all. Thanks a million.

Community Feedback

darryncodes 5,170

@darryncodes

Posted

Hi Stephen,

Your design looks really good and well done on getting the hover effect to work - it's tricky.

Box-shadow is hard to make it look good. This mdn resource explains really well what all the values mean.

Most people probably use box-shadow generators, this is a simple one and this one outputs the values in css variables which make the shadows look even better but is a bit more complex.

Hsppy coding!

Marked as helpful

0


@perezjprz19

Posted

@darryncodes you know, I saw that (the box-shadow generator) in a YouTube video, and I was going to try to use one but I didn't quite know how to get the desired effect for the project... so I ended up hand-coding it for my own, funny right? You'd think it would be the other way around.

@stevednick if you can figure out the generator thing... it would probably be easier. But, if you want to learn to do it by hand, I used the resource @darryncodes mentioned above and w3school to figure it out. Its just multiple box-shadows stacked on top of each other and shifted along the X and Y axis while lowering the opacity value at each layer.

It helps to use rgba or hsl for it since they take that 4th opacity value.

0

Grace 18,400

@grace-snow

Posted

Hi

There are some problems on the html of this at the moment

  1. Anything with a hover style in the design means it needs to have an interactive element. I can see you've tried to do that in a couple of places but it only works on the last one. Add href="/" for interactivity to work (and make sure there is a space before the href attribute

  2. You need a heading on this. Headings are the most important semantic elements for giving your page structure. The title of the card needs to use a heading element, definitely not the created by line

  3. Footer goes outside of main, not within it

On mobile the component is touching the screen edges for me. Add a little padding to the body and it should fix that

Good luck

0

P
Vanza Setia 6,955

@vanzasetia

Posted

👋 Hi Stephen Nicholls!

🎉 Congratulations on finishing this challenge! You can compare your solution with mine. If you want to know more about how I did the overlay, you can read the README.

Grace has given some incredible feedback. Here is some feedback from me:

  • You can wrap <a class="title">Equilibrium #3429</a> with h1. Keep in mind, that every page should have one h1.
  • <h2 class="creator-text">Creation of <a class="creator-link"href="#">Jules Wyvern</a></span></h2> There's no need to make this as a heading. Heading tag is similar to the title on a document file. I would recommend swapping the h2 with p.
  • You can wrap the ETH with abbr tag, since ETH is an abbreviation for Ethereum.
  • For the line, you can use border instead of empty div.
  • Don't change the html or root font size. You should set the font-size on the element using rem unit. Using px won't allow the user to control the font size based on their needs.
  • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.

That's it! Hopefully, this is helpful!

Marked as helpful

0

Give some feedback to @stevednick about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!