[code]<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://via.placeholder.com/460x192.png" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Nom</span>
<span>Prénom</span>
<span>Âge</span>
<span>Maison</span>
<span>Année</span>
</div>

<div id="fonction">Fonction du perso</div><img src="https://via.placeholder.com/55x55.png" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie: ?</span>
<span>Botanique: ?</span>
<span>DCFM: ?</span>
<span>Histoire de la magie: ?</span>
<span>Métamorphose: ?</span>
<span>Potion: ?</span>
<span>Sortilèges: ?</span>
<span>Vol: ?</span>
<span>Option 1: ?</span>
<span>Option 2: ?</span>

</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Astronomie: ?</span>
<span>Botanique: ?</span>
<span>DCFM: ?</span>
<span>Histoire de la magie: ?</span>
<span>Métamorphose: ?</span>
<span>Potion: ?</span>
<span>Sortilèges: ?</span>
<span>Vol: ?</span>
<span>Option 1: ?</span>
<span>Option 2: ?</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Astronomie: ?</span>
<span>Botanique: ?</span>
<span>DCFM: ?</span>
<span>Histoire de la magie: ?</span>
<span>Métamorphose: ?</span>
<span>Potion: ?</span>
<span>Sortilèges: ?</span>
<span>Vol: ?</span>
<span>Option 1: ?</span>
<span>Option 2: ?</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Baguette: Bois, Longueur, Flexibilité, Coeur</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>[/code]

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://33.media.tumblr.com/434bb05f182b14b12239109aa937a3c9/tumblr_mplw65r8Tx1r1shx8o1_500.gif" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Potter</span>
<span>James Sirius</span>
<span>17 ans</span>
<span>Gryffondor</span>
<span>7e Année</span>
</div>

<div id="fonction">Capitaine & Poursuiveur</div><img src="https://i.gifer.com/VRRk.gif" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">James entre en septieme et derniere année a Poudlard ou peut-etre pas la derniere exactement. Il est le capitaine de l'équipe de quidditch de Gryffondor ou il joue en tant que poursuiveur.  </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Botanique : A</span>
<span>DCFM : O</span>
<span>Métamorphose : O</span>
<span>Potion : EE</span>
<span>Sort & Enchantement : EE</span>
<span>Vol : O</span>
<span>Étude des Moldus : A</span>
<span>Droit Magique : A</span>
<span>Magie des Éléments : EE</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Astronomie : A</span>
<span>Botanique : EE</span>
<span>DCFM : EE</span>
<span>Histoire de la magie : A</span>
<span>Métamorphose : O</span>
<span>Potion : O</span>
<span>Sort & Enchantement : EE</span>
<span>Vol, O</span>
<span>Étude des Moldus : EE</span>
<span>Magie des Éléments :EE</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Botanique : a suivre</span>
<span>DCFM : a suivre</span>
<span>Métamorphose : a suivre</span>
<span>Potion : a suivre</span>
<span>Sort & Enchantement : a suivre</span>
<span>Vol : a suivre</span>
<span>Étude des Moldus : a suivre</span>
<span>Droit Magique : a suivre</span>
<span>Magie des Éléments : a suivre</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Baguette: Bois d'aulne — Plume de phénix — 29,7 cm — Relativement flexible</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://via.placeholder.com/460x192.png" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Malefoy</span>
<span>Scorpius H.</span>
<span>15 ans</span>
<span>Serpentard</span>
<span>5e année</span>
</div>

<div id="fonction">Préfet de Serpentard & Attrapeur</div><img src="https://via.placeholder.com/55x55.png" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Duel</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://2img.net/image.noelshack.com/fichiers/2020/24/4/1591867145-source.gif" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Sleepy</span>
<span>Elyana</span>
<span>16 ans</span>
<span>Gryffondor</span>
<span>6e Année</span>
</div>

