Timeline

<div class="wrapper">
    <div class="row no-gutters">
        <div class="grid-18 grid-lg-10 u-p-t-8">
            <h1 class="supersize">Internetmuseum</h1>
            <p class="preamble">
                Välkommen till Internetmuseum! Här tar vi dig med på en resa genom den svenska internethistorien. Vilka var pionjärerna? Vad har vi älskat, hatat och skrattat åt. Hur blev Sverige ett av världens mest digitalt utvecklade länder? Kort och gott… hur kom vi hit?
            </p>
        </div>
    </div>
    <div class="row align-items-stretch">
        <div class="a-timeline a-timeline--first">
            <span>1960</span>
        </div>
        <div class="u-p-y-8"></div>
    </div>
</div>
<figure class="o-hero o-hero--timeline ">
    <img src="https://internetdagarna.se/app/uploads/2021/08/ind19-2-2.jpg" alt="hero" class="o-hero__image">
    <figcaption class="o-hero__caption">
        <div class="wrapper">
            <div class="o-hero__text">

                <h1 class="supersize">1960</h1>

                <p class="o-hero__paragraph">Långt innan internet läggs de första grunderna för framtidens IT-utveckling. Redan nu börjar Sverige bli bra på datorteknik – bland annat skapar vi en hålremsstans som blir en exportsuccé.</p>
            </div>
        </div>
    </figcaption>
</figure>
<div class="wrapper">
    <div class="row align-items-stretch">
        <div class="a-timeline"></div>
        <div class="grid-15 grid-sm-16 grid-lg-17 offset-xs-1 u-m-b-2 u-p-t-8">

            <div class="m-card m-card--padded m-card--wide u-m-b-8 a-timeline-item m-card--wide--flipped" id="1963">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            <span class=color-ocean>1963</span> Här kläcks idén om ett ”intergalaktiskt nätverk”
                        </h2>
                    </a>
                    <p class="m-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>

                </div>
            </div>

            <div class="m-card m-card--padded m-card--wide u-m-b-8 a-timeline-item" id="1967">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            <span class=color-ocean>1967</span> Starten på internet heter Arpanet
                        </h2>
                    </a>
                    <p class="m-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>

                </div>
            </div>

            <div class="m-card m-card--padded m-card--wide u-m-b-8 a-timeline-item m-card--wide--flipped" id="1969">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            <span class=color-ocean>1969</span> Svensk uppfinning byggs in i Arpanet
                        </h2>
                    </a>
                    <p class="m-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>

                </div>
            </div>

        </div>
    </div>
</div>
<figure class="o-hero o-hero--timeline ">
    <img src="https://internetdagarna.se/app/uploads/2021/08/ind19-17-1-e1629797772570-1920x1080.jpg" alt="hero" class="o-hero__image">
    <figcaption class="o-hero__caption">
        <div class="wrapper">
            <div class="o-hero__text">

                <h1 class="supersize">1970</h1>

                <p class="o-hero__paragraph">På sjuttiotalet fortsätter utvecklandet av föregångare till dagens internet, både i Sverige och i USA. I slutet av årtiondet skapar Jacob Palme KOM-systemet, ett slags tidigt chattrum.</p>
            </div>
        </div>
    </figcaption>
</figure>
<div class="wrapper">
    <div class="row align-items-stretch">
        <div class="a-timeline"></div>
        <div class="grid-15 grid-sm-16 grid-lg-17 offset-xs-1 u-m-b-2">

            <div class="m-card m-card--padded m-card--wide u-m-b-8 u-m-t-8 a-timeline-item m-card--wide--flipped" id="1971">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            <span class=color-sandstone>1971</span> Här kläcks idén om ett ”intergalaktiskt nätverk”
                        </h2>
                    </a>
                    <p class="m-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>

                </div>
            </div>

            <div class="m-card m-card--padded m-card--wide u-m-b-8 a-timeline-item" id="1973">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            <span class=color-sandstone>1973</span> Starten på internet heter Arpanet
                        </h2>
                    </a>
                    <p class="m-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>

                </div>
            </div>

            <div class="m-card m-card--padded m-card--wide u-m-b-8 a-timeline-item m-card--wide--flipped" id="1974">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            <span class=color-sandstone>1974</span> Svensk uppfinning byggs in i Arpanet
                        </h2>
                    </a>
                    <p class="m-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>

                </div>
            </div>

            <div class="m-card m-card--padded m-card--wide u-m-b-8 a-timeline-item" id="1982">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            <span class=color-ruby>1982</span> Datavidion är ett ”text-tv-indenter”
                        </h2>
                    </a>
                    <p class="m-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>

                </div>
            </div>

            <div class="m-card m-card--padded m-card--wide u-m-b-8 a-timeline-item m-card--wide--flipped" id="1986">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            <span class=color-ruby>1986</span> Björn Eriksen kniper toppdomänen – så blir Sverige .se på internet
                        </h2>
                    </a>
                    <p class="m-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>

                </div>
            </div>

            <div class="m-card m-card--padded m-card--wide u-m-b-8 a-timeline-item" id="1989">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            <span class=color-ruby>1989</span> World wide web skapas – nu kan internet bli en publiksuccé
                        </h2>
                    </a>
                    <p class="m-card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>

                </div>
            </div>
        </div>
    </div>
</div>

