void_invaders

Dim 28 Avr 2024 - 21:26

Dossier Scolaire

Maquette : Mina
Code : void_invaders
Dimensions : 700px de large, hauteur variable
Polices : Mina pour toute la fiche

~~Merci de laisser les crédits et de ne pas toucher au code en dehors des couleurs, des polices et des images~~

void_invaders

PRÉNOM P. NOM

ÂgeDate naissanceGenreParent/TuteurAnnée d'ÉtudeFillière

GROUPE

CursusOption.s

Matière 1

5/10

Matière 2

0/10

Matière 3

8/10

Matière 4

3/10

Matière 1

3/10

Matière 2

9/10

Matière 3

1/10

Matière 4

4/10

Matière.s Validée.s ▬

50%

Infos

AppréciationsRetenues

Texte régulier, commentaires des professeurs, etcLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor magna id velit tempor, accumsan aliquet leo iaculis. Pellentesque id risus eu nisl ultrices euismod eu molestie velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia nibh sed odio accumsan, non dictum turpis feugiat. Proin vitae est ex. Mauris facilisis massa vitae vehicula ullamcorper. Fusce viverra a odio vel tempus. Sed eget lacus tincidunt tortor accumsan pulvinar eget et velit. Etiam non enim tempus, rutrum nibh nec, volutpat tortor.

Maecenas non metus et ipsum dignissim rutrum sed eu ligula. Nam et mi mauris. Quisque congue lacinia tincidunt. Suspendisse potenti. Ut a leo fermentum, imperdiet ante a, blandit erat. Pellentesque consequat justo urna, eu euismod urna auctor a. Phasellus eu aliquet magna. Ut ac sem volutpat, fermentum est a, egestas ligula. Curabitur id condimentum est. Suspendisse ultricies sollicitudin nunc, interdum sodales enim consectetur ac. Fusce id dolor efficitur, pellentesque tellus eget, egestas sapien.

Duis porttitor sagittis tellus sit amet cursus. Maecenas blandit vulputate felis, et tempor libero malesuada ut. Duis sollicitudin sem vel erat viverra venenatis. Morbi pulvinar enim ante, non scelerisque erat finibus in. Aliquam fringilla faucibus bibendum. In dapibus diam nec turpis fermentum, tempus viverra elit luctus. Nulla nec ornare odio. Morbi in ante urna. Aenean aliquam, erat nec scelerisque efficitur, tortor velit blandit diam, sed malesuada lorem purus sed lacus. Nullam at porttitor diam, vel suscipit quam. Suspendisse pulvinar posuere orci, id condimentum turpis elementum ut. Proin ac tortor vulputate, blandit mauris malesuada, finibus est. Quisque arcu felis, mollis quis maximus ut, tristique vitae odio. Ut felis eros, hendrerit nec ligula quis, accumsan pellentesque libero. Mauris in ligula ut nisi scelerisque lacinia at et odio. Mauris eleifend, elit nec finibus cursus, risus est malesuada mauris, id bibendum urna neque vel ante.

Date Raison et texte blablabla

Mina & void_invaders ▬ Pisrale

Je vous propose ci-dessous deux versions du code :

- La première version se suffit à elle-même, mais le CSS n'est pas modifiable car la feuille de style est importé directement via la balise <link>, qui permet d'intégrer une feuille de style externe au forum. Cette version s'adresse aux moins expérimentés qui n'ont pas accès à la feuille de style CSS du forum et qui ne ressentent pas le besoin de personnaliser le code.

- La seconde version contient une balise <style> dans laquelle vous retrouvez tout le CSS utilisé. C'est dans cette balise que vous pourrez modifier les couleurs et les polices. Cette version s'adresse aux personnes comprenant un peu le fonctionnement du CSS et qui souhaitent pouvoir personnaliser le code.

void_invaders

HTML AVEC FEUILLE DE STYLE IMPORTÉE (non modifiable) :

