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 employees' 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.

Video Tutorial:

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 divs 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 the 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 occurs smoothly.

You may also like:

For styling, the image-area div we will use the 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 look of the card. The content inside the profile-text div element will need to remain in the 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 the 'effect' class will trigger, the image will move to the 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 this when the 'effect' class triggers the image will move to -200px to the left of the profile-area container and then profile-text div slide to 100px right and scaled by 1.2.

Animated Profile Card Design using HTML CSS and JS [ Source Code ]:

To create this animated profile card on click, you have to create an HTML and a CSS file and paste the code from the code boxes below into them. In case of any problem, you can download the code from the download button below.

HTML:

  <!DOCTYPE html>
<html lang="en">
 <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card Design using HTML CSS and JS</title>
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="profile-area">
		<div class="img-area"></div>
		<div class="profile-text">
			<div class="details-text">
				<h2>Dave Wood</h2>
				<h3>Web Designer</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>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function(){
            $('.profile-area').click(function(){
                $(this).toggleClass('effect');
            });
        });
    </script>
</body>
</html>

CSS:

  body {
	background: #ddd;
	font-family: 'Poppins', sans-serif;
}
.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(1.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: linear-gradient(to right, #000428, #004e92);
	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);
}

We hope the code is working properly. Animated profile cards enhance the overall aesthetics of your website. You can add this type of CSS card to your next project to make your website more beautiful. Several more snippets are available on our website. Click the Load More button on our homepage to get them. If you find the articles on our website helpful, please share them with others. Thanks for visiting our website.

DOWNLOAD CODE

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