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

Coding testimonials slider HTML CSS JS

Capassoft 30

@Guarito

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


I couldn't obtain fix slider control on bottom of avatars. I tried to add an container to images and the control on position absolute but the design is damaged. I hope in the future to have better skills to complete the challenge. I appreciate any advice, thanks.

Community feedback

Shomy032 270

@Shomy032

Posted

I think this should work

.container{
position : relative;  
width : 500px ; // for example
height : 500px ; // for example
}
.container img{
width : 100% ;
object-fit : cover ;
}
.container button{
position : absolute ;  // relative to container , this will remove it from flow
bottom : 0 ;
left 100px ;
transform: translateY(-50%); // this will push it down for half of their height
}

Anyway great work , and keep up coding :)

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