Creating a profile card using HTML and CSS is a simple and straightforward process. It involves defining the structure and layout of the card using HTML elements, and styling the card using CSS.
To create a profile card, you can use HTML div elements to define the different sections of the card, such as the header, body, and footer. Within these divs, you can use other HTML elements, such as h1 tags for the name, p tags for the bio or description, and img tags for the profile picture.
Once you have the structure of the card in place, you can use CSS to style the card and make it look more visually appealing. This can involve setting the font and color of the text, adding borders and background colors, and adjusting the layout and spacing of the elements.
Demo Tutorial of How To Create Profile Card Using HTML & CSS
As demonstrated in the tutorial for creating a profile card using HTML and CSS, you can reference the provided code if you find the tutorial boring. To create this profile card, you will need to create two files – one HTML file and one CSS file. Once you have these files, paste the provided code into them. To begin, create an HTML document named “index.html” and paste the code into it. Remember to give the file an “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script> src="https://unpkg.com/phosphor-icons"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>Profile Card</title>
<!-- S-Tech04 -->
</head>
<body>
<div class="card">
<div> class="imgBx">
<img src="./img.jpg" alt="">
</div>
<h2> class="profile-name">James Ford</h2>
<small> class="user-handle">@james_ford</small>
<div class="profile-actions">
<button> class="btn btn-primary">
Follow
</button>
<button class="btn btn-icon">
<i> class="ph-export"></i>
</button>
<button class="btn btn-icon">
<i> class="ph-dots-three-outline-fill"></i>
</button>
</div>
<div class="profile-links">
<a href="#" class="link link-icon">
<i> class="ph-facebook-logo"></i>
</a>
<a href="#" class="link link-icon">
<i> class="ph-twitter-logo"></i>
</a>
<a href="#" class="link link-icon">
<i> class="ph-instagram-logo"></i>
</a>
</div>
</div>
</body>
</html>
Second, make a CSS record with the name of style.css and paste the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Be Vietnam Pro", sans-serif;
}
body
{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #060606;
}
.card
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 90%;
max-width: 300px;
position: relative;
background-color: #1b2028;
background-clip: padding-box;
border: 3px solid transparent;
background-image: linear-gradient(135deg, rgba(117,46,124,0.35),rgba(116,74,88,0.1) 15%, #1b2028 20%, #1b2028 100%);
padding: 3rem;
color: #f1f3f3;
border-radius: 16px;
}
.card::after
{
content: '';
position: absolute;
top: -3px;
bottom: -3px;
right: -3px;
left: -3px;
z-index: -1;
display: block;
border-radius: 16px;
background-image: linear-gradient(135deg, #752e7c, #734a58 20%, #1b2028 30%, #2c333e 100%);
}
.card .imgBx
{
width: 175px;
height: 175px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.card .imgBx img
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
object-fit: cover;
width: 100%;
}
.card .profile-name
{
font-size: 1.5rem;
font-weight: 600;
margin-top: 1.5rem;
}
.card .user-handle
{
color: #7d8396;
}
.card .profile-actions
{
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5rem;
}
.card .profile-actions > *
{
margin: 0 0.25rem;
}
.btn
{
background-color: transparent;
height: 46px;
border: 0;
cursor: pointer;
line-height: 1;
transition: 0.15s ease;
display: flex;
justify-content: center;
align-items: center;
}
.btn-primary
{
background-image: linear-gradient(135deg, #5587ff, #3772ff);
padding: 0 1.375rem;
border-radius: 99em;
color: #fff;
font-size: inherit;
}
.btn-icon
{
width: 45px;
height: 45px;
border-radius: 50%;
border: 3px solid #343945;
color: #7d8396;
}
.btn-icon i
{
font-size: 1.25em;
}
.btn-icon:hover
{
border: 3px solid #7d8396;
}
.profile-links
{
margin-top: 3.5rem;
}
.profile-links .link
{
text-decoration: none;
color: #7d8396;
margin: 0 0.375rem;
}
.profile-links .link i
{
font-size: 1.25rem;
}
You have now completed the process of creating a profile card using HTML and CSS. If you encounter any issues or errors with your code, you can download the source code files by clicking on the provided download button. These files are free and will be downloaded as a .zip file. Once downloaded, extract the files to use them to troubleshoot any problems you may have encountered.
