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
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.
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.
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) !
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.
On attaque le nom de l'utilisateur :
.name {
color: white;
margin-left: 1.5em;
font-size: 1.5em;
}
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;
}
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.