Whether you're lacking inspiration or trying to recreate a website like Twitter, this article will allow you to reproduce a profile highly inspired by those offered by Twitter.
You can find the entire tutorial on our Instagram account
Step 1
Let's start by creating the structure of the header.
<div class="container">
<div class="informations-bar">
<ul>
<li class="active"><a href="#">News</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Media</a></li>
</ul>
<div class="profile">
<img src="logo.png">
<p class="name">Believemy</p>
</div>
</div>
</div>We wrap our header in a container class that will define the dimensions (width and height) of the profile.
This header will also contain the profile's cover photo, which we will place in the background. Therefore, we use a second class, the informations-bar class, which will contain all the profile elements: the photo, the name, and the links.
Step 2
Now let's style the cover photo (.container):
.container {
position: relative;
margin: auto;
width: 650px; height: 250px;
background-image: url('banner.png');
background-size: cover;
border-radius: 5px;
overflow: hidden;
}Be sure to set the container to position relative to be able to position our information bar with absolute positioning.
Step 3
Next is styling the information bar!
.informations-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 65px;
background-color: #151728;
}
ul {
list-style: none; padding: 0; z-index: 2;
}
ul li {
text-align: center;
animation: .3s print;
}
li a {
text-decoration: none; font-size: 3em;
text-transform: uppercase;
font-weight: bold; font-family: arial;
color: white;
}
ul li a:hover { color: #ff9234; }
.open {
display: flex;
justify-content: center;
align-items: center;
}A bit longer, but still simple. We will create an animation later, which is why we call an animation in the li tag named print.
You can also note that there is an open class that serves no purpose at the moment. This class will be added using JavaScript to open our menu. We are also using flexbox to horizontally and vertically center all the menu links.
Step 4
Now let's move on to our backdrop class and thus to our shadow! Here, nothing very new—we will position the class as absolute and set "top", "left", "right", and "bottom" to 0 to make it cover the entire page. We will also use an animation to make the shadow appear, which we will call fade.
.backdrop {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, .9);
cursor: pointer;
animation: fade .1s;
}
Step 5
Our design is now complete; we just need to create the animations to display our beautiful menu with a final class.
@keyframes print {
from {
margin-top: -50px; opacity: 0;
}
to {
margin-top: 0; opacity: 1;
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Step 6
Now all that's left is to make everything work using JavaScript.
const button = document.querySelector('button');
const nav = document.querySelector('nav');
const backdrop = document.querySelector('.backdrop');
button.addEventListener('click', () => {
nav.classList.add('open');
});
backdrop.addEventListener('click', () => {
nav.classList.remove('open');
});When the "Menu" button is clicked, we add the open class to our navigation bar, which will make it appear.
If the user clicks on the shadow (backdrop), we remove the open class and hide the navigation bar.
