Submitted 7 months ago

NFT preview card component

Bruno Henrique•70

@brunohenriquedeveloper

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud that I aprimorate my skills as a programmer and tried my best to make this website responsive, probably I wanna deal better with the adjust of positions like image and text.

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

It was difficult to change the color of the hr, until I understand that I have to add the border-top

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

I wanna know another way to change and adjust the image and text position that isn't "transform: translate()" if anyone knows how to do it, please feel free to comment here and help me

Community feedback

Daniel 🛸•44,250

@danielmrz-devPosted 7 months ago

Fala @brunohenriquedeveloper!

Teu projeto ficou show!

Colocar esse icon view é realmente um desafio. Eu fiz dessa maneira aqui abaixo e deu certo, caso você ainda esteja procurando uma solução:

HTML

<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
  <div class="icon">
    <img src="images/icon-view.svg" alt="icon-view" class="icon-view">
  </div>

CSS

.pic {
   width: 300px;
   background: url('images/icon-view.svg') center center no-repeat;
   background-color: $Cyan-hover;
   background-size: cover;
   margin: auto;
   border-radius: 10px;
}
.icon {
   display: grid;
   justify-content: center;
   align-items: center;
   position: absolute;
   opacity: 0;
   background-color: $Cyan-hover;
   width: 300px;
   height: 300px;
   border-radius: 10px;
}
icon:hover {
   opacity: .5;
   cursor: pointer;
}

Só não esquece de mudar os nomes das classes pra corresponder ao seu projeto.

Espero que ajude!

Fora isso, seu projeto ficou excelente!

Marked as helpful

Please log in to post a comment

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