Submitted

Just plain HTML and CSS

@purplejragon

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

3

Accessibility Issues

0

HTML Issues

View Report

purplejragon’s questions for the community

How do you center the text next to the logos? I added some padding to the top to fake it, but I want to know how to actually center the text vertically. vertical-align: middle; and vertical-align: center; don't seem to work.

Community Feedback

P
Benja.min 310

@BenjaDotMin

Posted

Hello!

I would go for a display flex approach, rather than floats.

  • Remove the padding-top from .logo
  • Add to .logo, .eth and .time: display: flex; align-items: center;

This should centre them up nicely.

Marked as helpful

1

tomas 100

@ttoomas

Posted

Hi, great job on this site!

You can center the text next to the logo using the flexbox: .avatar-text {display: flex; align-items: center} align-items

Otherwise, I recommend trying the following for the background image: Create a parent <button> that will have position: relative. Then create a pseudo-element :: before for this button, which will have content: url ("picture") position: absolute, opacity: 0 and center it with display: flex (picture view) . Then add only <img> to <button>. Then you do button:hover::before and add opacity: 1. I hope my advice helped.

Marked as helpful

1

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

Slack logo

Join our Slack community

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