<!DOCTYPE html>
<html class="no-js" lang="cs">
<head>


    <!--———————————— META-GENERAL ————————————-->

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="format-detection" content="telephone=no">
    <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">


    <!--———————————— META-PAGE ————————————-->

    <title>Nezávisláci — Hlavní stránka</title>


    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">


    <!--———————————— PRELOAD ————————————-->

    <link href="https://code.jquery.com/jquery-3.3.1.min.js" rel="preload" as="script" crossorigin="">
    <link href="https://fonts.gstatic.com/" rel="preconnect" crossorigin="">

    <link href="build/all.build.min.css" rel="preload" as="style">
    <link href="build/all.build.min.js" rel="preload" as="script">


    <!--———————————— FAVICON ————————————-->

    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/manifest.json">
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#b21d47">
    <link rel="shortcut icon" href="/favicon/favicon.ico">
    <meta name="msapplication-config" content="/favicon/browserconfig.xml">
    <meta name="theme-color" content="#651837">


    <!--———————————— FONTS ————————————-->

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Russo+One&amp;subset=latin-ext" rel="stylesheet">


    <!--———————————— SUPPORT ————————————-->

    <!--[if IE]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script>!window.html5 && document.write("<script src='libs/html5shiv.js'><"+"/script>");</script>
    <![endif]-->

    <script>document.documentElement.className = document.documentElement.className.replace("no-js", "js");</script>

    <script>!window.matchMedia && document.write("<script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js'><"+"/script>");</script>
    <script>!window.matchMedia && !window.respond && document.write("<script src='libs/respond.min.js'><"+"/script>");</script>
    <script>window.matchMedia && !window.matchMedia("all").addListener && document.write("<script src='libs/respond.matchmedia.addListener.min.js'><"+"/script>");</script>
    <script src="libs/modernizr-svgasimg.js"></script>


    <!--———————————— STYLES ————————————-->

    <!--dev-->
    <!--<script src="dev/PATHS.js"></script>-->
    <!--<script src="dev/load-css.js" data-files="all.build.css, print.build.css" data-media="screen, print"></script>-->
    <!--<noscript><link href="dev/cssimport/all.build.css" rel="stylesheet" media="screen"></noscript>-->
    <!--/dev-->

    <!--prod-->
    <link href="build/all.build.min.css" rel="stylesheet" media="screen">

    <script>window.addEventListener("load", function () { document.head.innerHTML += "<link rel=\"stylesheet\" href=\"build/print.build.min.css\" media=\"print\">"; });</script>
    <noscript><link href="build/print.build.min.css" rel="stylesheet" media="print"></noscript>
    <!--/prod-->

