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

Kevin Canlas

@kvncnlsOntario, Canada225 points

Hi! I'm a self-taught web developer and designer based out of Ontario, Canada. Skills: HTML, CSS, JavaScript, GSAP, Svelte, React, WordPress

Latest solutions

  • Pricing component with toggle


    Kevin Canlas•225
    Submitted over 4 years ago

    2 comments
  • Article preview component, HTML/SCSS/JS


    Kevin Canlas•225
    Submitted over 4 years ago

    1 comment
  • Fylo dark theme landing page


    Kevin Canlas•225
    Submitted over 4 years ago

    3 comments
  • Profile card component


    Kevin Canlas•225
    Submitted over 4 years ago

    1 comment
  • FAQ accordion card, HTML/SCSS/JS


    Kevin Canlas•225
    Submitted over 4 years ago

    1 comment
  • Room homepage solution


    Kevin Canlas•225
    Submitted over 4 years ago

    1 comment
View more solutions

Latest comments

  • Michelle•415
    @michelleracho
    Submitted over 4 years ago

    Pricing Component using React useState and styled using CSS Modules

    2
    Kevin Canlas•225
    @kvncnls
    Posted over 4 years ago

    Looks great Michelle!

    • It looks like there's a small HTML issue with the label. It shouldn't have a div inside of it.
    • If I had to be nitpicky, I'd just say that the default state should be monthly just like the design comparison. :P
  • P
    Hamza H.•490
    @hhamza1
    Submitted over 4 years ago

    HTML/CSS/Vanilla JS - FAQ Accordion Card

    1
    Kevin Canlas•225
    @kvncnls
    Posted over 4 years ago

    Hi Hamza, nice work!

    • There's a small bug around the 769px to 1023px media query where the SVG covers the "FAQ" text.
    • Also, the text should change colors on hover.

    Other than that, looks great!

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe
    Submitted over 4 years ago

    Room Homepage with CSS Transitions and JS (GSAP) Animations

    9
    Kevin Canlas•225
    @kvncnls
    Posted over 4 years ago

    Hey APG! Your site is awesome! Can I ask how you made the navbar close when you have it open on mobile/tablet size then expand to desktop size?

    So let's say your window was 500px width, you open the navbar menu, then you expand the window passed the navbar menu limit (where the hamburger menu should disappear). How did you get the navbar to close automatically? I don't think I saw an event listener on window resize.

  • Jerline•190
    @jerline01
    Submitted over 4 years ago

    Html, CSS, Bootstrap

    1
    Kevin Canlas•225
    @kvncnls
    Posted over 4 years ago

    Use the Dev Tools and check your layout at 375px width (iPhone X size). The purple background quote sticks out of the card. I used 375px because that's what the style guide said (375px and 1440px). The text also gets too narrow, so it's probably a padding issue.

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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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