<!DOCTYPE html>
<html lang="de">
<head><title>matchinit</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta property="og:type" content="website">
    <meta property="og:title" content="matchinit">
    <meta property="og:url" content="https://matchinit.st.inf.tu-dresden.de">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="matchinit">
    <meta property="twitter:description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="assets/bundle.css">

</head>
<body><a id="top"></a>
<nav class="navbar">
    <a class="logo" href="#top"><img src="assets/logotransparentlight.png"
                                     width="55" height="55" alt="matchinit"
                                     title="matchinit Die neue Matchmaking-App exklusiv für Studierende"></a>
    <ul class="nav-links">
        <input type="checkbox" id="checkbox_toggle"/>
        <label for="checkbox_toggle" class="hamburger">&#9776;</label>
        <div class="menu">
            <li><a href="#top" data-isredirected="false">MATCHINIT</a></li>
            <li><a href="#ueber_uns" data-isredirected="false">ÜBER UNS</a></li>
            <li><a href="#unsere_vision" data-isredirected="false">UNSERE VISION</a></li>
            <li><a href="#download" data-isredirected="false">DOWNLOAD</a></li>
            <li><a href="#kontakt" data-isredirected="false">KONTAKT</a></li>
        </div>
    </ul>
</nav>
<div id="slider" class="noprint"><a id="a1466"></a>
    <div style="position: relative;">
        <img class="header-img" src="assets/titelgrafikBack.png" alt="header">
        <div class="notification">
            <div class="hide-mobile" style="width: 35%;"></div>
            <div class="center-mobile" style="width: 30%; display: flex; flex-direction: column; height: 100%;">
                <div style="height: 40%;"></div>
                <a href="#download" style="height: 30%;">
                    <img src="assets/notification.png"
                         style="max-width: 100%; max-height: 100%;">
                </a>
                <div style="height: 30%;"></div>
            </div>
            <div class="hide-mobile" style="width: 35%;"></div>
        </div>
    </div>
