Revenir en haut Aller en bas
Epicode
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment :
WD Green SN350 – Disque SSD interne NVMe M.2 ...
Voir le deal
99.99 €
Le Deal du moment :
Captive : où acheter le Tome Captive 1.5 en ...
Voir le deal
26.90 €

Aller en bas
Sygea
Sygea
Accro au forum
  • Date d'inscription : 04/04/2016
  • Messages : 1412
Maquette d'Exercice - Fiche de publicité

Créée par : Sygea

Informations


Niveau estimé : Intermédiaire
Sujet mis à jour en mars 2023

Présentation


C'est une très ancienne maquette qui n'a jamais été codée, aussi je n'ai malheureusement plus les images. Comme j'ai fait sur la maquette, prenez des images que vous avez en réserve qui vous plaisent ça marchera très bien.

Une fois bien réalisée, n'hésitez pas à mettre fièrement votre fiche en libre-service !

[Intermédiaire] Exercice 12 - Fiche de pub 3775839356

La maquette



[Intermédiaire] Exercice 12 - Fiche de pub QZem9

• La fiche fait 500*500px
• La police du titre, des liens, des pseudos et de join us est Oswald
• Le reste est calibri mais arial ou roboto passent aussi très bien

• Le bloc clair du contexte fait 440*160px
• Le bloc clair des informations fait 145*170px
• Les 2 blocs pour les membres VIP font 160*165px avec une bordure en #000000

• La barre noire à droite est en #000000
• La bordure du titre principal est aussi #000000
• Les blocs clairs sont en #ffffff opacité 0.6 ou 0.7
• Les liens sont en #000000 écrit en #ffffff
• Tout ce qui est rouge est #9f0a08

Effet(s):
Il n'y a, a priori, pas d'animations particulières, mais si vous êtes à l'aise avec tout ça, amusez vous ! Y'a moyen de faire des trucs sympas en vrai (changement de couleur du bouton rejoindre, effet de survol pour les membres VIP, transitions de couleur sur les liens...)

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)

▶ Bases du HTML : titres <h1>, <h2>, etc., blocs paragraphes <p> ou génériques <div>, listes HTML <ul> et <li>, liens <a> et images <img>...
▶ Bases du CSS : image de fond, couleurs de fond et de texte, marges, espacements internes, taille de texte...
▶ Flexbox et/ou grid pour positionner des blocs (et groupes de blocs) côte à côte
▶ La propriété CSS overflow pour gérer les dépassements
▶ Le positionnement absolu et relatif pour placer le texte sur les images
▶ Les bordures et contours en CSS, en particulier la propriété outline
▶ Les effets de survol avec la pseudo-classe :hover et (par exemple) les propriétés CSS transition et opacity

A titre d’entraînement (uniquement !), vous pouvez également tenter d'obtenir un rendu avec les anciennes méthodes :
▶ les tableaux HTML
▶ La fusion des cellules d'un tableau

Pensez aux cas de figure particuliers : que faire en cas de pseudonyme très long ?

Merci d'informer le staff d'Epicode en cas de lien mort !


_______________
Mar 28 Aoû 2018 - 19:20
Batty
Batty
Ancien.ne du staff
  • Date d'inscription : 05/06/2014
  • Messages : 3514
Merci du partage Elle est très jolie !

Je l'ajoute à la l'index et voici quelque tuto qui pourrais aider

Positionnement avec display ou Positionnement float
Différence entre DIV et SPAN
Les listes
Les balise HTML
Utilisation des sélecteurs

Si vous souhaiter mettre la fiche pub dans une page HTML :
Structure d'une page HTML
Iframe
_______________
Mer 29 Aoû 2018 - 21:50
Alek
Alek
Ancien.ne du staff
  • Date d'inscription : 20/01/2018
  • Messages : 2520
Bloup~
Je n'ai pas respecté les tailles #thug [Intermédiaire] Exercice 12 - Fiche de pub 1717827495



