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](/users/1416/13/16/78/smiles/3775839356.gif)
La maquette
![[Intermédiaire] Exercice 12 - Fiche de pub QZem9](https://i.goopics.net/qZem9.png)
• 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)
![:arrow_forward: ▶](https://cdn.jsdelivr.net/emojione/assets/png/25b6.png?v=2.2.7)
<h1>
, <h2>
, etc., blocs paragraphes <p>
ou génériques <div>
, listes HTML <ul>
et <li>
, liens <a>
et images <img>
...![:arrow_forward: ▶](https://cdn.jsdelivr.net/emojione/assets/png/25b6.png?v=2.2.7)
![:arrow_forward: ▶](https://cdn.jsdelivr.net/emojione/assets/png/25b6.png?v=2.2.7)
![:arrow_forward: ▶](https://cdn.jsdelivr.net/emojione/assets/png/25b6.png?v=2.2.7)
overflow
pour gérer les dépassements![:arrow_forward: ▶](https://cdn.jsdelivr.net/emojione/assets/png/25b6.png?v=2.2.7)
![:arrow_forward: ▶](https://cdn.jsdelivr.net/emojione/assets/png/25b6.png?v=2.2.7)
outline
![:arrow_forward: ▶](https://cdn.jsdelivr.net/emojione/assets/png/25b6.png?v=2.2.7)
: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 :
![:arrow_forward: ▶](https://cdn.jsdelivr.net/emojione/assets/png/25b6.png?v=2.2.7)
![:arrow_forward: ▶](https://cdn.jsdelivr.net/emojione/assets/png/25b6.png?v=2.2.7)
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 !