Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
8
Jonathan Kila
@Excelsior2021

All comments

  • RaniaAwny•30
    @RaniaAwny
    Submitted over 2 years ago

    omepage using HTML, CSS and Javascript

    1
    Jonathan Kila•290
    @Excelsior2021
    Posted over 2 years ago

    Hi @ RaniaAwny,

    Well done for completing the challenge.

    I think you've done a good job! Nothing to report!

  • Usman Nurudeen•150
    @Denaro13
    Submitted over 2 years ago

    Product Preview Card using CSS.

    1
    Jonathan Kila•290
    @Excelsior2021
    Posted over 2 years ago

    Hi Usman,

    I don't know if I understand correctly. Are you trying to stop child elements overflowing the parent?

    If so, you can set max-width: fit-content and max-height: fit-content

    This way the the child elements will not overflow the parent.

    Marked as helpful
  • Kila•30
    @Shelton-Rolle
    Submitted over 2 years ago

    News Homepage Solution

    #react#sass/scss
    1
    Jonathan Kila•290
    @Excelsior2021
    Posted over 2 years ago

    Hi @Kila,

    You have my surname as your username! 😮

    Well done for completing the challenge.

    Just a few things I noticed:

    1. The font is not being applied to all of the text in the preview site
    2. For both the mobile and desktop views, try to add some margin/padding at the bottom of the page for UI.
    3. The mobile menu, when you scroll down it the menu goes with it, maybe you can try to implement a way for it not to scroll at all when the menu is open?
    4. At a certain breakpoint for the desktop view, the main image no longer lines up with the rest of the content. Something else to fix?

    Apart from that, good job!

  • George Manimbo•180
    @Georgenico
    Submitted over 2 years ago

    Product Preview using HTML and CSS

    2
    Jonathan Kila•290
    @Excelsior2021
    Posted over 2 years ago

    Hi @Georgenico,

    Well done for completing the challenge.

    I would say try adding the "icon" class to the <svg> opening tag instead of the <path /> tag.

  • P
    Nikitossik•370
    @Nikitossik
    Submitted over 2 years ago

    skilled-elearning-landing-page using css flex, clamp

    #bem
    1
    Jonathan Kila•290
    @Excelsior2021
    Posted over 2 years ago

    Hi @Nikitossik,

    Well done for completing the challenge. I also struggled with the hero image.

    For the buttons with linear gradients. What I did was use the opacity property and set it to 0.5 on hover, I believe it gives the effect that we want.

    Marked as helpful
  • Abhishek Mishra•40
    @Zaratosh13
    Submitted almost 3 years ago

    Perfum product page using HTML and CSS

    #bootstrap#flutter#jquery#tailwind-css#react
    2
    Jonathan Kila•290
    @Excelsior2021
    Posted almost 3 years ago

    Good job!

    Interesting solution to how to implemented the change of the images from desktop to mobile. This is a solution I will explore as I struggled with this also.

    Marked as helpful
  • Galeanas93•60
    @Galeanas93
    Submitted almost 3 years ago

    Created with React and TailwindCSS

    1
    Jonathan Kila•290
    @Excelsior2021
    Posted almost 3 years ago

    Hey,

    Good job, looking good!

    Few things I have noticed:

    • You have to click the rating twice before it is highlighted.
    • When you click the submit button without selecting a rating, it still goes to the confirmation card.

    Try to see if you can fix those issues. Also, maybe add a min-width for the main component. When I reduce the viewport to a certain point, the design breaks. Good luck!

  • Khaled Abdulrahman•60
    @khaleed2002
    Submitted almost 3 years ago

    responsive landing page using css flex

    1
    Jonathan Kila•290
    @Excelsior2021
    Posted almost 3 years ago

    Hey Khaled,

    Good job! A few things I noticed:

    1. When I select a number the previous number is highlighted grey whilst the selected number is highlighted orange.

    2. When the screen is resized, the elements are all over the place.

    See if you can fix these issues. Good luck!

    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

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