NFT preview card component challenge hub

Community feedback

• 

  VladimirBrscic•775

  @VladimirBrscicPosted almost 3 years ago

  Hi, good strategy would be first make a dedicated parent element ONLY for image and overlay. That parent element will have position: relative. ".overlay" will, among other properties, have position: absolute, width: 100%, top: 0 and left: 0. This is just beginning. Now try to continue from here on your own, if you get stuck you can ask again for help. Happy coding!

  Marked as helpful

  1

  ---

  

  P

  Alfredo Brito•250

  @95FredoPosted almost 3 years ago

  @VladimirBrscic Thank you for sharing this strategy with me. This makes the overlay responsive, which is what I was having trouble with. I will be using this strategy in the future!

  1

  

  VladimirBrscic•775

  @VladimirBrscicPosted almost 3 years ago

  @Fredo-WD You're welcome, glad that I was of any help!

  1
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Awesome work with this one. Viewing your solution, I would suggest this for you...

  • Add color: var(--Soft-blue); in the hr rule set
  • Set width: 100%; for the .prices__price and .times__time-left
  • Import the attribution style in CSS file and remove style tag
  • Wrap attribution with specific tag like footer for readability

  Overall you did well, Hope this is helpful!

  Marked as helpful

  1

  ---

  

  P

  Alfredo Brito•250

  @95FredoPosted almost 3 years ago

  @RioCantre Thank you for taking the time to help me out, especially with the .prices__price and .times__time-left elements, appreciate it!

  1

  

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  @Fredo-WD No worries.Glad I could help. Cheers!

  1