</div>
<main>

    <hr>

    <div class="flex-box">
        <div class="left center-mobile" style="width: 45%; display: flex; align-content: stretch;">
            <div class="center-mobile" style="width: 80%; flex-shrink: 10">
            </div>
            <div style="width: fit-content; padding: 0 10px;">
                <img loading="lazy" src="assets/phone-01.png" alt="Phone"
                     style="max-width: 100% !important; max-height: 921px">
            </div>
            <div class="center-mobile" style="width: 20%; flex-shrink: 10">
            </div>
        </div>

        <div class="right" style="text-align: justify;">
            <table style="width: 85%; max-width: 40rem; margin-left: calc(10%); margin-right: calc(5%);">
                <tbody>
                <tr>
                    <td style="width: 10.7929%; vertical-align: top; text-align: center;">
                        <div style="text-align: justify; padding: 4px;">
                            <i class="fa fa-comments" style="font-size: 30px; color: var(--light-purple);"></i>&nbsp
                        </div>
                    </td>
                    <td style="vertical-align: top; width: 88.7666%;"><p
                            style="float: right; text-align: justify;"><strong><span
                            style="font-size: 24px;">Matchmaking</span></strong><br>
                        <strong><span style="color: #35005B;">matchinit&nbsp;</span></strong>
                        verbindet dich mit Gleichgesinnten - ganz nach deinen eingestellten Präferenzen.
                        <br><br></p></td>
                </tr>
                <tr>
                    <td style="width: 10.7929%; vertical-align: top;">
                        <div style="text-align: justify; padding: 4px;">
                            <i class="fa fa-unlock-alt"
                               style="font-size: 30px; color: var(--light-purple);"></i>
                        </div>
                    </td>
                    <td style="vertical-align: top; width: 88.7666%;">
                        <div style="text-align: justify;"><strong><span
                                style="font-size: 24px;">Exklusiv</span></strong>
                        </div>
                        <div style="text-align: justify;">Die Registrierung ist nur mit gültiger
                            Uni-E-Mail möglich - kein Zugriff für Außenstehende.<br><br>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 10.7929%; vertical-align: top;">
                        <div style="text-align: justify; padding: 4px;">
                            <i class="fa fa-mortar-board"
                               style="font-size: 30px; color: var(--light-purple);"></i>
                        </div>
                    </td>
                    <td style="vertical-align: top; width: 88.7666%;"><p
                            style="float: right; text-align: justify;"><strong><span
                            style="font-size: 24px;">Für Studierende</span></strong><br>Lerne neue Leute
                        aus deiner Uni kennen - finde Study Buddies, knüpfe Kontakte am Campus und
                        vieles mehr!<br><br></p>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <hr>

    <div class="flex-box box reverse-order-mobile">
        <div class="left center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 90%; flex-shrink: 10"></div>
            <div class="center-mobile" style="max-width: 40rem; margin: 1rem; display: table;">
                <div style=" display:table-cell; vertical-align: middle;">
                    <i class="fa fa-check-square-o" style="font-size: 72px; color: rgb(0, 130, 215);"></i>
                    <h2 style="color: var(--dark-purple); text-align:left;">Personalisiertes<br>Matching</h2>
                    <p style="text-align: left;"><br>Wähle deinen Studiengang, Kurse &amp; Interessen <br>und
                        entscheide, nach welchen Kriterien andere Profile dir vorgeschlagen werden.<br>
                    </p>
                </div>
            </div>
            <div class="center-mobile" style="width: 10%; flex-shrink: 10"></div>
        </div>
        <div class="right center-mobile" style="width: 50%">
            <div class="crop" style="background-image: url('assets/phone1_2-large.jpg');"></div>
        </div>
    </div>

    <div class="flex-box box">
        <div class="left center-mobile" style="width: 50%">
            <div class="crop" style="background-image: url('assets/phone2-large.jpg');"></div>
        </div>
        <div class="right center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 10%; flex-shrink: 10"></div>
            <div class="center-mobile" style="max-width: 40rem; margin: 1rem; display: table;">
                <div style=" display:table-cell; vertical-align: middle;">
                    <i class="fa fa-arrows-h" style="font-size: 72px; color: rgb(64, 158, 142);"></i>
                    <h2 style="color: var(--dark-purple); text-align:left;">Intuitive <br>Swipe-Gesten</h2>
                    <p style="text-align: left;"><br>Ein Wisch nach rechts bedeutet ein Like, ein Wisch nach
                        links
                        lässt dich zum nächsten Profil springen. Gibst du jemandem ein Like und erhältst eines
                        zurück, seid ihr ein Match.<br>
                    </p>
                </div>
            </div>
            <div class="center-mobile" style="width: 90%; flex-shrink: 10"></div>
        </div>
    </div>

    <div class="flex-box box reverse-order-mobile">
        <div class="left center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 90%; flex-shrink: 10"></div>
            <div class="center-mobile" style="max-width: 40rem; margin: 1rem; display: table;">
                <div style=" display:table-cell; vertical-align: middle;">
                    <i class="fa fa-comment-o" style="font-size: 72px; color: rgb(0, 130, 215);"></i>
                    <h2 style="color: var(--dark-purple); text-align:left;">Community<br>Feedback</h2>
                    <p style="text-align: left;"><br>Gemeinsam mit dir und der gesamten Community wollen wir die
                        App
                        fortlaufend verbessern. Schreibt uns über matchinit oder auf Social Media - oder trefft
                        uns persönlich bei unseren "Meet the Devs" am Campus. Wir freuen uns auf euer
                        Feedback!<br>
                    </p>
                </div>
            </div>
            <div class="center-mobile" style="width: 10%; flex-shrink: 10"></div>
        </div>
        <div class="right center-mobile" style="width: 50%">
            <div class="crop" style="background-image: url('assets/pexels-pixabay-163064-large.jpg');"></div>
        </div>
    </div>

    <div class="flex-box box">
        <div class="left center-mobile" style="width: 50%">
            <div class="crop" style="background-image: url('assets/pexels-cottonbro-5474298-large.jpg');"></div>
        </div>
        <div class="right center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 10%; flex-shrink: 10"></div>
            <div class="center-mobile" style="max-width: 40rem; margin: 1rem; display: table;">
                <div style=" display:table-cell; vertical-align: middle;">
                    <i class="fa fa-unlock-alt" style="font-size: 72px; color: rgb(64, 158, 142);"></i>
                    <h2 style="color: var(--dark-purple); text-align:left;">Datenschutz &amp<br>Datensicherheit
                    </h2>
                    <p style="text-align: left;"><br>Wir legen Wert auf den Schutz und die Sicherheit deiner
                        persönlichen Informationen. Alle
                        Daten werden im ZIH&nbsp; (Zentrum für Informationsdienste und Hochleistungsrechnen) der
                        TU Dresden gespeichert und nicht an Dritte weitergegeben.</p>
                    </p>
                </div>
            </div>
            <div class="center-mobile" style="width: 90%; flex-shrink: 10"></div>
        </div>
    </div>

    <hr>

    <a id="ueber_uns" style="position: relative; top: -55px;"></a>
    <h1 style="text-align: center; color: var(--dark-purple)">Über uns</h1>
    <br>

    <div class="flex-box">
        <div class="left center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 20%; flex-shrink: 10"></div>
            <div class="center-mobile" style="max-width: 40rem; margin: 1rem; display: table;">
                <div style=" display:table-cell; vertical-align: middle;">
                    <h2 style="color: var(--dark-purple); text-align:left; font-size: 2rem;">Das Team von
                        matchinit</h2>
                    <p style="text-align: justify;"><br>Wir sind fünf Studierende der Informatik und
                        Wirtschaftsinformatik an der TU Dresden. 2021 haben wir uns in einem Kurs an der
                        Fakultät
                        Informatik kennengelernt. Das Ziel des Kurses bestand darin, aktuelle Probleme zu
                        identifizieren
                        und softwarebasierte Lösungen zu entwickeln. In den vergangenen zwei Jahren war für
                        viele
                        unserer Kommilitonen ein Problem sehr präsent: durch den Umstieg auf Online-Vorlesungen
                        wurde es
                        um einiges schwieriger, neue Freundschaften am Campus zu knüpfen oder Lernpartner zu
                        finden. Aus
                        dieser Situation heraus entstand unsere Idee einer App, die Studierende einer
                        Universität
                        miteinander verbindet.<br>
                    </p>
                </div>
            </div>
            <div class="center-mobile" style="width: 2%; flex-shrink: 10"></div>
        </div>
        <div class="right center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 5%; flex-shrink: 10"></div>
            <div class="center-mobile"
                 style="width: fit-content; flex-shrink: 1; display: flex; align-items: center;">
                <img loading="lazy" src="assets/wir1.jpg" alt="Das Team"
                     style="max-width: 100%; max-height: 100%;">
            </div>
            <div class="center-mobile" style="width: 35%; flex-shrink: 10"></div>
        </div>
    </div>

    <hr>

    <div class="flex-box reverse-order-mobile">
        <div class="left center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 5%; flex-shrink: 10"></div>
            <div class="center-mobile"
                 style="width: fit-content; flex-shrink: 1; display: flex; align-items: center;">
                <img loading="lazy" src="assets/photo_2022-04-17_23-17-03-large.jpg" alt="Flyer"
                     style="max-width: 100%; max-height: 100%;">
            </div>
            <div class="center-mobile" style="width: 35%; flex-shrink: 10"></div>
        </div>
        <div class="right center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 2%; flex-shrink: 10"></div>
            <div class="center-mobile" style="max-width: 40rem; margin: 1rem; display: table;">
                <div style=" display:table-cell; vertical-align: middle;">
                    <h2 style="color: var(--dark-purple); text-align:left; font-size: 2rem;">Die Idee</h2>
                    <p style="text-align: justify;"><br>Über das Jahr hinweg entwickelte sich die Idee weiter,
                        hin zu
                        einer App, die alle Lebensbereiche von Studierenden unterstützen soll. Vom Start ins
                        Unileben,
                        das connecten mit Gleichgesinnten oder bereits erfahrenen Studierenden, über Events und
                        Parties
                        in deiner Nähe, bis hin zum Abschluss deiner Zeit an der Uni und das Finden von
                        passenden
                        Unternehmen für den Berufseinstieg. <strong><span
                                style="color: #35005B;">matchinit</span></strong> hat das Ziel, dir in all
                        diesen
                        Bereichen zur Seite zu stehen. Wir wollen eine App für jeden von uns erschaffen, die
                        dich
                        unterstützt und gleichzeitig Spaß macht.<br>
                    </p>
                </div>
            </div>
            <div class="center-mobile" style="width: 20%; flex-shrink: 10"></div>
        </div>
    </div>

    <hr>

    <div class="flex-box">
        <div class="left center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 20%; flex-shrink: 10"></div>
            <div class="center-mobile" style="max-width: 40rem; margin: 1rem; display: table;">
                <div style=" display:table-cell; vertical-align: middle;">
                    <h2 style="color: var(--dark-purple); text-align:left; font-size: 2rem;">Unsere Zeit an der
                        TU
                        Dresden</h2>
                    <p style="text-align: justify;"><br>
                        Durch unser Studium an der TU Dresden haben wir schon viel vom Unileben sowie seinen
                        Hürden und
                        Vorzügen erleben und genießen dürfen. Unser Ziel ist es nun, die Hürden für euch zu
                        verringern
                        und die Freuden des Studentenlebens hervorzuheben. Wir haben selbst festgestellt, dass
                        gute
                        Freunde und Lernpartner ein wichtiger Faktor für den Erfolg und die Freude am Studium
                        sind - ob
                        man sich gemeinsam auf Prüfungen vorbereitet oder zum Basketballspielen am Campus trifft
                        -
                        zusammen macht es mehr Spaß!<br><br>Seit Beginn des Sommersemesters 2022 arbeiten wir in
                        Vollzeit an matchinit und passen die App kontinulierlich an die Bedürfnisse der
                        Studierenden an.
                        Daher freuen wir uns immer sehr über Feedback - also lasst uns jederzeit wissen, was ihr
                        euch
                        wünscht.
                        <br>
                    </p>
                </div>
            </div>
            <div class="center-mobile" style="width: 2%; flex-shrink: 10"></div>
        </div>
        <div class="right center-mobile" style="width: 50%; display: flex; align-items: stretch;">
            <div class="center-mobile" style="width: 5%; flex-shrink: 10"></div>
            <div class="center-mobile"
                 style="width: fit-content; flex-shrink: 1; display: flex; align-items: center;">
                <img loading="lazy" src="assets/photo_2022-04-17_23-12-03-large.jpg" alt="TU-Dresden"
                     style="max-width: 100%; max-height: 100%;">
            </div>
            <div class="center-mobile" style="width: 35%; flex-shrink: 10"></div>
        </div>
    </div>

    <hr>

    <a id="unsere_vision" style="position: relative; top: -55px;"></a>
    <h1 style="text-align: center; color: var(--dark-purple)">Unsere Vision</h1>
    <br>
    <div style="display: flex; align-items: stretch">
        <div style="width: 100%; flex-shrink: 5"></div>
        <div style="margin: 0 1rem; max-width: 80rem;">
            <p style="text-align: justify;">Ob du neu an der Uni bist und gerade erst dein Studium begonnen
                hast, oder
                schon eine Weile studierst und neue Kontakte am Campus knüpfen möchtest - matchinit ermöglicht
                es dir,
                einfach und schnell neue Freunde und Lerngruppen zu finden und dein Campus-Netzwerk auszubauen.
                Connecte
                dich mit Leuten aus deinem Studiengang, deinen Kursen, deiner Fakultät oder auch aus völlig
                anderen
                Studienrichtungen - potentielle Matches werden dir ganz nach deinen eingestellten Präferenzen
                angezeigt.<br><br>Für
                die Zukunft haben wir einiges an technischen Verbesserungen und Feature-Erweiterungen geplant.
                Schon
                bald bekommst du die Möglichkeit, Neuigkeiten zu Events, Infoveranstaltungen und
                Studentenparties über
                die App zu erhalten. Du sagst uns, wonach du suchst und wir zeigen dir, was zu dir
                passt.<br><br>Darüber
                hinaus soll der Main Feed demnächst personalisierbar werden, d. h. Nutzer können selbst
                einstellen, ob
                sie News und Posts ihrer Uni, ihrer Fakultät, bestimmter Kurse oder auch
                universitätsübergreifende
                Inhalte von Studierenden anderer Hochschulen sehen möchten.<br><br>Langfristig sehen wir
                matchinit als
                überregionales Studierenden-Netzwerk und App für alle Belange des Studiums. Unser Ziel ist es,
                matchinit
                zunächst erfolgreich an der TU Dresden zu etablieren und schließlich an vielen weiteren
                Universitäten
                und Hochschulen Deutschlands einzuführen. Auch ein Matching mit Unternehmen für Absolventen oder
                Praktikanten sowie Werkstudenten ist geplant und soll Studierende mit den passenden
                Stellenanzeigen
                zusammenführen. Somit können nicht nur am Campus erste Kontakte geknüpft werden, sondern auch in
                der
                Arbeitswelt. Dabei ist uns wichtig, dass unsere Mitglieder im Vergleich zu Jobportalen nicht mit
                Anfragen überschüttet werden, sondern selbst entscheiden können, ob und mit welchen Arbeitgebern
                sie in
                Verbindung treten wollen. Unsere Vision für die Zukunft ist ein für Studierende exklusiver,
                virtueller
                Ort, der unsere Mitglieder in allen Bereichen des Studiums unterstützt.
            </p>
        </div>
        <div style="width: 100%; flex-shrink: 5"></div>
    </div>
    <br>
    <h2 style="color: var(--dark-purple); text-align:center;">Roadmap</h2>
    <div style="display: flex; align-items: stretch">
        <div style="width: 50%; flex-shrink: 10"></div>
        <div style="margin: 0 1rem; width: 100%;">
            <img loading="lazy" src="assets/roadmap3.png" alt="roadmap"
                 style="max-width: 100%; max-height: 100%; margin: auto; display: block">
        </div>
        <div style="width: 50%; flex-shrink: 10"></div>
    </div>

    <hr>

    <a id="download" style="position: relative; top: -55px;"></a>
    <h1 style="text-align: center; color: var(--dark-purple)">Download</h1>
    <br>
    <h2 style="color: var(--dark-purple); text-align:center;">Werde Teil unserer Community</h2>
    <p style="text-align: center; margin: 0 1rem">
        Finde Freunde & Lernpartner, um das Studium gemeinsam zu meistern!<br>Wir freuen uns, dass wir bereits
        viele
        Studierende unserer TU Dresden begeistern konnten. Werde auch du Teil der Community und schau dich jetzt
        auf
        matchinit um. Viel Spaß!
    </p>
    <div id="count" style="text-align: center; margin: 1rem; font-weight: bold;">
    </div>
    <p style="text-align: center; margin: 0 1rem">
        begeisterte Studierende nutzen matchinit bereits.
    </p>
    <p style="text-align: center; margin: 1rem; font-weight: bold">
        Jetzt verfügbar für Android und iOS Google Play
    </p>
    <br>

    <div class="flex-box">
        <div class="left center-mobile" style="width: 50%; display: flex; align-content: stretch;">
            <div class="center-mobile" style="width: 80%; flex-shrink: 10">
            </div>
            <div style="width: fit-content; padding: 0 10px;">
                <a href="{{ android }}" target="_blank" rel="noopener noreferrer">
                    <img loading="lazy" src="assets/gplay.png" alt="android"
                         style="max-width: 100% ; max-height: 100%">
                </a>
            </div>
            <div class="center-mobile" style="width: 20%; flex-shrink: 10">
            </div>
        </div>
        <div class="right center-mobile" style="width: 50%; display: flex; align-content: stretch;">
            <div class="center-mobile" style="width: 20%; flex-shrink: 10">
            </div>
            <div style="width: fit-content; padding: 0 10px;">
                <a href="{{ apple }}" target="_blank" rel="noopener noreferrer">
                    <img loading="lazy" src="assets/appstore.png" alt="apple"
                         style="max-width: 100%; max-height: 100%">
                </a>
            </div>
            <div class="center-mobile" style="width: 80%; flex-shrink: 10">
            </div>
        </div>
    </div>

    <hr>

    <a id="kontakt" style="position: relative; top: -55px;"></a>
    <h1 style="text-align: center; color: var(--dark-purple)">Kontakt</h1>
    <br>
    <p style="text-align: center; margin: 0 1rem">
        Schick uns dein Feedback oder deine Fragen und lass uns matchinit gemeinsam verbessern.
    </p><br>

    <div style="display: flex; align-items: stretch">
        <div style="width: 100%; flex-shrink: 5"></div>
        <div style="margin: 0 1rem; max-width: 40rem; width: 100%">
            <form method="post">

                <div style="position: relative">
                    <input
                            required="required" aria-required="true" class="typetext required" type="text"
                            name="F1"
                            id="F1" placeholder="Name" value="" style="width: 100%">
                    <label for="F1">Name</label>
                </div>


                <div style="position: relative">
                    <input
                            required="required" aria-required="true" class="typetext required" type="email"
                            name="F2"
                            id="F2" placeholder="E-Mail" value="" style="width: 100%">
                    <label for="F2">Email</label>
                </div>

                <div style="position: relative">
                    <textarea
                            required="required" class="required" id="F3" name="F3" placeholder="Nachricht" rows="5"
                            style="width: 100%; max-width: 100%; height: auto; resize: vertical; overflow: hidden;"
                            oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
                    <label for="F3">Nachricht</label>
                </div>
                <div>
                    <input type="submit" class="button submit" value="Absenden">
                </div>

            </form>
        </div>
        <div style="width: 100%; flex-shrink: 5"></div>
    </div>

