Skip to content
Submitted almost 3 years ago

Responsive FAQ section / BEM / mobile-first

Rapha445•100
@Rapha445
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone! This was my first time using javascript. I had a hard time getting the images to stick where I wanted them to be when changing the screen size. I finally got it right but don't really understand how I got that result after struggling a lot 😅 Would love to hear any advice!

Cheers,

Community feedback

  • Rio Cantre•9,690
    @RioCantrePosted almost 3 years ago

    Hello there! Great work with this one. Regarding the solution you submitted, I think you should also take notes of the following…

    • Import the attribution style in CSS file and remove the style tag
    • Add background: linear-gradient(#af67e9, #6565e7); in the body rule set
    • Another way is to wrap this part with footer tag or place it inside the main tag
      <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Your Name Here</a>.
  </div>
    • This line <div class="background__faq faq"> could be wrap with section tag
    • Include description with the alt in image tags. Like this line <img class="image__woman" src="images/illustration-woman-online-mobile.svg" alt="">

    Above all, The design looks good. Keep it up!

    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