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

sonickonic

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

  • SCSS, animeJS, and Parcel


    sonickonic•700
    Submitted almost 5 years ago

    1 comment
  • CSS animations, Sass and BEM


    sonickonic•700
    Submitted almost 5 years ago

    2 comments
  • CSS illustration and animation


    sonickonic•700
    Submitted almost 5 years ago

    0 comments
  • React JS site using React Router and Sass


    sonickonic•700
    Submitted about 5 years ago

    0 comments
  • Mobile first site using Sass, Flexbox, BEM and JS


    sonickonic•700
    Submitted about 5 years ago

    0 comments
  • Mobile first site using Sass, Flexbox, BEM and JS


    sonickonic•700
    Submitted about 5 years ago

    0 comments
View more solutions

Latest comments

  • Emin Muratoglu•190
    @scorpion61
    Submitted almost 5 years ago

    Responsive page using CSS grid and Flexbox

    1
    sonickonic•700
    @sonickonic
    Posted almost 5 years ago

    Hey 👋 Congrats on submitting your first challenge! Nice work the :hover effect is super cool! 🚀

    On a widescreen, the cards are extremely wide did you consider max-width property?

    Don't forget to correct the HTML ISSUES, they are easy to solve)

  • Javier Labrador•95
    @JALCH-1512
    Submitted almost 5 years ago

    Single price grid component with CSS Grid and Flexbox.

    1
    sonickonic•700
    @sonickonic
    Posted almost 5 years ago

    Hey Javier! Nice work the screenshot looks awesome! 😎

    Your code looks good overall, I have just a few observations:

    1. You've currently got multiple <p> elements, where different HTML elements may be more appropriate.
    • The <p> defines a paragraph. The best use for it will be in the "Join our community" section, instead of the <div>.
    • In the "Why Us" section, instead of using <p> twice, a <h2> for the heading and <ul> for the list of features will suit better for semantic and accessibility
    1. CSS reset will set the whole page to 0, for a fresh clean start, instead of setting margin:0; to a specific element.

    * { margin:0; padding:0; }

    Have you tried a Mobile-first approach? It's quite a common workflow, you starting with the mobile version and switch to min-width media queries instead of max-width. It helps to simplify the CSS code)

  • Erick Vargas•180
    @eriandev
    Submitted about 5 years ago

    Pricing component with tailwindCSS

    1
    sonickonic•700
    @sonickonic
    Posted about 5 years ago

    Nice work, it looks great and scales down really good to mobile. Well done! 👍

  • Aayush Srivastava•65
    @aayush182
    Submitted about 5 years ago

    Four card feature section

    1
    sonickonic•700
    @sonickonic
    Posted about 5 years ago

    Congrats on submitting your first solution! it looks amazing!

    You've currently got two h1 elements, it will be better to use it once as it can cause accessibility issues. Two ways to solve it:

    1. Wrap all of that text as a single h1 and use a span element inside it to separate the text.
    2. Use h1 for the main heading and h2 for the sub-title.

    Although it is a pixel perfect solution for the wide-screen, the mobile version is slightly off. Try next time to use min-width media queries instead of max-width. Starting from the mobile-first can lead to more simple solution)

    Good job!

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