Hello developers, today in this blog you’ll learn how to create a Responsive Team Section using HTML & CSS with modern UI Card Design.
Team Section Card is more important to describe shortly about the team members. The 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 this Responsive Team Section Card Design in the website to describe briefly the team members.
In this blog (Responsive Team Section Card Design), there is three members’ card of a team with their photo, name, the role of the particular person in the team. When you hover over the card, the contact icon of the team member will slide from the left of the card, which is used to contact the team member. You can add the team member’s photo at the place of the icon.
As per many Members of a team, you can create many cards. This page (Responsive Team Section Card Design), is made responsive. When this page (Responsive Team Section Card Design) is viewed in mobile mode, the cards are arranged one by one.
The source code of this Responsive Team Section Card Design is given below, if you want the source code of this program, you can copy it. You can use this Responsive Team Section Card Design with your creativity and can take this project to the next level.
Responsive Team Section with modern UI Card Design [Source Code]
To make this website (Responsive Team Section Card Design), you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to make a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');
:root{
--pink-light: #f9e9ed;
}
body{
line-height: 1.5;
font-family: 'Raleway', sans-serif;
background-color: #FF9A8B;
background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
}
*{
box-sizing: border-box;
margin:0;
padding:0;
}
.container{
max-width: 1170px;
margin:auto;
}
.section-title{
width: 100%;
padding:0 15px;
text-align: center;
margin-bottom: 60px;
}
.section-title h2{
font-size: 35px;
text-transform: uppercase;
color: #000;
font-weight: 700;
}
.row{
display: flex;
flex-wrap: wrap;
}
img{
border-radius: 20px;
max-width: 100%;
vertical-align: middle;
}
.team{
min-height: 100vh;
padding: 80px 0;
}
.team-item{
width: calc((100% / 3) - 30px);
margin:0 15px 30px;
position: relative;
transition: box-shadow 0.5s ease;
border-radius: 20px;
}
.team-item:hover{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.team-item img{
width: calc(100% - 60px);
position: relative;
z-index: 1;
transition: transform 0.5s ease;
}
.team-item:hover img{
transform: translateX(60px);
}
.team-item h3{
position: absolute;
background: #000;
right: 0;
bottom: 15px;
padding: 2px 10px;
border-radius: 4px;
color: #fff;
font-size: 18px;
font-weight: 600;
text-transform: capitalize;
z-index: 2;
transition: right 0.5s ease;
margin-left: 75px;
}
.team-item:hover h3{
right: 15px;
}
.team-item h3 span{
display: block;
font-size: 16px;
font-weight: 400;
color: #fff;
}
.team-item .social-links{
position: absolute;
left:0;
top:0;
width: 60px;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
border-left: 2px solid #000;
border-radius: 20px;
transform: translateX(100%);
opacity: 0;
transition: all 0.5s ease;
}
.team-item:hover .social-links{
transform: translateX(0%);
opacity: 1;
}
.team-item .social-links a{
display: block;
height: 35px;
width: 35px;
line-height: 35px;
font-size: 19px;
border:2px solid #000;
border-radius: 50%;
margin:3px 0;
text-align: center;
transition: all 0.5s ease;
}
.team-item .social-links a:hover{
border: 3px solid #000;
}
.fa-facebook {
color: #3B5998;
}
.fa-twitter {
color: #55ACEE;
}
.fa-instagram {
color: #e1306c;
}
.fa-linkedin {
color: #007bb5;
}
.credit a{
text-decoration: none;
color: #fff;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
@media(max-width: 991px){
.team-item{
width: calc(50% - 30px);
}
}
@media(max-width: 575px){
.team-item{
width: calc(100% - 30px);
}
}
Thank you for reading our blog. If you face any problem in creating this Responsive Team Section using HTML & CSS with modern UI Card Design, 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