</head>
<body>


    <!--———————————— CONTENT ————————————-->


    <!--–––––––––– ** UI__ACCESSIBILITY-NAV ** –––––––––-->


    <a class="ui__accessibility-nav x-print" href="#main-content">Přejít na hlavní obsah</a>
    <a class="ui__accessibility-nav x-print" href="#main-nav">Přejít na hlavní navigaci</a>


    <!--–––––––––– // UI__ACCESSIBILITY-NAV // –––––––––-->


    <div class="layout__push-footer">


        <!--––––––––– ** PAGE-HEADER ** –––––––––-->


        <header class="page-header">

            <div class="page-header__top-bar x-print">

                <div class="layout__center">

                    <a class="page-header__logo" href="index.html" title="Hlavní stránka">
                        <img class="page-header__logo-img" src="img/page-header__logoX1.png" srcset="img/page-header__logoX1.png 1x, img/page-header__logoX2.png 2x" alt="Nezávisláci - logo">
                    </a>


                    <!--––––––––– ** MAIN-NAV ** –––––––––-->


                    <nav class="page-header__main-nav main-nav" id="main-nav">

                        <h2 class="visually-hidden">Hlavní menu</h2>

                        <input class="ui__hidden-toggle x-desktop x-tablet" id="main-nav__mobile-opener" type="checkbox">

                        <label class="main-nav__mobile-opener transition x-desktop x-tablet" for="main-nav__mobile-opener" title="Menu">
                            <span class="text transition">Otevřít / zavřít hlavní menu</span>
                        </label>

                        <ul class="main-nav__items">

                            <li class="main-nav__item transition-hideable">
                                <a class="main-nav__link main-nav__link--active transition-hideable" href="index.html">
                                    <span class="text transition">Domů</span>
                                </a>
                            </li>

                            <li class="main-nav__item transition-hideable">
                                <a class="main-nav__link transition-hideable" href="seznam.html">
                                    <span class="text transition">Seznam závisláků</span>
                                </a>
                            </li>

                        </ul>
                        <!-- /.main-nav__items -->

                    </nav>
                    <!-- /.main-nav -->


                    <!--––––––––– // MAIN-NAV // –––––––––-->


                    <!--––––––––– ** USER-NAV ** –––––––––-->


                    <nav class="page-header__user-nav user-nav user-nav--login">

                        <input class="ui__hidden-toggle" id="user-nav__mobile-opener" type="checkbox">

                        <label class="user-nav__opener transition" for="user-nav__mobile-opener">
                            <span class="icon icon--lock"><!-- icon --></span>
                            <span class="text" aria-hidden="true">Příhlásit</span>
                            <span class="visually-hidden">Zobrazit / skrýt možnosti přihlášení</span>
                            <span class="icon icon--arrow"><!-- icon --></span>
                        </label>

                        <ul class="user-nav__login-options">

                            <li class="user-nav__login-option user-nav__login-option--facebook">
                                <a class="user-nav__login-option-link user-nav__login-option-link--facebook" href="#">Přihlásit pomocí facobooku</a>
                            </li>

                            <li class="user-nav__login-option user-nav__login-option--normal">
                                <a class="user-nav__login-option-link user-nav__login-option-link--normal" href="#" data-a11y-dialog-show="dialog--login">Klasické přihlášení</a>
                            </li>

                        </ul>
                        <!-- /.user-nav__login-options -->

                    </nav>
                    <!-- /.page-header__user-nav user-nav -->


                    <!--––––––––– // USER-NAV // –––––––––-->


                </div>
                <!-- /.layout__center -->

            </div>
            <!-- /.page-header__top-bar -->

            <div class="page-header__main ui__header">

                <div class="layout__center">

                    <div class="page-header__image x-print">
                        <img class="page-header__img" src="img/page-header__person.svg" alt="">
                    </div>

                    <div class="page-header__content">

                        <h1 class="page-header__title">
                            <span class="text">Vyhrajte svůj boj <span class="layout__br--mobile">se závislostí díky sdílení s přáteli</span></span>
                        </h1>


                        <!--––––––––– ** FORM ** –––––––––-->


                        <form class="page-header__form form form--page-header x-print" method="post" action="">

                            <h2 class="visually-hidden">Registrační formulář</h2>

                            <div class="form__item form__item--half form__item--text">

                                <label class="form__label" for="name">Jmenuji se</label>

                                <input class="form__field" id="name" type="text" name="name">

                            </div>
                            <!-- /.form__item form__item-text -->

                            <div class="form__item form__item--half form__item--editable-select">

                                <!-- !!! zobrazit input pro vlastní text: <div class="form__editable-select-options form__editable-select-options--custom-value"> + option[data-editable-select-custom] musí být selected-->
                                <div class="form__editable-select-options">

                                    <label class="form__label" for="type">Chci se zbavit závislosti na</label>

                                    <select class="form__field" id="type" name="type">
                                        <option value="">Čokoládě</option>
                                        <option value="">Kofeinu</option>
                                        <option value="">Počítačových hrách</option>
                                        <option value="">Sexu</option>
                                        <option value="">Sledování televize</option>
                                        <option value="">Nezdravém jídle</option>
                                        <option value="">Energetických nápojích</option>
                                        <option data-editable-select-custom="true" value="">Něčem jiném&hellip;</option>
                                    </select>

                                </div>
                                <!-- /.form__editable-select-options -->

                                <div class="form__editable-select-custom-value">

                                    <label class="visually-hidden" for="custom-type">Vlastní druh závislosti</label>

                                    <input class="form__field" id="custom-type" type="text" placeholder="Zadejte vlastní závislost...">

                                </div>

                            </div>
                            <!-- /.form__item form__item-editable-select -->

                            <div class="page-header__form-submit">

                                <button class="page-header__form-btn form__btn btn btn--brown btn--has-icon btn--special" type="submit">
                                    <span class="text">Pokračovat</span>
                                    <span class="icon"><!--icon--></span>
                                </button>

                            </div>
                            <!-- /.page-header__form-submit -->

                        </form>
                        <!-- /.page-header__form form -->


                        <!--––––––––– // FORM // –––––––––-->


                    </div>
                    <!-- /.page-header__content -->

                </div>
                <!-- /.layout__center -->

                <div class="ui__header-wrapper"><!-- css --></div>

            </div>
            <!-- /.page-header__main ui__header -->

        </header>
        <!-- /.page-header -->


        <!--––––––––– // PAGE-HEADER // –––––––––-->


        <main id="main-content">


            <!--––––––––– ** BEST-MEMBERS ** –––––––––-->


            <article class="best-members">

                <div class="layout__center">

                    <h2 class="best-members__title">Nejlepší nezávisláci</h2>


                    <!--––––––––– ** MEMBERS ** –––––––––-->


                    <div class="best-members__members members">

                        <ul class="members__list">

                            <li class="members__member">

                                <div class="members__profile-image-wrapper">

                                    <a class="members__profile-image x-print-href" href="profil.html" tabindex="-1">
                                        <img class="members__profile-image-img" src="img/avatar__1--S.png" alt="Jméno">
                                    </a>

                                </div>
                                <!-- /.members__profile-image-wrapper -->

                                <div class="members__info">

                                    <h3 class="members__name">
                                        <a class="members__name-link" href="profil.html" tabindex="-1">Pavel</a>
                                    </h3>

                                    <p class="members__type">Bojuje se závislostí na <a class="highlight" href="seznam.html">Čokoládě</a></p>
                                    <p class="members__period">Nezávislý <span class="highlight">241 dní</span></p>

                                    <a class="members__profile btn btn--brown btn--small" href="profil.html">Zobrazit profil</a>

                                </div>
                                <!-- /.members__info -->

                            </li>
                            <!-- /.members__member -->

                            <li class="members__member">

                                <div class="members__profile-image-wrapper">

                                    <a class="members__profile-image x-print-href" href="profil.html" tabindex="-1">
                                        <img class="members__profile-image-img" src="img/avatar__2--S.png" alt="Jméno">
                                    </a>

                                </div>
                                <!-- /.members__profile-image-wrapper -->

                                <div class="members__info">

                                    <h3 class="members__name">
                                        <a class="members__name-link" href="profil.html" tabindex="-1">Iveta</a>
                                    </h3>

                                    <p class="members__type">Bojuje se závislostí na <a class="highlight" href="seznam.html">Kofeinu</a></p>
                                    <p class="members__period">Nezávislá <span class="highlight">181 dní</span></p>

                                    <a class="members__profile btn btn--brown btn--small" href="profil.html">Zobrazit profil</a>

                                </div>
                                <!-- /.members__info -->

                            </li>
                            <!-- /.members__member -->

                            <li class="members__member">

                                <div class="members__profile-image-wrapper">

                                    <a class="members__profile-image x-print-href" href="profil.html" tabindex="-1">
                                        <img class="members__profile-image-img" src="img/avatar__4--S.png" alt="Jméno">
                                    </a>

                                </div>
                                <!-- /.members__profile-image-wrapper -->

                                <div class="members__info">

                                    <h3 class="members__name">
                                        <a class="members__name-link" href="profil.html" tabindex="-1">Karolína Veselá</a>
                                    </h3>

                                    <p class="members__type">Bojuje se závislostí na <a class="highlight" href="seznam.html">Okurkách</a></p>
                                    <p class="members__period">Nezávislá <span class="highlight">65 dní</span></p>

                                    <a class="members__profile btn btn--brown btn--small" href="profil.html">Zobrazit profil</a>

                                </div>
                                <!-- /.members__info -->

                            </li>
                            <!-- /.members__member -->

                            <li class="members__member">

                                <div class="members__profile-image-wrapper">

                                    <a class="members__profile-image x-print-href" href="profil.html" tabindex="-1">
                                        <img class="members__profile-image-img" src="img/avatar__3--S.png" alt="Jméno">
                                    </a>

                                </div>
                                <!-- /.members__profile-image-wrapper -->

                                <div class="members__info">

                                    <h3 class="members__name">
                                        <a class="members__name-link" href="profil.html" tabindex="-1">Ken</a>
                                    </h3>

                                    <p class="members__type">Bojuje se závislostí na <a class="highlight" href="seznam.html">Osahávání žen v tramvajích</a></p>
                                    <p class="members__period">Nezávislý <span class="highlight">1 den</span></p>

                                    <a class="members__profile btn btn--brown btn--small" href="profil.html">Zobrazit profil</a>

                                </div>
                                <!-- /.members__info -->

                            </li>
                            <!-- /.members__member -->

                        </ul>
                        <!-- /.members__list -->

                        <a class="members__show-all btn btn--red" href="seznam.html">Zobrazit celý seznam</a>

                    </div>
                    <!-- /.best-members__members members -->


                    <!--––––––––– // MEMBERS // –––––––––-->


                </div>
                <!-- /.layout__center -->

            </article>
            <!-- /.best-members -->


            <!--––––––––– // BEST-MEMBERS // –––––––––-->


        </main>
        <!-- /#main-content -->

    </div>
    <!-- /.layout__push-footer -->


    <!--––––––––– ** PAGE-FOOTER ** –––––––––-->


    <footer class="page-footer">

        <div class="page-footer__wrapper layout__center">

            <div class="page-footer__content">

                <ul class="page-footer__items">

                    <li class="page-footer__item">
                        <a class="page-footer__link" href="index.html">Domů</a>
                    </li>

                    <li class="page-footer__item">
                        <a class="page-footer__link" href="seznam.html">Seznam závisláků</a>
                    </li>

                    <li class="page-footer__item">
                        <a class="page-footer__link" href="#" data-a11y-dialog-show="dialog--login">Přihlásit se</a>
                    </li>

                    <li class="page-footer__item">
                        <a class="page-footer__link" href="registrace.html">Registrovat se</a>
                    </li>

                    <li class="page-footer__item">
                        <a class="page-footer__link" href="#" data-a11y-dialog-show="dialog--password">Zapomenuté heslo</a>
                    </li>

                </ul>
                <!-- /.page-footer__items -->

                <ul class="page-footer__social-sites">

                    <li class="page-footer__social-site">
                        <a class="page-footer__social-site-link" href="#">
                            <span class="icon icon--facebook"><!-- icon --></span>
                            <span class="text visually-hidden">Facebook</span>
                        </a>
                    </li>

                </ul>
                <!-- /.page-footer__social-sites -->

                <p class="page-footer__copyright x-tablet x-mobile">Copyright &copy; 2017</p>

            </div>
            <!-- /.page-footer__content -->

        </div>
        <!-- /.page-footer__wrapper layout__center -->

    </footer>
    <!-- /.page-footer -->


    <!--––––––––– // PAGE-FOOTER // –––––––––-->


    <!--––––––––– ** DIALOG ** –––––––––-->


    <div class="dialog dialog--fade-in dialog--login" id="dialog--login" aria-hidden="true">

        <div class="dialog__overlay" tabindex="-1" data-a11y-dialog-hide></div>

        <div class="dialog__box" role="dialog" aria-labelledby="dialog__title">

            <div class="dialog__wrapper" role="document">

                <header class="dialog__header">

                    <button class="dialog__close clear-button transition" type="button" data-a11y-dialog-hide>
                        <span class="x">&times;</span>
                        <span class="text visually-hidden">Zavřít</span>
                    </button>

                    <h1 class="dialog__title" id="dialog__title">Přihlásit se</h1>

                </header>
                <!-- /.dialog__header -->


                <!--––––––––– ** FORM ** –––––––––-->


                <form class="dialog__content dialog__form form form--dialog" method="post" action="">

                    <div class="form__item form__item--text">

                        <label class="form__label" for="email">Email</label>

                        <input class="form__field" id="email" type="email" name="email">

                    </div>
                    <!-- /.form__item form__item-text -->

                    <div class="form__item form__item--text">

                        <label class="form__label" for="password">Heslo</label>

                        <input class="form__field" id="password" type="password" name="password">

                    </div>
                    <!-- /.form__item form__item-text -->

                    <div class="dialog__form-buttons">

                        <a class="dialog__forgotten-password-link form__btn btn btn--link" href="index.html" data-a11y-dialog-hide data-a11y-dialog-show="dialog--password">Zapomenuté heslo</a>

                        <button class="dialog__form-submit form__btn btn btn--red" type="submit">Přihlásit se</button>

                    </div>
                    <!-- /.dialog__form-buttons -->

                </form>
                <!-- /.dialog__content dialog__form dialog -->


                <!--––––––––– // FORM // –––––––––-->


            </div>
            <!-- /.dialog__wrapper -->

        </div>
        <!-- /.dialog__box -->

    </div>
    <!-- /.dialog -->


    <!--––––––––– // DIALOG // –––––––––-->


    <!--––––––––– ** DIALOG ** –––––––––-->


    <div class="dialog dialog--fade-in dialog--password" id="dialog--password" aria-hidden="true">

        <div class="dialog__overlay" tabindex="-1" data-a11y-dialog-hide></div>

        <div class="dialog__box" role="dialog" aria-labelledby="dialog__title2">

            <div class="dialog__wrapper" role="document">

                <header class="dialog__header">

                    <button class="dialog__close clear-button transition" type="button" data-a11y-dialog-hide>
                        <span class="x">&times;</span>
                        <span class="text visually-hidden">Zavřít</span>
                    </button>

                    <h1 class="dialog__title" id="dialog__title2">Zapomenuté heslo</h1>

                </header>
                <!-- /.dialog__header -->


                <!--––––––––– ** FORM ** –––––––––-->


                <form class="dialog__content dialog__form form form--dialog" method="post" action="">

                    <div class="form__item form__item--text">

                        <label class="form__label" for="email2">Email</label>

                        <input class="form__field" id="email2" type="email" name="email">

                    </div>
                    <!-- /.form__item form__item-text -->

                    <div class="dialog__form-buttons">

                        <button class="form__btn btn btn--red" type="submit">Zaslat nové heslo</button>

                    </div>
                    <!-- /.dialog__form-buttons -->

                </form>
                <!-- /.dialog__content dialog__form dialog -->


                <!--––––––––– // FORM // –––––––––-->


            </div>
            <!-- /.dialog__wrapper -->

        </div>
        <!-- /.dialog__box -->

    </div>
    <!-- /.dialog -->


    <!--––––––––– // DIALOG // –––––––––-->


    <!--———————————— JAVASCRIPT ————————————-->

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>!window.jQuery && document.write("<script src='libs/jq.min.js'><"+"/script>");</script>

    <!--dev-->
    <!--<script src="dev/PATHS.js"></script>-->
    <!--<script src="dev/load-js.js" data-files="all.build.js"></script>-->
    <!--/dev-->

    <!--prod-->
    <script src="build/all.build.min.js" defer></script>
    <!--/prod-->

</body>
</html>