Submitted over 3 years ago

responsiv e landing page with CSS(Sass) HTML only (no javascript)

Juliana Oliveira Melo• 80

@JulianaOliveiraMelo

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello! 👋 My first challenge on FrontEnd Mentor 🥳🎉🍾 I'm still learning and all feadback ould be appreciated. Thanks 🤗

Community feedback

Oleh Tovkaniuk• 505

@OlehTovkaniuk

Posted over 3 years ago

Wow, I like it. Text animation is cute. The container doesn't change it sizes when I click a dropdown. Though you have some adaptivity twerks at 1024x1366 resolution(iPad Pro resolution). You can fix it if you want 🙂.

Juliana Oliveira Melo• 80

@JulianaOliveiraMelo

Posted over 3 years ago

Hi @OlehTovkaniuk 👋 Thanks for notice the ipad problem. I think i managed to work around so that it doesent look so ugly 😞 thakns again for the feedback 😋

tediko• 6,580

@tediko

Posted over 3 years ago

Hello, Juliana Oliveira Melo! 👋

Congratulations on finishing your first project here! Your solution responds well. I like the animation you add on tabs. What i can suggest is:

Try not to repeat your HTML code with image for each arrow. Easier way around is to use pseudo element ::before on your .question-group. Set it to position: relative and your pseudo element as position: absolute. Put your image using content: url(image.jpg).
A label should be used as a caption and does not require heading elements. I would remove h3 elements from your labels. This way you get rid of HTML issues errors.

Good luck with that, have fun coding! 💪

Juliana Oliveira Melo• 80

@JulianaOliveiraMelo

Posted over 3 years ago

Hi @tediko 👋 Thank you for the comments. They were very useful. I manage to solve the html issues and use the :after with an image has content. Thanks a lot 😁

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Hey, Juliana Oliveira Melo! 👋

Congratulations upon completing your first Frontend Mentor challenge! 🎉

I think you've done a good job on this challenge! Like OlehTovkaniuk mentioned, the animation on the body text of the FAQs is pretty cool! 😉

Keep coding (and happy coding, too)! 😁

Juliana Oliveira Melo• 80

@JulianaOliveiraMelo

Posted over 3 years ago

Hi @ApplePieGiraffe 👋 Thanks for the feedback. I appreciate it 😊

Please log in to post a comment

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