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

NFT-preview-card-component

gabilucuta 220

@gabilucuta

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


I need some help understanding how to middle align content .

Community feedback

Ian Rioba 450

@Rioba-Ian

Posted

Your solution is match on. You did quite great.

On the very last part as in styling those elements, you could wrap them inside a div. Let me copy paste your code below and how we could align them in the center.

<img class="avatarImage" src="images/image-avatar.png" alt="avatar">  
  <span class="author">Creation of <span class="name">Jules Wyvern</span></span>

You could wrap them inside a div e.g

<div class="creator">
<img class="avatarImage" src="images/image-avatar.png" alt="avatar">  
  <span class="author">Creation of <span class="name">Jules Wyvern</span></span>
</div>

Styling:

.creator{
display: flex;
flex-direction: row;
align-items: center;
}

Marked as helpful

0

gabilucuta 220

@gabilucuta

Posted

@Rioba-Ian Thanks man !!

0
Ian Rioba 450

@Rioba-Ian

Posted

@gabilucuta You're welcome, you can use css grid. I am also learning css grid, I find flexbox easier but grid has its powers in more complex designs.

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