Dossier Scolaire ▬ Mina
void_invaders
Admin
Mer 17 Avr 2024 - 15:28
Maquette : Mina
Code : void_invaders
Dimensions : 700px de large, hauteur variable
Couleurs et fonts modifiables à votre convenance
Code : void_invaders
Dimensions : 700px de large, hauteur variable
Couleurs et fonts modifiables à votre convenance
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
5/10
Matière 2
0/10
Matière 3
8/10
Matière 4
3/10
Matière.s Validée.s ▬
50%
InfosAppréciationsRetenues
Texte régulier, commentaires des professeurs, etc
Date Raison et texte blablabla
Date Raison et texte blablabla
Date Raison et texte blablabla
Date Raison et texte blablabla
Date Raison et texte blablabla
Date Raison et texte blablabla
Date Raison et texte blablabla
Mina & void_invaders ▬ Pisrale
Si vous voulez garder la même police de charactère, placez le code ci-dessous dans le template "overall_header" qui se trouve dans Affichage > Templates > Général. Localisez la balise head (entre <>) et collez le code juste avant la fermeture de celle-ci (donc juste avant le /head, entre <>). Vous pouvez également placer ce code au tout début de votre poste si vous n'avez pas accès aux templates.
Font :
- Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Mina:wght@400;700&display=swap" rel="stylesheet">
Code HTML : (à placer dans votre sujet)
- Code:
<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_body"><div class="DSM_title"> <span>Cursus</span><span>Option.s</span></div><div class="DSM_bloc"><div class="DSM_content"><!--
--><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><!--
--></div><div class="DSM_sep2"></div><div class="DSM_content"><!--
--><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><!--
--></div></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_body"><div class="DSM_title"><span>Appréciations</span><span>Retenues</span></div><div class="DSM_bloc"><div class="DSM_txt"><!--
-->Texte régulier, commentaires des professeurs, etc<!--
--></div><div class="DSM_sep2"></div> <div class="DSM_retenue"><!--
--><span>Date</span> Raison et texte blablabla
<span>Date</span> Raison et texte blablabla
<span>Date</span> Raison et texte blablabla
<span>Date</span> Raison et texte blablabla<!--
--></div></div></div><div class="DSM_credits">Mina & void_invaders ▬ <a href="https://pisrale.forumactif.com/">Pisrale</a></div></div>
Code CSS : (à placer dans votre feuille de style CSS dans Affichage > Images et Couleurs > Couleurs & CSS > Feuille de style CSS)
- Code:
.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;
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;
padding-top: 10px;
}
.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_body {
display: flex;
}
.DSM_title {
width: 160px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.DSM_title span {
display: block;
border: 3px solid #f4d4c3;
border-radius: 20px;
text-transform: uppercase;
padding: 5px 15px 0px;
background-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;
}
.DSM_content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 10px;
}
.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_sep2 {
width: 90%;
height: 2px;
background-color: #c4d4c3;
border-radius: 10px;
}
.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_txt, .DSM_retenue {
width: 100%;
min-height: 100px;
padding: 5px;
text-align: justify;
}
.DSM_retenue span {
display: inline-block;
background-color: #f4d4c3;
padding: 4px 20px 0px;
border-radius: 20px;
font-size: 14px;
color: #ffffff;
text-transform: uppercase;
margin-bottom: 5px;
}
.DSM_retenue span:nth-of-type(even) {
background-color: #c4d4c3;
}
.DSM_credits {
text-align: center;
color: #dbdbdb;
font-weight: lighter;
font-size: 14px;
}
.DSM_credits a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #c4d4c3!important;
}
.DSM_credits a:hover {
color: #f4d4c3!important;
}
Code HTML avec le CSS : (si vous n'avez pas accès à la feuille de style CSS du forum, cependant la modification du CSS est donc un peu plus complexe à cause de la mise en page)
- Code:
<style>.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; 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; padding-top: 10px;} .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_body {display: flex;} .DSM_title {width: 160px; display: flex; flex-direction: column; justify-content: space-around; align-items: center;} .DSM_title span {display: block; border: 3px solid #f4d4c3; border-radius: 20px; text-transform: uppercase; padding: 5px 15px 0px; background-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;} .DSM_content {display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px;} .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_sep2 {width: 90%; height: 2px; background-color: #c4d4c3; border-radius: 10px;} .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_txt, .DSM_retenue {width: 100%; min-height: 100px; padding: 5px; text-align: justify;} .DSM_retenue span {display: inline-block; background-color: #f4d4c3; padding: 4px 20px 0px; border-radius: 20px; font-size: 14px; color: #ffffff; text-transform: uppercase; margin-bottom: 5px;} .DSM_retenue span:nth-of-type(even) {background-color: #c4d4c3;} .DSM_credits {text-align: center; color: #dbdbdb; font-weight: lighter; font-size: 14px;} .DSM_credits a {text-decoration: none; text-transform: uppercase; font-weight: bold; color: #c4d4c3!important;} .DSM_credits a:hover {color: #f4d4c3!important;}</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_body"><div class="DSM_title"> <span>Cursus</span><span>Option.s</span></div><div class="DSM_bloc"><div class="DSM_content"><!--
--><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><!--
--></div><div class="DSM_sep2"></div><div class="DSM_content"><!--
--><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><!--
--></div></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_body"><div class="DSM_title"><span>Appréciations</span><span>Retenues</span></div><div class="DSM_bloc"><div class="DSM_txt"><!--
-->Texte régulier, commentaires des professeurs, etc<!--
--></div><div class="DSM_sep2"></div> <div class="DSM_retenue"><!--
--><span>Date</span> Raison et texte blablabla
<span>Date</span> Raison et texte blablabla
<span>Date</span> Raison et texte blablabla
<span>Date</span> Raison et texte blablabla<!--
--></div></div></div><div class="DSM_credits">Mina & void_invaders ▬ <a href="https://pisrale.forumactif.com/">Pisrale</a></div></div>
|
|
|