<nav id="timeline-navigation" class="m-timeline-navigation" aria-hidden="true" data-focus-trap="false">
    <ol class="m-timeline-navigation__list">
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-ocean">
                1963
            </div>
            <a href="#1963" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-ocean">
                1967
            </div>
            <a href="#1967" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-ocean">
                1969
            </div>
            <a href="#1969" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-sandstone">
                1971
            </div>
            <a href="#1971" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-sandstone">
                1973
            </div>
            <a href="#1973" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-sandstone">
                1974
            </div>
            <a href="#1974" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
        <li class="m-timeline-navigation__list__item">
            <div class="a-meta color-ruby">
                1982
            </div>
            <a href="#1982" class="m-timeline-navigation__list__item__link">
                <h2>Data vidion är en "text-tv-indenter"</h2>
            </a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
        </li>
    </ol>
</nav>

<button type="button" class="a-paging m-timeline-navigation__button js-timeline-navigation" aria-expanded="false" data-a11y-toggle="timeline-navigation" aria-controls="timeline-navigation">
    <span class="u-visuallyhidden">Visa tidslinje</span>
    <svg class="icon a-paging__icon">
        <use xlink:href="#icon-richtext-bullet-list"></use>
    </svg>
</button>
<div class="m-timeline-navigation__button__overlay js-timeline-overlay"></div>
<div class="wrapper">
	<div class="row no-gutters">
		<div class="grid-18 grid-lg-10 u-p-t-8">
			<h1 class="supersize">Internetmuseum</h1>
			<p class="preamble">
				Välkommen till Internetmuseum! Här tar vi dig med på en resa genom den svenska internethistorien. Vilka var pionjärerna? Vad har vi älskat, hatat och skrattat åt. Hur blev Sverige ett av världens mest digitalt utvecklade länder? Kort och gott… hur kom vi hit?
			</p>
		</div>
	</div>
	<div class="row align-items-stretch">
			<div class="a-timeline a-timeline--first">
				<span>1960</span>
			</div>
			<div class="u-p-y-8"></div>
	</div>
</div>
{{> @hero hero_image="https://internetdagarna.se/app/uploads/2021/08/ind19-2-2.jpg" no_image_class="o-hero--timeline" has_link=false has_radius=false heading="1960" text="Långt innan internet läggs de första grunderna för framtidens IT-utveckling. Redan nu börjar Sverige bli bra på datorteknik – bland annat skapar vi en hålremsstans som blir en exportsuccé."}}
<div class="wrapper">
	<div class="row align-items-stretch">
		<div class="a-timeline"></div>
		<div class="grid-15 grid-sm-16 grid-lg-17 offset-xs-1 u-m-b-2 u-p-t-8">

			{{> @card id="1963" modifier="u-m-b-8 a-timeline-item m-card--wide--flipped" title="<span class=color-ocean>1963</span> Här kläcks idén om ett ”intergalaktiskt nätverk”" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}

			{{> @card id="1967" modifier="u-m-b-8 a-timeline-item"  title="<span class=color-ocean>1967</span> Starten på internet heter Arpanet" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}

			{{> @card id="1969" modifier="u-m-b-8 a-timeline-item m-card--wide--flipped"  title="<span class=color-ocean>1969</span> Svensk uppfinning byggs in i Arpanet" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}

		</div>
	</div>
</div>
{{> @hero hero_image="https://internetdagarna.se/app/uploads/2021/08/ind19-17-1-e1629797772570-1920x1080.jpg" no_image_class="o-hero--timeline" has_link=false has_radius=false heading="1970" text="På sjuttiotalet fortsätter utvecklandet av föregångare till dagens internet, både i Sverige och i USA. I slutet av årtiondet skapar Jacob Palme KOM-systemet, ett slags tidigt chattrum."}}
<div class="wrapper">
	<div class="row align-items-stretch">
		<div class="a-timeline"></div>
		<div class="grid-15 grid-sm-16 grid-lg-17 offset-xs-1 u-m-b-2">

			{{> @card id="1971" modifier="u-m-b-8 u-m-t-8 a-timeline-item m-card--wide--flipped" title="<span class=color-sandstone>1971</span> Här kläcks idén om ett ”intergalaktiskt nätverk”" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}

			{{> @card id="1973" modifier="u-m-b-8 a-timeline-item"  title="<span class=color-sandstone>1973</span> Starten på internet heter Arpanet" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}

			{{> @card id="1974" modifier="u-m-b-8 a-timeline-item m-card--wide--flipped"  title="<span class=color-sandstone>1974</span> Svensk uppfinning byggs in i Arpanet" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}

			{{> @card id="1982" modifier="u-m-b-8 a-timeline-item"  title="<span class=color-ruby>1982</span> Datavidion är ett ”text-tv-indenter”" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}

			{{> @card id="1986" modifier="u-m-b-8 a-timeline-item m-card--wide--flipped"  title="<span class=color-ruby>1986</span> Björn Eriksen kniper toppdomänen – så blir Sverige .se på internet" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}

			{{> @card id="1989" modifier="u-m-b-8 a-timeline-item"  title="<span class=color-ruby>1989</span> World wide web skapas – nu kan internet bli en publiksuccé" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}
		</div>
	</div>
</div>

{{render '@timeline-navigation'}}
{
  "alt": "Hands typing on laptop",
  "img_url": "/assets/images/ALX_0876.jpg",
  "title": "Gymnasieskolor med hög bandbredd har bättre skolresultat",
  "url": "http://www.google.se",
  "exerpt": "Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.",
  "is_padded": true,
  "is_wide": true,
  "has_shadow": false,
  "has_button": false,
  "read_time": true,
  "has_border": false,
  "has_image": true,
  "has_radius": true
}

No notes defined.