Design comparison
Solution retrospective
Hi all,
Here is my submission for the NFT Preview Card Challenge. I attempt to really focus on code that is efficient and highly maintainable by leveraging increased :root
variable declaration.
I would appreciate any all feedback, thank you in advance.
Community feedback
- @aazs-eduPosted 11 months ago
Hello Dwayne, Great as usual, my friend. Keep up the good work.
- HTML:
I have identified a small issue. There are 2 missing closing </div> tags right before </main>.
Here is the updated code: Just add
</div> </div>
before</main>
.- CSS:
In the :root, you have a typo in the variable --spacing-small. You wrote 0.5erm instead of 0.5rem.
Here is the updated code:
--spacing-small: 0.5rem;
I hope you find this helpful. Thanks.
Marked as helpful2@drod109Posted 11 months agoHello Abdulrahman,
Thank you for the feedback I genuinely appreciate it.
Kindly, Dwayne
1 - @BlackpachamamePosted 11 months ago
Greetings! you have done a great job š
š Some suggestions
- You can use the
gap
property in thebody
to separate yourmain
from yourfooter
- You can apply
display: block
to the image to remove the white space generated underneath - I'm not sure if an
a
can go inside apicture
tag. You could better use adiv
for this case
Marked as helpful2@drod109Posted 11 months agoHi Marcos,
Thank you for the feedback and I appreciate you pointing that out!
Kindly, Dwayne
1 - You can use the
- @danielmrz-devPosted 11 months ago
Hello Dwayne!
Your project looks great!
It's quite a challenge to add that hover effect properly. I noticed that yours is missing the eye image when hovered over. Here's how you can do it:
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; }
Just don't forget to change the class names to match yours.
I hope it helps!
Other than that, you did an excelent job!
2@drod109Posted 11 months agoHello Daniel,
thank you for the feedback and I am not sure how I missed that and I will update my code after work today.
Thank you again!
0
Please log in to post a comment
Log in with GitHubJoin 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