Skip to content
Submitted 10 months ago

Single price grid component

Joyal James•265
@silkcoder
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Expecting comments and suggestions from other community members.

Community feedback

  • Bryan Li•3,530
    @Zy8712Posted 10 months ago

    Your site looks great! The main things I suggest you'd change/add in:

    • add a hover effect for the "Sign Up" button, this improves the interactivity of your site
    • when using Sass/Scss you can nest css selectors inside one another. While its good for you to nest your code your code for easier readability, you should avoid "over-nesting". The general recommended number of levels is 3 levels deep for nesting.
    • For example in your html code, everything is already contained within the <body> and <main> tags so isn't really a point in nesting your css in those tags. You could change your sass/scss code to something like:
    body{
}
main{
}
.community{
 ...nested code
}
.subscription-why-us{
}
.subscription{
...nested code
}
.why-us{
...nested code
}

    Hope this helps 👍

    P.S. Found this useful forum dicussion on nesting, link here.

    Marked as helpful
    2
    Joyal James•265
    @silkcoderPosted 10 months ago

    Thanks for your help @Zy8712

    0
  • Raza Abbas•790
    @RazaAbbas62Posted 10 months ago

    Hi, Your design looks great, and very close to the actual one.

    You tried well. 😎

    Enjoy Coding :)

    1
    Joyal James•265
    @silkcoderPosted 10 months ago

    Thanks @FazeenIjaz

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord