Skip to content
Submitted over 4 years ago

Social media dashboard w/ html css js

Sandra•135
@sandraprv
A solution to the Social media dashboard with theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My first junior challenge 👌 I wasn't so inspired by it first, but at the end I really enjoyed doing it ! Learned a LOT about grid 😅

I do have 2 questions : How could I improve the instagram card top border (with the linear gradient) ? And, how to do so that the cards top borders are not affected by the radius-border ?

Have a nice day !!!! ☀️

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Sandra! 👋

    Good work on another challenge! Your solution looks good and the grid responds well! 👏 The light/dark themes work nicely, too.

    When I completed this challenge, I used pseudo-elements to create the borders along the tops of the overview cards (along with overflow: hidden on the cards themselves). That's because while you can use the linear-gradient function in conjunction with the border-image property to create gradient-colored borders, you can no longer use the border-radius property when you do so.

    You specify the border-radius of each corner of a box with properties like border-top-left-radius and border-bottom-right-radius and so on.

    I suggest,

    • Setting a max-width on the main container or wrapper so that the content of the page doesn't look too stretched on extra-large screens.

    Keep coding (and happy coding, too)! 😁

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