Responsive Profile Card Design Using only HTML and CSS

Responsive Profile Card Design Using only HTML and CSS

Hey Friends today in this blog you'll be learning how to create a Responsive Profile Card UI Design Using only HTML and CSS. Now in this project you'll see a three cards, in those cards you'll also images with awesome animation when user hover around card the image zooms out and the card moves up, showing you the name of each profile, to create this profile card you'll need to create two files and you'll name them index.html and style.css.

What is Profile Card?

Shortly profile card means a card where is a small photo of a particular person and his some details like name, job, some other minor details. A profile card is used as an identity of a specific person.

Responsive Profile Card Design Using only HTML and CSS | Video Tutorial

You Might Like This:

Responsive Profile Card Design Using only HTML and CSS | Source Code

To paste the given code first you've to create two files "index.html" and "style.css" after creating this two files then you can copy and paste the given codes

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Profile Card with Tool Tip</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="main-card">
      <div class="card">
        <div class="image">
            <img src="1.jpg" alt="">
        </div>
        <div class="tooltip">
          <div class="name">
            <span>Jasmine Carter</span>
          </div>
          <div class="job">
            <span>Blogger || Web Designer</span>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="image">
            <img src="2.jpeg" alt="">
        </div>
        <div class="tooltip">
          <div class="name">
            <span>David Mario</span>
          </div>
          <div class="job">
            <span>Photographer || Designer</span>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="image">
            <img src="3.jpg" alt="">
        </div>
        <div class="tooltip">
          <div class="name">
            <span>Mike Tyson</span>
          </div>
          <div class="job">
            <span>Developer || YouTuber</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS CODE

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body{
  background: #1aafec;
}
.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-wrap: wrap;
}
.wrapper .main-card{
  display: flex;
  flex-wrap: wrap;
}
.main-card .card{
  background: #fff;
  width: calc(33% - 10);
  margin: 0 10px;
  padding: 10px 10px;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 0 4px rgba(0,0,0,.4);
  transition: all 0.3s ease;
}
.main-card .card .image{
  width: 90%;
  height: 90%;
}
.main-card .card .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  left: 15px;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.main-card .card:hover{
  transform: translateY(-20px);
}
.main-card .card:hover img{
  transform: scale(0.97);
}
.main-card .card .tooltip{
  position: relative;
  top: 80px;
  background: #fff;
  padding: 5px 5px;
  border-radius: 20px;
  opacity: 0;
}
.main-card .card .tooltip .name span{
  font-size: 18px;
}
.main-card .card .tooltip .job span{
  font-size: 15px;
  color: #1aafec;
}
.main-card .card:hover .tooltip{
  opacity: 1;
  transform: translateY(-10px);
}
.main-card .card .tooltip::before{
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 80%;
  left: 45%;
  background: #fff;
  z-index: -1;
  transform: rotate(45deg);
}
@media (max-width: 1068px) {
  .main-card .card{
    width: calc(10px - 20);
    margin-bottom: 60px;
  }
}
@media (max-width: 768px) {
  .main-card .card{
    width: 100%;
  }
}

Responsive Profile Card Design Using only HTML and CSS

Creative Tutorials

Post a Comment

Post a Comment

Contact Form