Bonjour à tous,

Je cherche à réaliser la pastille prix ci-dessous réalisée sur Photoshop, mon code est bon pour le moment mais pour la suite je suis bloqué, je ne sais pas comment je peux imbriquer tout ces éléments  ? (ps: la seule différence entre le code et l'image ce sont les couleurs que j'ai modifié depuis)

L'IMAGE :

LE CODE HTML :

    <div class="circle_red">
        <div>
            <p class="circle_light">À partir de</p> 
        </div>
        <div>
            <p class="circle_price_1">19</p>
        </div>
        <div>
            <div>
                <p class="circle_price_2">€</p>
            </div>
            <div>
                <p class="circle_price_3">.95</p>
            </div>
        </div>
    </div>

LE CODE CSS :

/* == PASTILLE ==*/

.circle_red{
    margin-left: 25px;
    width: 112px;
    height: 112px;
    border-radius: 112px;
    background-color: #ce1719;
    color: #fff;
}

/* == TEXTES == */

p.circle_light{
    font-family: "Pluto-Light", Arial, sans-serif!important;
    font-size: 15px;
    color: #000;
    text-align: center;
}

p.circle_price_1{
    font-family: "Pluto-Regular", Arial, sans-serif!important;
    font-size: 59px;
    color: #000;
}

p.circle_price_2{
    font-family: "Pluto-Regular", Arial, sans-serif!important;
    font-size: 30px;
    color: #000;
}

p.circle_price_3{
    font-family: "Pluto-Medium", Arial, sans-serif!important;
    font-size: 18px;
    color: #000;
}

Merci d'avance !

-
Edité par mbriquet.com 21 septembre 2018 à 10:16:07

Salut,

Quelque chose comme ça. 

https://jsfiddle.net/m5jhx1Lv/8/

Note que j'ai viré tes <p>, tu ne dois pas en mettre à chaque fois que tu as un bout de texte à insérer. C'est fait pour scinder un bloc de texte en plusieurs paragraphes, pas autre chose. ;) 

-
Edité par EmmanuelBeziat 21 septembre 2018 à 10:23:49

Super merci beaucoup !

J'ai remarqué que tu avais créé une classe ".circle_right" mais je ne comprend pas car elle n'apparait nul part ? et merci du conseil pour les <p>

rhooManu a écrit:

Salut,

Quelque chose comme ça. 

https://jsfiddle.net/m5jhx1Lv/8/

Note que j'ai viré tes <p>, tu ne dois pas en mettre à chaque fois que tu as un bout de texte à insérer. C'est fait pour scinder un bloc de texte en plusieurs paragraphes, pas autre chose. ;) 

-
Edité par rhooManu il y a 2 minutes

-
Edité par mbriquet.com 21 septembre 2018 à 10:44:15

rhooManu a écrit:

C'est simplement un bloc pour que les éléments s'alignent, et comme il se trouve à droite, je l'ai appelé en conséquence.