Et voilà comme demandé par certains une version ultra-simple et sobre pour ceux qui ne veulent pas trop galérer en HTML (je sais qu'il y en a
)
ici, il y a juste à compléter les parties texte (Nom du PJ, race et description) et mettre un lien vers votre image.
- Newfiche.JPG (175.59 Kio) Vu 523 fois
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles CSS pour la mise en forme */
body {
text-align: center; /* Aligner le texte au centre */
}
h1 {
text-align: center;
font-size: 50px; /* Changer la taille de la police */
font-family: "Georgia", sans-serif; /* Utilisation de la police "Georgia" */
margin-top: -70px; /* Décalage de la marge supérieure */
margin-bottom: -2px; /* Décalage de la marge inférieure */
}
h2 {
text-align: center;
font-size: 25px; /* Changer la taille de la police */
font-family: "Georgia", sans-serif; /* Utilisation de la police "Georgia" */
font-style: italic; /* Mettre en italique */
margin-bottom: -2px; /* Décalage de la marge inférieure */
}
p {
text-align: justify; /* Justifier le texte */
max-width: 700px; /* Largeur maximale du paragraphe */
margin: 0 auto; /* Centrer le paragraphe */
}
img {
display: block; /* Pour s'assurer que l'image est centrée */
margin: 0 auto; /* Centrer l'image */
margin-bottom: -5px; /* Marge basse */
}
</style>
</head>
<body>
<!-- Balises HTML pour le contenu -->
<h1>Nom du personnage</h1>
<h2>- Race -</h2>
<!-- Image du personnage avec lien -->
<img src="https://i0.wp.com/donjonetdragon.fr/wp-content/uploads/2022/08/ro%CC%82deur-de-classe-dans-lunivers-de-dnd.jpeg?resize=564%2C741&ssl=1" width="auto" height="500" border="2">
<!-- Paragraphe de description -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut gravida quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac ex ac eros volutpat consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Nulla facilisi. Proin fermentum diam vel nulla fermentum, sed venenatis elit aliquet. Maecenas condimentum vitae lorem id bibendum. Quisque sed ligula elit. Vivamus fringilla, ligula ut scelerisque faucibus, lacus velit dictum elit, vel pulvinar odio risus a nunc. Suspendisse potenti. Sed consectetur metus vel turpis tristique tincidunt. Sed consequat tortor ut ex tristique, quis fermentum libero aliquet.</p>
</body>
</html>
Et voilà une seconde version un peu différente, mais toujours simple à utiliser :
- Newfiche2.JPG (108.73 Kio) Vu 517 fois
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Fiche de personnage</title>
<style>
/* Styles CSS pour la mise en forme */
/* Styles généraux pour le corps de la page */
body {
font-family: Arial, sans-serif; /* Police de caractères par défaut */
background-color: #f4f4f4; /* Couleur d'arrière-plan de la page */
text-align: center; /* Centrer le texte dans la page */
color: #333; /* Couleur principale du texte */
}
/* Styles pour la fiche du personnage */
.fiche {
width: 700px; /* Largeur de la fiche */
overflow: hidden; /* Gestion de l'overflow */
margin: 0px auto; /* Centrage horizontal de la fiche */
margin-top: -150px; /* Décalage de la fiche vers le haut */
}
/* Styles pour l'image de l'avatar */
.avatar {
width: 200px; /* Largeur de l'image */
height: 200px; /* Hauteur de l'image */
border-radius: 50%; /* Forme arrondie de l'image */
margin: 10px; /* Marge autour de l'image */
float: left; /* Alignement de l'image à gauche */
border: 2px solid #f4f4f4; /* Couleur de la bordure identique à celle de l'arrière-plan */
}
/* Styles pour les détails du personnage */
.details {
margin-left: 120px; /* Marge à gauche */
text-align: center; /* Centrer le texte */
}
/* Style pour le titre du personnage */
h1 {
font-weight: bold; /* Texte en gras */
margin-top: -30px; /* Marge en haut du titre */
font-size: 40px; /* Taille du titre */
font-family: "Georgia", sans-serif; /* Police du titre */
margin-bottom: -5px; /* Ajustement de la marge inférieure */
}
/* Style pour le sous-titre (race) du personnage */
h2 {
font-style: italic; /* Texte en italique */
margin-bottom: 15px; /* Marge en bas du sous-titre */
font-size: 25px; /* Taille du sous-titre */
font-family: "Georgia", sans-serif; /* Police du sous-titre */
margin-top: 0px; /* Décalage de la marge supérieure */
margin-bottom: -20px; /* Ajustement de la marge inférieure */
}
/* Style pour les paragraphes de description */
p {
clear: both; /* Efface tout alignement flottant précédent */
padding: 10px; /* Espace intérieur des paragraphes */
text-align: justify; /* Justifier le texte */
max-width: 700px; /* Largeur maximale des paragraphes */
margin: 0 auto; /* Centrer les paragraphes */
margin-bottom: 0px; /* Ajustement de la marge inférieure */
}
</style>
</head>
<body>
<!-- Contenu de la fiche de personnage -->
<div class="fiche">
<!-- Image de l'avatar du personnage -->
<img class="avatar" src="https://i0.wp.com/donjonetdragon.fr/wp-content/uploads/2022/08/ro%CC%82deur-de-classe-dans-lunivers-de-dnd.jpeg?resize=564%2C741&ssl=1" alt="Avatar du personnage">
<!-- Détails du personnage -->
<div class="details">
<!-- Titre du personnage -->
<h1>Nom du personnage</h1>
<!-- Sous-titre (race) du personnage -->
<h2>- Race -</h2></div>
<!-- Description du personnage -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut gravida quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac ex ac eros volutpat consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p><p>Nulla facilisi. Proin fermentum diam vel nulla fermentum, sed venenatis elit aliquet. Maecenas condimentum vitae lorem id bibendum. Quisque sed ligula elit. Vivamus fringilla, ligula ut scelerisque faucibus, lacus velit dictum elit, vel pulvinar odio risus a nunc. Suspendisse potenti. Sed consectetur metus vel turpis tristique tincidunt. Sed consequat tortor ut ex tristique, quis fermentum libero aliquet.</p>
</div>
</body>
</html>
Et voilà comme demandé par certains une version ultra-simple et sobre pour ceux qui ne veulent pas trop galérer en HTML (je sais qu'il y en a ;) )
ici, il y a juste à compléter les parties texte (Nom du PJ, race et description) et mettre un lien vers votre image.
[attachment=1]Newfiche.JPG[/attachment]
[code]<!DOCTYPE html>
<html>
<head>
<style>
/* Styles CSS pour la mise en forme */
body {
text-align: center; /* Aligner le texte au centre */
}
h1 {
text-align: center;
font-size: 50px; /* Changer la taille de la police */
font-family: "Georgia", sans-serif; /* Utilisation de la police "Georgia" */
margin-top: -70px; /* Décalage de la marge supérieure */
margin-bottom: -2px; /* Décalage de la marge inférieure */
}
h2 {
text-align: center;
font-size: 25px; /* Changer la taille de la police */
font-family: "Georgia", sans-serif; /* Utilisation de la police "Georgia" */
font-style: italic; /* Mettre en italique */
margin-bottom: -2px; /* Décalage de la marge inférieure */
}
p {
text-align: justify; /* Justifier le texte */
max-width: 700px; /* Largeur maximale du paragraphe */
margin: 0 auto; /* Centrer le paragraphe */
}
img {
display: block; /* Pour s'assurer que l'image est centrée */
margin: 0 auto; /* Centrer l'image */
margin-bottom: -5px; /* Marge basse */
}
</style>
</head>
<body>
<!-- Balises HTML pour le contenu -->
<h1>Nom du personnage</h1>
<h2>- Race -</h2>
<!-- Image du personnage avec lien -->
<img src="https://i0.wp.com/donjonetdragon.fr/wp-content/uploads/2022/08/ro%CC%82deur-de-classe-dans-lunivers-de-dnd.jpeg?resize=564%2C741&ssl=1" width="auto" height="500" border="2">
<!-- Paragraphe de description -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut gravida quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac ex ac eros volutpat consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Nulla facilisi. Proin fermentum diam vel nulla fermentum, sed venenatis elit aliquet. Maecenas condimentum vitae lorem id bibendum. Quisque sed ligula elit. Vivamus fringilla, ligula ut scelerisque faucibus, lacus velit dictum elit, vel pulvinar odio risus a nunc. Suspendisse potenti. Sed consectetur metus vel turpis tristique tincidunt. Sed consequat tortor ut ex tristique, quis fermentum libero aliquet.</p>
</body>
</html>
[/code]
Et voilà une seconde version un peu différente, mais toujours simple à utiliser :
[attachment=0]Newfiche2.JPG[/attachment]
[code]<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Fiche de personnage</title>
<style>
/* Styles CSS pour la mise en forme */
/* Styles généraux pour le corps de la page */
body {
font-family: Arial, sans-serif; /* Police de caractères par défaut */
background-color: #f4f4f4; /* Couleur d'arrière-plan de la page */
text-align: center; /* Centrer le texte dans la page */
color: #333; /* Couleur principale du texte */
}
/* Styles pour la fiche du personnage */
.fiche {
width: 700px; /* Largeur de la fiche */
overflow: hidden; /* Gestion de l'overflow */
margin: 0px auto; /* Centrage horizontal de la fiche */
margin-top: -150px; /* Décalage de la fiche vers le haut */
}
/* Styles pour l'image de l'avatar */
.avatar {
width: 200px; /* Largeur de l'image */
height: 200px; /* Hauteur de l'image */
border-radius: 50%; /* Forme arrondie de l'image */
margin: 10px; /* Marge autour de l'image */
float: left; /* Alignement de l'image à gauche */
border: 2px solid #f4f4f4; /* Couleur de la bordure identique à celle de l'arrière-plan */
}
/* Styles pour les détails du personnage */
.details {
margin-left: 120px; /* Marge à gauche */
text-align: center; /* Centrer le texte */
}
/* Style pour le titre du personnage */
h1 {
font-weight: bold; /* Texte en gras */
margin-top: -30px; /* Marge en haut du titre */
font-size: 40px; /* Taille du titre */
font-family: "Georgia", sans-serif; /* Police du titre */
margin-bottom: -5px; /* Ajustement de la marge inférieure */
}
/* Style pour le sous-titre (race) du personnage */
h2 {
font-style: italic; /* Texte en italique */
margin-bottom: 15px; /* Marge en bas du sous-titre */
font-size: 25px; /* Taille du sous-titre */
font-family: "Georgia", sans-serif; /* Police du sous-titre */
margin-top: 0px; /* Décalage de la marge supérieure */
margin-bottom: -20px; /* Ajustement de la marge inférieure */
}
/* Style pour les paragraphes de description */
p {
clear: both; /* Efface tout alignement flottant précédent */
padding: 10px; /* Espace intérieur des paragraphes */
text-align: justify; /* Justifier le texte */
max-width: 700px; /* Largeur maximale des paragraphes */
margin: 0 auto; /* Centrer les paragraphes */
margin-bottom: 0px; /* Ajustement de la marge inférieure */
}
</style>
</head>
<body>
<!-- Contenu de la fiche de personnage -->
<div class="fiche">
<!-- Image de l'avatar du personnage -->
<img class="avatar" src="https://i0.wp.com/donjonetdragon.fr/wp-content/uploads/2022/08/ro%CC%82deur-de-classe-dans-lunivers-de-dnd.jpeg?resize=564%2C741&ssl=1" alt="Avatar du personnage">
<!-- Détails du personnage -->
<div class="details">
<!-- Titre du personnage -->
<h1>Nom du personnage</h1>
<!-- Sous-titre (race) du personnage -->
<h2>- Race -</h2></div>
<!-- Description du personnage -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut gravida quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac ex ac eros volutpat consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p><p>Nulla facilisi. Proin fermentum diam vel nulla fermentum, sed venenatis elit aliquet. Maecenas condimentum vitae lorem id bibendum. Quisque sed ligula elit. Vivamus fringilla, ligula ut scelerisque faucibus, lacus velit dictum elit, vel pulvinar odio risus a nunc. Suspendisse potenti. Sed consectetur metus vel turpis tristique tincidunt. Sed consequat tortor ut ex tristique, quis fermentum libero aliquet.</p>
</div>
</body>
</html>
[/code]