</main>

<footer>
    <div class="flex-box" style="justify-content: space-between; width: 100%">
        <div style="display: flex; align-items: center">
            <a href="#top" style="display: block; width: calc(55px + 1rem); height: 55px">
                <img src="assets/logotransparentlight.png" alt="matchinit"
                     title="matchinit Die neue Matchmaking-App exklusiv für Studierende"></a>
            <a href="https://www.instagram.com/matchinit/" target="_blank" rel="noopener noreferrer"
               style="display: block; width: calc(30px + 1rem); height: 30px">
                <img src="assets/instagram.svg" alt="insta">
            </a>
            <a href="https://twitter.com/matchinit" target="_blank" rel="noopener noreferrer"
               style="display: block; width: calc(30px + 1rem); height: 30px">
                <img src="assets/twitter.svg" alt="twitter">
            </a>
            <a href="https://www.youtube.com/channel/UCL9AhB7QIan3sBIuD-JdMJw" target="_blank"
               rel="noopener noreferrer" style="display: block; width: calc(30px + 1rem); height: 30px">
                <img src="assets/youtube.svg" alt="youtube">
            </a>
        </div>
        <div></div>
        <div>
            <a href="#top">matchinit</a>
            <a href="#ueber_uns">über uns</a>
            <a href="#unsere_vision">unsere vision</a>
            <a href="#download">download</a>
            <a href="#kontakt">kontakt</a>
            <a href="impressum">Impressum und Datenschutzerklärung</a>
        </div>
        <div> &copy 2022 matchinit.</div>
        <div></div>
    </div>
</footer>
<script>
    let animated = false;

    let callback = (entries, observer) => {
        entries.forEach((entry) => {
            if (!animated && entry.intersectionRatio > 0) {
                animated = true;
                let styleElem = document.head.appendChild(document.createElement("style"));
                styleElem.innerHTML = "#count::before {animation: counter 3s 1;}";
            }
        });
    };

    let options = {
        root: null,
        rootMargin: '0px',
        threshold: [1.0, 0.1, 0]
    };

    let observer = new IntersectionObserver(callback, options);

    let target = document.querySelector('#count');
    observer.observe(target);

</script>
</body>
</html>
