Lab

Tidslinjen har en valgfri tittel, og hvert element i tidslinjen har fire ulike elementer:

En dato eller beskrivelse som ligger før tittel
En tittel (påkrevd)
Et eller flere brødtekstavsnitt
Et eller flere bilder

Du kan velge å ha tidslinjen med eller uten ramme.

Slik gjør du

Lim inn koden nedenfor i Notisblokk eller tilsvarende tekstbehandler.

<div class="lab-tl">
    <h2>Jesu liv og død</h2>
    <div class="lab-tl__timeline">
        <div class="lab-tl__element">
            <div class="lab-tl__pre">24. januar, år 0</div>
            <h3>Jesu fødsel</h3>
            <p>Jesus blir født i en stall av en jomfu og hennes mann, som var på vei til Betlehem for å skrives inn i manntall. Tre vise menn ankom senere for å feire.</p>
        </div>
        <div class="lab-tl__element">
            <div class="lab-tl__pre">Langfredag, år 30</div>
            <h3>Jesu død</h3>
            <p>Jesus dør på korset, for å redde menneskeheten fra evig fortapelse. Sammen med ham hang også to kjeltringer. To dager etter står han for øvrig opp fra de døde.</p>
            <img src="https://upload.wikimedia.org/.../Cristo_crucificado.jpg" alt="Jesus på korset">
        </div>
    </div>
</div>

Endre tittel, og fyll inn innhold i html-strukturen mellom taggene. Du kan utelate bilde og legge til flere avsnitt etter forgodtbefinnende.
Dupliser denne delen av strukturen for å lage flere elementer:

<div class="lab-tl__element">
    ...
</div>

Lim inn den ferdige koden i en html-embed, og lim så inn kodesnutten nedenfor. Det er viktig at denne kodesnutten er plassert etter innholdskoden.

<!-- Tidslinje -->
<link rel="stylesheet" href="https://tunmedia.s3.us-east-2.amazonaws.com/lab/css/tl.css">
<script>const a=document.querySelectorAll('.lab-tl__element');const b=new IntersectionObserver((entries,observer)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add("in")}})},{threshold:0.8});a.forEach(el=>{b.observe(el)})</script>

Ønsker du å ha ramme rundt tidslinjen, legger du til "lab-tl--box" i "class" den første div-en. Den første linjen i koden blir da <div class="lab-tl lab-tl--box">.

Nivå +1

Det er god praksis når du legger inn bilder at det har en kort beskrivelse for skjermlesere og søkemotorer. Det fyller du inn i der det står "alt".
Du kan sette inn lenker i løpende tekst eller lenke opp et bilde ved å plassere det i en <a>-tag, slik:

I løpende tekst:
Du kan lese mer på <a href="LENKE-URL" target="_blank">nationen.no</a> (åpner i nytt vindu).

Bilde:
<a href="LENKE-URL"><img src="BILDE-URL" alt=""></a>