Skip to content
Submitted over 2 years ago

social-proof-section-master imitation using css flexbox

SuperSet1607•310
@mohit1607
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi awesome community I tried to imitate the whole design but the only problem I am facing is istead of making a single class for card I made 3 classes which is I know is not scalable . Can anybody suggest what should I do to reduce css code and also suggest some css library so that workflow gets faster. I will appreciate your help

Community feedback

  • arey•350
    @arey-devPosted over 2 years ago

    Hello, congratulations on completing this challenge!!

    Regarding with your problem. Remove the .card2 and .card3 , just have 1 class named .card and then try to use the pseudo-class :nth-of-type()

    div.card:nth-of-type(1) {
  margin-top: 1rem;
}

    :nth-of-type() pseudo-class targets the siblings of the same type based on its positioning. Which is in your case, the div with the class .card.

    Read this for more info :nth-of-type() and If you wouldn't mind, try to look at my solution. Maybe it will help you.

    Marked as helpful
    1
    SuperSet1607•310
    @mohit1607Posted over 2 years ago

    @arey-dev Thank you very much for help, This is the thing that I couldnt figure out for long time but now with the help of you it is. Thanks again and would love to hear from you in future again.

    1
    arey•350
    @arey-devPosted over 2 years ago

    @mohit1607 Glad to have been a help. Happy Coding 😊

    Marked as helpful
    0

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