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-block" 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>

        <p>
            <input type="submit" value="Input Submit with border" class="btn_border"><br>
            <input type="submit" value="Input Submit with background" class="btn_background"><br>
            <input type="submit" value="Input Submit delete with border" class="btn_border btn_delete"><br>
            <input type="submit" value="Input Submit delete with background" class="btn_background btn_delete">
            <input type="submit" value="Input Submit with background and white text" class="btn_background btn_white_text">
        </p>

        <p>
            <button class="btn_border">Button with border</button><br>
            <button class="btn_background">Button with background</button><br>
            <button class="btn_border btn_delete">Button delete with background</button><br>
            <button class="btn_background btn_delete">Button delete with background</button>
            <button class="btn_background btn_white_text">Button with background and white text</button>
        </p>

        <p>
            Warning, in the mockups, some buttons have different paddings.<br>
            Example: "Copier le lien" has smaller paddings, maybe a `btn_small` class could do the job, to check.
        </p>

    </article>

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

        <h3>Labels</h3>

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

        <h3>Input text</h3>
        <input type="text" name="" id=""><br>
        <input type="text" 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>

    <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 text</h2>
        <label for="test-text">Ceci est un label un peu long mais pas trop</label>
        <input type="text" 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 text 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>