Hello developers, today in this blog you will learn to create an Our Team Card Design using HTML and CSS.
The team member card is more important to describe shortly about the team members. The team card must contain the photo of the person, the name of the person, the role of the person in the team, and some text or a paragraph over there briefly describes the role of the person in the team. Can use Our Team Card Design in the website to describe briefly the team members.
In this blog (Our Team Card Design), on the webpage, there is a card at the center of the webpage. The card contains an image of the person that is followed by the name, designation, some description about the team member, and the skill bar with the percentage. When you hover over the image of the person, the social media icons will be displayed in the place of the image by making the image to be blurred. And also when hovering on the image the skill bar gets colored up to the mentioned percentage.
The source code of this Our Team Card Design using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Our Team Card Design using HTML & CSS on your projects.
Our Team Card Design [Source Code]
To make this website (Glowing Card Animation), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
background: #FDC830;
background: -webkit-linear-gradient(to right, #F37335, #FDC830);
background: linear-gradient(to right, #F37335, #FDC830);
}
.container {
position: relative;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
}
h1.title {
position: relative;
color: #353535;
font-size: 25px;
line-height: 35px;
text-align: center;
margin: 30px auto;
}
h1.title a {
font-size: 22px;
}
.team {
position: relative;
margin: 0 auto;
width: 100%;
text-align: center;
max-width: 300px;
margin-bottom: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
.team .team-img {
position: relative;
font-size: 0;
color: #353535;
border-radius: 20px 0;
}
.team .team-img img {
width: 100%;
height: auto;
border-radius: 20px 20px 0 0;
}
.team .team-social {
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .5);
transition: all .3s;
font-size: 0;
z-index: 1;
opacity: 0;
border-radius: 20px 20px 0 0;
}
.team:hover .team-social {
opacity: 1;
}
.team .team-social a {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 5px;
padding: 11px 0 10px 0;
font-size: 16px;
font-weight: 300;
line-height: 16px;
text-align: center;
color: #ffffff;
transition: all .5s;
margin-top: 100px;
}
.team .team-social a.social-tw {
background: #00acee;
}
.team .team-social a.social-fb {
background: #3b5998;
}
.team .team-social a.social-li {
background: #0e76a8;
}
.team .team-social a.social-in {
background: #3f729b;
}
.team .team-social a.social-yt {
background: #c4302b;
}
.team .team-social a:last-child {
margin-right: 0;
}
.team:hover .team-social a {
margin-top: 0;
}
.team .team-social a:hover {
color: #222222;
background: #ffffff;
}
.team .team-content {
padding: 20px;
background-color: #12192c;
border-radius: 0 0 20px 20px;
}
.team .team-content h2 {
margin: 0 0 5px 0;
color: #F37335;
font-size: 25px;
font-weight: 600;
letter-spacing: 2px;
}
.team .team-content h3 {
margin: 0 0 15px 0;
color: #F37335;
font-size: 14px;
font-weight: 300;
}
.team .team-content p {
margin: 0 0 15px 0;
color: #F37335;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.team .team-skill {
width: 100%;
}
.team .skill-name {
text-align: left;
}
.team .skill-name p {
display: inline-block;
color: #F37335;
font-size: 14px;
font-weight: 600;
margin: 0;
}
.team .skill-name p:last-child {
float: right;
}
.team .progress {
position: relative;
width: 100%;
height: 5px;
margin-bottom: 10px;
background: #dddddd;
border-radius: 20px;
}
.team .progress:last-child {
margin: 0;
}
.team .progress-bar {
position: absolute;
width: 0%;
height: 5px;
top: 0;
left: 0;
background: #FDC830;
transition: all .7s;
z-index: 1;
border-radius: 20px;
}
.team:hover .progress-bar.w-70 {
width: 70%;
}
.team:hover .progress-bar.w-80 {
width: 80%;
}
.team:hover .progress-bar.w-90 {
width: 90%;
}
.credit a{
text-decoration: none;
color: #12192c;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#FFF
}
Thank you for reading our blog. If you face any problem in creating this Our Team Card Design using HTML & CSS, 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