<div id="fonction">Etudiante Manumage</div><img src="https://2img.net/image.noelshack.com/fichiers/2020/24/4/1591866202-a214307c49500cd3ac754e74fc6b122d.gif" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Elyana entre dans son avant dernière année à Poudlard, les BUSES sont derrière elle, et les ASPIC encore loin devant. Elle peut profiter pleinement de son année pour s'exercer à sa nouvelle capacité de manumage qu'elle maîtrise un petit peu plus chaque jour. Toujours à la recherche d'aventure elle à hâte de voir débuter le tournois.</div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie : A</span>
<span>Vol : A</span>
<span>Botanique : A</span>
<span>Sortilège : O</span>
<span>Histoire de la magie : D</span>
<span>Potion : EE</span>
<span>Métamorphose : EE</span>
<span>DCFM : O</span>
<span>Magie des Éléments : O</span>
<span>Soins aux créatures magiques : O</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Astronomie : A</span>
<span>Vol : A</span>
<span>Botanique : A</span>
<span>Sortilège : O</span>
<span>Histoire de la magie : D</span>
<span>Potion : EE</span>
<span>Métamorphose : EE</span>
<span>DCFM : O</span>
<span>Magie des Éléments : O</span>
<span>Soins aux créatures magiques : O</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Astronomie : A suivre</span>
<span>Botanique : A suivre</span>
<span>Sortilège : A suivre</span>
<span>Alchimie : A suivre</span>
<span>Potion : A suivre</span>
<span>Métamorphose : A suivre</span>
<span>DCFM : A suivre</span>
<span>Magie des Éléments : A suivre</span>
<span>Soins aux créatures magiques : A suivre</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Baguette: Bois d'ébêne - écaille de Ndjamulji - 25 cm plutôt rigide.</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

[code]<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://media.giphy.com/media/1NWiqkdQQ1mrC/giphy.gif" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Ferguson</span>
<span>Eliott</span>
<span>12 ans</span>
<span>Poufsouffle</span>
<span>2e année</span>
</div>

<div id="fonction">Élève, poursuiveur</div><img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/the-incident-claire-and-mitchells-mother-dede-drops-in-for-news-photo-91474857-1560544273.jpg?crop=0.668xw:1.00xh;0.240xw,0&resize=768:*" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Journal</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Chorale</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Le petit Eliott espère passer de bonnes années d'études à Poudard, même s'il a quelques problèmes familiaux à dépasser. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie</span>
<span>Potions</span>
<span>DCFM</span>
<span>Métamorphose</span>
<span>Sortilèges</span>
<span>Botanique</span>
<span>Histoire de la magie</span>
<span>Vol</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Astronomie - Pas encore</span>
<span>Potions - Pas encore</span>
<span>DCFM - Pas encore</span>
<span>Métamorphose - Pas encore</span>
<span>Sortilèges - Pas encore</span>
<span>Botanique - Pas encore</span>
<span>Histoire de la magie - Pas encore</span>
<span>Vol - Pas encore</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Astronomie - Pas encore</span>
<span>Potions - Pas encore</span>
<span>DCFM - Pas encore</span>
<span>Métamorphose - Pas encore</span>
<span>Sortilèges - Pas encore</span>
<span>Botanique - Pas encore</span>
<span>Histoire de la magie - Pas encore</span>
<span>Vol - Pas encore</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Bois de hêtre, crin de licorne, 26,8 centimètres, relativement souple</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description"> Eliott peut se déplacer grâce à la poudre de cheminette. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sorts de Première année
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions étudiées en première année
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>[/code]

[code]<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://thumbs.gfycat.com/ForthrightDetailedGemsbok-small.gif" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Ashford</span>
<span>Harold</span>
<span>49 ans</span>
<span>Ancien Gryffondor</span>
</div>