je n'ai pas pu faire comme sur la maquette, les blocs décalés, parce que mon tout est dans un bloc avec une largeur définis étou.. voilou [Intermédiaire] Exercice 12 - Fiche de pub 3655035957
_______________
Dim 10 Fév 2019 - 0:05
Reine des Ténèbres
Reine des Ténèbres
Ancien.ne du staff
  • Date d'inscription : 15/08/2017
  • Messages : 3183
Bonsoir, @Alek :3
Je te réponds avec un mois de retard, sorry.

Concernant ton choix de coder sur scratchpad, je trouve ça pas très pertinent pour un exo, vu que le code peut être modifier en temps réel. Ce site sera plus adapté pour un tuto en direct ou pour coder un projet en collaboration entre deux ou plusieurs codeurs. Pour que ton code soit plus en sécurité il sera préférable d'utiliser un éditeur comme Codepen ou JSfiddle.

Sinon tu t'en sors plutôt bien pour cette fiche, par contre il y a quelques disparités à voir.
Niveau visuel, le dernier avatar n'est pas décalé en effet et il manque le cadre noir au bloc du contexte.
Il te manque aussi tout ce qui est interactif. contexte, prédéfini, annexe et join us sont supposé être des liens.

Alors petit faute d'inattention à la fin de ton CSS, il y a un point virgule après ton commentaire sur la couleur de l'ascenseur.

Comme tu le sais déjà, t'es très copine avec les div, un peu trop quand même x). Je t'invite donc à voir ce tuto pour découvrir les autres balises HTML.

Alors on a .bloc et .fond qui entoure le même contenu, une de moins serait bien :p
Tu n'as besoin d'un seul bloc parent, qui aura une grosse bordure droite noire (border-right).
De même pour .contexte et .texte ça fait deux div alors que tu peux juste mettre tout ton CSS dans contexte directement.

Ton titre et sous-titre ont tous les deux une marge de 8px. Tu peux si tu veux mettre un padding de 8px au cadre ça t'évitera de mettre une marge à chaque élément. Ici tu n'as que deux mais imagine quand tu en as plus et là ça te fait déjà une ligne de moins.

.pitit et .info encore deux div mais pourquoi ? Avoue que tu le fais exprès /pan.
Pour bien centrer verticalement le texte tu peux soit utiliser un padding et donc au lieu du margin-top: 5px dans info tu mets un padding-top dans .pitit. Sinon tu peux utiliser la propriété line-height (littéralement interligne), celle-ci doit avoir la valeur de la hauteur de ton bloc. Attention par contre ça ne fonctionne pas si tu as plusieurs lignes parce que comme c'est un interligne tu auras la première ligne au centre mais les autres à exactement la même distance, very far away :p

Un peu plus loin on a la div cadre autour de boite1, encore une div dont on va se débarasser grâce à la propriété magique "outline" littéralement line externe et qui fonctionne comme un border avec trois petites différences.
- une bordure fait partie de la largeur et hauteur d'un bloc, outline se place à l'extérieur :
j'ai un border
j'ai un outline
j'ai les deux je suis cool

- On peut définir à quel distance sera l'outline avec la propriété outline-offset, quand c'est positif c'est plus loin de la bordure et quand c'est négatif c'est une bordure à l'intérieur comme dans le cas de notre schéma.
on aura un truc du genre :
Code:
outline: 1px solid black;
outline-offset: -5px;
- La troisième particularité de l'outline c'est qu'il est toujours rectangulaire, donc une propriété comme le border-radius n'existe pas pour l'outline et donc si notre bloc est rond, c'est mort, on va devoir utiliser deux div comme tu aimes :p

Retournons à notre petite fiche. Alors toujours dans la boite1, ça m'étonne que tu aies utilisé des span et pas des div *sort les feux d'artifices*
mais en fait, ironiquement des div t'auraient éviter de mettre deux fois br, la div te garanti un saut de ligne et la gestion de l'espace entre les textes avec margin. Ceci dit, c'est quand même une fiche qui sera utilisée dans le message d'un forum et donc "entrer" fera très bien l'affaire. Donc les span c'est bien :p

