A profile card contains the person’s details like photos, about, some social media icons like Facebook, Twitter, Instagram, and LinkedIn to contact them, and some other information about the person. A profile card is used for the identity of a specific person. By placing the profile card on the web page, the user can contact the person easily.
In this blog (Responsive Profile Card Design), there is a profile card with the photo, name, designation, and contact icons of the person on the left side of the card. Some information or objectives, contact information like an email I’d and mobile number, and the skills of the person on the right side of the card. Shadow effect is applied in this profile card. There is a toggle button above the card.
This toggle button is used to make the web page day night mode. At first, the web page will be in light mode, when you click on the toggle button the web page turns to dark mode. This day-night mode is made by using JavaScript code.
The source code of this Responsive Profile Card is given below, if you want the source code of this program, you can copy it. You can use this Responsive Profile Card code on your projects.
Responsive Profile Card Design[Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file.First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@100&display=swap');
*{
margin:0px;
padding:0px;
box-sizing:border-box;
list-style: none;
font-family: Montserrat, Sans-Serif;
}
body{
background:#f3f3f3;
}
.wrapper{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:750px;
height: 450px;
display: flex;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.wrapper .left{
width:30%;
background: linear-gradient(to right, #01a9ac, #01dbdf);
padding:30px 25px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
color: #fff;
}
.wrapper .left img{
margin-bottom: 20px;
border-radius: 50px;
}
.wrapper .left p{
font-size: 16px;
margin-top: 10px;
}
.wrapper .right{
width:75%;
background:transparent;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding:30px 25px;
}
.wrapper .right .info,
.wrapper .right .skills{
margin-bottom:25px;
margin-top: 30px;
}
.wrapper .right .info h3,
.wrapper .right .skills h3{
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 2px solid #01dbdf;
text-transform:uppercase;
letter-spacing: 5px;
}
.wrapper .right .info_data,
.wrapper .right .skills_data{
display: flex;
justify-content: space-between;
}
.wrapper .right .info_data .data,
.wrapper .right .skills_data .data{
width:45%;
}
.wrapper .right .info_data .data h4,
.wrapper .right .skills_data .data h4{
margin-bottom: 5px;
}
.wrapper .right .info_data .data p,
{
font-size: 13px;
margin-bottom: 10px;
}
.wrapper .social_media ul{
display: flex;
justify-content: space-around;
}
.wrapper .social_media ul li{
width:35px;
height: 35px;
background: #fff;
margin-right: :10px;
border-radius: 25px;
line-height: 38px;
text-align: center;
margin-top: 100%;
}
.wrapper .social_media ul li a{
color: #01a9ac;
font-size: 20px;
}
span{
text-align: center;
line-height : 1.6;
}
.skills ul li{
text-align: left;
padding: 15px;
margin-top: 30px;
}
.skills ul li{
list-style-type: none;
margin: 0;
padding: 0;
}
.skills ul li {
border: 1px solid #2D2747;
border-radius: 2px;
display: inline-block;
font-size: 12px;
margin: 0 7px 7px 0;
padding: 7px;
}
.center{
position: absolute;
top: 60px;
right: 23%;
height: 24px;
width: 48px;
border-radius: 20px;
background: blue;
transform: translate(-50%,-50%);
}
.center input{
position: relative;
height: 100%;
width: 100%;
background: #e6e6e6;
border-radius: 20px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
input:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: 24px;
width: 24px;
border-radius: 20px;
background: linear-gradient(#fff,#f2f2f2,#e6e6e6,#d9d9d9);
transform: scale(.85);
transition: .5s;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
input:checked{
background: #00d2e6;
}
input:checked:before{
left:24px;
}
.active{
background: #1a1a1a;
color: #fff;
}
$(document).ready(function(){
$('input').click(function(){
$('body').toggleClass('active');
});
$('input').click(function(){
$('section').toggleClass('active');
});
});
Thank you for reading our blog. If you face any problem in creating this Responsive Profile Card Design using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team