<div id="fonction">Garde-chasse</div><img src="https://www.hypnoweb.net/photo/member/4522/acteurs/silas_weir_mitchell.jpg" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Harold est le garde-chasse de Poudlard depuis 2018 après avoir passé près de 25 années à travailler dans une réserve de dragons en Roumanie. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie</span>
<span>Potions</span>
<span>DCFM</span>
<span>Métamorphose</span>
<span>Sortilèges</span>
<span>Botanique</span>
<span>Histoire de la magie</span>
<span>Vol</span>
<span>Soins aux créatures magiques</span>
<span>Études des runes</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Astronomie - Piètre</span>
<span>Potions - Acceptable</span>
<span>DCFM - Effort exceptionnel</span>
<span>Métamorphose - Effort exceptionnel</span>
<span>Sortilèges - Optimal</span>
<span>Botanique - Acceptable</span>
<span>Histoire de la magie - Effort exceptionnel</span>
<span>Soins aux créatures magiques - Optimal</span>
<span>Vol - Optimal</span>
<span>Etudes des runes - Acceptable</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potions - Effort exceptionnel</span>
<span>DCFM - Effort exceptionnel</span>
<span>Métamorphose - Acceptable</span>
<span>Sortilèges - Optimal</span>
<span>Botanique - Acceptable</span>
<span>Histoire de la magie - Effort exceptionnel</span>
<span>Vol - Optimal</span>
<span>Soins aux créatures magiques -Optimal</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Bois de vigne — Crin de sombral — 32 cm — Assez flexible</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Harold peut se déplacer grâce à la poudre de cheminette, sur balai, grâce au transplanage et via les portoloins. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sorts de Première année
- Sorts de Deuxième année
- Sorts de Troisième année
- Sorts de Quatrième année
- Sorts de Cinquième année
- Sorts de Sixième année
- Sorts de Septièmes année
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions de Première année
- Potions de Deuxième année
- Potions de Troisième année
- Potions de Quatrième année
- Potions de Cinquième année
- Potions de Sixième année
- Potions de Septième année
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>[/code]

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://66.media.tumblr.com/f6422cd87b2310b7d5f2a9d62b7031fc/tumblr_plr4r4vRp41qz8rwfo1_r1_500.gif" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Malefoy</span>
<span>Astoria</span>
<span>40 ans</span>
<span>Ancienne Serpentard</span>
<span>Fini</span>
</div>

<div id="fonction">Ancienne médicomage / Professeurs des potions</div><img src="https://images2.imgbox.com/76/5f/6dnRW8Jj_o.png" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Astoria Malefoy vient tout juste de changer de métier, pour enseigner les potions à Poudlard, c'est une véritable passion. Ancienne médicomage, elle sait qu'elle retournera à Sainte Mangouste, pour reprendre la médicomagie. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie</span>
<span>Potions</span>
<span>DCFM</span>
<span>Métamorphose</span>
<span>Sortilèges</span>
<span>Botanique</span>
<span>Histoire de la magie</span>
<span>Vol</span>
<span>Soins aux créatures magiques</span>
<span>Etudes des runes</span>
<span>Arithmomancie</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Astronomie - Acceptable</span>
<span>Potions - Optimal</span>
<span>DCFM - Effort exceptionnel</span>
<span>Métamorphose- Effort exceptionnel</span>
<span>Sortilèges - Optimal</span>
<span>Botanique - Effort exceptionnel</span>
<span>Histoire de la magie - Acceptable</span>
<span>Vol - Piètre</span>
<span>Soins aux créatures magiques - Effort exceptionnel</span>
<span>Etudes des runes - Optimal</span>
<span>Arithmomancie - Acceptable</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Astronomie - Acceptable</span>
<span>Potions - Optimal</span>
<span>DCFM - Optimal</span>
<span>Métamorphose - Effort exceptionnel</span>
<span>Sortilèges - Effort exceptionnel</span>
<span>Botanique - Acceptable</span>
<span>Histoire de la magie - Effort exceptionnel</span>
<span>Soins aux créatures magiques - Effort exceptionnel</span>
<span>Etude des runes - Optimal</span>
<span>Arithmomancie - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Bois de saule, plume de phénix, 24 cm et souple</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Astoria a son permis pour transplaner, elle peut utiliser de la poudre de cheminette ou des portoloins. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sorts de premières année
- Sorts de deuxième année
- Sorts de troisième année
- Sorts de quatrième année
- Sorts de cinquième année
- Sort de sixième année
- Sort de septième année
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions de première année
- Potions de deuxième année
- Potions de troisième année
- Potions de quatrième année
- Potions de cinquième année
- Potions de sixième année
- Potions de septième année
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://i.pinimg.com/originals/3a/9f/bc/3a9fbc5185cac96d73e511f4726c043b.gif" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Tibbins</span>
<span>Jeffrey</span>
<span>12 ans</span>
<span>Poufsouffle</span>
<span>2ième année</span>
</div>