Code:: <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/6t2ur15j6xbwbcl/commandes.css"><div class="DSM"><div class="DSM_head"><img src="http://www.placeholder.com/100x160"/><div class="DSM_sep"></div><div class="DSM_info"><b>PRÉNOM P. NOM</b><div class="DSM_point"><span>Âge</span><span>Date naissance</span><span>Genre</span><span>Parent/Tuteur</span><span>Année d'Étude</span><span>Fillière</span></div><div class="DSM_group">GROUPE</div></div></div><div class="DSM_bodyonglet"><div class="DSM_onglet"><label for="o1" class="DSM_ongltitle">Cursus</label><label for="o2" class="DSM_ongltitle">Option.s</label></div><div class="DSM_bloc"><input id="o1" type="radio" name="onglets" checked/><span class="DSM_onglcont"><div class="matiere">Matière 1 <div class="note"><span style="width: 50%;"></span><b>5/10</b></div></div><div class="matiere">Matière 2 <div class="note"><span style="width: 0%;"></span><b>0/10</b></div></div><div class="matiere">Matière 3 <div class="note"><span style="width: 80%;"></span><b>8/10</b></div></div><div class="matiere">Matière 4 <div class="note"><span style="width: 30%;"></span><b>3/10</b></div></div></span><input id="o2" type="radio" name="onglets"/><span class="DSM_onglcont"><div class="matiere">Matière 1 <div class="note"><span style="width: 30%;"></span><b>3/10</b></div></div><div class="matiere">Matière 2 <div class="note"><span style="width: 90%;"></span><b>9/10</b></div></div><div class="matiere">Matière 3 <div class="note"><span style="width: 10%;"></span><b>1/10</b></div></div><div class="matiere">Matière 4 <div class="note"><span style="width: 40%;"></span><b>4/10</b></div></div></span></div></div><div class="DSM_note"><div class="matiere"><b>Matière.s Validée.s ▬</b> <div class="notesem"><span style="width: 50%;"></span><b>50%</b></div><i>Infos</i></div></div><div class="DSM_bodyonglet"><div class="DSM_onglet"><label for="03" class="DSM_ongltitle">Appréciations</label><label for="04" class="DSM_ongltitle">Retenues</label></div><div class="DSM_bloc"><input id="03" type="radio" name="onglets2" checked/><span class="DSM_ongtxt">Texte régulier, commentaires des professeurs, etc</span><input id="04" type="radio" name="onglets2"/><span class="DSM_ongrete"><div><span>Date</span> Raison et texte blablabla</div><div><span>Date</span> Raison et texte blablabla</div><div><span>Date</span> Raison et texte blablabla</div><div><span>Date</span> Raison et texte blablabla</div></span></div></div><div class="DSM_credits">Mina & void_invaders ▬ <a href="https://pisrale.forumactif.com/">Pisrale</a></div></div>

HTML AVEC CSS INTÉGRÉ (modifiable) :

