Titre 1

Titre 2

Titre 3

Titre 4

Titre 5

Titre 6

<h1 class="title-1">Titre 1</h1>

<h2 class="title-2">Titre 2</h2>

<h3 class="title-3">Titre 3</h3>

<h4 class="title-4">Titre 4</h4>

<h5 class="title-5">Titre 5</h5>

<h6 class="title-6">Titre 6</h6>

<div class="fields radio-fields">

    <span class="labels">Civilité</span>

    <div class="radio-group">

        <div class="radio-item">

            <input type="radio" class="input-radio" name="gender" value="m" checked="checked" />

            <span class="shape"></span>

        </div>

        <label for="man" class="labels">Monsieur</label>

    </div>

</div>

<div class="fields checkbox-fields">

    <span class="labels">Compétences</span>

    <div class="checkbox-group">

        <div class="checkbox-item">

            <input type="checkbox" class="input-checkbox" name="gender" value="html" />

            <span class="shape"></span>

        </div>

        <label for="html" class="labels">HTML</label>

    </div>

</div>

<div class="fields select-fields">

    <select class="input-select" name="job" data-error-label="job" required>

        <option value="">Sélectionnez votre métier</option>

        <option value="1">Chef de Projet</option>

    </select>

</div>

<div class="fields text-fields">

    <label for="email" class="labels">Email<span class="labels-required">*</span></label>

    <input type="email" class="input-text" name="email" data-error-label="email" value="" required />

</div>

<ul class="form-errors">

    <li class="form-error">Veuillez renseigner votre nom</li>

</ul>

<div class="fields text-fields inline">

    <label for="lastname" class="labels">Nom de famille<span class="labels-required">*</span></label>

    <input type="text" id="lastname" class="input-text" name="lastname" data-error-label="lastname" value="" required />

</div>

<div class="fields text-fields">

    <label for="zipcode" class="labels-placeholder">Code postal<span class="labels-required">*</span></label>

    <input type="text" id="zipcode" class="input-text" name="zipcode" data-error-label="zipcode" maxlength="5" value="" required />

</div>

<div class="fields date-fields">

    <label for="birthdate" class="labels">Date de naissance<span class="labels-required">*</span></label>

    <input type="text" id="birthdate" class="input-date" name="birthdate" data-error-label="birthdate" placeholder="jj/mm/aaaa" maxlength="10" value="" required />

</div>

<div class="fields text-fields disabled">

    <label for="disabled-field" class="labels">Champ désactivé</label>

    <input type="text" id="disabled-field" class="input-text" name="disabled_field" data-error-label="firstname" value="" />

</div>

<div class="fields button-fields">

    <input type="submit" class="input-button btns btn-1" value="Valider" />

    <input type="reset" class="input-button btns btn-3" value="Annuler" />

</div>

<a href="#" class="btns btn-1">Bouton 1</a>

<a href="#" class="btns btn-2">Bouton 2</a>

<a href="#" class="btns btn-3">Bouton 3</a>

Lien 1

Lien 2

Lien 3

Lien 4

<a href="#" class="links link-1">Lien 1</a>

<a href="#" class="links link-2">Lien 2</a>

<a href="#" class="links link-3">Lien 3</a>

<a href="#" class="links link-4">Lien 4</a>

Ceci est un tooltip En informatique, une infobulle est un message qui apparaît en surimpression lors du passage du pointeur de la souris sur certains éléments de l'interface graphique. Source : Wikipedia ! Et en voici un autre Nouveau contenu ! .

<p>
    Ceci est un
    <span class="tooltip">
        <b>tooltip</b>
        <span class="tooltip-content">
            Contenu du tooltip
        </span>
    </span>
</p>