<div id="fonction">Batteur de Poufsouffle</div><img src="https://66.media.tumblr.com/d11c90c9f2b32c9d8d12229d4ec7b4cc/tumblr_or22joQ6kg1wqkxafo1_400.gifv" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Quidditch</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Jeffrey est un jeune garçon de 12 ans à Poufsouffle et il commence sa deuxième année à Poudlard. Il est un nouveau dans l'équipe de Poufsouffle au poste de Batteur. Il a cinq frères et une sœur. Il est donc dans une famille avec sept enfants. D'ailleurs, Jeffrey est nouvellement oncle. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie : Acceptable</span>
<span>Vols : Optimal</span>
<span>Botanique :  Désolant</span>
<span>Sortilège : Effort Exceptionnel</span>
<span>Histoire de la Magie : Acceptable</span>
<span>Potions : Effort Exceptionnel</span>
<span>Métamorphose : Effort Exceptionnel</span>
<span>DCFMal : Effort Exceptionnel</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Chêne, Crin de Licorne, 30 cm, flexible</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://via.placeholder.com/460x192.png" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Nott</span>
<span>Nymphea</span>
<span>16 ans</span>
<span>Gryffondor</span>
<span>6e année</span>
</div>

<div id="fonction">Etudiante</div><img src="https://zupimages.net/up/20/24/e2oy.png" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Quidditch?</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club de duel/span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie - Piètre</span>
<span>Botanique - Désolant</span>
<span>Défense contre les forces du mal - Optimal</span>
<span>Histoire de la magie - Acceptable</span>
<span>Métamorphose -Effort Exceptionnel</span>
<span>Potions - Acceptable</span>
<span>Sortilèges - Optimal</span>
<span>Vol - Optimal</span>
<span>Soins aux créatures magiques - Effort Exceptionnel</span>
<span>Magie des éléments - Effort Exceptionnel</span>
<span>Droit magique - Acceptable</span>

</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Astronomie - Désolant</span>
<span>Botanique - Désolant</span>
<span>Défense contre les forces du mal - Effort Exceptionnel</span>
<span>Histoire de la magie - Acceptable</span>
<span>Métamorphose - Effort exceptionnel</span>
<span>Potions - Effort exceptionnel</span>
<span>Sortilèges - Optimal</span>
<span>Vol - Optimal</span>
<span>Soins aux créatures magiques - Acceptable</span>
<span>Magie des éléments - Optimal</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Vigne, 30,8cm, plutôt flexible, épine du monstre du Fleuve Blanc</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

[code]<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://media.giphy.com/media/4RMt4B2Abd44M/giphy.gif" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Gardner-Clairmont</span>
<span>Rupert</span>
<span>61 ans</span>
<span>Ancien Serdaigle</span>
</div>

<div id="fonction">Bibliothécaire</div><img src="https://media3.giphy.com/media/g85aQ2HGc9e7u/source.gif" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Rupert est le bibliothécaire de Poudlard depuis 2015. Avant ça, il était reporter pour divers journaux entre l'Angleterre et la France. Il est marié avec Germain, un français depuis 2015, mais aujourd'hui, ils sont ensemble depuis plus de 30 ans. Ils ont élevé ensemble le fils de leur amie Emma, Julien. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie</span>
<span>Potions</span>
<span>DCFM</span>
<span>Métamorphose</span>
<span>Sortilèges</span>
<span>Botanique</span>
<span>Histoire de la magie</span>
<span>Vol</span>
<span>Étude des runes</span>
<span>Arithmancie</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Astronomie - Acceptable</span>
<span>Potions - Effort exceptionnel</span>
<span>DCFM - Effort exceptionnel</span>
<span>Métamoprhose - Effort exceptionnel</span>
<span>Sortilèges - Effort exceptionnel</span>
<span>Botanique - Optimal</span>
<span>Histoire de la magie - Optimal</span>
<span>Vol -Désolant </span>
<span>Étude des runes - Optimal </span>
<span>Arithmancie - Piètre</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Astronomie - Acceptable</span>
<span>Potions - Acceptable</span>
<span>DCFM - Effort exceptionnel</span>
<span>Métamorphose - Effort exceptionnel</span>
<span>Sortilèges - Effort exceptionnel</span>
<span>Botanique - Optimal</span>
<span>Histoire de la magie - Optimal</span>
<span>Étude des runes - Optimal</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Bois de sycomore, poil de demiguise, 27,3 cm, assez épaisse mais très souple</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description"> Rupert peut se déplacer grâce à la poudre de cheminette, aux portoloins et au transplanage. Cela dit, vu son niveau en vol, il évite de se déplacer en balai. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sorts de Première année
- Sorts de Deuxième année
- Sorts de Troisième année
- Sorts de Quatrième année
- Sorts de Cinquième année
- Sorts de Sixième année
- Sorts de Septième année
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions de Première année
- Potions de Deuxième année
- Potions de Troisième année
- Potions de Quatrième année
- Potions de Cinquième année
- Potions de Sixième année
- Potions de Septième année
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>[/code]

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://em.wattpad.com/bfcf6309c5c722c9ce0721124eb2dbdd887e32f2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f7a506f4574726c627951397143673d3d2d3439353637383931322e313466373938386330653262356563393835373137343136373831392e676966?s=fit&w=720&h=720" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="http://elle-fanning.net/images/albums/photos/Photoshoots/2010/Session%2020%20-%20Unknown/2010Unknown011.jpg" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Smith</span>
<span>Annah</span>
<span>13 ans</span>
<span>Poufsouffle</span>
<span>3ème année</span>
</div>

