Skip to content
OverviewSolutions
6
Comments
7
Parimal
@parimaldesign

All comments

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

    👋Hello, Frontend Mentor coding community.

    👨🏼‍💻This is my solution for the Result Summary.

    🛠️ Built with:

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

    🎨 I added some custom features:

    • 🪄 Hover Effects
    • 🫧 CSS Animations
    • 🎰 Live Percentile Calculation

    📜 What I learnt?

    • 🗂️ Parsing JSON data
    • ⚙️ async, await in JS
    • ⚡Level Up tailwind CSS & vanilla JS

    📈 Scored 99% on Google Pagespeed Insights!

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

    Responsive Result Summary using tailwind

    3
    Parimal•190
    @parimaldesignPosted over 1 year ago

    Hi Nehal, Your solution is almost perfect but as a UI designer I can not overlook some of the subtle differences. Your colors are just a bit off and the shadow is a lot darker but I am sure if you had the Figma file it would have been absolutely perfect. I am fairly certain you get color codes in the readme file of the project or you can just open the screenshots in the browser and pick colors using dev tools. Just a little feedback. BTW I loved your caption, Do you mind if I copy the style?

    1
  • Parimal•190
    @parimaldesignPosted over 1 year ago

    Hi Andrea, Congratulations on completing this challenge. I love the animations on the link hover and also the Hamburger menu.

    I checked the preview on a 22'' monitor and there were some issues with the website :

    • "THE LEADER IN INTERACTIVE VR" section wasn't centered
    • "Over creations" grid was wide and images in the grid weren't taking up all the available space.

    Otherwise, the code is pretty much flawless and I and other new developers can learn from it.

    Marked as helpful
    0
  • Parimal•190
    @parimaldesignPosted over 1 year ago

    Hi Fabian, Congratulations on completing this challenge. Both the code and output are near perfect.

    Just nitpicking here - Here are some changes I would suggest which shouldn't take long -

    • You have to add a hover effect on the button according to the challenge brief.
    • Text content in the card layout has too much gap when in the mobile version.

    If you are a beginner, this is really great work.

    0
  • shah377•20
    @shah377Submitted over 1 year ago

    I don't anything about flexbox. while researching for help this came to me but did not know how to use flexbox. I am confused about how to center the middle component, I did (margin: auto) but it worked only horizantally not vertically. Any Suggestions on how do that.

    Qr-code component using html and css.

    2
    Parimal•190
    @parimaldesignPosted over 1 year ago

    Hi Shah, Check out this link

    You should avoid using position-absolute, try a couple of solutions using flex and grid. Or Check out my solution

    Marked as helpful
    0
  • Parimal•190
    @parimaldesignPosted over 1 year ago

    Hi Norman, Congratulations on completing this challenge. I am assuming you coded this on a laptop and it looks almost perfect on that screen. I saw the live site on a 22'' Monitor and the layout is breaking for a couple of sections like the section with iMac.

    • The background image is not showing up because you just need to add one more dot on the URL path "url('../images/bg-header-desktop.png')" also, there's a different background image for the Mobile screen.
    • On class -- ".desktop_content", remove "align-items: center"
    Marked as helpful
    0
  • Parimal•190
    @parimaldesignPosted over 1 year ago

    Hi @LokeshXs, Congrats on completing this challenge. I checked out the live preview and I'd like to make a couple of suggestions.

    • There's a horizontal scrollbar because ".container" class has "width :100vw", reset browser defaults by setting margin:0px; for the body tag.
    • Slightly more padding on the card and the text inside the card.
    1
  • khushboo khatwani•1,070
    @khushi0909Submitted over 1 year ago

    I am not able to center it in the center of the whole view ,can anybody help on that?

    i used media query to make it responsive ,is there any other way it can be done ?

    Feedbacks are welcome

    Qr code challange

    2
    Parimal•190
    @parimaldesignPosted over 1 year ago

    Hello @khushi0909, Congratulations on completing the Challenge. I checked the live solution and I would like to make some suggestions. You have to use the font - family called Outfit from Google Fonts. You have set the width of the card as - 20vw which will look fine on Laptops and Desktops but it will shrink too much on mobile devices with very little width since 'vw' relates to Viewport width. I'd suggest setting a min-width to some pixel value to make it responsive.

    Marked as helpful
    1