Accueil
Maquette d'Exercice - Fiche RP
Créée par : Naütilus.
Informations
Niveau estimé : Facile
Sujet mis à jour en avril 2023
Présentation
Coucou !
Je vous propose une petite maquette de fiche RP !
La maquette
![[Facile] - Exercice 11 - Fiche RP Maquet12](https://servimg.com/r/5619093216/maquet12.png)
Détails
• Fond de fiche https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png
• Image feat https://i.servimg.com/u/f56/19/09/32/16/imagef10.png
• La créa fait 500*720 à vous de voir si vous rallongez ou non :)
Compétences suggérées
Rien ne vous oblige à utiliser toutes les suggestions si vous préférez vous concentrer sur un concept précis que vous ne maîtrisez pas encore. Chaque notion est généralement accompagnée d'un lien pour en savoir plus.
- Bases du HTML : (Tutoriel Epicode sur les balises HTML / Documentation HTML francophone)
- Balises de titres (
<h1>,<h2>, etc.) ; - Blocs paragraphes
<p>ou génériques<div>; - images
<img>; - liens
<a>...
- Balises de titres (
- Bases de CSS : (Tutoriel Epicode sur les propriétés CSS / Référence CSS francophone)
- Couleurs de fond avec la propriété
background-color, image de fond avec la propriétébackground-image, voire la propriété raccourciebackground; - Couleurs de texte avec
color; - Marges externes
marginet internespadding; - Propriétés de mise en page du texte
font-family,font-size,font-weight,text-align, etc. ; - Dimensions des blocs avec
heightetwidth...
- Couleurs de fond avec la propriété
- La propriété CSS
overflowpour gérer les dépassements ; - Approfondir un peu sur la gestion d'une image de fond avec
background-positionetbackground-repeat; - Savoir utiliser
opacityet/ourgba()pour la transparence
C'est pas assez compliqué ?
- Les barres de défilement sur les navigateurs Chromium ainsi que
scrollbar-coloretscrollbar-widthsur Mozilla. - Défi : N'utilisez les propriétés
widthetheightavec une valeur fixe qu'une seule fois dans toute la fiche - Intéressez-vous potentiellement à la propriété CSS
object-fitet sa valeurcoverpour gérer la taille des images ; - Vous pouvez également vous pencher sur propriété CSS
background-sizepour gérer la taille de l'image de fond ; - Flexbox et en particulier la propriété
flex-directionpeut vous aider à éviter de fixer la hauteur du bloc déroulant.
Indications diverses
• Attention quand vous fixez des dimensions, pensez aux cas particuliers, un texte très long pour un titre par exemple.
Merci d'informer le staff d'Epicode en cas de lien mort !
_______________
Coucou **
voici ce que j'ai pu faire![[Facile] - Exercice 11 - Fiche RP 1058202338](/users/1416/13/16/78/smiles/1058202338.gif)
PS: j'ai corrigé mes erreurs **
voici ce que j'ai pu faire
Un titre rp
Feat. Toi et moi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
PS: j'ai corrigé mes erreurs **
_______________
Aya oui je suis hyper fière :3 j'ai construit la moitié toute seule avant d'avoir besoin d'aide o/ et oui, j'ai appris des choses ** Merci Reine pour tes corrections 
et merci Naüt pour le schéma
et merci Naüt pour le schéma _______________
Bonchour ![[Facile] - Exercice 11 - Fiche RP 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
Je sais qu'on me reproche - totalement à tord bien sûr - de mettre pas mal de div (non, en vrai, j'en mets beaucoup trop, désolé).
Donc là, y'en pas presque pas /o/
Je sais qu'on me reproche - totalement à tord bien sûr - de mettre pas mal de div (non, en vrai, j'en mets beaucoup trop, désolé).
Donc là, y'en pas presque pas /o/
- Spoiler:
- Code:
<style>
.fond {
background-image:url('https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png');
height: auto;
width: 500px;
margin:0px auto;
}
h1 {
color: #EBE6E6;
text-align: center;
font-family:'Indie Flower';
}
.bande {
background-image:url('https://i.servimg.com/u/f56/19/09/32/16/imagef10.png');
height: 106px;
}
h2 {
color: #ce462e;
font-family:'Indie Flower';
text-align: right;
padding: 20px;
}
.texte {
height: auto;
width: 450px;
background-color: white;
opacity: 0.6;
margin:0px auto;
text-align: justify;
}
p {
padding: 4px;
}
span {
color: #ce462e;
}
</style>
- Code:
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
<div class="fond">
<h1>Titre de rp</h1>
<div class="bande">
<h2>feat: partenaire</h2>
</div>
<div class="texte">
<p>Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflecti.Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebra.et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflect. <br/>
<span>"Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit."</span>. <br/>
Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflecti.Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos.</p>
</div>
<span>Note: ce que vous avez à dire</span>
</div>
_______________
Coucou ![[Facile] - Exercice 11 - Fiche RP 1066248963](/users/1416/13/16/78/smiles/1066248963.gif)
Alors j'ai tenté quelque chose, je pose ça là comme ça mais j'attend pas spécifiquement de commentaires vu l'ancienneté du sujet ^^
J'ai changé les polices par rapport à la maquette par contre, justifié le texte et ajouté un overflow automatique. C'est ma première vraie fiche faite de A à Z (enfin sauf la maquette huhu) donc je suis assez fière même si c'est pas foufou (et que je me suis pas mal arraché les cheveux sur des choses simples, comme juste placer le texte du feat xD)
En tout cas merci beaucoup pour cet exercice bien sympa Naütilus![[Facile] - Exercice 11 - Fiche RP 3488708190](/users/1416/13/16/78/smiles/3488708190.gif)
EDIT : ça rend pas pareil en prévisualisation et envoi naaaaaaaaan
je vais essayer de trouver ce qui va pas pour l'image des ours polaires ![[Facile] - Exercice 11 - Fiche RP 3313101865](/users/1416/13/16/78/smiles/3313101865.png)
Alors j'ai tenté quelque chose, je pose ça là comme ça mais j'attend pas spécifiquement de commentaires vu l'ancienneté du sujet ^^ J'ai changé les polices par rapport à la maquette par contre, justifié le texte et ajouté un overflow automatique. C'est ma première vraie fiche faite de A à Z (enfin sauf la maquette huhu) donc je suis assez fière même si c'est pas foufou (et que je me suis pas mal arraché les cheveux sur des choses simples, comme juste placer le texte du feat xD)
En tout cas merci beaucoup pour cet exercice bien sympa Naütilus
EDIT : ça rend pas pareil en prévisualisation et envoi naaaaaaaaan
je vais essayer de trouver ce qui va pas pour l'image des ours polaires Titre du RP
feat. nom du partenaire
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
(c) Broussy / Maquette par Naütilus pour Epicode
_______________
Merci beaucoup pour ta réponse Artemis
Du coup entre temps j'ai tenté de le modifier en attribuant des class (j'avais fait comme ça au début mais j'arrivais pas à lier ma feuille CSS au HTML sur le forum... puis j'ai découvert la magie de la balise style 8D). Ca rend bien en prévisualisation mais j'ai dû mettre des valeurs négatives énormes pour faire remonter mes titres sur l'image, ça me faisait pas ça la première fois
En tout cas merci infiniment pour tes encouragements et tes commentaires, ça fait très plaisir j'essaierai de me débarrasser des balises center à l'avenir ^^ Et je vais essayer d'autres exercices 
EDIT : en fait c'est le bazaaaaaar TT *a réussi à casser le truc qu'elle avait réussi à faire* Je crois que je vais revenir au HTML simple en ajoutant juste une class pour l'image
Du coup entre temps j'ai tenté de le modifier en attribuant des class (j'avais fait comme ça au début mais j'arrivais pas à lier ma feuille CSS au HTML sur le forum... puis j'ai découvert la magie de la balise style 8D). Ca rend bien en prévisualisation mais j'ai dû mettre des valeurs négatives énormes pour faire remonter mes titres sur l'image, ça me faisait pas ça la première fois
- Code:
<div class="fond"><img src="https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png">
<div class="titre">Titre du RP</div><br />
<div class="image"><img src="https://i.servimg.com/u/f56/19/09/32/16/imagef10.png"></div>
<div class="feat">feat. nom du partenaire</div><br /><br /><br />
<div class="cadre">Ici le texte du RP</div>
<div class="credits">Broussy (maquette de Naütilus) pour <a href="http://www.epicode-entraide.com" target="_blank">Epicode</a></div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Indie+Flower&display=swap" rel="stylesheet">
<style>.fond { width: 500px; height: 720px; } .titre { font-family: 'Indie Flower', cursive; text-align: center; color: #FFFFFF; font-size: 50px; margin: auto 0; } .image { width: 500px; margin: auto; } .feat { margin-left:240px; text-align:right;width:50%; font-size: 15px; color: #800000; font-family: 'Raleway', sans-serif; } .cadre { margin: auto; width: 470px; height:490Px; background: white; opacity:0.5; padding: 5px; overflow:auto; text-align: justify; font-family: 'Raleway', sans serif; font-size: 13px; } .credits { text-align: center; font-size: 10px; color: #F0E68C; font-family: 'Raleway', sans-serif; }</style>
En tout cas merci infiniment pour tes encouragements et tes commentaires, ça fait très plaisir
j'essaierai de me débarrasser des balises center à l'avenir ^^ Et je vais essayer d'autres exercices EDIT : en fait c'est le bazaaaaaar TT *a réussi à casser le truc qu'elle avait réussi à faire* Je crois que je vais revenir au HTML simple en ajoutant juste une class pour l'image
_______________
C'est mieux avec les class ! Pense à donner des noms plus personnels à tes div, d'ailleurs, pour éviter que le CSS d'un forum entre en conflit avec elle. c:
Tu peux mettre par exemple "fond_broussy", etc.
Pour les margin négatifs, ça s'explique parce que tu mets une image assez longue dans le bloc, donc les autres éléments se placent naturellement après elle. Pour palier à ce souci, tu peux retirer l'image du HTML et opter pour la mettre en tant que fond
C'est normal que ton code apparaisse un peu cassé, modernbb a un CSS de base assez particulier, mais en prenant les bugs un par un tu pourras en voir facilement le bout
Tu peux mettre par exemple "fond_broussy", etc.
Pour les margin négatifs, ça s'explique parce que tu mets une image assez longue dans le bloc, donc les autres éléments se placent naturellement après elle. Pour palier à ce souci, tu peux retirer l'image du HTML et opter pour la mettre en tant que fond
- Code:
.fond { width: 500px; height: 720px; background: url(https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png);}
C'est normal que ton code apparaisse un peu cassé, modernbb a un CSS de base assez particulier, mais en prenant les bugs un par un tu pourras en voir facilement le bout
_______________
Ah oui en effet, j'ai pas pensé que les noms des div pouvaient éventuellement poser problème avec le CSS du forum mais c'est logique en fait ^^ Merci pour la suggestion !
J'ai mis les deux images en background dans le CSS et ça facilite beaucoup les manipulations des autres éléments en effet ! Je pense que cette fois ci c'est la bonne![[Facile] - Exercice 11 - Fiche RP 2691722282](/users/1416/13/16/78/smiles/2691722282.gif)
Encore un immense merci pour tes conseils 
J'ai mis les deux images en background dans le CSS et ça facilite beaucoup les manipulations des autres éléments en effet ! Je pense que cette fois ci c'est la bonne
Encore un immense merci pour tes conseils Titre du RP
feat. nom du partenaire
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Broussy (maquette de Naütilus) pour Epicode
- Code:
<div class="fond_broussy">
<div class="titre_RP_broussy">Titre du RP</div>
<div class="image_bannière"><div class="feat_nom"><i>feat. nom du partenaire</i></div></div>
<div class="cadre_transparent_texte">Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</div>
<div class="credits_brou">Broussy (maquette de Naütilus) pour <a href="http://www.epicode-entraide.com" target="_blank">Epicode</a></div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Indie+Flower&display=swap" rel="stylesheet">
<style>.fond_broussy { margin: auto; width: 500px; height: 720px; background: url(https://i.servimg.com/u/f56/19/09/32/16/fond_f10.png); } .titre_RP_broussy { font-family: 'Indie Flower', cursive; text-align: center; color: #FFFFFF; font-size: 30px; margin: auto; } .image_bannière { margin: auto; width: 500px; height: 106px; background: url(https://i.servimg.com/u/f56/19/09/32/16/imagef10.png) } .feat_nom { margin-left:320px; text-align:center; font-size: 15px; color: #800000; font-family: 'Raleway', sans-serif; } .cadre_transparent_texte { margin: auto; width: 470px; height:470Px; background: white; opacity:0.5; padding: 5px; overflow:auto; text-align: justify; font-family: 'Raleway', sans serif; font-size: 13px; } .credits_brou { margin: auto; text-align: center; font-size: 10px; color: #F0E68C; font-family: 'Raleway', sans-serif; }</style>
_______________
Bonjour !
Bon, je me suis peut-être un peu (beaucoup) éloigné de la maquette, mais concrètement c'est la même disposition un peu plus poussé, ça passe non ?![[Facile] - Exercice 11 - Fiche RP 3482194067](/users/1416/13/16/78/smiles/3482194067.gif)
Mon rendu :
Le HTML:
Le CSS :
Bon, je me suis peut-être un peu (beaucoup) éloigné de la maquette, mais concrètement c'est la même disposition un peu plus poussé, ça passe non ?
Mon rendu :
Titre du RP
Prénom Nom & Prénom Nom
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
naütilus. & void — epicode
Le HTML:
- 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=Annie+Use+Your+Telescope&family=Kristi&display=swap" rel="stylesheet"><div class="ficheRP4"><!--
--><h1>Titre du RP</h1><!--
--><div class="bannRP4"><!--
--><img src="https://zupimages.net/up/23/11/jdbw.gif" class="imgRP4"/><!--
--><h2>Prénom Nom & Prénom Nom</h2></div><!--
--><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p><div class="credRP4">naütilus. & void — <a href="https://www.epicode-entraide.com/">epicode</a></div></div>
Le CSS :
- Code:
/*********************EXERCICE 11*********************/
.ficheRP4 {
width: 500px;
height: 700px;
margin: 0 auto;
background-image: url(https://zupimages.net/up/23/11/pqfn.png);
overflow: hidden;
}
.ficheRP4 h1 {
height: 55px;
width: 100%;
margin: 0;
padding: 0;
border: none;
font: 40px 'Annie Use Your Telescope', cursive;
color: #dfc9f7;
font-weight: bolder;
text-align: center;
text-shadow: 2px 2px 0px #554468;
}
.bannRP4 {
position: relative;
height: 130px;
width: 100%;
}
.bannRP4 img.imgRP4 {
object-fit: cover;
width: 100%;
height: 130px;
border-top: 15px solid #ccbbdf;
border-bottom: 15px solid #ccbbdf;
box-shadow: 0px 0px 10px #554468;
}
.ficheRP4 h2 {
position: absolute;
bottom: 0;
width: 100%;
margin: 0;
padding: 1px 3px;
border: none;
font: 10px roboto, sans-serif;
color: #554468;
font-weight: normal;
text-transform: uppercase;
text-align: right;
text-shadow: 1px 1px 0px #dfc9f7;
}
.ficheRP4 p {
width: 480px;
height: 500px;
background-color: #f5f1ffcc;
font: 14px roboto, sans-serif;
color: #34294a;
text-align: justify;
padding: 10px;
margin: 0 auto;
overflow: auto;
}
.ficheRP4 p::-webkit-scrollbar {
width: 3px;
}
.ficheRP4 p::-webkit-scrollbar-thumb {
background-color: #ffffff;
}
.ficheRP4 p::-webkit-scrollbar-track {
background: transparent;
}
.credRP4 {
width: 100%;
height: 15px;
font: 10px roboto, sans-serif;
color: #fff;
text-transform: lowercase;
text-align: center;
line-height: 16px;
}
/*********************FIN EX 11*********************/
_______________
|
|
|