How to make a flipable css profile card design using html and css | BY Ascode

css cards ascode,
simple css card design,
css cards responsive,
advanced css cards,
horizontal card css,
dashboard card design css,
css card hover effects,
profile card css,
rofile card css ascode,
profile card ascode,
profile page design in html with source code,
bootstrap profile card codepen,
profile card website,
simple profile card css,
profile card template free, ascode, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to Ascode Blog . In this post we are going to learn how to make a flipable profile card card design using html and css. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <div class="card">
        <div class="card-front"></div>
        <div class="card-back">
          <img src="https://i.pinimg.com/originals/e8/5a/ac/e85aac59bb673913614cae3ca5cc8cc0.jpg" alt="">
          <h2>Naincy doe<br><span>Senior Designer</span></h2>
          <div class="social-icons">
            <a href="#" class="fab fa-facebook" ></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-google-plus"></a>
            <a href="#" class="fab fa-linkedin" ></a>
            <a href="#" class="fab fa-instagram" ></a>


 @import "https://fonts.googleapis.com/css?family=Josefin+Sans:400,700";
body {
  margin: 0;
  padding: 0;
  font-family: "Josefin Sans", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: rgb(240, 239, 255);
  background-size: cover;
body a {
  color: #ffffff;
  text-decoration: none;

.card {
  position: relative;
  height: 400px;
  width: 300px;
  transform-style: preserve-3d;
  background: transparent;
  transition: 0.5s;
  box-shadow: 0 0 10px #000;
  border-radius: 10px;
.card:hover .card-front {
  transform: rotateX(-180deg);
.card:hover .card-back {
  transform: rotateX(0deg);

.card-front {
  height: 100%;
  width: 100%;
  background-image: url(https://i.pinimg.com/originals/e8/5a/ac/e85aac59bb673913614cae3ca5cc8cc0.jpg);
  background-size: cover;
  position: absolute;
  background-color: #000000;
  border-radius: 10px;
  backface-visibility: hidden;
  transform: rotateX(0deg);
  transition: 0.5s;

.card-back {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #000000;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  transition: 0.5s;
  border-radius: 10px;
  color: #ffffff;
  text-align: center;
.card-back img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 35px 0;
.card-back h2 {
  margin:20px 0;
  font-size: 26px;
.card-back h2 span {
  font-size: 20px;
.card-back a {
  height: 20px;
  width: 20px;
  padding: 5px 5px;
  border-radius: 4px;
  line-height: 20px;
.card-back a:hover {
  color: #000000;
  background-color: #fff;

Youtube Tutorial


Post a Comment


Join Telegram