Skip to content
OverviewSolutions
6
Comments
71

Yashasvi Singh

@aUnicornDevGurugram, India890 points

Developer. Wanna be Designer. One thing that attracted me to Frontend Mentor was the designs they have. They have all the UI design fundamentals in place(mostly😜).

I’m currently learning...

Vue Ecosystem -- Vue 3 , Vue Router, Vuex and Pinia for State Management, Options and Composition API

Latest solutions

Latest comments

  • Yashasvi Singh•890
    @aUnicornDevPosted over 2 years ago

    Hi Ritik,

    The solution looks great on Desktop and Tablet mode ✨✨✨.

    The responsiveness can be improved between 770-1150px. The cart dropdown overflows the viewport when opened in this range..

    1
  • Yashasvi Singh•890
    @aUnicornDevPosted over 2 years ago

    Hi Veronica,

    Great solution 🔥🔥!!!

    Just a few points...

    The selected rating does not go back to normal when I select another rating. You can do this by removing the "selected" class from all the buttons first, and then adding the "selected" class on the clicked element.

    The hover on Rating does not change the font color to white.

    0
  • Yashasvi Singh•890
    @aUnicornDevPosted over 3 years ago

    The font-family for the links(change, proceed payment and cancel) can be set to "Red Hat Display" to match the design.

    Not an overuse of ''DIVS" but some extra "buttons" that could have been just replaced with divs(plan-btn) or a tags(cancel-btn). Semantically speaking, buttons should be signifiers that something can be clicked.

    Marked as helpful
    1
  • Yashasvi Singh•890
    @aUnicornDevPosted over 3 years ago

    You have border-bottom for the underline so it will take the complete width of the text. For variable widths, you can use ::after pseudo element.

    You can also change .hamburger position from fixed to absolute, because the fixed hamburger appears even after scroll.

    You should set a fixed max-width on the .container so that it does cover the whole screen on bigger viewports.

    Marked as helpful
    1
  • Yashasvi Singh•890
    @aUnicornDevPosted over 3 years ago

    Looks good on desktop as well as mobile...

    Just around 1200px to the mobile breakpoint.. things are a little squeezed and start overlapping/overflowing. You can look into that area..

    Marked as helpful
    0
  • Yashasvi Singh•890
    @aUnicornDevPosted over 3 years ago

    Great work man. ✌✌✌

    This is by far the best solution for this particular challenge that I've seen.

    Just a minor issue is that when changing the tip, the counter starts from undefined to and reaches upto the final calculated value. It's barely visible because of the speed of the counter but i thought I should mention it.

    Few improvements apart from this challenge would be to have a default tip and an active state for the bill input field after website load.

    0
View more comments