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

Html, Sass, Vanilla Js to recreate the room homepage challenge

@Yellow-May

Desktop design screenshot for the Room homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am curious about the most effective way to set the images I had problems with getting my images to look as clear as in the example.

An contribution would be appreciated, thank you.

Community feedback

@axevldk

Posted

Hi, Onyekwere Precious ~ I have studied your work, and here are some of opinions.

First, you mentioned about image, and yes, that doesn't look good for now. You can add css property to main.showcase section:nth-child(1) .section .img-section img { object-fit: cover; }. It will improve image vision. Or you can make them background image of wrapper. That's the way I love.

And I found out there are 13 accessibility errors. You can eliminate them by adding name or title attributes to items. And you may have to add width attribute to images that have srcset attribute.

Hope this will help you even a bit. Happy coding ~

2

@MadisonWeber

Posted

Hey i really like the look of your site. The way the text flows down on the slideshow and then rewinds to the start is really cool. Only thing a little bit confusing for me is if i hit the right arrow you get the picture coming from the left, which for me is not what i would expect. I would think inherently if the user hits the right arrow they would expect to go to the picture on the right of the slideshow.

0

@Yellow-May

Posted

@MadisonWeber Thank you Yh i chose that way because i was thinking the the way that "if i click right, the current image is pushed to the right, then the next one on the left come out, and the same for left"

It actually took me a long while to decide which side to go.

0

@posivibez

Posted

Nice work, I'm currently working on the same project. Kinda minor but how are you having the underline animation on the nav links scale out from the center. I'm trying looking in dev tools but don't see how you are doing that. My underlines are scaling out from left to right. Thanks and good work!

0

@Yellow-May

Posted

@posivibez sorry for the late reply it is not an animation, rather a transition effect and it is not an "underline" it an element i created with the before psuedo class to make it look like an underline by positioning.

it is originally scaled down to 0 but on hover, it scales up to 1 you can look through by repo and you will see the code

hope that helps

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