Cet extrait permet de transformer la description d’un cours Chamilo en présentation.
<!-- Rangée de 3 cartes -->
<div class="row">
<!-- Carte 1 : Prérequis -->
<div class="col-md-4">
<div class="panel panel-default" style="border-radius:8px;border:1px solid #e0e0e0;box-shadow:none;">
<div class="panel-heading" style="border-radius:8px 8px 0 0;padding:14px 16px;border-bottom:1px solid #d5c9f7;background-color:#EEEDFE;">
<div style="display:flex;align-items:center;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;font-size:16px;margin-right:10px;flex-shrink:0;background-color:#d0ccf5;color:#534AB7;">
<i class="fa fa-list-alt" aria-hidden="true"></i>
</span>
<div>
<strong style="display:block;font-size:14px;font-weight:600;color:#3C3489;">Prérequis</strong>
<small style="font-size:12px;color:#6b63a8;">Avant de commencer</small>
</div>
</div>
</div>
<div class="panel-body" style="padding:14px 16px;min-height:260px;">
<ul style="list-style:none;padding:0;margin:0;">
<li style="display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13px;color:#444;border-bottom:1px solid #f0f0f0;"><i class="fa fa-check" style="color:#534AB7;font-size:12px;width:16px;text-align:center;"></i> Notions de base en informatique</li>
<li style="display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13px;color:#444;border-bottom:1px solid #f0f0f0;"><i class="fa fa-check" style="color:#534AB7;font-size:12px;width:16px;text-align:center;"></i> Niveau bac ou équivalent</li>
<li style="display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13px;color:#444;border-bottom:1px solid #f0f0f0;"><i class="fa fa-check" style="color:#534AB7;font-size:12px;width:16px;text-align:center;"></i> Accès à un navigateur web</li>
<li style="display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13px;color:#444;"><i class="fa fa-check" style="color:#534AB7;font-size:12px;width:16px;text-align:center;"></i> Modules 1 et 2 complétés</li>
</ul>
</div>
<div class="panel-footer" style="background-color:#fff;border-top:1px solid #e0e0e0;border-radius:0 0 8px 8px;padding:10px 16px;font-size:12px;color:#888;">
<i class="fa fa-clock-o" aria-hidden="true"></i>
Durée estimée : <strong style="color:#333;">4 heures</strong>
</div>
</div>
</div>
<!-- Carte 2 : Objectifs -->
<div class="col-md-4">
<div class="panel panel-default" style="border-radius:8px;border:1px solid #e0e0e0;box-shadow:none;">
<div class="panel-heading" style="border-radius:8px 8px 0 0;padding:14px 16px;border-bottom:1px solid #9fd9c4;background-color:#E1F5EE;">
<div style="display:flex;align-items:center;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;font-size:16px;margin-right:10px;flex-shrink:0;background-color:#b2e8d4;color:#0F6E56;">
<i class="fa fa-bullseye" aria-hidden="true"></i>
</span>
<div>
<strong style="display:block;font-size:14px;font-weight:600;color:#085041;">Objectifs</strong>
<small style="font-size:12px;color:#1d7a62;">Ce que vous allez apprendre</small>
</div>
</div>
</div>
<div class="panel-body" style="padding:14px 16px;min-height:260px;">
<ul style="list-style:none;padding:0;margin:0;">
<li style="display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13px;color:#444;border-bottom:1px solid #f0f0f0;"><i class="fa fa-arrow-right" style="color:#0F6E56;font-size:12px;width:16px;text-align:center;"></i> Comprendre les LMS modernes</li>
<li style="display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13px;color:#444;border-bottom:1px solid #f0f0f0;"><i class="fa fa-arrow-right" style="color:#0F6E56;font-size:12px;width:16px;text-align:center;"></i> Concevoir un parcours pédagogique</li>
<li style="display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13px;color:#444;border-bottom:1px solid #f0f0f0;"><i class="fa fa-arrow-right" style="color:#0F6E56;font-size:12px;width:16px;text-align:center;"></i> Évaluer les apprenants en ligne</li>
<li style="display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13px;color:#444;"><i class="fa fa-arrow-right" style="color:#0F6E56;font-size:12px;width:16px;text-align:center;"></i> Utiliser des ressources SCORM</li>
</ul>
</div>
<div class="panel-footer" style="background-color:#fff;border-top:1px solid #e0e0e0;border-radius:0 0 8px 8px;padding:10px 16px;font-size:12px;color:#888;">
<i class="fa fa-certificate" aria-hidden="true"></i>
Certification : <strong style="color:#333;">Open Badge délivré</strong>
</div>
</div>
</div>
<!-- Carte 3 : Auteurs -->
<div class="col-md-4">
<div class="panel panel-default" style="border-radius:8px;border:1px solid #e0e0e0;box-shadow:none;">
<div class="panel-heading" style="border-radius:8px 8px 0 0;padding:14px 16px;border-bottom:1px solid #f0b89a;background-color:#FAECE7;">
<div style="display:flex;align-items:center;">
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;font-size:16px;margin-right:10px;flex-shrink:0;background-color:#f5c9b3;color:#993C1D;">
<i class="fa fa-users" aria-hidden="true"></i>
</span>
<div>
<strong style="display:block;font-size:14px;font-weight:600;color:#712B13;">Auteurs</strong>
<small style="font-size:12px;color:#a04520;">Équipe pédagogique</small>
</div>
</div>
</div>
<div class="panel-body" style="padding:14px 16px;min-height:260px;">
<div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f0f0f0;">
<div style="width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;background-color:#B5D4F4;color:#0C447C;">ML</div>
<div>
<strong style="display:block;font-size:13px;color:#333;">Marie Lefebvre</strong>
<small style="font-size:11px;color:#888;">Ingénieure pédagogique</small>
</div>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:8px 0;">
<div style="width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;background-color:#C0DD97;color:#27500A;">TR</div>
<div>
<strong style="display:block;font-size:13px;color:#333;">Thomas Renard</strong>
<small style="font-size:11px;color:#888;">Expert e-learning</small>
</div>
</div>
</div>
<div class="panel-footer" style="background-color:#fff;border-top:1px solid #e0e0e0;border-radius:0 0 8px 8px;padding:10px 16px;font-size:12px;color:#888;">
<i class="fa fa-calendar" aria-hidden="true"></i>
Mis à jour : <strong style="color:#333;">mars 2025</strong>
</div>
</div>
</div>
</div><!-- /.row -->