<div class="slide-container"> <div class="slide" id="side-1"> <h1>Slide 1</h1> <a href="#side-2" title="Next slide"> <svg viewBox="4 4 16 16"><use href="#arrow-down" /></svg> </a> </div> <div class="slide" id="side-2"> <h1>Slide 2</h1> <a href="#side-1" title="Previous slide"> <svg viewBox="4 4 16 16"><use href="#arrow-up" /></svg> </a> <a href="#side-3" title="Next slide"> <svg viewBox="4 4 16 16"><use href="#arrow-down" /></svg> </a> </div> <div class="slide" id="side-3"> <h1>Slide 3</h1> <a href="#side-2" title="Previous slide"> <svg viewBox="4 4 16 16"><use href="#arrow-up" /></svg> </a> <a href="#side-4" title="Next slide"> <svg viewBox="4 4 16 16"><use href="#arrow-down" /></svg> </a> </div> <div class="slide" id="side-4"> <h1>Slide 4</h1> <a href="#side-3" title="Previous slide"> <svg viewBox="4 4 16 16"><use href="#arrow-up" /></svg> </a> <a href="#side-5" title="Next slide"> <svg viewBox="4 4 16 16"><use href="#arrow-down" /></svg> </a> </div> <div class="slide" id="side-5"> <h1>Slide 5</h1> <a href="#side-4" title="Previous slide"> <svg viewBox="4 4 16 16"><use href="#arrow-up" /></svg> </a> <a href="#side-1">Back to start</a> </div> </div> <svg style="display: none"> <defs> <path id="arrow-up" d="M14,20H10V11L6.5,14.5L4.08,12.08L12,4.16L19.92,12.08L17.5,14.5L14,11V20Z" /> <path id="arrow-down" d="M10,4H14V13L17.5,9.5L19.92,11.92L12,19.84L4.08,11.92L6.5,9.5L10,13V4Z" /> </defs> </svg>
body, html { height: 100%; min-height: 100%; margin: 0; scroll-behavior: smooth; font: 100%/1.5 sans-serif; } .slide-container { height: 100%; } .slide { display: flex; align-items: center; flex-direction: column; background: #6d5fbc; color: #fff; height: 100%; padding: 1em; box-sizing: border-box; overflow: auto; } .slide:nth-child(even) { background: #5fbc91; } .slide h1:first-of-type { margin-top: 0; } .slide a { display: block; color: #fff; font-weight: bold; text-decoration: none; } .slide a:hover { text-decoration: underline; } .slide a:first-of-type { margin-top: auto; } .slide svg { width: 1.25em; fill: #fff; }