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

Responsive landing page; Html5 and Css3

Miguel 30

@Miguel-R-Melo

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


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

Posted

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

1

Miguel 30

@Miguel-R-Melo

Posted

@KapteynUniverse Thank you!!!

0

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