Submitted about 1 month ago

Responsive landing page; Html5 and Css3

Miguel•30

@Miguel-R-Melo

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?

That project remembered me some techniques that i didn't know that improved my skills (Ex: display: flex - now i can use it). I would start slow, like doing first the html and after the css.

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

Organization, but i stopped a little and organized myself.

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

CSS hover property to put the icon view in the image.

Community feedback

KapteynUniverse•2,280

@KapteynUniversePosted about 1 month ago

Hey Miguel,

I did it with absolute positioning. I made a quick adjustment for your code, it isn't perfect but close, might give you the idea. Problem here is the eye icon also transparent, which i couldn't fix. Lucky for me, i did this challenge to try tailwind css, in tailwind there is a easy fix for this problem but i don't know how in normal css.

<div class="nft">
  <img
    id="image-nft"
    src="assets/images/image-equilibrium.jpg"
    alt="Imagem da NFT equilibrium (Cubo na diagonal)"
  />
  <div class="icon-div">
    <img src="assets/images/icon-view.svg" class="icon" />
  </div>
</div>

.nft {
  position: relative;
}

.icon {
  position: absolute;
  transform: translate(-50%, 250%);
}

.icon-div {
  background-color: cyan;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.icon-div:hover {
  display: block;
  cursor: pointer;
  opacity: 0.3;
}

Marked as helpful

Miguel•30

@Miguel-R-MeloPosted about 1 month ago

@KapteynUniverse Thank you!!!

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