Titre + border

Bonjour à tous,

Je souhaite faire un titre comme dans l'image. Quelqu'un pourra me donner un coup de main ?

Merci beaucoup et bonne continuation.
Modifié par Sotam (03 Jul 2022 - 17:58)

Salut,

Oui oui on peut t'aider. Tu en es ou ? Ou est-ce que tu bloques ?

Salut,

Un premier post... pas de code... Normalement je n'interviens plus sur ce type de topic...

... mais le challenge me plaisait, alors voilà : CodePen, Emphasized title.

Sans doute pas la solution la plus optimale, mais elle fait le taf et c'est responsive of course.
Modifié par Olivier C (05 Jul 2022 - 04:54)

Bonjour,

Désolé je suis novice dans le forum. Vrai que c'est plus simple et ESSENTIEL d'envoyer le code dans mon message. Donc voici mon code

Merci déjà pour vous réponses !

HTML

<section class="cuirs-peaux pagewidth">
                <div class="text-cuirs-peaux">
                    <h2 class="titre">Cuirs<br><span class="sous-titre">et peaux</span></h2>
                    <p><span class="text-bold">La Fédération Française des Cuirs et Peaux<br></span>est constituée d'entreprises qui représentent plus de 90% du commerce français des cuirs et peaux bruts, et gèrent la matière cuir d'environ 200 abattoirs répartis sur le territoire français. Ces sociétés sont : Négociants collecteurs, Groupes d'Abattages, Experts, Courtiers assermentés.</p>
                    <a href="#"><button class="button-style-blue grow" type="button">En savoir plus</button></a>
                </div>

CSS

.titre{
    font-family: 'ralewaybold';
    font-size: 3.5rem;
    color: #1e4758;
    line-height: 2.5rem;
}

.sous-titre{
    font-family: 'ralewaysemibold_italic';
    font-size: 2.8rem;
    color: #d3ae99;
    font-weight: 100;
    letter-spacing: 4;
}

Voilà, le titre et sous-titre sont en forme mais c'est le contour le problème. J'arrive que à faire un simple contour au tour. Je comprends bien qu'il faut utiliser ::before et ::after mais je ne vois pas comment arriver à ce résultat à 100% .

En espérant votre aide merci beaucoup et une bonne soirée !
Modifié par Sotam (05 Jul 2022 - 00:24)

Bonsoir,

j'avais fait ceci en attendant de voir ton code (basé sur grid) https://codepen.io/gc-nomade/pen/abYvmYM

Cela donnerait ceci avec ton code : https://codepen.io/gc-nomade/pen/vYRNeGy (bon , ce n'est pas le code le plus court ni le plus élegant ... )

les réglages se font sur

h2:before {
  width: 25vw; /* taille de la partie vide à gauche */
}
h2:after {
min-width: 1.5em;/* taille de la derniere colonne/bordure haute à droite */
}

Cdt

gcyrillus a écrit :
j'avais fait ceci en attendant de voir ton code (basé sur grid) https://codepen.io/gc-nomade/pen/abYvmYM

Ah oui ! Ça c'est top !

Hello,

Je me suis aussi pris au jeu et j'ai tenté une version avec des background-image multiples : https://codepen.io/raphaelgoetter/pen/VwXvXJq?editors=1100

C'est un peu plus casse-gueule que ce qui a été proposé par Olivier et Gcyrillus mais sur un malentendu ça peut marcher aussi

Hello tout le monde,

Uau c'est incroyable toutes ces réponses, vraiment TOP ! Je rêve un jour être si forte en code, mais je pense que la route va être longue, tellement de choses à apprendre ^^mais c'est un énorme plaisir, et avec persistance j'espère réussir.

En tout cas merci de toutes ces réponses. Je vais surtout essayer de comprendre chaque une car pour l'instant il y a pas mal de choses que je ne connais pas encore !

Merci en tout cas, c'est TOP !