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

Mithun U

@Kratos-750India150 points

Just a second year B-TECH student at IIIT Sri City

I’m currently learning...

MERN Stack

Latest solutions

  • Rock-Paper-Scissors-Lizard-Spock Game using React

    #react#react-router

    Mithun U•150
    Submitted almost 2 years ago

    1 comment
  • Responsive News homepage


    Mithun U•150
    Submitted over 2 years ago

    0 comments
  • Interactive rating component


    Mithun U•150
    Submitted over 2 years ago

    1 comment
  • FAQ accordion card using HTML,CSS,JS


    Mithun U•150
    Submitted over 2 years ago

    0 comments
  • Product preview card component using CSS grid .


    Mithun U•150
    Submitted over 2 years ago

    0 comments

Latest comments

  • Zenek•150
    @ZenekSolufka
    Submitted almost 2 years ago

    New-homepage

    1
    Mithun U•150
    @Kratos-750
    Posted almost 2 years ago

    Hello @ZenekSolufka, that's a nice solution. This is a good start but looks like you are having trouble with making the site responsive which is a really eessential part of any website in today's world. But you dont have to worry to much since it's no big deal. You can refer to my Solution. I recommend you to rename your js.js file into something like script.js or index.js.

    To enhance your code organization, consider renaming your "js.js" file to something like "script.js" or "index.js". I would be glad to review your code and identify potential issues, but unfortunately, I dont have time for that right now. However, tackling this task on your own will provide a valuable learning opportunity.

    Given that you're new to this, allow me to share a CSS tip. You can effectively use variables in CSS by employing the following approach:

    :root {
        --var_name : value;
    }
    

    This notation will enable you to define and apply variables throughout your stylesheet, enhancing consistency and maintainability. If you have any further inquiries or need additional assistance, feel free to ask. Hope reading this was worth your time :)

    Marked as helpful
  • Eugene Karuna•10
    @eugene-karuna
    Submitted over 2 years ago

    Product preview card component

    #tailwind-css
    1
    Mithun U•150
    @Kratos-750
    Posted over 2 years ago

    Nice solution

    As for your question about the structure, anything is valid as long as we get the result

    Ohh I think you missed the active status you can temoparily change the css(like background colour) of an element using .element:hover{}, you can also add a transition to make it look better.

    Since it is a simple project i would recommend you to do it without any css frame works since it dosen't showcase your skills

    you can checkout my solution

    Hope this was helpful!!:)

    Marked as helpful
  • Eneyee•60
    @Eneyee
    Submitted over 2 years ago

    Interactive rating component with basic HTML/SCC/JS

    1
    Mithun U•150
    @Kratos-750
    Posted over 2 years ago

    Nice solution.

    I learnt a bit from it as well.

    But I think you missed the active status for the submit button, you can do this using the .element:hover in css.

    And I hope you have used the colors specified in the style guide , You can store them as variables and use them, It'll make it much easier.

    Ohh and I think you have written a lot of code for your buttons I think you should keep it simple:)

    You can also check out my solution since I tried doing it in a different way and hope you will find some new ideas from it :)

    Hope you find this helpful!! Happy coding!!

    Marked as helpful
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