Responsive Profile Card HTML CSS

Introduction of Profile Card HTML CS

Hello guys! Here today we are presenting you our new and latest Profile Card HTML CSS. Which is a person info card with a hovering effect made with HTML and CSS. In this card there will be two cards in which there will be only image of person shows in page. When user will hover on particular card then the image will animate. Then the social media icons will appear with animation. The name of that person will also be displayed with their names. This project is going to be very helpful for you, as you can use it for different purposes, like showing your product information instead of any other person’s information.

Let’s start making this Profile Card HTML CS with the help of the simple code of HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet). I hope you will be interested in our project, and this project is not very complicated. We have used the basic concept of the code so everyone can understand it without any problem. If you will have to face any problems while understanding this code. Then you can contact us through the details given in the footer of the page.

HTML (Hypertext Markup Language)

First, we will make the structure of this Profile Card HTML CS with the help of HTML (the Hyper Text Markup Language is used to make the front-end structure of any web pages of websites). In this project, we will give the title of this project in the title tag (which is used to give the title of any topic). Then we will move toward the main content of the project. We will make a parent div. We will make two child divs that hold all the data on the card.

In these two divs, we will make an image div in which we will insert the image in the img tag (which is used to insert the image). Then we will make another child div to write the data about the image. In which we will make a list in which there will be social media icons to follow them on the internet. Then we will give the name of the person in the image. Their skills in the h2 tag (which is used to give the heading) and the span tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
</head>
<body>
    <div class="container">
    
        <div class="card-wrapper">
          
          <div class="card">
            
            <div class="card-image">
              <img src="https://image.ibb.co/dUTfmJ/profile_img.jpg" alt="profile one">
            </div>
    
          <ul class="social-icons">
            <li>
              <a href="">
                <i class="fab fa-facebook-f"></i>
              </a>
            </li>
            <li>
              <a href="">
                <i class="fab fa-instagram"></i>
              </a>
            </li>
            <li>
              <a href="">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
            <li>
              <a href="">
                <i class="fab fa-dribbble"></i>
              </a>
            </li>
          </ul>
    
          <div class="details">
            <h2>John Smith
              <br>
              <span class="job-title">UI Developer</span>
            </h2>
          </div>
        </div>
      </div><!-- end box wrapper --> 
        
        
    <div class="card-wrapper">
          
          <div class="card profile-two">
            
            <div class="card-image profile-img--two">
              <img src="https://image.ibb.co/c9rY6J/profile02.jpg" alt="profile two">
            </div>
    
            <ul class="social-icons">
              <li>
                <a href="">
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
              <li>
                <a href="">
                  <i class="fab fa-instagram"></i>
                </a>
              </li>
              <li>
                <a href="">
                  <i class="fab fa-twitter"></i>
                </a>
              </li>
              <li>
                <a href="">
                  <i class="fab fa-dribbble"></i>
                </a>
              </li>
            </ul>
    
            <div class="details jane">
                <h2>Jane Doe
                  <br>
                  <span class="job-title">UI Designer</span>
                </h2>
            </div>
        </div>
     </div><!-- END box wrapper -->
         
     </div><!-- END container -->
</body>
</html>

CSS (Cascading Style Sheet)

After making the structure of this project, will we now give the styling to this page with the help of CSS (a CSS style sheet is used to give the styling to the HTML page and to make the website responsive)? In this, we will make the background black. Then take both cards to the center of the screen. We will move toward the main content of this project. In this, we will adjust the size and position of the image. Then design the social media list and name of the person, giving them the color, font size, and background.

Now comes the hovering effect, in which we hide the information of the person. When the user hovers on a particular card, the image will animate. The information and social media icon will appear with some animation. In the hovering effect, when the user hovers on the first card. The image will move to the top with a time delay, and when hovering on the second card, the image will flip.

/**** Sass Variables ****/



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
 
  background: #333;
}

.container {
  max-width: 900px;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
}

.card-wrapper {
  width: 400px;
  height: 500px;
  position: relative;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 450px;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: 0.5s;
  
  .card-image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #000;
    transition: .5s;
  }
  
  &:hover img {
    opacity: 0.4;
    transition: .5s;
  }
}

.card:hover .card-image {
  transform: translateY(-100px);
  transition: all .9s;
}

/**** Social Icons *****/

.social-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  
  li {
    list-style: none;
    
    a {
      position: relative;
      display: block;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background: #fff;
      font-size: 23px;
      color: #333;
      font-weight: bold;
      margin: 0 6px;
      transition: .4s;
      transform: translateY(200px);
      opacity: 0;
    } 
  }
}

.card:hover .social-icons li a {
  transform: translateY(0px);
  opacity: 1; 
}

.social-icons li a:hover {
  background: #000; 
  transition: .2s;
  .fab {
    color: #fff;
  } 
}

.social-icons li a .fab {
  transition: .8s;
    
  &:hover {
      transform: rotateY(360deg);
      color: #fff;
  } 
}

.card:hover li:nth-child(1) a {
    transition-delay: 0.1s;
}
.card:hover li:nth-child(2) a {
  transition-delay: 0.2s;
}
.card:hover li:nth-child(3) a {
  transition-delay: 0.3s;
}
.card:hover li:nth-child(4) a {
  transition-delay: 0.4s;
}

/**** Personal Details ****/

.details {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 120px;
  z-index: 1;
  padding: 10px;

  h2 {
    margin: 30px 0;
    padding: 0;
    text-align: center;
     
    .job-title {
        font-size: 1rem;
        line-height: 2.5rem;
        color: #333;
        font-weight: 300;
    }
  }
}

.jane {
  position: absolute;
  bottom: -120px;
  left: 0;
  opacity: 0;
  background: #fff;
  width: 100%;
  height: 120px;
  z-index: 3;
  padding: 10px;
  transition: .4s;
}

.profile-two .social-icons li a {
  border-radius: 50%;
}

.card:hover .profile-img--two {
  transform: rotateY(180deg);
}

.card:hover .jane {
  bottom: 0;
  left: 0;
  transition-delay: 0.5s;
  opacity: 1;
}

OutPut of Profile Card HTML CS

Finally, we have made this Profile Card HTML CS with the help of the simple and easy code of HTML and CSS, following their code step by step. I hope you have understood it perfectly; if not, then you should understand it carefully, one by one. You should also create a project that will enhance your knowledge and practice. If you want the source code, then click on the button given below.