Creative Profile Card Design using HTML CSS and JS

byCodingFlicks -July 29, 2020

0

Today in this tutorial, we will make a small snippet based on a user profile card. Now the question is, what is the user profile card, and what is its function? In the language of web design, a user profile card is a display of a person's information such as his image, name, profession, social media links, etc. through a beautiful card. Many big brands that maintain a website share some of their essential employee's pieces of information on their website in the form of profile cards. This further increases the credibility of the company among the general public.

In this snippet, we will create a profile card that, when we click on the image, the information of that particular person will slide to the left, and the image will move to the right. In the information box, I have provided a demo name, designation, some random text, and social media links. For creating sliding animation, we have to add the latest jquery to our project. We are providing social media links of the person, so we have to add a font-awesome CDN to our project also. I have given both the links below for your convenience, and you can directly add them to your project.

Let us begin with HTML. First, we will start creating a div element with a 'profile-card' class, which will perform as a container of the profile card components. Next, we will take another div element named 'img-area,' which we will use to image. Underneath that div element, we have to take another div element named profile-text. Inside the profile-text div element, we will take a div element named details-text, which will hold all the pieces of information about the person that we will use as an image. With the information, I mean name, designation, simple demo text as a short bio and social media links or buttons.

We are moving on to CSS code. Let us start by giving a suitable background color and a font-family to the body tag. Now we have to center the profile card in the middle of the document. For that, we will give all div's of the profile-area class a particular width of 300px and height of 400px. After that, we will provide it with an absolute position value, and by using CSS transform property, we will make it to the center of the viewport. I added a small border-radius 5px to the card and provided .5s transition value so that the slide animation occur smoothly.

You may also like:

For styling, the image-area div we will use CSS calc function to give it width. If you wonder what a calc function is, it is used in CSS to create unique spacing and sizes. It is helpful, mainly when we use it with variables. We then give it a 200px height and a random background image. As the image will be on top of the infobox, we have to provide a z-index value. I used a box-shadow effect to increase the looks of the card. The content inside the profile-text div element will need to remain in back, so we will give the div element a z-index value of 1. after giving height and width for the div, we will provide it with a transform and background value.

We will then do some styling for the content inside the details-text div element. We will give it a padding of 15% for each side without the right side. After that, I did some basic styling for header,sub-header, and paragraph tags and the font-awesome that we used. I used individual brand logo colors for each social media icon.

For the animation, we will create a custom class named effect. In the custom js file, we will create a function like whenever someone clicks on the profile-area class's image, then 'effect' class will trigger, and the image will move to left, and the information hiding behind the image will toggle to the right. We now have to style the effect class in CSS by using the calc function. The styling will be like when the 'effect' class triggers the image will move to -200px to left of the profile-area container and then profile-text div slide to 100px right and scaled by 1.2.

REQUIRED FILES:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

HTML:

<div class="profile-area">
<div class="img-area">
</div>
<div class="profile-text">
<div class="details-text">
  <h2>
Jane Doe</h2>
<h3>
Photographer</h3>
<p class="p-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa commodi voluptatibus nisi harum error deleniti et ab odit labore, quae. Fugit rem ea iste libero illo, voluptas veritatis quisquam mollitia, necessitatibus laboriosam voluptates beatae! Fugit non ea reprehenderit, deserunt accusamus!</p>
<p>
<i class="fa fa-facebook"></i>
    <i class="fa fa-twitter"></i>
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-pinterest"></i>
  </p>
</div>
</div>
</div>

CSS:

body{
background: #ddd;
font-family: poppins;
}
.profile-area > div{
width: 300px;
height: 400px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border: none;
transition: all 0.5s;
border-radius: 5px;
}
.img-area{
transform: translate(0, -50%);
width: calc(100vw - 100px);
height: 200px;
top: 20px;
background-image: url(https://i.postimg.cc/hvKyLJc2/3.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
box-shadow: 0 35px 10px -20px rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
.profile-text{
transform: translate(-50%, 0);
transition-delay: 0.05s;
width: calc(100vw - 100px);
height: calc(100vw - 80px);
left: 40px;
border-radius: 0;
background: #000;
z-index: 1;
color: #fff;
}
       .details-text {
padding: 15% 0 15% 20%;
}
.details-text h2{
margin: 0;
font-size: 35px;
}
.details-text h3{
color: darkorange;
margin: 0;
text-transform: uppercase;
}
.p-text{
font-size: 12px;
}
.details-text p i{
width: 15px;
height: 15px;
padding: 5%;
}
.details-text p i.fa.fa-facebook{
background: #3b5998;
}
.details-text p i.fa.fa-twitter{
background: #55acee;
}
.details-text p i.fa.fa-linkedin{
background: #0077b5;
}
.details-text p i.fa.fa-pinterest{
background: #bd081c;
}
.profile-area.effect > .img-area{
transform: translate(calc(-50% - 200px), -50%);
z-index: 10;
}
.profile-area.effect > .profile-text{
transform: translate(calc(-50% + 100px), -50%) scale(1.2);
}

JS:

$(function(){
   $('.profile-area').click(function(){
      $(this).toggleClass('effect');
   });
});

Hope you like it. Thanks for visiting the blog.

Please do not enter any spam link in the comment box.