Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Design Of 'NFT Card'/ Built with HTML5 & CSS3

Aliyaโ€ข 60

@SkAliya

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Hi FrontEndMentor ๐ŸŒCommunity! I'm Aliya and this is my solution for this challenge:) ๐Ÿ˜

What challenges did you encounter, and how did you overcome them?

๐Ÿ› ๏ธBuilt with:

1.HTML5๐Ÿ“„ 2.CSS3 ๐Ÿณ๏ธโ€๐ŸŒˆ 4.SASS๐ŸŽจ 3.BEM NOTATION

What specific areas of your project would you like help with?

One more oppertunity to improve my skills,in this challenge i'm used html, css and sass ,mainly used css background property & ::after/::before pesudo-classes, to make the active state work,Not shure my approch is correct or not, but it is working.

Thanks, to FEM team ,for helping us to improve skills & gaining knowledege by working on solution to challenges .

I'll be happy to hear any feedback and advices ,Thanks in advance๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป๐Ÿ˜ƒ๐Ÿ˜ƒ.

Community feedback

Yacoub AlDweikโ€ข 560

@YacoubDweik

Posted

Creative as usual!

Do not forget to align the container using:

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); Instead of giving margins.

Keep it up!

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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