Regardez moi cet énorme titre

Ce sous-titre est plus timide

Le dictonil faut souffrir pour être belles'applique tout particulièrement au HTML et au CSS. Il faut coder pour que ce soit stylé.

N'importe quelle page du web est composée d'au moins deux choses : une fondation en HTML, et du CSS, sa copine fashion qui va lui dire comment s'habiller pour l'occasion. Quand quelque chose à l'air cool, c'est grâce au CSS. Et si vous voulez changer des choses dans ce template, vous allez bidouiller le CSS, tout en haut, dans les arabesques.

Ce modèle a été optimiséto the maxpour être flexible et simple d'utilisation. Chaque bloc, chaque titre et sous-titre est un "encart" dans lesquels vous pouvez écrire ou mettre des images. Leur taille est automatique et le tout est optimisé pour ne pas déformer le forum.

Vous pouvez changer la taille ou l'aspect des titres (.carnet-titre, .carnet-sous-titre, .blockquote) en changeant la valeur font-size ou changer la couleur de fond des titres avec background-color , et bien d'autre chose, si vous avez le courage et l'envie.

Vous pouvez supprimer ou ajouter des blocs ; il suffit de supprimer toute ladiv. Le contenu s'organise sur une grille à trois colonnes, vous pouvez choisir qu'un bloc prenne l'espace d'une, deux, ou trois colonnes : span-1, span-2, span-3.Les blocs plein-page ont span-3 en plus dans leur intitulé, les autres 1 ou 2.

F.A.Q.

Je n'y comprends rien, c'est pas du tout intuitif, help

Vous pouvez visualiser votre super code HTML/CSS avec ce site (Codebeautify) pour voir s'il fonctionne comme vous voulez. Vous pourrez le minimiser (minify) pour le poste sur le forum. Vous pouvez même directement écrire et copier vos textes et vos liens via ce site, comme je le fais pour vous écrire ce tutoriel.

Comment utilisez le code ?

Copiez-collez le dans votre post après ou avant y avoir mis vos textes. Pour fonctionner, il doit être minimisé. Remplacez les titres, sous-titres, textes et images témoins par les vôtres. Vous pouvez copier la version longue dans le Codebeautify, ou autre, et le minimiser plus tard.

Le code ne marche pas du tout...

Pour fonctionner sur le forum, le code a besoin d'être minimisé et écrasé, sans espaces. La version longue et espacée est plus lisible pour faire des modifications, c'est pourquoi je donne cette version. Vous pouvez minimiser (minify) votre code sur Codebeautify.

Le code est bugé...

Vérifiez bien d'avoir bien ouvert et fermer toutes les div et blockquote et balises nécessaires.

Comment copier mes images ?

Copiez votre lien dans une balise img src="votrelien" (entre > à la place de la fleur dans le modèle)

le code en question

Code:

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans&display=swap" rel="stylesheet">
<style>
  {
    box-sizing: border-box;
  }

  .carnet-base {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    font-family: 'Open Sans', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .encart-carnet {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    border: 1px solid #ccc;
    padding: 20px;
    text-align: justify;
    height: auto;
    min-height: 300px;
  }

  .encart-carnet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
  .carnet-titre, .carnet-sous-titre {
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
    background-color: #add8e6;
    padding: 5px;
  }

  .carnet-titre {
    font-size: 48px;
  }

  .carnet-sous-titre {
    font-size: 24px;
  }

  blockquote {
    font-style: italic;
    font-size: 14px;
    border-left: 4px solid #ccc;
    padding-left: 15px;
    color: #555;
    margin: 20px 0;
    background-color: #f9f9f9;
  }

  p {
    text-indent: 10px;
    font-size: 14px;
  }

  .span-2 {
    grid-column: span 2;
  }

  .span-3 {
    grid-column: span 3;
  }

  @media (max-width: 1100px) {
    .carnet-base {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 768px) {
    .carnet-base {
      grid-template-columns: 1fr;
    }
  }
</style>


  <div class="carnet-base">
    <div class="encart-carnet span-3">
      <h2 class="carnet-titre">rEGARDEZ CE GROS TITRE</h2>
      <h2 class="carnet-sous-titre">CE SOUS-titre est plus timide</h2>
      <p>Oh. Et là, omg regardez. Y'a du texte, là. On peut écrire normalement, blah blah blah. J'écris des trucs trop cools et j'ai les cheveux soyeux.<em>Oh du texte penché, j'vais tomber.</em>Ah non tout va bien, c'est juste la balise<em> em </em>qui me fait tanguer. Italique, vous dites ? Non, je suis française.</p><blockquote>Ici, ça blockquote, ça cite les termes.</blockquote><p>et on reblablate.</p><blockquote>Wesh, ça quote again.</blockquote><p>On peut écrire des trucs importants, de type : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis volutpat odio. Aenean nec vehicula lorem. Pellentesque a lorem vitae augue faucibus ultrices eget vel ?! Vraiment ?</p></div>

    <div class="encart-carnet span-1">
      <h1 class="carnet-sous-titre">Coucou, je suis un sous-titre.</h1>
      <blockquote>Lorem ! Reviens ! </blockquote>
      <p>Lorem et ipsum doloris, j'vous jure, c'est moi qui doloris a écrire si tard. Hop, ça fait un p'tit paragraphe.</p>
    </div>
    <div class="encart-carnet span-2">
      <img src="https://images.unsplash.com/photo-1527039257570-2d493710cdae?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Une belle fleur">
    </div>

    <div class="encart-carnet span-3">
      <h1 class="carnet-sous-titre">Grosse sectiooon
     </h1>
    
    </div>

  </div>

À MINIMISER AVANT DE POSTER