Box - Card la base

Mise en forme

Sur cette exercices on va partir d'une base sur laquelle mettre un usage les notions de margin, padding, border

Objectif

On veut arriver au résultat suivant :

Voici le code de base à utiliser:

<div class="profile-card">
    <div class="profile-header">
        <div class="profile-avatar"></div>
    </div>
    <div class="profile-info">
        <div class="profile-name">Marie Dupont</div>
        <div class="profile-bio">Photographe passionnée, amoureuse des voyages et du café</div>
    </div>
    <div class="profile-stats">
        <div class="stat">
            <div class="stat-count">2.4k</div>
            <div class="stat-label">Abonnés</div>
        </div>
        <div class="stat">
            <div class="stat-count">568</div>
            <div class="stat-label">Abonnements</div>
        </div>
        <div class="stat">
            <div class="stat-count">126</div>
            <div class="stat-label">Publications</div>
        </div>
    </div>
    <div class="profile-actions">
        <button class="follow-button">S'abonner</button>
    </div>
</div>

info

Pour l'exercice on voit ici qu'on utilise la balise générique div.
On à une structure html qui n'est pas signifiante, elle ne porte pas de sens ce n'est que des divs dans des divs.
Ca nous oblige à nous basé sur le noms des class css pour avoir une idée de ce que signifie cette structure html.
C'est le contraire d'un code html sémantique.

Etapes

Mise en place

Crée notre ficher index.html et style.css dans le répertoire du projet.
Ajouter la structure de base html. Ne pas oublié d'ajouter un lien vers depuis index.html dans vers notre style.css.

Ensuite on va copier coller la structure de base.

L'élément principal

On va travailler de l'exterieur vers l'intérieur c'est à dire de la card vers le texte, les stats, le bouton.
Ce qui donne en terme html on travaile du parent vers les enfants.

profil-card est notre élément principale, on va lui donner:

• une largeur de 300px
• un fond blanc
• on l'ecarte du bord haut et bas de l'écran de 20px
• on arrondie ses angles avec une valeur de 8px

Maintenant petit ajout esthétique:

• box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
• overflow: hidden;

Overflow avec la valeur hidden permet de cacher le texte qui serait trop long.
Ca evite d'avoir un effet de débordement du texte hors de la card.

Header

Sur l'exemple la partie haute, le header est en bleu ( plus exactement #1877f2 ). On lui donne une hauteur de 140px.

Il faut crée l'espace ou doit venir la photo de profile il s'agit de profil-avatar
On lui indique une largeur et hauteur de 80px et un couleur de fond #e4e6eb.
Sur l'exemple le gris du fond est entouré d'une bordure blanche. On va doit crée cette bordure de 5px.
Il reste à jouer sur l'arrondire des 4 angles et si ont arrondis suffisament les angles on se retrouve avec un cercle.

Pour positionner notre cercle au milieu on va utiliser une notion qui serat vue plus tard.

  position: absolute;
  top: 107px;
  left: 110px;

Reste à ajouter un léger ombrage

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

Les infos

Dans la partie infos on a deux éléments: le nom prénom qui ressemble à un titre et un petit texte descriptif.
L'ensemble est centré, pour centré un texte on utilise la regle css text-align.

Notre texte est ecrasé par la mise en forme faite pour le header.
Il suffit de lui donner un peu plus d'espace interieur. C'est une facon d'agrandire l'espace des infos tout en poussant notre contenu vers le bas de sa box.
Donc on part sur une valeur de 45px en haut et 15px pour le reste.

On vient de mettre en place notre box principal pour les infos. Elle contient deux enfants profile-name et profile-bio
Afin de rendre l'information principal plus visible on va ajouter un font-size de 18px et une mise en gras via font-weight .
La touche de fin est d'ajouter 5px d'espace interieur vers le bas.

Pour la bio on choisit une taille plus petite 14px et une couleur différentes, plus discrète #65676b. Ici aussi on ajoute un espace interieur vers le bas mais de 15px cette fois.

Stats

Avec .profile-stats on à un élément parent qui contient plusieurs éléments .stat eux même constitués de deux div ( .stat-count, .stat-label )
Même approche on se concentre sur .profile-stats et on se contente d'ajouter une bordure assez fine cette fois ci 1px et d'une couleur discrète #e4e6eb
Petite astuce qu'on verrat plus tard on ajoute css display: flex;. Ca nous permettrat de centrer nos balise html enfants.

On passe sur l'enfant .stat et on continue à tricher un peux en ajouter css flex: 1;.
Pour le rest on aimerais que tout son contenu soit centré ( la balise html est déjà centré grace à flex mais pas encore son text ) et son contenu étant du texte on sait déjà quelle règle css utilisé.
Ensuite on va ajouter un espacement interne de 10px de tout les cotés.

Les chiffres importants sont dans à mettre en 16px et font-weight gras tandis que le texte serat en 12px et d'une couleur #65676b

Btn

On arrive sur la fin, il nous reste un bouton à customiser.
Notre bouton est lui même dans une div donc on commence à travailler dessus en lui ajoutant de l'espace interne de 15px à droite et gauche, 10px en bas et en haut.
Encore une bordure discrete de 1px et d'une couleur #e4e6eb.

Notre bouton on va lui donner toute la place disponible au sein de sa div ( c'est à dire celle qui reste après nos modifications ). Donc une largeur de 100%. Ensuite on joue sur la couleur du texte en la mettant en blanc.
Ici pas de bordure mais on va quand même légèrement arrondir les angles ( 4px ). Aussi un font en gras et petite subtilité on ajoute css cursor: pointer afin d'indiquer qu'il est clicale ( un effet :hover serait bienvenu aussi).
La touche de fin, encore un peux d'espace intérieur avec 8px pour lui donner un peu d'épaisseur.

Fin

On devrait être plus ou moins passé de ceci

à