Gabarit général

Table des matières

• Listes
• Boîte important
• Objectifs
• Accordéon
• Onglets

• Vidéo

  • Serveur de streaming
  • YouTube / Vimeo
• Tableaux

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat, arcu et tincidunt dictum, eros ex pretium justo, vel volutpat massa ligula efficitur ex. Phasellus ut erat massa. Praesent vel luctus turpis, ac euismod turpis. Praesent nunc libero, convallis eget nisl quis, aliquet vulputate leo. Sed nec dignissim leo.

Sed et neque aliquet, finibus ante sed, commodo erat. Praesent semper rutrum arcu, et iaculis ex tincidunt quis. Sed id pulvinar odio. Quisque nunc orci, porttitor vitae metus id, dapibus accumsan ex. Morbi finibus, orci ac eleifend lobortis, ex eros pulvinar lectus, et aliquam tortor mauris in nisl.

Listes

Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus :

• Consectetur adipiscing elit.
• Consectetur adipiscing elit.

• Consectetur adipiscing elit.

  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.
  • Consectetur adipiscing elit.

Liste sans puce class="sansPuce" :

• Consectetur adipiscing elit.
• Consectetur adipiscing elit.

• Consectetur adipiscing elit.

  1. Consectetur adipiscing elit.
  2. Consectetur adipiscing elit.
  3. Consectetur adipiscing elit.

Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus :

1. Consectetur adipiscing elit.
2. Consectetur adipiscing elit.

3. Consectetur adipiscing elit.

   1. Consectetur adipiscing elit.
   2. Consectetur adipiscing elit.
   3. Consectetur adipiscing elit.

Liste avec lettre class="listeLettre" et class="listeLettre majuscules" :

1. Consectetur adipiscing elit.
2. Consectetur adipiscing elit.

3. Consectetur adipiscing elit.

   1. Consectetur adipiscing elit.
   2. Consectetur adipiscing elit.
   3. Consectetur adipiscing elit.

<ul>
    <li> </li>
    <li> </li>
    <li> </li>
    <li>
        <p class="sansMarge"> </p>
        <li> </li>
        <li> </li>
    </li>
</ul>

Boîte important

<div class="boite important">
    <p></p>

</div>

Cras non enim tellus. Ut felis est, venenatis sed gravida ac, consequat at elit. Ut volutpat feugiat scelerisque. Morbi quis volutpat nisl, sagittis aliquam ex. Nulla nibh sapien, semper vitae urna eget, pellentesque iaculis magna. Vestibulum sit amet¹ tellus a nisl iaculis dignissim. In sit amet urna ex. Curabitur lectus est, mattis ut auctor id, tincidunt et odio.

Objectifs

<div class="objectifs">
    <div class="texte">
        <h2>Objectifs</g2>
        <p></p>
    
    </div>
</div>

Phasellus ut erat massa. Praesent vel luctus turpis, ac euismod turpis. Praesent nunc libero, convallis eget nisl quis, aliquet vulputate leo. Sed nec dignissim leo.

Accordéon

<div class="accordeon">
    <p class="toggler">Titre</p>
    <div class="visuallyHidden">

    </div>
</div>

Onglets

Demi (class="demi")

Tier (class="tier")

Quart (class="quart")

<div class="panneauOnglets">
    <ul class="onglets">
        <li class=""><a href="#">Section 1</a></li>
        <li class=""><a href="#">Section 2</a></li>
        <li class=""><a href="#">Section 3</a></li>
    </ul>
    <div class="panneau" id="section1">
        <span class="interTitre general">Section 1</span>
        <div>

        </div>
    </div>
    <div class="panneau" id="section2">
        <span class="interTitre general">Section 2</span>
        <div>

        </div>
    </div>
    <div class="panneau" id="section3">
        <span class="interTitre general">Section 3</span>
        <div>

        </div>
    </div>
</div>

Nulla nibh sapien, semper vitae urna eget, pellentesque iaculis magna. Vestibulum sit amet tellus a nisl iaculis dignissim. In sit amet urna ex. Curabitur lectus est, mattis ut auctor id, tincidunt et odio.

Vidéo

Serveur de streaming

<div class="animVideoPlaylist clearfix">
    <figure>
        <div class="boiteAnimVideo">
            <div class="animVideo" data-urlVideo="EDU6020/Video" data-urlCC="" data-urlThumb="" data-vb="true"> </div>
        </div>
    </figure>
</div>

YouTube / Vimeo

<div class="video">
    <div class="videoWrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/video?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

Tableaux

<div class="tableau style1">
    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
        <thead>
            <tr>
                <tr>
                    <th id="premiere-colonne" class="tier" scope="col"> </th>
                    <th id="deuxieme-colonne" class="tier" scope="col"> </th>
                    <th id="troisieme-colonne" class="tier" scope="col"> </th>
                </tr>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td headers="premiere-colonne"> </td>
                <td headers="deuxieme-colonne"> </td>
                <td headers="troisieme-colonne"> </td>
            </tr>
        </tbody>
    </table>
</div>

Feuille de route

<div class="tableau style1">
    <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
        <thead>
            <tr>
                <tr>
                    <th id="semaines" scope="col"> </th>
                    <th id="a-faire" scope="col"> </th>
                </tr>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td headers="semaines"> </td>
                <td headers="a-faire" class="alignGauche"> 
                    <ul>
                        <li> </li>
                        <li> </li>
                        <li> </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td headers="semaines a-faire" class="alignCentre" colspan="2"> <strong>Lorem ispum</strong></td>
            </tr>
            <tr>
                <td headers="semaines"> </td>
                <td headers="a-faire" class="alignGauche">
                    <ul>
                        <li> </li>
                        <li> </li>
                        <li> </li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>