Check out the code snippet here: https://jsfiddle.net/wust7gdy/
Once the curtain is raised, the exit button will appear.
How can I introduce a splash screen after clicking the 2nd exit button?
Currently, there is a splash screen that appears after clicking the 1st exit button.
I aim to include another splash screen after clicking the 2nd exit button.
Seeking guidance on how to implement this in the code effectively.
The approach involves replicating .splash-screen2.
Struggling to ascertain the process of achieving this functionality.
.splash-screen3 {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: -1;
inset: 0 0 0 0;
Background-color: green;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" ...;html:
<div class="splash-screen3">
<div class="inner">
<div class="container2">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</div>
</div>
</div>
Functional requirements:
When the first exit button is clicked:
https://i.sstatic.net/C2BP2.png
This view should be displayed:
https://i.sstatic.net/qbjjc.png
The videos are then revealed:
https://i.sstatic.net/IDqhW.png
Scroll down and activate the second exit button:
https://i.sstatic.net/sqeR0.png
You should now see the second splash screen:
https://i.sstatic.net/iC2dM.png
And finally, the subsequent set of videos:
... (the rest of the code remains the same)