La boite2, C'est moi ou il y a trois div ? *recompte* nan c'est trois div *meurt*
Alors là le flex ça sert strictement à rien. Tu peux supprimer le CSS de colonne et tu me diras si tu vois une différence.
Dans le schéma le dernier avatar dépasse la partie rouge et se superpose à la barre noire. Il suffit donc d'augmenter la largeur du bloc qui entoure les trois bloc (ici display). Donc pour changer uniquement la deuxième ligne vu que la line des liens est aussi appelé display tu peux soit changer de nom à la deuxième ou sélectionner le deuxième display de la sorte :
Code:
.display + .display {
  width: 500px;
}
+ veut dire "qui suit", donc là uniquement le display qui suit un autre display sera affecté.

Les images membres du mois et rpg du mois sont des avatars et pas des décorations, donc il est préférable de les mettre dans le HTML et non en background. Faire la distinction entre image décorative et image en rapport avec le contenu permet à ton code d'être accessible aux non-voyants.

Voilà voilà j'espère que mes remarques t'aideront à progresser et que tu t'es amusée en me lisant :p
_______________
Lun 11 Mar 2019 - 0:38
Void
Void
Membre timide
  • Date d'inscription : 20/09/2013
  • Messages : 146
Et oui c'est encore moi [Intermédiaire] Exercice 12 - Fiche de pub 3655035957
Voilà mon résultat pour ce schéma bien sympathique ! J'ai choisi de le faire en iframe comme c'est une fiche de pub, du coup le css est direct dans le HTML, mais je le mets en détail quand même pour que ce soit plus simple o/


Le HTML :
Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="fichePB2.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css" type="text/css">
    <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=Oswald:wght@300;400;500&display=swap" rel="stylesheet">
    <title>Fiche PB2 : Exercice 12</title>
    <style>