<div id="fonction">Élève et poursuiveuse</div><img src="https://via.placeholder.com/55x55.png" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" />Quiddich</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Annah entre en 3ème année chez les Poufsouffles. Elle est poursuiveuse dans l'équipe de sa Maison depuis sa deuxième année. La demoiselle démarre cette année avec appréhension après la découverte, durant l'été, de capacités particulières. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Défense contre les forces du mal</span>
<span>Potions</span>
<span>Vol</span>
<span>Astronomie</span>
<span>Botanique</span>
<span>Sortilèges</span>
<span>Histoire de la Magie</span>
<span>Enchantements</span>
<span>Soins aux créatures magiques</span>
<span>Magie des éléments</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Bois de châtaigner, écaille de ndjamulji, 26cm, fine et très souple.</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://reduction-image.com/gif-anime/temp/759352001592775266.gif" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Scamander</span>
<span>Lorcan</span>
<span>13 ans</span>
<span>Poufsouffle</span>
<span>3ème Année</span>
</div>

<div id="fonction">Élève</div><img src="https://sun9-62.userapi.com/c824701/v824701912/1a4efd/ou7BUGQbIPQ.jpg?ava=1" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Matière 1</span>
<span>Matière 2</span>
<span>Matière 3</span>
<span>Matière 4</span>
<span>Matière 5</span>
<span>Matière 6</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette : Bois de frêne — Crin de Licorne — 25 cm — Souple</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Jeune Poufsouffle introverti de troisième année, Lorcan entre dans l'équipe de Quidditch cette année, poussé par son jumeau Lysander et sa meilleure amie Annah. Le jeune garçon entame sa troisième année avec des appréhensions mais également des objectifs à remplir pour pour prendre soin de Lysander et de se sentir moins coupable des évènements produits cet été.</div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sorts de 1ère année
- Sorts de 2ème année
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions de 1ère année
- Potions de 2ème année
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://i.pinimg.com/originals/cd/2f/b1/cd2fb10f702f615f5e0c2c88b9224393.gif" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Malefoy</span>
<span>Drago</span>
<span>41 ans</span>
<span>Serpentard</span>
<span>//</span>
</div>

<div id="fonction">Avocat/Auteur</div><img src="https://lh3.googleusercontent.com/proxy/MnFaOOYR089G39RHvmSCwnnvZiCcsZJTPlTcwjBCRwHaODWou9UqOW6Chww0O009eHXVaVDnXE6XHFbJhqUF_6yVd6vaagIUEIek3ea5YL_MVoqgGay95WC98ikUkNGTJlxkATkRiO3yQpGSRdiNqH7A" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Matière 1</span>
<span>Matière 2</span>
<span>Matière 3</span>
<span>Matière 4</span>
<span>Matière 5</span>
<span>Matière 6</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span></span>
<span></span><span>Baguette: Aubépine, crin de licorne, 25cm, relativement souple</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://steamuserimages-a.akamaihd.net/ugc/877501800077033142/BF863491A27F185001146F1C02E9FDB84FF5CCCC/" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Wick (Lupo)</span>
<span>John (Adriano)</span>
<span>50 ans</span>
<span>Sainte-Mangouste</span>
<span>Interne dernière année</span>
</div>

