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

Vanilla Bootcamp with light animations

@jordanlewis9

Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello!

This was a bit more time consuming, mainly because I had problems with the background and SVGs. I don't feel as if I utilized them properly, as can be seen by some of the SVGs in the HTML, and some as background images. For instance, the following is how I set up the SVG for the person picture:

    background-image: url("./images/pattern-bg.svg");
    background-size: 100% 95%;
    background-position: top;
    background-repeat: no-repeat;
}```

But for the quotation marks, I just placed it in the HTML and positioned it like so:

 ``` .testimonial__quote--svg {
    position: absolute;
    bottom: 64%;
    left: 14%;
  }```

Which feels very jank to me. Any tips on how to more properly set up these SVGs?

Thank you!

Community feedback

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