Skip to content
OverviewSolutions
14
Comments
341

Abhik

@abhik-b4,820 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Abhik•4,820
    @abhik-b

    Hello Ose , Your solution looks great on large screen & nice use of tailwind , well done 💯

    Just some opinions :

    • Give your .invisible-container this position:absolute so that main does not shift when you click on a dropdown link
    • Check this video for responsive navbar in mobile
    • To add animation to features & company , since you are already using .hidden class , give some transform:translateY(20px);opacity:0; to hidden class. What will happen is as soon as hidden class is removed from 1 of the ul , the transform & opacity will become default. Also add some transition to the ul

    Hope this help 🤞& Please keep Coding such nice solutions 🥳

    Marked as helpful
  • Abhik•4,820
    @abhik-b

    Hello Mohamed , Your solution looks great & it is very responsive . Great Job done 💯

    Just a opinion : Yes you are right , you do not need resize observer. Instead you can use responsive css media queries. What I did was :

    • create a div .slider-container & made it position:relative.
    • Then created a label with width :90%; so the label always has 90% width of the parent
    • Then created a input & hid it's appearance (you have also done the same. However I did not give any position to input , instead I gave it a bg color just like the original design
    • Then I created a .slider-handle span & .slider-fill span. As the name says 1 is for showing the custom fill & other for custom handle.
    • Then for large screens I used the css media queries to increase the handle size.

    Here is my code

    Hope this helps 🤞 & Please keep coding this nice solutions 🥳

    Marked as helpful
  • Abhik•4,820
    @abhik-b

    Hey Kostya 👋

    Your solution looks fantastic . I liked the concept of you as a product card 😁 Your react component preview is great & the structure you used to name the classes seems good.

    Just a opinion : adding some padding to .root div will give some spacing to the card in mobile screens.

    Fantastic job , keep up contributing such amazing solutions 🥳

    Marked as helpful
  • Abhik•4,820
    @abhik-b

    Hello Erik 👋

    Your solution looks excellent 🥳 The animations are great , shadows to the images are great & your site is responsive as well. Great job done

    Just a observation : When I click on left button slider animations are great but when I click on right button slider animations are not as great as left one.

    Other than that Great job , please keep contributing such amazing solutions. 😃

    Marked as helpful
  • Abhik•4,820
    @abhik-b

    Hey Harshit 👋

    Your solution looks nice & your tailwind usage seems great ! Though it would have been nice if it was responsive for mobile screens but anyway nice try.

    Just some opinions :

    • remove " from body"
    • for the entire chat messages div , you don't have any classes. If you use flex flex-col gap-3 then for each chatleft class you don't need to give bottom margin & overall the code would be organized.

    Keep doing these projects & Your skills will much better !! Happy Coding 😃

  • Abhik•4,820
    @abhik-b

    Hello Alabi 👋

    Your Solution looks very nice !!! It is very responsive & it's interactivity seems amazing to me. Great Job 👍

    Just some opinions :

    • If the .box has a fixed max-width then on large screens it will look more nice. Example : max-width:550px
    • if the .billing has justify-content : space-evenly instead of justify-content : space-between then the transition from large screen to mobile screen looks slightly better

    Your solution is very close to original design , Nicely Done !! Please Keep Coding such amazing solutions

    Marked as helpful
View more comments