<div id="fonction">Médicomage Interne</div><img src="https://i.pinimg.com/originals/fa/59/09/fa5909675baacc1853060bca61409d1a.gif" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Matière 1</span>
<span>Matière 2</span>
<span>Matière 3</span>
<span>Matière 4</span>
<span>Matière 5</span>
<span>Matière 6</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Chêne rouge ; Crin de sombral ; 31,5 cm ; Semi-rigide</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://via.placeholder.com/460x192.png" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Dursley</span>
<span>Camille Evans</span>
<span>15 ans</span>
<span>Poufsouffle</span>
<span>5ème année</span>
</div>

<div id="fonction">Elève</div><img src="https://i1.wp.com/www.taille-age-celebrites.com/wp-content/uploads/dean-charles-chapman-acteur.jpg?fit=96%2C96&ssl=1" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Métamorphose</span>
<span>SCM</span>
<span>Sortilèges</span>
<span>Potions</span>
<span>Botanique</span>
<span>Etude des moldus</span>
<span>DCFM</span>
<span>Histoire de la magie</span>
<span>Astronomie</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Bague de couple avec initiales</span>
<span></span><span>Baguette: Bois d'acajou, plume de phénix, 36 cm, relativement flexible</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://i.servimg.com/u/f41/20/23/58/72/carnet10.jpg" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Silver</span>
<span>Etsuko</span>
<span>15 ans</span>
<span>Serdaigle</span>
<span>5éme</span>
</div>

<div id="fonction">Fonction du perso</div><img src="https://via.placeholder.com/55x55.png" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Entre orient et occident, elle n'a pas eu le choix; le mensonge est maître sur son passé, et l'avenir peine a trouver sa voie.</div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Matière 1</span>
<span>Matière 2</span>
<span>Matière 3</span>
<span>Matière 4</span>
<span>Matière 5</span>
<span>Matière 6</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Noyer Noir, 23cm, flexible, plume de phénix</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://i.servimg.com/u/f74/20/23/31/46/45f32410.jpg" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Sognaro</span>
<span>Lucas</span>
<span>13ans</span>
<span>Serdaigle</span>
<span>3 ème année</span>
</div>

<div id="fonction">Fonction du perso</div><img src="https://i.servimg.com/u/f74/20/23/31/46/tzolzo10.png" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS66rmOswvKTD1XroUpYQ6BKurpYGN8qm4V4w&usqp=CAU" alt="Club" /> Club de Duel</span>
<span><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSBljFLWcfLOtfMX8Y8eAUSudO8-Kx3E3WkZQ&usqp=CAU" alt="Club" /> Quidditch</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Gazette de Poudlard</span>
</div>

<div class="description">Un italien d'origine suédoise qui a tendance à se battre avec ses propres émotions étant d'une pudeur sans nom, bien qu'elle ne soit pas visible physiquement, car elle se manifeste seulement quand il est question de ses sentiments. Alors qu'il lutte avec son cœur, son esprit livre une autre bataille entre ses appréhensions et sa curiosité maladive. Tel un renard qui cherche à assouvir sa curiosité des hommes tout en se cachant d'eux, Lucas leur ressemble en quelques points, ce qui lui a valu son surnom de Vulpy auprès de ses parents qui trouve le comportement de leur unique garçon adorable à souhait.</div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Métamorphose</span>
<span>Sortilèges et enchantements</span>
<span>Botanique</span>
<span>Défense contre les forces du mal</span>
<span>Potions</span>
<span>Soins aux créatures magiques</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Chêne rouge, 31cm, légèrement rigide, épine du monstre du fleuve blanc</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://via.placeholder.com/460x192.png" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Esposito</span>
<span>Alessio</span>
<span>17 ans</span>
<span>Serpentard</span>
<span>7éme année</span>
</div>

