Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
6

Yash Kamble

@Knight9876110 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

  • Responsive Sunnyside Agency Landing Page using Tailwind

    #tailwind-css

    Yash Kamble•110
    Submitted 7 months ago

    That little triangle thingy on the top-right corner of the menu when the hamburger icon was clicked, I tried to do it using SVG.

    Is there any other way to do it??

    Any solution is appreciated!!!


    1 comment
  • Responsive Time Tracking Dashboard Using Tailwind

    #tailwind-css

    Yash Kamble•110
    Submitted 7 months ago

    0 comments
  • Responsive Advice Generator using API and Tailwind

    #tailwind-css

    Yash Kamble•110
    Submitted 7 months ago

    0 comments
  • Responsive Blog Card using Tailwind

    #tailwind-css

    Yash Kamble•110
    Submitted 7 months ago

    0 comments
  • Responsive, Dark Mode, Social Links Card using Tailwind CSS

    #tailwind-css

    Yash Kamble•110
    Submitted 7 months ago

    0 comments
  • A Responsive Recipe Page using Tailwind CSS

    #tailwind-css

    Yash Kamble•110
    Submitted 7 months ago

    0 comments

Latest comments

  • Isaiah Kelvin•80
    @Vinnykells15
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Just here to learn, and become better at what needs to be done, so if there's anyone who can give me a few pointers... i would really appreciate.

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

    The table part at the end was really hectic, went through some documentaries and found a way to work the code

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

    Basically everything, i would just appreciate feedback on anything i could have done better in regards to the code and its design

    Omelette recipe page

    1
    Yash Kamble•110
    @Knight9876
    Posted 7 months ago

    1.Lol, you used sane font throughout the page, I would suggest to use different fonts as given in the preview. It looks nice the either way, but we use different fonts for differentiation.

    2.And why didn't you add that little lines after the sections??. Use this tag <hr>.

    3.Use more padding for y axis, this will make it look better.

    4.You also forgot to change the background of preparation time. Lol

    Other than these issues, I don't see any. Well done on your first project (Just guessing).

    Good luck on future projects 👍👍

  • Dinu719•10
    @Dinu719
    Submitted 7 months ago
    What specific areas of your project would you like help with?

    All Feedback is Welcome.

    Create Recipe page

    1
    Yash Kamble•110
    @Knight9876
    Posted 7 months ago
    1. Always ensure that the padding or margin for opposite sides is equal (top = bottom and right = left) to make the webpage look better.
    2. You used the same font style for both headings and paragraphs, which is fine. However, make sure the size of the headings is visibly larger than that of the paragraphs to differentiate them.
    3. For the nutrition section, use a table instead of flexbox. This will arrange things more like the preview image.
    4. (Optional) If you're having trouble centering the recipe card, try this:
    .class-name {
        width: (give the required width);
        margin: (any margin for the y-axis) and auto (for the x-axis);
    }
    

    I think this should work.

    Other than these suggestions, it looks nice! Just focus on maintaining equal padding and margin to enhance the overall appearance.

    Marked as helpful
  • Collins Adaigho•90
    @Donsmatt
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Getting it to look as close to the design as possible without a figma design file.

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

    None for now

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

    Any recommendations will be appreciated

    Responsive Recipe page with CSS variables and media queries

    #accessibility#pure-css
    1
    Yash Kamble•110
    @Knight9876
    Posted 7 months ago

    For centering the recipe card:

    width: give some width to it; (up to you) margin: auto y-axis; (auto for x-axis, give margin for y according to you)

    i hope this center the card, i guess you have to adjust the image width and height then.

    ALL THE BEST!!!

    Other than this, it looks good. Nice work. Keep Going!!!

  • Aliya Shaik•200
    @SkAliya
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Hi FrontEndMentor 🌐Community! I'm Aliya and this is my solution for this challenge:) 😁

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

    🛠️Built with:

    1.CSS3 🏳️‍🌈 2.REACT ⚛️

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

    One more opportunity to improve my skills, in this challenge I'm used CSS and REACT, Not sure my approach is correct or not, but it is working.

    Thanks, to FEM team ,for helping us to improve skills & gaining knowledge by working on solution to challenges .

    I'll be happy to hear any feedback and advices ,Thanks in advance👩🏻‍💻😃😃.

    Small Profile Card 🪪 - using React⚛️ & CSS

    #react#accessibility
    1
    Yash Kamble•110
    @Knight9876
    Posted 7 months ago

    Well i would say, use tailwind instead of CSS. you can style the page in the html itself, no need of external CSS. It also has some built in classes, therefore it saves time. And as you know, using react in your project, it makes your project heavy-weighted. Use tailwind to keep it light-weight.

    ALL THE BEST!!! (THUMBS UP)

  • ahnintaek•200
    @ahnintaek
    Submitted 7 months ago
    What challenges did you encounter, and how did you overcome them?

    It was difficult to align the position of the card in the middle of the vertical/horizontal. It was also difficult to locate the contents of the card.

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

    I don't know exactly how to adjust the size of the middle card. I arbitrarily adjusted the size of the card, but I don't know what kind of problem will arise from the actual customer's point of view

    HTML and CSS Practice

    1
    Yash Kamble•110
    @Knight9876
    Posted 7 months ago

    Have you tried this:

    position: absolute; left: 50%; right: 50%; transform: translate(-50%, -50%);

    this works 100% for centering the div/card

    And for how to adjust the width of the card, i can't tell you for sure because i dont know what way you used to adjust the width of the card, but i am pretty damn sure this will work on most of the screens(unless the user has that brick phone lol).

    ALL THE BEST!!! (THUMBS UP)

  • CodzSchach•240
    @Joker4mas
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the output, and the ability to learn new concepts and apply them in projects like this.

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

    I had a little challenge with the hover coverage but I was able to tweak it to apply the coverage to the extent I wanted.

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

    I would love a review

    Responsive design Social links Flex-box

    1
    Yash Kamble•110
    @Knight9876
    Posted 7 months ago

    Well, you wanted a review huh? It's nice, seriously. It's just the card which is not in the center makes it kinda sus. Lol

    Haven't you tried this: position: absolute; left: 50%; right: 50%; transform: translate(-50%, -50%);

    try this, this will definitely center it. Use this css on the class which you used to name the card. if this doesn't work, make sure the parent class has "position: relative", but this works without relative. Try it just once.

    Oh, and for the hover effect, i don't know what you did that made it challenging but its simple.

    Try this class-name:hover { color: hsl-color-code; }

    I guess this works Hope this review helps you.

    ALL THE BEST!!! (THUMBS UP)

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

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

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

Oops! 😬

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

Log in with GitHub