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>