<div id="fonction">Fonction du perso</div><img src="https://via.placeholder.com/55x55.png" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Matière 1</span>
<span>Matière 2</span>
<span>Matière 3</span>
<span>Matière 4</span>
<span>Matière 5</span>
<span>Matière 6</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Noyer Noir, 23cm, flexible, plume de phénix</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://facebook.com/messaging/lightspeed/media_fallback/?entity_id=776195676536810&entity_type=3&width=2048&height=2048&access_token=EAAbcjYySe9YBAC1wbOgdhDeZAZC2h0Mb0CPVPUeRcyEmfGHgBbNsxL8YBRFkmkVlc9nJNttDBGS1vKoNqWH3BzoAztQWkyxM52hZC88e7ds2LZCbCORa6VUS7wYe6w6A5Mn9xhwSZA63302OyfQZB0OKfED7fGGs49MsNGlLByeQZDZD" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Potter</span>
<span>Lily Luna</span>
<span>13 ans</span>
<span>Serdaigle</span>
<span>3ème</span>
</div>

<div id="fonction">Attrapeuse de Serdaigle</div><img src="https://i.servimg.com/u/f91/19/35/69/58/lily11.jpg" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Quidditch</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Lily est la cadette de la famille Potter, elle rentre en 3ème année à Poudlard à la maison Serdaigle où elle est également attrapeuse de l'équipe de Quidditch. Plus tard elle voudrait être préfète de sa maison. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Sortilège : O</span>
<span>Métamorphose : O</span>
<span>Soins aux créatures magiques : O</span>
<span>Défense Contre les Forces du Mal : EE</span>
<span>Potions : EE</span>
<span>Histoire de la Magie : EE</span>
<span>Etude des runes : EE</span>
<span>Astronomie : A</span>
<span>Botanique : A</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Baguette: Charme,  26, 7cm, très souple, plume de phénix</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lily peut se déplacer en poudre de cheminette ainsi qu'en balai accompagné. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort 1ère année débloqués
- Sort 2ème année débloqués
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://i.ytimg.com/vi/aiU22lKiZbA/maxresdefault.jpg" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Tibbins</span>
<span>Gaspard aka Ganymède</span>
<span>11 ans</span>
<span>Serdaigle</span>
<span>1ère année</span>
</div>

<div id="fonction">Première année</div><img src="https://i.pinimg.com/736x/c9/c2/fb/c9c2fbc62648340d3cbf206c4b159d17--sticker-decals.jpg" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Ganymède est un élève de première année bien plus calme que ses jumeaux Sylvia & Léonard et bien moins brillant que Gérard. Il est souvent dans la lune et a du mal à se concentrer ce qui en fait un piètre élève en métamorphose, en potions et en histoire de la magie. Par contre il excelle particulièrement en astronomie, en vol et en botanique.</div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie</span>
<span>Botanique</span>
<span>DCFM</span>
<span>Histoire de la Magie</span>
<span>Métamorphoses</span>
<span>Potions</span>
<span>Sortilèges</span>
<span>Vol</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Baguette: Sycomore, 34,7 cm, poudre de corne de Ngoubou, rigide au centre et flexible aux extrémités.</span>
<span></span><span>Son crapaud, Pluton</span>
<span></span><span>Son livre de chevet : " Astronomie & Astrologie, la magie des étoiles en une encyclopédie"</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://i.servimg.com/u/f74/20/23/31/46/tm/d25b3b10.jpg" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Tibbins</span>
<span>Léonard</span>
<span>11 ans</span>
<span>Serpentard</span>
<span>1 ère année</span>
</div>

<div id="fonction">élève</div><img src="https://i.servimg.com/u/f74/20/23/31/46/tm/image210.jpg" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 1</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Léonard fait parti du quatuor infernal des enfants Tibblins, à l'instar de son aînée du Quad, il est assez vif et turbulent, alors que son véritable jumeau, Ganymède, lui ait très calme. Il n'est peut-être pas le plus brillant, contrairement à Gérard, mais il n'est clairement pas bête, se révélant parfaitement capable de se concentrer sur des choses qui lui plaisent vraiment, tel la métamorphose, les potions, les sortilèges et le vol. Bien que toutes ses matières requiert un certain investissement ce qui aide à la concentration du jeune homme. Mais pour ce qui est des matières tel que la botanique, l'histoire de la magie et l'astronomie, là où la patience est le maître mot, Leo est totalement à côté de la plaque.</div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Métamorphose</span>
<span>Sortilèges</span>
<span>Vol</span>
<span>DCFM</span>
<span>Astronomie</span>
<span>Botanique</span>
</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
<span>Potion - Effort exceptionnel</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Aubépine, 29cm, flexible, épine du monstre du fleuve blanc</span>
<span></span><span>Un miroir de poche</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>

