Learn how to create a profile card for your website using HTML, CSS, and JavaScript with this beginner-friendly guide. Follow our step-by-step instructions to create a professional-looking profile card.
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.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of 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 our 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.
.webp)
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:
In conclusion, creating a profile card for your website using HTML, CSS, and JavaScript can be a fun and rewarding experience. With the help of this guide, you have learned how to create a basic profile card and how to add interactivity to it using JavaScript. By practicing what you have learned and experimenting with the design, you can create your own unique profile card that showcases your personality, skills, or business in a visually appealing way. We hope that this article has been helpful, and we wish you the best of luck in your web development journey!
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 😊
