Skip to content
OverviewSolutions
6
Comments
4
webfans
@qqqzhch

All comments

  • _nehal💎•6,710
    @NehalSahu8055Submitted over 1 year ago

    👋Hello, Frontend Mentor coding community.

    👨🏼‍💻This is my solution for the Product Preview component.

    🛠️ Built with:

    • 🕸️Html 5, Tailwind CSS & JS
    • 📱Mobile First Approach.

    🎨 I added some custom features:

    • 🪄 Hover Effects
    • 🫧 CSS Animations
    • 🖱️Custom Cursor
    • 🤹 Custom UI Design
    • 🪞Glassmorphism
    • ⚡ Card Loading

    I'll be happy to hear any feedback and advice!🤗

    Responsive Product Preview Remastered

    2
    webfans•60
    @qqqzhchPosted about 1 year ago

    wow, the design is even more beautiful than the original design draft

    1
  • webfans•60
    @qqqzhchPosted about 1 year ago

    Great, I saw a lot of animations,

    It would be better if the background color could be made full screen you can use min-h-screen https://tailwindcss.com/docs/min-height

    0
  • webfans•60
    @qqqzhchPosted about 1 year ago

    I also recently completed this challenge Showing background images could be improved mainly background-position，background-size

    body{

     background-repeat: no-repeat;
 background-position: top;
//  background-attachment: fixed;
 background-size:contain;
 min-width: 100vw;
 min-height: 100vh;
 background-color:@Primary-color-Paleblue ;
 display: flex;
 font-family: 'Red Hat Display', sans-serif;

    }

    0
  • webfans•60
    @qqqzhchPosted over 1 year ago

    Great, it's an exact replica of the design, how did you get into sizing the card?

    1