<div id="carnet_de_note">
<div id="header_carnet"><span>Carnet de route</span></div><img src="https://nsa40.casimages.com/img/2020/07/25//20072505233632918" alt="Image header carnet de note" />

<div id="onglets">
<input id="onglet1" type="radio" name="tabs" checked><label for="onglet1"><img src="https://zupimages.net/up/20/23/httc.png" alt="Informations Principales" /></label>
<input id="onglet2" type="radio" name="tabs"><label for="onglet2"><img src="https://zupimages.net/up/20/10/76du.png" alt="Résultats des Examens" /></label>
<input id="onglet3" type="radio" name="tabs"><label for="onglet3"><img src="https://zupimages.net/up/20/23/stqo.png" alt="Collections chocogrenouilles" /></label>
<input id="onglet4" type="radio" name="tabs"><label for="onglet4"><img src="https://zupimages.net/up/20/10/otd9.png" alt="Permis et déplacements" /></label>

<div class="contenu_onglet_carnet" id="infos">
<div class="infos_user">
<span>Merryweather</span>
<span>Matthew</span>
<span>13</span>
<span>Gryffondor</span>
<span>3éme</span>
</div>

<div id="fonction">Batteur de Gryffondor</div><img src="https://nsa40.casimages.com/img/2020/06/17/mini_200617065157953758.jpg" alt="Icon utilisateur" />

<div id="clubs">
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Quidditch</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 2</span>
<span><img src="https://via.placeholder.com/32x32.png" alt="Club" /> Club 3</span>
</div>

<div class="description">Matthew est né dans une famille de Botanistes Magiques et il adore les plantes. C'est un garçon tout fou et tout dynamique qui est également extrêmement protecteur. </div>
</div>

<div class="contenu_onglet_carnet" id="exam">
<div class="infos_user">
<span>Astronomie: A</span>
<span>Botanique: O</span>
<span>DCFM: E</span>
<span>Histoire de la magie: A</span>
<span>Métamorphose: E</span>
<span>Potion: E</span>
<span>Sortilèges: E</span>
<span>Vol: O</span>
<span>Arithmancie: A</span>
<span>Soins aux créatures Magiques : O</span>

</div>

<div class="title_onglet"><span>Résultats des examens</span></div>

<div class="exam_info">B.U.S.E
<div>
<span>Astronomie: ?</span>
<span>Botanique: ?</span>
<span>DCFM: ?</span>
<span>Histoire de la magie: ?</span>
<span>Métamorphose: ?</span>
<span>Potion: ?</span>
<span>Sortilèges: ?</span>
<span>Vo: ?</span>
<span>Option 1: ?</span>
<span>Option 2: ?</span>
</div>
</div>

<div class="exam_info">A.S.P.I.C
<div>
<span>Astronomie: ?</span>
<span>Botanique: ?</span>
<span>DCFM: ?</span>
<span>Histoire de la magie: ?</span>
<span>Métamorphose: ?</span>
<span>Potion: ?</span>
<span>Sortilèges: ?</span>
<span>Vo: ?</span>
<span>Option 1: ?</span>
<span>Option 2: ?</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="collec">
<div class="infos_user">
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
<img src="https://via.placeholder.com/53x53.png" alt="Image" />
</div>

<div class="title_onglet"><span>Collection Chocogrenouilles</span></div>

<div id="inventaire">Inventaire du personnage
<div>
<span></span><span>Rappelle-tout</span>
<span></span><span>Baguette: Noyer Noir, 23cm, flexible, plume de phénix</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
<span></span><span>Autre truc dans les poches</span>
</div>
</div>
</div>

<div class="contenu_onglet_carnet" id="permis">
<div class="title_onglet"><span>Permis & Déplacements</span></div>

<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>

<div class="blocs_permis">Sorts
<div>- Sort
- Sort
- Sort
- Sort
- Sort
- Sort
</div>
</div>

<div class="blocs_permis">Potions
<div>- Potions
- Potions
- Potions
- Potions
- Potions
- Potions
</div>
</div>

</div></div><div id="credits_pres">Fiche (c) Sunhae de <a href="http://www.epicode-entraide.com/" target="_blank">Epicode</a></div>