Responsive Flipping Profile Cards

Profile cards are a special type of card on any website that acts like digital business cards inside a website. Profile cards condense the most important details into a structured, easy-to-understand format. Common elements of a profile card include a photo, name, role, short biography, contact buttons, social media links, etc. These types of cards play an important role in the user experience of a website. Today, we will share with you the code for a snippet called Responsive Profile Cards with Flip Animation. The video tutorial below shows you how to create the snippet from start to finish.

Video Tutorial:

We hope you have watched the video tutorial called Responsive Flipping Profile Cards above. These cards help users quickly identify people or services. These cards play an important role in building trust, keeping layouts tidy, and encouraging interaction. They also help viewers understand who or what a particular company offers without having to scroll through long content. Instead of making these profile cards static, we have made them dynamic. We have added a flip animation on click feature with the help of JavaScript. Flip animation is an interactive effect through which a card rotates to reveal more information on the back side. These types of animations are generally used to make a website more fun and engaging, capture attention, and encourage exploration. These profile cards are more commonly seen in portfolio websites, e-commerce websites, blog websites, etc. In addition, we have made the snippet responsive keeping in mind the demands of the responsive web design era. We know that responsive type websites can adapt to different screen sizes like desktops, tablets, and smartphones. Responsive web design not only increases trust, it keeps visitors engaged because they can easily interact with the content no matter what device they use.

You May Also Like:

Responsive Flipping Profile Cards [ Source Code ]:

To create this Responsive Flipping Profile Cards, we have to create an HTML file and a CSS file. You can create a separate JS file for the JS code we used here. After that, copy the code from the code box below and paste it into your file. You can also download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--
    Website: divinectorweb.com
    Subscribe Us: https://www.youtube.com/c/Divinector 
    Support Us: https://www.buymeacoffee.com/divinector
-->  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>profile cards with flip animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    
    <div class="wrapper">
      
        <div class="card">
        <div class="card-inner">
          <div class="card-front">
            <img src="img/1.jpg" alt="Profile Picture">
            <h3>Name Surname</h3>
            <p>Senior UI/UX Designer</p>
            <div class="bio">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum voluptates</p> <!-- lorem10 -->
            </div>
            <div class="buttons">
              <button class="btn1">Follow</button>
              <button class="btn2">Message</button>
            </div>
          </div>
          <div class="card-back">
            <img src="img/1.jpg" alt="Profile Picture">
            <h3>About Person</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat repellat doloremque eveniet, omnis ipsam quo laborum magnam dolor odit perspiciatis</p> <!-- lorem20 -->
          </div>
        </div>
      </div>
    
        
        <div class="card">
        <div class="card-inner">
          <div class="card-front">
            <img src="img/2.jpg" alt="Profile Picture">
            <h3>Name Surname</h3>
            <p>Senior UI/UX Designer</p>
            <div class="bio">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum voluptates</p>
              </div>
            <div class="buttons">
              <button class="btn1">Follow</button>
              <button class="btn2">Message</button>
            </div>
          </div>
          <div class="card-back">
            <img src="img/2.jpg" alt="Profile Picture">
            <h3>About Person</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat repellat doloremque eveniet, omnis ipsam quo laborum magnam dolor odit perspiciatis</p>
          </div>
        </div>
      </div>
    
        <div class="card">
        <div class="card-inner">
          <div class="card-front">
            <img src="img/3.jpg" alt="Profile Picture">
            <h3>Name Surname</h3>
            <p>Senior UI/UX Designer</p>
            <div class="bio">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum voluptates</p>
              </div>
            <div class="buttons">
              <button class="btn1">Follow</button>
              <button class="btn2">Message</button>
            </div>
          </div>
          <div class="card-back">
            <img src="img/3.jpg" alt="Profile Picture">
            <h3>About Person</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat repellat doloremque eveniet, omnis ipsam quo laborum magnam dolor odit perspiciatis</p>
          </div>
        </div>
      </div>
    </div>

    <script>
        document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('click', () => {
        card.classList.toggle('flip');
    });
});

    </script>
</body>
</html>

ADD CSS:

body {
	font-family: "Montserrat", sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background: #ddd;
}
.wrapper {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}
.card {
	width: 300px;
	height: 400px;
	position: relative;
	margin-bottom: 20px;
}
.card-inner {
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	position: relative;
}
.card.flip .card-inner {
	transform: rotateY(180deg);
}
.card-front, .card-back {
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: hidden;
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	background: #fff;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.card-front {
	background: #fff;
}
.card-back {
	background: #222;
	transform: rotateY(180deg);
}
.card-back h3 {
	color: #fff;
	font-family: "Carter One", system-ui;
}
.card-back p {
	color: #ddd;
	line-height: 1.7;
}
.card img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin: -110px 0 15px;
	border: 15px solid #fff;
}
.card h3 {
	margin: 10px 0 5px;
	font-size: 18px;
}
.card p {
	margin: 0;
	color: #666;
	font-size: 14px;
}
.bio {
	margin: 20px 0;
}
.bio p {
	line-height: 1.6;
}
.buttons {
	display: flex;
	gap: 10px;
}
.btn1, .btn2 {
	padding: 10px 15px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
}
.btn1 {
	background: #ff5f6d;
	color: #fff;
}
.btn2 {
	background: #ccc;
	color: #333;
}
/* Media Queries for Responsiveness */

@media (max-width: 920px) {
	body {
		height: auto;
	}
	.wrapper {
		flex-direction: column;
		align-items: center;
		padding: 150px 0;
	}
	.card {
		width: 320px;
		height: 400px;
		margin-bottom: 115px;
	}
}
@media (max-width: 480px) {
	body {
		height: auto;
	}
	.card {
		width: 280px;
		height: 400px;
		margin-bottom: 115px;
	}
}

Responsive profile cards with click and flip animations help make the website more functional, attractive, and user-friendly. These types of cards also improve the overall experience and leave a lasting impression on the visitors. We hope you have collected the code already. For more code please click the load more button on our homepage. Thanks for the visit.

DOWNLOAD CODE

Video Tutorial:

Responsive Flipping Profile Cards [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Flipping Profile Cards

Video Tutorial:

Responsive Flipping Profile Cards [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form