Code:: <style>@import url('https://fonts.googleapis.com/css2?family=Mina:wght@400;700&display=swap'); .DSM {background-color: #ebebeb; border-radius: 10px; width: 700px; display: flex; flex-direction: column; gap: 20px; padding: 15px; font-family: 'Mina', sans-serif; margin: auto;} .DSM_head {height: 160px; display: flex; align-items: center;} .DSM_head img {width: 100px; height: 100%; border: 3px solid #c4d4c3; border-radius: 5px;} .DSM_sep {width: 60px; height: 3px; background-color: #c4d4c3;} .DSM_info {height: 100%; width: 510px; border: 3px solid #c4d4c3; border-radius: 5px; background-color: #ffffff; display: flex; flex-direction: column; justify-content: space-between; align-items: center;} .DSM_info b {display: inline-block; padding-top: 15px; background: linear-gradient(to right, #c4d4c3 40%, #f4d4c3 60%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 20px; width: 100%; text-align: center;} .DSM_point {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;} .DSM_point span {display: block; width: 150px; height: 30px; text-align: center; border: 1px solid #f4d4c3; border-radius: 20px; line-height: 32px;} .DSM_group {background-color: #c4d4c3; border-radius: 5px 5px 0 0; padding: 5px 65px 0; color: #ffffff;} .DSM_bloc {width: 510px; border: 3px solid #c4d4c3; border-radius: 5px; background-color: #ffffff; padding: 5px; display: flex; flex-direction: column; gap: 10px; align-items: center;} .matiere {display: flex; align-items: center; gap: 10px;} .matiere b {text-transform: uppercase;} .note {height: 20px; width: 130px;} .note, .notesem {position: relative; border: 1px solid #f4d4c3; border-radius: 20px; text-align: center;} .note span, .notesem span {position: absolute; z-index: 0; background-color: #f4d4c3; left: 0; height: 100%; border-radius: 20px;} .note b, .notesem b {position: relative; z-index: 1; font-weight: normal; display: block; height: 100%;} .note b {line-height: 22px;} .notesem b {line-height: 42px;} .DSM_note, .DSM_credits {background-color: #ffffff; padding: 10px; border-radius: 5px;} .notesem {width: 60%; height: 40px; display: flex; align-items: center; justify-content: center;} .DSM_bodyonglet {display: flex;} .DSM_onglet {width: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;} .DSM_onglcont {display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px; padding: 10px 5px;} .DSM_bodyonglet span.DSM_onglcont, .DSM_bodyonglet span.DSM_ongtxt, .DSM_bodyonglet span.DSM_ongrete {display: none;} .DSM_bodyonglet input {display: none;} .DSM_bodyonglet input:checked + span.DSM_onglcont, .DSM_bodyonglet input:checked + span.DSM_ongtxt {display: flex;} .DSM_bodyonglet input:checked + span.DSM_ongrete {display: flex; flex-direction: column; gap: 5px;} .DSM_bodyonglet label.DSM_ongltitle {display: block; border: 3px solid #f4d4c3; border-radius: 20px; text-transform: uppercase; padding: 5px 15px 0px; background-color: #ffffff; cursor: pointer;} .DSM_bodyonglet label.DSM_ongltitle:hover {background-color: #f4d4c3; border-color: #ffffff; color: #ffffff;} .DSM_ongtxt, .DSM_ongrete {width: 100%; height: 135px; padding: 5px; text-align: justify; overflow: auto;} .DSM_ongrete span {display: inline-block; background-color: #f4d4c3; padding: 4px 20px 0px; border-radius: 20px; font-size: 14px; font-weight: bold; color: #ffffff; text-transform: uppercase;} .DSM_ongrete div:nth-of-type(even) span {background-color: #c4d4c3;} .DSM_ongtxt::-webkit-scrollbar, .DSM_ongrete::-webkit-scrollbar {display: none;} .DSM_credits {text-align: center; color: #dbdbdb; font-size: 12px; text-transform: uppercase; padding: 8px 0 5px;} .DSM_credits a {text-decoration: none; text-transform: uppercase; font-weight: bold; color: #c4d4c3;} .DSM_credits a:hover {color: #f4d4c3;}</style><div class="DSM"><div class="DSM_head"><img src="http://www.placeholder.com/100x160"/><div class="DSM_sep"></div><div class="DSM_info"><b>PRÉNOM P. NOM</b><div class="DSM_point"><span>Âge</span><span>Date naissance</span><span>Genre</span><span>Parent/Tuteur</span><span>Année d'Étude</span><span>Fillière</span></div><div class="DSM_group">GROUPE</div></div></div><div class="DSM_bodyonglet"><div class="DSM_onglet"><label for="o1" class="DSM_ongltitle">Cursus</label><label for="o2" class="DSM_ongltitle">Option.s</label></div><div class="DSM_bloc"><input id="o1" type="radio" name="onglets" checked/><span class="DSM_onglcont"><div class="matiere">Matière 1 <div class="note"><span style="width: 50%;"></span><b>5/10</b></div></div><div class="matiere">Matière 2 <div class="note"><span style="width: 0%;"></span><b>0/10</b></div></div><div class="matiere">Matière 3 <div class="note"><span style="width: 80%;"></span><b>8/10</b></div></div><div class="matiere">Matière 4 <div class="note"><span style="width: 30%;"></span><b>3/10</b></div></div></span><input id="o2" type="radio" name="onglets"/><span class="DSM_onglcont"><div class="matiere">Matière 1 <div class="note"><span style="width: 30%;"></span><b>3/10</b></div></div><div class="matiere">Matière 2 <div class="note"><span style="width: 90%;"></span><b>9/10</b></div></div><div class="matiere">Matière 3 <div class="note"><span style="width: 10%;"></span><b>1/10</b></div></div><div class="matiere">Matière 4 <div class="note"><span style="width: 40%;"></span><b>4/10</b></div></div></span></div></div><div class="DSM_note"><div class="matiere"><b>Matière.s Validée.s ▬</b> <div class="notesem"><span style="width: 50%;"></span><b>50%</b></div><i>Infos</i></div></div><div class="DSM_bodyonglet"><div class="DSM_onglet"><label for="03" class="DSM_ongltitle">Appréciations</label><label for="04" class="DSM_ongltitle">Retenues</label></div><div class="DSM_bloc"><input id="03" type="radio" name="onglets2" checked/><span class="DSM_ongtxt">Texte régulier, commentaires des professeurs, etc</span><input id="04" type="radio" name="onglets2"/><span class="DSM_ongrete"><div><span>Date</span> Raison et texte blablabla</div><div><span>Date</span> Raison et texte blablabla</div><div><span>Date</span> Raison et texte blablabla</div><div><span>Date</span> Raison et texte blablabla</div></span></div></div><div class="DSM_credits">Mina & void_invaders ▬ <a href="https://pisrale.forumactif.com/">Pisrale</a></div></div>

Sujets similaires

Fiche Spéciale #1 - Dossier Scolaire ▬ Mina & void_invaders

Pisrale :: Codages :: Apparence du forum :: Fiches :: Fiches spéciales

Nos amis proches

Fiche Spéciale #1 - Dossier Scolaire ▬ Mina & void_invaders Parto512