.fichePB2 {
    width: 460px;
    height: 500px;
    background: url(https://zupimages.net/up/23/11/08a5.png);
    font: 12px roboto, sans-serif;
    border-right: 40px solid #2f2c51;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
      
.fichePB2 p::-webkit-scrollbar {
    width: 5px;
}

.fichePB2 p::-webkit-scrollbar-thumb {
    background: #2f2c51;
}

.fichePB2 p::-webkit-scrollbar-track {
    background: transparent;
}

.fichePB2 p, .contxPB2, .fichePB2 h2 a {
    background-color: #ffffff99;
    outline: 1px solid #2f2c51;
    outline-offset: -5px;
}

.fichePB2 span, .fichePB2 h2 a, .titrePB2 h1, .linksPB2 a {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.fichePB2 h1, .fichePB2 h2, .fichePB2 h2 a, .fichePB2 p {
    margin: 0;
}

.infimgPB2, .linksPB2 {
    padding-left: 10px;
}

.fichePB2 a, .titrePB2 h1, .infosPB2 p, .imgPB2 div {
    transition: all 0.8s ease-in-out;
}
      
.contxPB2 p, .titrePB2 p {
    background: none;
    outline: none;
}

.fichePB2 span {
    font-size: 15px;
    color: #2f2c51;
}

.fichePB2 a {
    color: #2f2c51;
    text-decoration: none;
}

.fichePB2 a:hover, .titrePB2 h1:hover {
    letter-spacing: 2px;
}

.titrePB2 {
    width: 101%;
    padding: 5px 0;
    border: 1px solid #2f2c51;
}

.titrePB2 h1 {
    padding: 0 8px;
    font-size: 25px;
    color: #fff;
    font-weight: 500;
    text-shadow: 1px 1px 0px #030614;
    line-height: 1;
}

.titrePB2 p {
    padding: 0 20px;
    font-size: 14px;
    text-transform: lowercase;
    color: #00000099;
}

.contxPB2 {
    height: 85px;
    padding: 15px;
    margin: 0 10px 0 10px;
}

.contxPB2 p {
    height: 85px;
    padding-right: 5px;
    text-align: justify;
    overflow: auto;
    scrollbar-color: #2f2c51;
    scrollbar-width: thin;
}

.linksPB2 {
    display: flex;
    justify-content: space-between;
}

.linksPB2 a {
    padding: 0 25px;
    font-size: 18px;
    color: #fff;
    background-color: #2f2c51;
}

.infimgPB2 {
    width: 103%;
    display: flex;
    justify-content: space-between;
}

.infimgPB2 img {
    border: 1px solid #2f2c51;
}

.infosPB2 {
    position: relative;
    width: 140px;
    height: 165px;
}

.infosPB2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.infosPB2:hover p {
    opacity: 1;
}

.infosPB2 p {
    position: absolute;
    top: 0;
    width: 120px;
    padding: 18px 10px;
    text-align: center;
    line-height: 12px;
    opacity: 0;
}

.imgPB2 {
    position: relative;
    display: flex;
    justify-content: center;
}

.imgPB2 img {
    width: 150px;
    height: 100%;
    object-fit: cover;
}

.imgPB2 div {
    position: absolute;
    bottom: 0;
    padding-bottom: 5px;
    opacity: 0;
}

.imgPB2:hover div {
    opacity: 1;
}

.imgPB2 div p {
    padding: 7px;
    text-align: center;
    background-color: #ffffffd9;
}

.imgPB2 div p span {
    font-size: 18px;
    line-height: 1;
    color: #2f2c51;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

.fichePB2 h2 {
    text-align: center;
    padding: 0;
}

.fichePB2 h2 a {
    padding: 0 100px;
    background-color: #ffffff70;
    font-size: 40px;
    color: #2f2c51;
}

.credPB2 {
    text-align: center;
    font-size: 10px;
    color: #fff;
    padding-bottom: 3px;
}

.credPB2 a {
    color: #7d79a9;
}
    </style>
</head>
<body>
    <div class="fichePB2">
        <div class="titrePB2">
            <h1>Nom du forum</h1>
            <p>type du forum — <b>00</b> membres — <b>0000</b> messages</p>
        </div>
        <div class="contxPB2">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <br/><br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <br/><br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <div class="linksPB2">
            <a href="">Contexte</a>
            <a href="">Prédéfinis</a>
            <a href="">Annexes</a>
        </div>
        <div class="infimgPB2">
            <div class="infosPB2">
                <img src="https://zupimages.net/up/23/11/qorw.png" alt="img-infos-forum"/>
                <p>
                    <span>Type d'avatar :</span><br/>
                    Dessin/Manga/3D<br/><br/>
                    <span>Taille de l'Avatar :</span><br/>
                    200*400px<br/><br/>
                    <span>Min. de lignes :</span><br/>
                    RP libre<br/><br/>
                    <a href="">En savoir plus</a>
                </p>
            </div>
            <div class="imgPB2">
                <img src="https://www.zupimages.net/up/23/11/uhds.png" alt="img-membre-mois"/>
                <div>
                    <p>
                        Membre du mois<br/>
                        <span>PSEUDO</span>
                    </p>
                </div>
            </div>
            <div class="imgPB2">
                <img src="https://www.zupimages.net/up/23/11/3f6b.png" alt="img-rp-mois"/>
                <div>
                    <p>
                        RP du mois<br/>
                        <span>PSEUDO & PSEUDO</span>
                    </p>
                </div>
            </div>
        </div>
        <h2><a href="">JOIN US</a></h2>
        <div class="credPB2">sygea & void — <a href="https://www.epicode-entraide.com/">epicode</a></div>
    </div>
</body>
</html>

Le CSS :
Code:
.fichePB2 {
    width: 460px;
    height: 500px;
    background: url(https://zupimages.net/up/23/11/08a5.png);
    font: 12px roboto, sans-serif;
    border-right: 40px solid #2f2c51;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
      
.fichePB2 p::-webkit-scrollbar {
    width: 5px;
}

.fichePB2 p::-webkit-scrollbar-thumb {
    background: #2f2c51;
}

.fichePB2 p::-webkit-scrollbar-track {
    background: transparent;
}

.fichePB2 p, .contxPB2, .fichePB2 h2 a {
    background-color: #ffffff99;
    outline: 1px solid #2f2c51;
    outline-offset: -5px;
}

.fichePB2 span, .fichePB2 h2 a, .titrePB2 h1, .linksPB2 a {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.fichePB2 h1, .fichePB2 h2, .fichePB2 h2 a, .fichePB2 p {
    margin: 0;
}

.infimgPB2, .linksPB2 {
    padding-left: 10px;
}

.fichePB2 a, .titrePB2 h1, .infosPB2 p, .imgPB2 div {
    transition: all 0.8s ease-in-out;
}
      
.contxPB2 p, .titrePB2 p {
    background: none;
    outline: none;
}

.fichePB2 span {
    font-size: 15px;
    color: #2f2c51;
}

.fichePB2 a {
    color: #2f2c51;
    text-decoration: none;
}

.fichePB2 a:hover, .titrePB2 h1:hover {
    letter-spacing: 2px;
}

.titrePB2 {
    width: 101%;
    padding: 5px 0;
    border: 1px solid #2f2c51;
}

.titrePB2 h1 {
    padding: 0 8px;
    font-size: 25px;
    color: #fff;
    font-weight: 500;
    text-shadow: 1px 1px 0px #030614;
    line-height: 1;
}

.titrePB2 p {
    padding: 0 20px;
    font-size: 14px;
    text-transform: lowercase;
    color: #00000099;
}

.contxPB2 {
    height: 85px;
    padding: 15px;
    margin: 0 10px 0 10px;
}

.contxPB2 p {
    height: 85px;
    padding-right: 5px;
    text-align: justify;
    overflow: auto;
    scrollbar-color: #2f2c51;
    scrollbar-width: thin;
}

.linksPB2 {
    display: flex;
    justify-content: space-between;
}

.linksPB2 a {
    padding: 0 25px;
    font-size: 18px;
    color: #fff;
    background-color: #2f2c51;
}

.infimgPB2 {
    width: 103%;
    display: flex;
    justify-content: space-between;
}

.infimgPB2 img {
    border: 1px solid #2f2c51;
}

.infosPB2 {
    position: relative;
    width: 140px;
    height: 165px;
}

.infosPB2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.infosPB2:hover p {
    opacity: 1;
}

.infosPB2 p {
    position: absolute;
    top: 0;
    width: 120px;
    padding: 18px 10px;
    text-align: center;
    line-height: 12px;
    opacity: 0;
}

.imgPB2 {
    position: relative;
    display: flex;
    justify-content: center;
}

.imgPB2 img {
    width: 150px;
    height: 100%;
    object-fit: cover;
}

.imgPB2 div {
    position: absolute;
    bottom: 0;
    padding-bottom: 5px;
    opacity: 0;
}

.imgPB2:hover div {
    opacity: 1;
}

.imgPB2 div p {
    padding: 7px;
    text-align: center;
    background-color: #ffffffd9;
}

.imgPB2 div p span {
    font-size: 18px;
    line-height: 1;
    color: #2f2c51;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

.fichePB2 h2 {
    text-align: center;
    padding: 0;
}

.fichePB2 h2 a {
    padding: 0 100px;
    background-color: #ffffff70;
    font-size: 40px;
    color: #2f2c51;
}

.credPB2 {
    text-align: center;
    font-size: 10px;
    color: #fff;
    padding-bottom: 3px;
}

.credPB2 a {
    color: #7d79a9;
}
_______________
Ven 17 Mar 2023 - 18:25
Contenu sponsorisé
    _______________
    Revenir en haut