@imadvv
Posted
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 and transform not apply, is because when the display:none; apply to an element, it will remove it completely from the accessibility tree so no element on the DOM to apply transform and transition 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 the transition should applied .
and also when speaking of the accessibility, I see that you're nested a main element inside section, 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 for label ether give the input an id with the same for value like on the hamburger menu or use button 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
@BeinRain06
Posted
@imadbg01
Greetings Imad , hope you are fine . I wanted first to make changes in my lines codes before replying your feedback. And guess ? You aimed right with your rocket, the sliding is working but, it tooks me times to understand how to apply visibility as usual i like play with display, i also got a headache to make the icon-left button operating well between yesterday and today. To find out the math function thats works.
@BeinRain06
Posted
@imadbg01
I fail to the same random pop up of images i was telling you in my feedback for your home-page-master project, seems it wasn't an error.
I find out that when sliding forth or rear , at the times you reach the last sliding card respectively with the sense tooks, you have to reset the position of your variable slideIndex and then by doing that it turns the sense of the motion of cards. It's why their appearing with random pattern not just one pattern like we may like
@BeinRain06
Posted
@imadbg01
I still have a matter with the body shadow of my project it"s not acting in the right way:
Below are the change i made in css and JS :
.menu_wrap input[type="checkbox"]{
position:absolute;
top: 20%;
left: 16%;
transform: translate(-36%, -10%);
width: 50px;
height: 30px;
background: transparent;
opacity: 0;
z-index: 300;
}
.menu_wrap .hamburger_image{
position: relative;
top: 0;
left: 0;
width: 50px;
height: 30px;
}
.menu_wrap .hamburger_image img.hamburger_open{
visibility: var(--display-shadow-close);
position: absolute;
top: 25%;
left: 0;
width: 30px;
height: 20px;
z-index: 100;
}
.menu_wrap .hamburger_image img.hamburger_close{
visibility: var(--display-shadow-close);
position: absolute;
top: 66%;
left: 30%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
z-index: 100;
}
.menu_content{
position: absolute;
display: flex;
visibility: hidden;
flex-direction: row;
justify-content: flex-end;
align-items: center;
top: -1rem;
left: -1rem;
width: 100vw;
height: 70px;
background: var(--white);
}
.menu_wrap .menu_content ul{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-size: 22px;
font-weight: bold;
z-index: 100;
}
body::before{
content: '';
position: absolute;
visibility: var(--display-shadow-close);
top: 0;
left: 0;
width: 100vw;
min-height: 365vh;
background: var(--light-black);
z-index: 1;
}
.nav_mobile{
display: flex;
}
.showcase .nav_desktop{
display: none;
}
.menu_wrap .hamburger_image img.hamburger_open{
visibility: var(--display-shadow-open);
}
doc.addEventListener('click', bodyShadowedLive);
function bodyShadowedLive(){
if(toggleHamb.checked === true){
doc.style.setProperty("--display-shadow-close", "visible");
} else if(toggleHamb.checked === false) {
doc.style.setProperty("--display-shadow-close", "hidden");
}
}
@BeinRain06
Posted
@imadbg01
I want also to say , feel free to reach me whatever times you like for projects you want feedback. I hope we could continue to enjoy times on working each one at his side and also together.
Your concern helps me a lot thanks you, we are still learning and i wish my answers or suggestions in the future will have added value to you, and give you clues to reconsider what need to be improved.
Hope haven't being too long through my says, just wanna makes things clear when slicing my messages , and gives you the right pitch to understand me.
Have a Great day, Imad. We stay stuned.
@BeinRain06
Posted
@imadbg01
if you get once again time please see under my style of shadowed body to helps me see what is wrong with.
Live links:
- Solution URL: [https://github.com/BeinRain06/room-homepage-master.git]
- Live Site URL: [https://beinrain06.github.io/room-homepage-master/]
