Fullscreen Silber code

[fer1113]

Hello, I am trying to put some code to generate a page with a fullscreen slider, if I put it in "custom html at top" it works, but I see it in all the pages, but if I put it as an "html element" in the gridder of a specific page it does not work. I have also tried to put part of the code in "Custom css" and another part in the "HTML element" of a page and it does not work either, could you tell me what I am doing wrong?
Thanks!!!
This is the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: helvetica,sans-serif;
font-weight:300;
margin:0;
padding:0;
}
.crossfade > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
margin:0;
}
.crossfade > figure:nth-child(1) {
background-image: url('https://www.fernandomaselli.com/web/wp-content/uploads/2020/06/Fernando_Maselli_93.jpg');
}
.crossfade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('https://www.fernandomaselli.com/web/wp-content/uploads/2020/06/Fernando_Maselli_83.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('https://www.fernandomaselli.com/web/wp-content/uploads/2020/06/Fernando_Maselli_93.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 18s;
background-image: url('https://www.fernandomaselli.com/web/wp-content/uploads/2020/06/Fernando_Maselli_83.jpg');
}
.crossfade > figure:nth-child(5) {
animation-delay: 24s;
background-image: url('https://www.fernandomaselli.com/web/wp-content/uploads/2020/06/Fernando_Maselli_93.jpg');
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
</style>
</head>
<body>
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
</body>
</html>

[Richard]

Dear @fer1113

I will try to help!
If i understand your question properly and correct me if i'm wrong :)

The web document seems ok although the semicolons ( ; ) on the last "opacity" ' s are missing - i have fixed them below

@keyframes imageAnimation {
                    0% {
                    animation-timing-function: ease-in;
                    opacity: 0;
                    }

                    8% {
                    animation-timing-function: ease-out;
                    opacity: 1;
                    }

                    17% {
                    opacity: 1;
                    }

                    25% {
                    opacity: 0;
                    }
                    
                    100% {
                    opacity: 0;
                    }
                }

However in terms of the code working but showing up for every page -

I believe it is because you haven't specified the page in which this code should be applied so it just gets applied to the "Body" of every page.

Each page has its own information that you can use to target it

Here for this page "Fashion" you can see things like "data-id=47" & "data-slug="fashion" etc

Look into adding something in both the HTML and CSS "Body" tags that will target the actual page you want :)

Here are some links that i hope will help you in the right direction:

https://www.khanacademy.org/computing/computer-programming/html-css

https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

Best of luck and Thank you for your patience and using Lay Theme!

Sincerely
Richard