room-homepage simplified with pure javascript

Solution retrospective
some kinds of javascript snippet codes written allows to play with the three cards of our projects. But still mind if there is a way to made it appears smoothly either with the icon button left : < or the icon button right : >
Frame wood to settle
how to make the displaying of each cards appearing smoothly
, quite using Javascript without no library.? An idea ?
Thanks Dude !
Please log in to post a comment
Log in with GitHubCommunity feedback
- @imadvv
Greetings Ngouend raoul Gerard!!
First Thank you so much for your feedback, I wasn't aware of that issue and I'm very grateful that you brought it to my attention. I will go back and try fix it.
I think the reason why the
transition
andtransform
not apply, is because when thedisplay:none;
apply to an element, it will remove it completely from the accessibility tree so no element on the DOM to applytransform
andtransition
to it, use the visibility property instead.you can change this variables to use visibility instead .
--display-slide: none; --display-shadow: none; --display-slide: hidden; --display-shadow: visible;
and apply
flex
to the elements that needed, and thetransition
should applied .and also when speaking of the accessibility, I see that you're nested a
main
element insidesection
, which is semantically not correct, that why you see that accessibility errors and warnings. to fix that just replace<section class="our_home">
with<main class="our_home">
and<main class="showcase">
with<section class="showcase">
, and forlabel
ether give the input an id with the same for value like on the hamburger menu or usebutton
instead mush easy to style and is interactive by default.<label for="toggle_hamburger" class="menu_wrap"> <input type="checkbox" class="toggle_hamburger"> <label for="toggle_hamburger" class="menu_wrap"> <input type="checkbox" class="toggle_hamburger" id="toggle_hamburger">
I Hope this give you some hints if not please feel free to Call me anytime, " I will try my best", and correct me if am wrong on something, am on the learning process too.
Marked as helpful - @imadvv
This comment was deleted almost 3 years ago
- @imadvv
This comment was deleted almost 3 years ago
- @imadvv
This comment was deleted almost 3 years ago
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