Learn how to create a stylish profile card for your website using HTML, CSS, and JavaScript. Add animations, effects, and responsive design easily!
Table of Contents
A profile card is a graphical element on a website that displays a user's or an organization's information in a visually appealing way. Typically, a profile card contains an image, name, title, and a short description. It is a great way to showcase your personal or professional details on your website in a compact and easy-to-read format. Profile cards can be used on a team page, about page, or any other page where it is necessary to display information about individuals or organizations.
There's more to a website than just the page it resides on. Your website can also be where you create your profile card by using HTML, CSS, and JavaScript. By putting this information on your website, you will create an easy way for people to find out more about you without hitting up the pages of different social media accounts.
In this article, we will teach you how to create a profile card for your website using HTML, CSS, and JavaScript. A profile card is a great way to showcase information about yourself, your team, or your business in a visually appealing way.
Let's start making an amazing profile card using HTML, CSS, and JavaScript step by step.
Prerequisites:
Before starting this tutorial, you should understand HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
First, we'll start by creating a basic HTML file. This file will contain the basic structure of our profile card. We'll include an area for your profile picture as well as some text and formatting tags.
After creating the files, just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we'll create the CSS file. This file will contain the style rules that will apply to our profile card. We'll add a border around our profile picture and text, as well as some padding and margin values.
This will give our profile card an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
* {
box-sizing: border-box;
}
body {
color: #2b2c48;
font-family: "Jost", sans-serif;
background-image: url(https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.card {
max-width: 340px;
margin: auto;
overflow-y: auto;
position: relative;
z-index: 1;
overflow-x: hidden;
background-color: white;
display: flex;
transition: 0.3s;
flex-direction: column;
border-radius: 10px;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
}
.card[data-state="#about"] {
height: 450px;
}
.card[data-state="#about"] .card-main {
padding-top: 0;
}
.card[data-state="#contact"] {
height: 430px;
}
.card[data-state="#experience"] {
height: 550px;
}
.card.is-active .card-header {
height: 80px;
}
.card.is-active .card-cover {
height: 100px;
top: -50px;
}
.card.is-active .card-avatar {
transform: none;
left: 20px;
width: 50px;
height: 50px;
bottom: 10px;
}
.card.is-active .card-fullname,
.card.is-active .card-jobtitle {
left: 86px;
transform: none;
}
.card.is-active .card-fullname {
bottom: 18px;
font-size: 19px;
}
.card.is-active .card-jobtitle {
bottom: 16px;
letter-spacing: 1px;
font-size: 10px;
}
.card-header {
position: relative;
display: flex;
height: 200px;
flex-shrink: 0;
width: 100%;
transition: 0.3s;
}
.card-header * {
transition: 0.3s;
}
.card-cover {
width: 100%;
height: 100%;
position: absolute;
top: -20%;
left: 0;
will-change: top;
background-size: cover;
background-position: center;
filter: blur(30px);
transform: scale(1.2);
transition: 0.5s;
}
.card-avatar {
width: 100px;
height: 100px;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
border-radius: 50%;
-o-object-position: center;
object-position: center;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(-64px);
}
.card-fullname {
position: absolute;
bottom: 0;
font-size: 22px;
font-weight: 700;
text-align: center;
white-space: nowrap;
transform: translateY(-10px) translateX(-50%);
left: 50%;
}
.card-jobtitle {
position: absolute;
bottom: 0;
font-size: 11px;
white-space: nowrap;
font-weight: 500;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 1.5px;
margin: 0;
left: 50%;
transform: translateX(-50%) translateY(-7px);
}
.card-main {
position: relative;
flex: 1;
display: flex;
padding-top: 10px;
flex-direction: column;
}
.card-subtitle {
font-weight: 700;
font-size: 13px;
margin-bottom: 8px;
}
.card-content {
padding: 20px;
}
.card-desc {
line-height: 1.6;
color: #636b6f;
font-size: 14px;
margin: 0;
font-weight: 400;
font-family: "DM Sans", sans-serif;
}
.card-social {
display: flex;
align-items: center;
padding: 0 20px;
margin-bottom: 30px;
}
.card-social svg {
fill: #a5b5ce;
width: 16px;
display: block;
transition: 0.3s;
}
.card-social a {
color: #8797a1;
height: 32px;
width: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.3s;
background-color: rgba(93, 133, 193, 0.05);
border-radius: 50%;
margin-right: 10px;
}
.card-social a:hover svg {
fill: #637faa;
}
.card-social a:last-child {
margin-right: 0;
}
.card-buttons {
display: flex;
background-color: #fff;
margin-top: auto;
position: sticky;
bottom: 0;
left: 0;
}
.card-buttons button {
flex: 1 1 auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: 0;
font-size: 13px;
border: 0;
padding: 15px 5px;
cursor: pointer;
color: #5c5c6d;
transition: 0.3s;
font-family: "Jost", sans-serif;
font-weight: 500;
outline: 0;
border-bottom: 3px solid transparent;
}
.card-buttons button.is-active, .card-buttons button:hover {
color: #2b2c48;
border-bottom: 3px solid #8a84ff;
background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%);
}
.card-section {
display: none;
}
.card-section.is-active {
display: block;
-webkit-animation: fadeIn 0.6s both;
animation: fadeIn 0.6s both;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
transform: translatey(40px);
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translatey(40px);
}
100% {
opacity: 1;
}
}
.card-timeline {
margin-top: 30px;
position: relative;
}
.card-timeline:after {
background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%);
content: "";
left: 42px;
width: 2px;
top: 0;
height: 100%;
position: absolute;
}
.card-item {
position: relative;
padding-left: 60px;
padding-right: 20px;
padding-bottom: 30px;
z-index: 1;
}
.card-item:last-child {
padding-bottom: 5px;
}
.card-item:after {
content: attr(data-year);
position: absolute;
top: 0;
left: 37px;
width: 8px;
height: 8px;
line-height: 0.6;
border: 2px solid #fff;
font-size: 11px;
text-indent: -35px;
border-radius: 50%;
color: rgba(134, 134, 134, 0.7);
background: linear-gradient(to bottom, #a0aee3 0%, #516acc 100%);
}
.card-item-title {
font-weight: 500;
font-size: 14px;
margin-bottom: 5px;
}
.card-item-desc {
font-size: 13px;
color: #6f6f7b;
line-height: 1.5;
font-family: "DM Sans", sans-serif;
}
.card-contact-wrapper {
margin-top: 20px;
}
.card-contact {
display: flex;
align-items: center;
font-size: 13px;
color: #6f6f7b;
font-family: "DM Sans", sans-serif;
line-height: 1.6;
cursor: pointer;
}
.card-contact + .card-contact {
margin-top: 16px;
}
.card-contact svg {
flex-shrink: 0;
width: 30px;
min-height: 34px;
margin-right: 12px;
transition: 0.3s;
padding-right: 12px;
border-right: 1px solid #dfe2ec;
}
.contact-me {
border: 0;
outline: none;
background: linear-gradient(to right, rgba(83, 200, 239, 0.8) 0%, rgba(81, 106, 204, 0.8) 96%);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
color: #fff;
padding: 12px 16px;
width: 100%;
border-radius: 5px;
margin-top: 25px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
font-family: "Jost", sans-serif;
transition: 0.3s;
} Step 3 (JavaScript Code):
Finally, we'll create the JavaScript file. This file will contain the functionality that will make our profile card work. We'll add a click event to our div tag, which will trigger a user-generated content form. We'll use this form to allow users to input their own biography information and contact details.
Created by: JotForm
const buttons = document.querySelectorAll(".card-buttons button");
const sections = document.querySelectorAll(".card-section");
const card = document.querySelector(".card");
const handleButtonClick = e => {
const targetSection = e.target.getAttribute("data-section");
const section = document.querySelector(targetSection);
targetSection !== "#about" ?
card.classList.add("is-active") :
card.classList.remove("is-active");
card.setAttribute("data-state", targetSection);
sections.forEach(s => s.classList.remove("is-active"));
buttons.forEach(b => b.classList.remove("is-active"));
e.target.classList.add("is-active");
section.classList.add("is-active");
};
buttons.forEach(btn => {
btn.addEventListener("click", handleButtonClick);
});Final Output:
Conclusion:
A profile card is a simple yet powerful way to showcase personal or professional details on a website. With HTML, CSS, and JavaScript, you can create an interactive and visually appealing profile card that enhances user engagement.
Whether for a portfolio, team page, or business website, a well-designed profile card helps visitors quickly learn about you. Start building your own today and make your website more professional and user-friendly!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
