Créer une entête de profil à la twitter

Que vous soyez en panne d'inspiration ou que vous tentiez de recréer un site internet comme twitter, cet article va vous permettre de reproduire un profil très inspiré par ceux proposés par twitter.

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram

1ère étape

Commençons par créer la structure de l'entête.

<div class="container">
  <div class="informations-bar">
    <ul>
      <li class="active">Actualités</li>
      <li>Bio</li>
      <li>Amis</l>
      <li>Médias</li>
    </ul>
    <div class="profile">
      <img src="logo.png">
      <p class="name">Believemy</p>
    </div>
  </div>
</div>

On englobe notre entête dans une classe container qui va définir les dimensions (largeur et hauteur) du profil.

Cette entête va aussi contenir la photo de couverture du profil, qu'on mettra en arrière-plan. On utilise donc une seconde classe, la classe informations-bar, qui va contenir tous les éléments du profil : la photo, le nom et les liens.

2ème étape

Stylisons maintenant la photo de couverture (.container) :

.container {
  position: relative;
  margin: auto;
  width: 650px; height: 250px;
  background-image: url('banner.png');
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}

Pensez bien à mettre le container en position relative pour pouvoir ensuite placer notre barre d'informations avec la position absolute.

3ème étape

Au tour de la barre d'informations d'être stylisée !

.informations-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 65px;
  background-color: #151728;
}

On la met en position absolute pour pouvoir la placer correctement en bas de notre entête (avec bottom: 0) !

4ème étape

Après la barre d'informations, au tour de la photo de profil d'être stylisée :

.profile {
  position: absolute;
  display: flex; align-items: center;
  bottom: 20px; left: 25px;
}

img {
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 3px solid #151728;
}

On utilise flexbox sur la classe profile pour centrer le nom de l'utilisateur avec la photo de profil.

5ème étape

On attaque le nom de l'utilisateur :

.name {
  color: white;
  margin-left: 1.5em;
  font-size: 1.5em;
}

6ème étape

Il ne reste plus qu'à styliser la liste d'informations :

ul {
  position: relative;
  width: 100%; display: flex;
  padding-left: 200px;
  height: 100%; margin: 0;
}

li {
  list-style: none;
  cursor: pointer; color: #5c5e6e;
  font-size: 1.1em; padding: 1.5em 1em;
  transition: all .1s;
}

li:hover, .active {
  color: white;
  border-bottom: 3px solid #1488fa;
}