HOW TO CREATE A PROFILE CARD WITH HTML AND CSS
How to create a profile card with HTML and CSS.
- Use HTML file to structure the profile card.
- Use CSS file to style the profile card.
The source code for this project is available for download by clicking ‘Download Now’ or cloning the GitHub repository.
Source code of HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile-card</title>
<link rel="stylesheet" href="Style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="card">
<div class="image">
<img src="Profile.jpg" alt="" class="profile-image">
</div>
<div class="text-data">
<span class="name">
Spanking Solutions
</span>
<span class="job">
Web-Developer & IT-Trainer
</span>
</div>
<div class="media-buttons">
<a href="#" style="background: #4766a3;" class="link">
<i class='bx bxl-tiktok'></i>
</a>
<a href="#" style="background: #1083ca;" class="link">
<i class='bx bxl-facebook'></i>
</a>
<a href="#" style="background: #b42756;" class="link">
<i class='bx bxl-twitter'></i>
</a>
<a href="#" style="background: #e40f0f;" class="link">
<i class='bx bxl-youtube'></i>
</a>
</div>
<div class="buttons">
<button class="button">
Subscribe
</button>
<button class="button">
Message
</button>
</div>
<div class="data-analytics">
<div class="data">
<i class='bx bxs-heart'></i>
<span class="number">150k</span>
</div>
<div class="data">
<i class='bx bxs-message-dots'></i>
<span class="number">9k</span>
</div>
<div class="data">
<i class='bx bxs-share'></i>
<span class="number">1.5k</span>
</div>
</div>
</div>
</body>
</html>
Save this code with .HTML extension.
Explanation
Body Section:
Contains the visible content of the page.
- <div class = ” card”> The main object for the profile card, which is created with the” card” class.
- <div class = ” image”> Contains the profile image.
- <img src = “Profile.jpg” alt = “” class = ” profile- image”> An element displays a profile image from the”Profile.jpg” file. The alt = “” attribute provides fresh text for access.
- <div class = ” text- data”> Contains the name and title of the project.
- <span class = ” name”> Spanking Solutions A element specifies the name of the company(” Spanking Solutions”).
- <span class = ” job”> Web inventor IT Trainer another element specifies the job title.
- <div class = ” media- buttons”> Contains four social media buttons.
numerous items are hyperlinks with icons for TikTok, Facebook, Twitter, and YouTube. Each of them has a” link” class and a platform-specific background color. - <div class = ” buttons”> Call to action.
- <button class = ” button”> Subscribe and dispatches Use the” button” class to produce clickable buttons.
- <div class = ” data- analytics”> The three statistics for the association.
Statistics for the association:
- The three objects, each with a” data” class, represent the comma, line, and section.
i class = ‘ bx bxs- heart’ icon for heart.
i class = ‘ bx bxs- message- dots’ Symbols for blotches.
i class = ‘ bx bxs- share’ symbol for share.
150k, 9k, and1.5 k relate to the corresponding figures.
Source code of CSS file.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: wheat;
}
.card
{
display: flex;
flex-direction: column;
align-items: center;
max-width: 370px;
width: 100%;
background: #fff;
border-radius: 25px;
padding: 25px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
position: relative;
}
.card::before
{
content: '';
position: absolute;
height: 36%;
width: 100%;
background-color: #0d3d7c;
border-radius: 25px 25px 0 0 ;
top: 0;
left: 0;
}
.image
{
position: relative;
height: 150px;
width: 150px;
background-color: blue;
padding: 3px;
border-radius: 50%;
margin-bottom: 10px;
}
.image .profile-image
{
height: 100%;
width: 100%;
border-radius: 50%;
border: 3px solid white;
}
.card .text-data
{
display: flex;
flex-direction: column;
align-items: center;
}
.text-data .name
{
font-size: 23px;
font-weight: 600;
margin-bottom: 5px;
}
.text-data .job
{
font-size: 15px;
font-weight: 550;
}
.card .media-buttons
{
display: flex;
align-items: center;
margin-top: 12px;
}
.media-buttons .link
{
height: 34px;
width: 34px;
background-color:blue;
color: #fff;
font-size: 18px;
border-radius: 50%;
margin: 0 10px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.card .buttons
{
display: flex;
align-items: center;
margin-top: 15px;
}
.buttons .button
{
color: #fff;
font-size: 16px;
font-weight: 440;
border: none;
border-radius: 25px;
padding: 8px 24px;
margin: 0 10px;
background-color: #0d3d7c;
transition: all 0.3s ease;
}
.buttons .button:hover
{
background-color: #021e46;
}
.card .data-analytics
{
display: flex;
align-items: center;
margin-top: 20px;
}
.data-analytics .data
{
display: flex;
align-items: center;
color: #000000;
padding: 0 23px;
font-size: 17px;
font-weight: 600;
border-right: 2px solid #837b7b;
}
.data i
{
margin-right: 6px;
}
.data:last-child
{
border-right: none;
}
Save this code with .HTML extension.
Explanation:
Global Rules:
Resets margins, paddings, and container-sizing behavior for consistency.
Sets frame height to one 100% viewport height, aligns content vertically and horizontally, uses “wheat” historical past color.
Card Container:
Flexbox format with column direction, targeted items, maximum width 370px, adjusts to complete width if smaller, white background, rounded corners, padding, container shadow, relative positioning.
Before pseudo-element creates a blue background masking 36% of the cardboard height from the top.
Profile Image:
Relative positioning, peak and width 150px, blue history, padding, rounded corners, margin for spacing.
Nested .Profile-image magnificence units height/width to a 100%, rounded corners, white border.
Text Data:
Flexbox layout with column path, focused gadgets.
.Name elegance uses larger font length (23px) and bolder weight (600).
.Job magnificence uses smaller font size (15px) and barely lighter weight (550).
Media Buttons:
Flexbox layout, focused objects, margin for spacing.
.link magnificence sets top/width 34px, blue background, white text, font size 18px, rounded corners, margin, disables text decoration, flex aligns content.
Call to Action Buttons:
Flexbox layout, focused objects, margin for spacing.
.Button elegance uses white textual content, font length 16px, medium weight (440), no border, rounded corners, padding, margin, blue historical past, easy transition impact on hover (darker blue).
Engagement Statistics:
Flexbox format, focused items, margin for spacing.
.data class units black text, padding, font length 17px, formidable weight (six hundred), and borders among sections.
Icon spacing with margin-proper.
Last information section gets rid of the proper border.
Thanks for reading this article