Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
3
Polariz625
@Polariz625

All comments

  • MarinaPerezR•120
    @MarinaPerezR
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am not very happy with the final result, but I struggle to position the elements.

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

    I always struggle when it comes to going from the mobile preview to the desktop one.

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

    Any kind of review or feedback would be nice, I want to know my mistakes.

    Responsive landing page with single introductory section using Grid

    1
    Polariz625•220
    @Polariz625
    Posted 2 months ago

    Nice job! I just finished this one and was suffering haha.

    My advice for this challenge is that you should use grid and flexbox for everything. instead of using margins for every element within a container, you should use "gap" to move everything in one go.

    Also in your <div> "container" I can see you used grid. the img and the description were already in their own box of the grid. for the icon container you could have used "grid-column: span 2" for it to use two column spaces at the same time and finally "justify-content: flex-end" to move the icons to the right.

    sorry for the long answer,

    greetings from a noob :D.

    pds: do you speak Spanish by any chance? maybe i can explain better in my native tongue.

    Marked as helpful
  • MGDev25•220
    @TheWizCoder
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of implementing the hover effect on the NFT image using CSS positioning and maintaining a clean layout with Bootstrap. Next time, I’d reduce dependency on external libraries by writing custom CSS utilities and add more interactive features with JavaScript.

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

    Creating the overlay with the "eye" icon on image hover while maintaining the card’s aspect ratio was tricky. Initially, the hover state distorted the layout.

    Solution:

    Used Bootstrap’s position-relative on the parent (img-container) and position-absolute for the overlay (img-view).

    Set explicit dimensions for the overlay (w-100 h-100) to cover the image fully.

    Added overflow-hidden to prevent content shifting.

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

    Which part of my NFT card needs improvement? Performance, accessibility, or animations? Let’s focus on one first

    NFT preview card component

    #bootstrap
    1
    Polariz625•220
    @Polariz625
    Posted 3 months ago

    Hello, really excellent job there using Bootstrap. only one think I would say you can do to improve this work, is giving "cursor: pointer;" to the card's main image, the NFT's name and the NFT's creator's name. that would be like my only advice (from a noob's point of view).

  • aldebaran•30
    @ald3b4ran
    Submitted 3 months ago

    I used a lot of css

    2
    Polariz625•220
    @Polariz625
    Posted 3 months ago

    Good job there :D I would like to recommend using the "image fluid" magic so your images always are inside the container:

    img { max-width: 100%; height: auto; }

    that way you don't have to give them a fixed width and height in pixels. they just take the form of the container.

    keep it up! :)

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub