Easy User Profile| CSS | Flex
Today lets make the user profile tab using CSS and HTML. We are using FLEX CSS for styling and BEM methodology for naming.
First, you need to determine what is needed.
To make something like above, let's break it on small elements
Elements:
To make something like above we need elements like:
1. div containing the image || profile__image div
2.div containing Name and Number || details div
3. individual div for name and number || profile__name and profile__number div
4. div containing all the above div || profile-container div
Let’s build it.
Profile container div
HTML:
<div class=”profile profile-container”>
</div>
CSS:
.flex {
display: flex;
}
.profile{
display:flex;
}
.profile-container {
background: #ffffff;
}
profile__image div inside profile-container div
HTML:
<div class=”profile profile-container”>
<div class=”profile__image”>
<img src=”https://www.pngitem.com/pimgs/m/78-786293_1240-x-1240-0-avatar-profile-icon-png.png" alt=”” />
</div>
</div>
CSS:
.profile__image {
border-radius: 50%;
height: 40px;
width: 40px;
overflow: hidden;
}
.profile img {
width: 100%;
height: 100%;
object-fit: cover;
}
Profile__details div inside profile-container div
HTML:
<div class=”profile profile-container”>
<div class=”profile__image”>
<img src=”https://www.pngitem.com/pimgs/m/78-786293_1240-x-1240-0-avatar-profile-icon-png.png" alt=”” />
</div>
<div class=”flex profile__details default-font”>
<div class=”profile__name”>John Doe</div>
<div class=”profile__number”>98XXXXXX</div>
</div>
</div>
CSS:
.profile__details {
cursor: pointer;
font-family: “Muli”, sans-serif;
padding-left: 10px;
align-items: center;
flex-direction: column;
font-size: 14px;
}
.profile__number:hover {
color: #337ab7;
}
.profile__number {
color: #03a9f4;
}
THANKYOU FOR READING :)
Happy CSSing
