The dark themed profile card design is a sleek and modern layout that is ideal for highlighting a person’s personal information. The backdrop colour is a rich shade of #111222, which adds depth and refinement to the card. The card is a little brighter shade of #222222, which contrasts nicely with the backdrop.
A profile photo of the person appears at the top of the card. The image is round and has a slightly lighter shade of #222222 border, which helps it stand out against the black backdrop. A section below the profile photo provides the person’s name, title, and a brief explanation of what they do.
The symbol section is situated underneath the person’s name and title on the profile card design. This section includes symbols for several social networking networks, such as LinkedIn, Twitter, and Facebook, as well as the individual’s username or handle.
A part towards the bottom of the card reveals some important information about the individual, such as their email address, phone number, and website. Each item is represented with an icon that corresponds to the information provided.
Source Code :
You will need to create two files, one is html file and other is css file. use your own photo to display on card. the image should be located in img/ folder of root directory.
Step One: create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<html lang="en">
<!-- By HassanRao - hassanrao.com -->
<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">
<title>Profile Card | By Hassan Ali </title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/>
</head>
<body>
<div class="container">
<div class="img_main">
<div class="img_inner">
<img src="img/profile_img.jpg" alt="profile_image">
</div>
</div>
<div class="icon arrow"><i class="fas fa-arrow-left"></i></div>
<div class="icon dots"><i class="fas fa-ellipsis-v"></i></div>
<div class="name">HASSAN ALI</div>
<div class="work">Web Developer</div>
<div class="social-icons">
<a href="#" target="_blank" class="facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" class="github"><i class="fab fa-github"></i></a>
<a href="#" target="_blank" class="instagram"><i class="fab fa-instagram"></i></a>
<a href="#" target="_blank" class="twitter"><i class="fab fa-twitter"></i></a>
</div>
<div class="btn">
<button onclick="Email();">CONTACT</button>
<button onclick="HireMe();">Hire Me</button>
</div>
</div>
<script>
function Email() {
location.href = "mailto:example123@gmail.com";
}
function hireMe() {
location.href = "https://wwww.fiverr.com/hassan_coder";
}
</script>
</body>
</html>
Step Two: create a CSS file with the name of style.css in css/ folder and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
/* Created By: Hassan Ali
Replit Profile: @hassan-coder
Website: HassanRao.com
*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
user-select: none;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #111222;
}
.container,
.container .img_main,
.social-icons a,
.btn button{
background: rgba(0,0,0,0.2);
}
.container{
position: relative;
padding: 30px;
width: 350px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container .icon{
font-size: 17px;
color: #ffffff;
position: absolute;
cursor: pointer;
opacity: 0.7;
top: 15px;
height: 35px;
width: 35px;
text-align: center;
line-height: 35px;
border-radius: 50%;
font-size: 16px;
}
.container .icon i{
position: relative;
z-index: 9;
}
.container .icon.arrow{
left: 15px;
}
.container .icon.dots{
right: 15px;
}
.container .img_main{
height: 150px;
width: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.img_main .img_inner{
height: calc(100% - 30px);
width: calc(100% - 30px);
border-radius: 50%;
}
.img_inner img{
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.container .name{
font-size: 23px;
font-weight: 500;
color: #b3b7d4;
margin: 10px 0 5px 0;
}
.container .work{
color: #9d9da7;
font-weight: 400;
font-size: 16px;
}
.container .social-icons{
margin: 15px 0 25px 0;
}
.social-icons a{
position: relative;
height: 40px;
width: 40px;
margin: 0 5px;
display: inline-flex;
text-decoration: none;
border-radius: 50%;
}
.social-icons a:hover::before,
.container .icon:hover::before,
.btn button:hover:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background: rgba(0, 0, 0,0.25);
}
.btn button:hover:before{
z-index: -1;
border-radius: 5px;
}
.social-icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
line-height: 40px;
}
.social-icons a.facebook i{
color: #4267B2;
}
.social-icons a.github i{
color: #a09e9e;
}
.social-icons a.instagram i{
color: #E1306C;
}
.social-icons a.twitter i{
color: #1DA1F2;
}
.container .btn{
display: flex;
width: 100%;
justify-content: space-between;
}
.btn button{
position: relative;
width: 100%;
border: none;
outline: none;
padding: 12px 0;
color: #c7c7c7;
font-size: 17px;
font-weight: 400;
border-radius: 5px;
cursor: pointer;
z-index: 4;
}
.btn button:nth-child(1){
margin-right: 10px;
}
.btn button:nth-child(1){
margin-left: 10px;
}
/*
<<<----------THE END---------->>>
*/
Overall, this dark-themed profile card design is a professional and fashionable approach to display a person’s personal information. The usage of a black backdrop with a lighter card color creates a wonderful contrast and makes the vital information stand out. The usage of symbols and essential information makes it simple to contact the individual or discover them on social media.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)