funky-framadate-front/src/app/pages/kind/kind.component.html

<h1>page de démo</h1>
<p>cette étape est en cours de développement. <br> S'inspirer de la page de Home pour réaliser d'autres pages
</p>
<a [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>
<h1>Atoms</h1>
<section>
    <article>
        <h2>Headings</h2>

        <h1>Ceci est un h1</h1>
        <h2>Ceci est un h2</h2>
        <h3>Ceci est un h3</h3>
    </article>

    <article>
        <h2>Links</h2>
        <div>
            <a [routerLink]="'/home'" class="next">
                <span class="text" i18n>
                    C'est parti !
                </span>
            </a>
        </div>
        <div>
            <a [routerLink]="'/home'" class="prev">
                <span class="text" i18n>
                    C'est parti !
                </span>
            </a>
        </div>
    </article>

    <article>
        <h2>Buttons</h2>

        <button type="submit" class="btn btn--primary">
            primary - default
        </button>

        <br>

        <button type="submit" class="btn btn--primary btn--small">
            primary - small
        </button>

        <br>

        <a href="#" class="btn btn--primary btn--outline">
            primary - outline - default
        </a>

        <br>

        <button type="submit" class="btn btn--primary btn--outline btn--small">
            primary - outline - small
        </button>

        <br>

        <input type="submit" class="btn btn--alert" value="alert - default">

        <br>

        <button type="submit" class="btn btn--alert btn--small">
            alert - small
        </button>

        <br>

        <button type="submit" class="btn btn--alert btn--outline">
            alert - outline - default
        </button>

        <br>

        <button type="submit" class="btn btn--alert btn--outline btn--small">
            alert - outline - small
        </button>

        <br><br>

        <button type="submit" class="btn btn--primary btn--full">
            primary - full
        </button>

        <button type="submit" class="btn btn--primary btn--outline btn--full">
            primary - outline - full
        </button>

        <button type="submit" class="btn btn--alert btn--full">
            alert - full
        </button>

        <button type="submit" class="btn btn--alert btn--outline btn--full">
                alert - outline - full
        </button>

    </article>

    <article>
        <h2>Forms element</h2>

        <h3>Labels</h3>

        <label for="">Un label pour les labelliser tous</label>

        <h3>Input name</h3>
        <input type="name" name="" id=""><br>
        <input type="name" name="" id="" value="texte">

        <h3>Input email</h3>
        <input type="email" name="" id=""><br>
        <input type="email" name="" id="" value="adresse@email.com">

        <h3>Input password</h3>
        <input type="password" name="" id=""><br>
        <input type="password" name="" id="" value="password">

        <h3>Input date</h3>
        <input type="date" name="" id=""><br>
        <input type="date" name="" id="" value="1985-11-23">

        <h3>Select</h3>
        <select name="" id="">
            <option value="">
                1
            </option>
            <option value="">
                2
            </option>
            <option value="">
                3
            </option>
        </select>

        <h3>Textarea</h3>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </article>

    <article>
        <h2>Paragraphs</h2>

        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores.
            Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi
            delectus beatae!</p>
    </article>

    <article>
        <h2>Lists</h2>

        <h3>Unordered list</h3>
        <ul>
            <li>
                plop
            </li>
            <li>
                plop
            </li>
            <li>
                plop
            </li>
        </ul>

        <h3>Ordered list</h3>
        <ol>
            <li>
                plop
            </li>
            <li>
                plop
            </li>
            <li>
                plop
            </li>
        </ol>
    </article>

    <article>
        <h2>Images</h2>
        <img src="http://placekitten.com/200/300" alt="">
    </article>
</section>

<section>
    <h1>Molecules</h1>
<framadate-vote-choice></framadate-vote-choice>
    <article>
        <h2>Useful classes</h2>

        <h3>Align right</h3>
        <div class="align-right">
            <a [routerLink]="'/home'" class="next">
                <span class="text" i18n>
                    C'est parti !
                </span>
            </a>
        </div>
    </article>

    <article>
        <h2>Label + input name</h2>
        <label for="test-text">Ceci est un label un peu long mais pas trop</label>
        <input type="name" name="test-text" id="test-text">
    </article>

    <article>
        <h2>Label + select</h2>
        <label for="test-select">Ceci est un label un peu long mais pas trop</label>
        <select name="test-select" id="test-select">
            <option value="">
                1
            </option>
            <option value="">
                2
            </option>
            <option value="">
                3
            </option>
        </select>
    </article>

    <article>
        <h2>Input name with info</h2>
        <a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a>
    </article>

    <article>
        <h2>Commentaries</h2>
    </article>
</section>

<section>
    <h1>Components</h1>

    <article>
        <h2>Images list</h2>
        <a href="https://sketch.cloud/s/00A80/a/bQA9wj">that</a>
    </article>

    <article>
        <h2>Calendar</h2>
    </article>

    <article>
        <h2>Modale</h2>
    </article>

    <article>
        <h2>Way to vote</h2>
        <a href="https://sketch.cloud/s/00A80/a/Ol0598">that</a>
    </article>

    <article>
        <h2>Voted</h2>
        <a href="https://sketch.cloud/s/00A80/a/OlJZo2">that</a>
    </article>

    <article>
        <h2>Graphics</h2>
        <a href="https://sketch.cloud/s/00A80/a/megprw">that</a>
    </article>
</section>