Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Chat illustration app, + darkmmode and animations. You'll love it!

@chukwudobe-Micah

Desktop design screenshot for the Chat app CSS illustration coding challenge

This is a solution for...

  • HTML
  • CSS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This Is my first intermediate challenge here and I'm very happy about it, achieved good results and the best part is that it felt a little simple! Please please please, check out the dark mode. Just switch your phone to darkmode to see the dark if you can (they're no buttons to switch to dark mode yet, I don't know js yet.😅). I'm always open to reviews, advices and feedback, let me know what I did wrong. I'll appreciate 🤲🏾 Also, I had problems changing that white colour of the radio button I ended up leaving it like that, anyone has an idea of how I can do it?

Community feedback

Lucas 👾 104,540

@correlucas

Posted

Hey @chukwudobe-Micah, congratulations on finishing this solution!

I liked a lots the animations you've add once the page loads, really cool! Two things you can improve here its to add the second svg element in the right size (the rounded block as the purple one in the left) thats is missing and align the arrow button in the input text field. See the changes below:

Make the arrow icon align to its circle element using flexbox

button {
    display: flex;
    align-items: center;
    justify-content: center;
}

I was curious about the dark-mode so I've clicked everywhere in the page trying to activate it. This feature is already on? I want to see it =)

Nice challenge and a lots of improvements since your first solution I saw here. Keep it up and continue to upload amazing content.

Have a nice day!

Marked as helpful

1

@chukwudobe-Micah

Posted

@correlucas I guess you've been so busy learning JavaScript, it took you a while to give me these replies, you don't normally take so long.😅

0

@chukwudobe-Micah

Posted

@correlucas I'll do what you adviced to center the arrow, I have another question. How did you put color inside the radial buttons in your project? I tried using colour and background color but it didn't work.

0

@chukwudobe-Micah

Posted

@correlucas I'll do what you adviced to center the arrow, I have another question. How did you put color inside the radial buttons in your project? I tried using colour and background color but it didn't work.

0

@chukwudobe-Micah

Posted

Thank you for acknowledging my growth, you'vd been a big inspiration to me here and also a mentor with all your corrections and guide, I appreciate you for that. There's no button for the dark mode as I just started learning Js, I think you just started to right? How to see the dark mode is to change your phone to dark mode a lot of phones can do this. So when you change your whole phone to darkmode, the website switches to dark mode. If you get it right, let me know.

1

Lucas 👾 104,540

@correlucas

Posted

@chukwudobe-Micah you're welcome 😁 yep I'm studying JS but I have really few knowledge for now. I did once a solution with dark mode, the qr code solution, I followed this tutorial https://youtu.be/9LZGB3OLXNQ its simple because you can just replace se values and the code will work. You can try it

0

@chukwudobe-Micah

Posted

Thanks for this link, I'll check it out later. I've seen the qr code too, its really nice. Were you able to see the dark mode by switching your phone to dark mode? I asked another question too: How did you put color inside the radial buttons in your project? I tried using colour and background color but it didn't work. So I left inside of my radial buttons white which is not the original figma design.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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