Skip to content
Submitted about 2 years ago

responsive card with grid css

Rio Rifaldi•100
@rio-rifaldi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone 🙌

this is challenge that challenged my frontendmentor.io. i hope you enjoy my project <br>

features

  • DarkMode 🌔 ☀️ & typing + fade effect

  • Responsive design 📱

  • accessibility 👨‍🦯

    accessibility keyword ⌨️

    • Alt + Shift + D : change color theme 🌔
    • Alt + Shift + F : go to frontendmentor.io 💻
    • Alt + Shift + R : go to my github repository 🖥️

  • my question

can anyone tell me how to directly choose color contrast for dark mode? i actually getting stuck for choosing color. or may be you have some good resouce for helping me choose dark color pallete, i will be very respect if you tell me. and one again, if you have some suggestion about dark mode please tell me. i will be very happy

thank you for whoever create this challenge for me and us. this is very challenging any feedback will be welcome.

thank you very much ✋

Community feedback

  • ...•600
    @HatimHJPosted about 2 years ago

    you put the colors in css variables in the body selector when dark mode clicked you give the body class like 'dark' in other slector [body.dark] you change variables colors .

    that how i did it in this challenging and it worked fine. there's a little bit of javascript

    Marked as helpful
    1
    Rio Rifaldi•100
    @rio-rifaldiPosted about 2 years ago

    @HatimHJ Thank you for your suggestions

    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