Hello readers, today you learn how to create a CSS Responsive Profile Card Slider by using only HTML & CSS, many people are using JavaScript and Plugins to make card slide but in this programming, we will make beautiful profile cards with sliding animation in HTML & CSS.
Earlier I have shared Responsive Profile Card without sliding animation but now we will make responsive profile cards with sliding feature.
Profile Card means the identity card of a particular person that contains some details of them like name, job position, and some other information. On the web pages, we can see various people’s profile cards with different designs. The main motive to append profile cards on the webpage is to make users contact the person easily.
Here is an image of the profile card that I have uploaded on the webpage. Basically, profile cards look like this. As you can see there is a different image on the top and a person’s name their job and some media icon to contact them through social media.
At the bottom of those cards, there are two buttons, that left side button is active so its width increase, when we clicked on the second button those three profile cards moves left side and another three cards appear smoothly.
To see the actual sliding animation of the card and other hover effects of these profile cards, you can watch a full video tutorial of this program, and also you will get the concept of every code that I have used in these profile cards.
Responsive Profile Card Slider in HTML CSS | Video Tutorial
As you have seen given in the video tutorial of these animated profile card sliders. To make those cards slide and active button I have used two HTML radio button and give the same name, that helps us to make a button click only one time for each of them and that radio button helps to slide the card.
To make the profile card responsive I have used the CSS media screen property, it helps to make cards fit any sizes of screens.
If you are familiar with HTML & CSS then it is very easier for you. For those friends who are feeling difficulty creating this our team section page, I have provided the full source code of this program below. You can copy all codes from below.
You Might Like This:
CSS Responsive Profile Cards Slider | Source Code
To copy-paste the following code of card slider on your document, first you need to create two files one is an HTML file and another is a CSS file. After creating these two files you can copy-paste the given codes in your document. You can also download all source code files by clicking the given “Download Button” directly.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Responsive Our Team Section | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<input type="radio" name="dot" id="one">
<input type="radio" name="dot" id="two">
<div class="main-card">
<div class="cards">
<div class="card">
<div class="content">
<div class="img">
<img src="images/img1.jpg" alt="">
</div>
<div class="details">
<div class="name">Andrew Neil</div>
<div class="job">Web Designer</div>
</div>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="img">
<img src="images/img2.jpg" alt="">
</div>
<div class="details">
<div class="name">Jasmine Carter</div>
<div class="job">UI Designer</div>
</div>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="img">
<img src="images/img3.jpg" alt="">
</div>
<div class="details">
<div class="name">Justin Chung</div>
<div class="job">Web Devloper</div>
</div>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>
<div class="cards">
<div class="card">
<div class="content">
<div class="img">
<img src="images/img4.jpg" alt="">
</div>
<div class="details">
<div class="name">Appolo Reef</div>
<div class="job">Web Designer</div>
</div>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="img">
-<img src="images/img5.jpg" alt="">
</div>
<div class="details">
<div class="name">Adrina Calvo</div>
<div class="job">UI Designer</div>
</div>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="img">
<img src="images/img6.jpeg" alt="">
</div>
<div class="details">
<div class="name">Nicole Lewis</div>
<div class="job">Web Devloper</div>
</div>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="button">
<label for="one" class=" active one"></label>
<label for="two" class="two"></label>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #f2f2f2;
position: relative;
}
body::before{
content: '';
position: absolute;
width: 100%;
background: #FF676D;
clip-path: inset(47% 0 0 0);
z-index: -1;
height: 100%;
}
::selection{
background: #FF676D;
color: #fff;
}
.container{
max-width: 950px;
width: 100%;
overflow: hidden;
padding: 80px 0;
}
.container .main-card{
display: flex;
justify-content: space-evenly;
width: 200%;
transition: 1s;
}
#two:checked ~ .main-card{
margin-left: -100%;
}
.container .main-card .cards{
width: calc(100% / 2 - 10px);
display: flex;
flex-wrap: wrap;
margin: 0 20px;
justify-content: space-between;
}
.main-card .cards .card{
width: calc(100% / 3 - 10px);
background: #fff;
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease;
}
.main-card .cards .card:hover{
transform: translateY(-15px);
}
.cards .card .content{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.cards .card .content .img{
height: 130px;
width: 130px;
border-radius: 50%;
padding: 3px;
background: #FF676D;
margin-bottom: 14px;
}
.card .content .img img{
height: 100%;
width: 100%;
border: 3px solid #ffff;
border-radius: 50%;
object-fit: cover;
}
.card .content .name{
font-size: 20px;
font-weight: 500;
}
.card .content .job{
font-size: 20px;
color: #FF676D;
}
.card .content .media-icons{
margin-top: 10px;
display: flex;
}
.media-icons a{
text-align: center;
line-height: 33px;
height: 35px;
width: 35px;
margin: 0 4px;
font-size: 14px;
color: #FFF;
border-radius: 50%;
border: 2px solid transparent;
background: #FF676D;
transition: all 0.3s ease;
}
.media-icons a:hover{
color: #FF676D;
background-color: #fff;
border-color: #FF676D;
}
.container .button{
width: 100%;
display: flex;
justify-content: center;
margin: 20px;
}
.button label{
height: 15px;
width: 15px;
border-radius: 20px;
background: #fff;
margin: 0 4px;
cursor: pointer;
transition: all 0.5s ease;
}
.button label.active{
width: 35px;
}
#one:checked ~ .button .one{
width: 35px;
}
#one:checked ~ .button .two{
width: 15px;
}
#two:checked ~ .button .one{
width: 15px;
}
#two:checked ~ .button .two{
width: 35px;
}
input[type="radio"]{
display: none;
}
@media (max-width: 768px) {
.main-card .cards .card{
margin: 20px 0 10px 0;
width: calc(100% / 2 - 10px);
}
}
@media (max-width: 600px) {
.main-card .cards .card{
/* margin: 20px 0 10px 0; */
width: 100%;
}
}
If you face any difficulties while creating your Profile Card Slider or your code is not working as expected, you can download the source code files for this Image Slider for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
