Creating Profile Cards using HTML and CSS Tutorial

Submitted by oretnom23 on Tuesday, April 18, 2023 - 13:57.

In this tutorial, you can learn how to create interactive Profile Cards using HTML and CSS. The tutorial aims to provide students and beginners with a reference for learning some HTML and CSS Tricks for creating an interactive component of a website or web application. Here, I will be providing simple web page scripts that demonstrate the creation of simple interactive Profile Cards.

What is Profile Card?

A Profile Card is a block or container component of a website that contains the user or individual information. This card or container is often implemented with user or individual images or avatars, basic information, and some other data of users in the system.

How to Create an Interactive Profile Cards?

Profile Cards can be easily achieved using only HTML and CSS. We can simply create the card elements that are needed for the said component including the elements of the user or individual information blocks. With the help of the CSS scripts, we can design the card according to our requirements or desire on how it would look like. Also, using the CSS we can add simple animation such as Card Flipping Animation to the component to give the end-user a better experience while using or exploring the site. Check out the web page scripts that I created and provided below to know more about creating an interactive Profile Card.

Sample Web Page

The scripts below result in a simple web application page that demonstrate the creation of an interactive Profile Card. The page contains 2 profile cards which have front and back face that contains the user information. The details of the user will be shown by hovering over the cards and it will flip to the other side of the card which contains the complete information of the user.

HTML

Here's the HTML script known as index.html. The file contains the page layout and profile card elements.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Profile Card Design</title>
  7.     <link rel="stylesheet" href="style.css">
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
  11.     <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
  12. </head>
  13. <body>
  14.     <div class="container">
  15.     <h1 id="page-title">Creating Profile Cards Design using HTML and CSS</h1>
  16.     <hr id="title_hr">
  17.  
  18.     <div id="profile-card-wrapper">
  19.         <div class="profile-card">
  20.         <div class="profile-card-content">
  21.             <div class="pc-front-face">
  22.             <div class="profile-img">
  23.                 <img src="./joker.jpg" alt="Sample Profile Image">
  24.             </div>
  25.             <div class="profile-name"><span>Joker</span></div>
  26.             </div>
  27.             <div class="pc-back-face">
  28.             <div class="profile-img">
  29.                 <img src="./joker.jpg" alt="Sample Profile Image">
  30.             </div>
  31.             <div class="profile-name">Joker</div>
  32.             <div class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id purus finibus, efficitur libero non, varius dolor. Nam eget turpis mauris.</div>
  33.             <div class="profile-other-details">
  34.                 <div>
  35.                 <label>Followers</label>
  36.                 <div>100K</div>
  37.                 </div>
  38.                 <div>
  39.                 <label>Following</label>
  40.                 <div>2.3k</div>
  41.                 </div>
  42.             </div>
  43.             <div class="profile-socials">
  44.                 <a href="#" title="Social Facebook Link"><i class="fab fa-facebook-f"></i></a>
  45.                 <a href="#" title="Social Twitter Link"><i class="fab fa-twitter"></i></a>
  46.                 <a href="#" title="Social Pinterest Link"><i class="fab fa-pinterest-p"></i></a>
  47.             </div>
  48.             </div>
  49.         </div>
  50.         </div>
  51.         <div class="profile-card">
  52.         <div class="profile-card-content">
  53.             <div class="pc-front-face">
  54.             <div class="profile-img">
  55.                 <img src="./harley-quinn.jpg" alt="Sample Profile Image">
  56.             </div>
  57.             <div class="profile-name"><span>Harley Quinn</span></div>
  58.             </div>
  59.             <div class="pc-back-face">
  60.             <div class="profile-img">
  61.                 <img src="./harley-quinn.jpg" alt="Sample Profile Image">
  62.             </div>
  63.             <div class="profile-name">Harley Quinn</div>
  64.             <div class="profile-description">Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer in erat eu dolor placerat dictum. Nam tincidunt tellus ante, a interdum ex tincidunt et.</div>
  65.             <div class="profile-other-details">
  66.                 <div>
  67.                 <label>Followers</label>
  68.                 <div>799K</div>
  69.                 </div>
  70.                 <div>
  71.                 <label>Following</label>
  72.                 <div>1.3k</div>
  73.                 </div>
  74.             </div>
  75.             <div class="profile-socials">
  76.                 <a href="#" title="Social Facebook Link"><i class="fab fa-facebook-f"></i></a>
  77.                 <a href="#" title="Social Twitter Link"><i class="fab fa-twitter"></i></a>
  78.                 <a href="#" title="Social Pinterest Link"><i class="fab fa-pinterest-p"></i></a>
  79.             </div>
  80.             </div>
  81.         </div>
  82.         </div>
  83.     </div>
  84.     </div>
  85. </body>
  86. </html>

Wave SVG

In the CSS scripts that I will be providing, some of the elements used the following wave SVG. Save this SVG file as wave-bg.svg.

  1. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#273036" fill-opacity="0.5" d="M0,64L80,96C160,128,320,192,480,186.7C640,181,800,107,960,74.7C1120,43,1280,53,1360,58.7L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg>

Page Layout Design

Here is the CSS script that contains the page layout design.

  1. @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6.     font-family: 'Roboto Mono', monospace;
  7. }
  8. .material-symbols-outlined {
  9.     font-variation-settings:
  10.     'FILL' 0,
  11.     'wght' 400,
  12.     'GRAD' 0,
  13.     'opsz' 48
  14. }
  15. ::selection{
  16.     color: #fff;
  17.     background: #4db2ec;
  18. }
  19. body{
  20.     display: flex;
  21.     align-items: center;
  22.     justify-content: center;
  23.     min-height: 100vh;
  24.     background: #1e1f1f;
  25.     background-image: linear-gradient(to right, #434343 0%, black 100%);
  26. }
  27. #page-title{
  28.     color: #fff;
  29.     text-align: center;
  30.     font-weight: 500;
  31. }
  32. #title_hr{
  33.     width:60px;
  34.     border: 2px solid #ffffff;
  35.     margin: .35em auto;
  36. }

Cards Container Design

Next, here are the stylesheet scripts of the card wrapper and container designs.

  1. /* Profile Card Wrapper */
  2. #profile-card-wrapper{
  3.     display: flex;
  4.     flex-wrap: wrap;
  5.     width: 100%;
  6.     justify-content: space-evenly;
  7.     align-items: center;
  8.     padding: .35em;
  9. }
  10.  
  11. /* Profile Card Container */
  12. .profile-card{
  13.     position:relative;
  14.     height: 400px;
  15.     width: 300px;
  16.     perspective: 1200px;
  17.     margin-bottom: .35em;
  18. }
  19. /* Profile Card Content Container */
  20. .profile-card-content{
  21.     position:relative;
  22.     display: flex;
  23.     flex-direction: column;
  24.     justify-content: center;
  25.     align-items: center;
  26.     height: 100%;
  27.     width: 100%;
  28.     transition: transform .7s ease-in;
  29.     transform-style: preserve-3d;
  30. }
  31.  
  32. .profile-card:hover .profile-card-content{
  33.     transform: rotateY(-180deg);
  34. }

Cards Face Design

Next, here are the custom CSS scripts for the design of the card's front and back faces. It also includes the script of the flip animation of the card when hovering over it.

  1. /* Profile Card Faces Container */
  2. .profile-card .pc-front-face,
  3. .profile-card .pc-back-face{
  4.     position: absolute;
  5.     width: 100%;
  6.     height: 100%;
  7.     top:0;
  8.     left:0;
  9.     backface-visibility: hidden;
  10. }
  11. .profile-card .pc-back-face{
  12.     background-color: #6a85b6;
  13.     transform: rotateY(180deg);
  14.     /* background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%); */
  15.     background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  16.     display: flex;
  17.     flex-direction: column;
  18.     justify-content: center;
  19.     align-items: center;
  20. }
  21. .pc-back-face:before {
  22.     content: "";
  23.     position: absolute;
  24.     width: 100%;
  25.     height: 19%;
  26.     background-image: url(./wave-bg.svg);
  27.     background-repeat: no-repeat;
  28.     background-size: cover;
  29.     background-position: bottom left;
  30.     top: 0;
  31.     left: 0;
  32.     filter: opacity(0.5);
  33.     z-index: 0;
  34.     transform:rotateY(180deg) rotateX(180deg);
  35. }
  36. .pc-back-face:after {
  37.     content: "";
  38.     position: absolute;
  39.     width: 100%;
  40.     height: 19%;
  41.     background-image: url(./wave-bg.svg);
  42.     background-repeat: no-repeat;
  43.     background-size: cover;
  44.     background-position: bottom left;
  45.     bottom: 0;
  46.     left: 0;
  47.     filter: opacity(0.5) brightness(0);
  48.     z-index: 0;
  49. }
  50. .pc-back-face>div{
  51.     z-index: 1;
  52. }

Cards Content Design

Lastly, here are the CSS scripts of the card contents. It includes the style script for the design of the user image in front and back face, name, and other information.

  1. /* Profile Images */
  2. .profile-card .pc-front-face .profile-img{
  3.     position: absolute;
  4.     width: 100%;
  5.     height: 100%;
  6.     top:0;
  7.     left:0;
  8.     filter: brightness(0.75);
  9. }
  10. .profile-card .pc-back-face .profile-img{
  11.     width: 100px;
  12.     height: 100px;
  13.     border-radius: 50% 50%;
  14.     overflow: hidden;
  15.     box-shadow: 2px 2px 7px #000000b3;
  16. }
  17. .profile-card .profile-img>img{
  18.     width: 100%;
  19.     height: 100%;
  20.     object-fit: cover;
  21.     object-position: center;
  22. }
  23. /* Profile Names */
  24. .profile-card .pc-front-face .profile-name{
  25.     position: absolute;
  26.     display: flex;
  27.     flex-wrap: wrap;
  28.     align-items: center;
  29.     justify-content: center;
  30.     height: 50%;
  31.     width: 100%;
  32.     bottom: 0;
  33.     left: 0;
  34.     /* background-color: #0000007c; */
  35.     background-image: url(./wave-bg.svg);
  36.     background-size: cover;
  37.     background-repeat: no-repeat;
  38.     background-position: top left;
  39.     padding: 0.35em 0.35em;
  40.     padding-top: 100px;
  41. }
  42. .profile-card .pc-front-face .profile-name>span{
  43.     color: #fff;
  44.     font-size: 2rem;
  45.     letter-spacing: 3px;
  46.     font-weight: 600;
  47.     text-align: center;
  48. }
  49. .profile-card .pc-back-face .profile-name {
  50.     color: #f1e3e3;
  51.     padding: 0.5em 0;
  52.     font-size: 1.75rem;
  53.     letter-spacing: 2px;
  54.     font-weight: 500;
  55.     text-shadow: 1px 1px 3px #000000ad;
  56. }
  57.  
  58. /* Profile Description */
  59. .profile-card .pc-back-face .profile-description {
  60.     display: -webkit-box;
  61.     overflow: hidden;
  62.     color: #fff;
  63.     font-size: 0.75rem;
  64.     text-align: center;
  65.     padding: 0 1.5em;
  66.     line-height: .8rem;
  67.     font-weight: 200;
  68.     text-shadow: 0px 0px 3px #000;
  69.     text-overflow: ellipsis;
  70.     -webkit-line-clamp: 3;
  71.     -webkit-box-orient: vertical;
  72. }
  73.  
  74. /* Profile Other Details */
  75. .profile-card .pc-back-face .profile-other-details {
  76.     width: 100%;
  77.     padding: 0.35em 0.75em;
  78.     display: flex;
  79.     justify-content: center;
  80. }
  81. .profile-card .pc-back-face .profile-other-details>div {
  82.     padding: 0.35em 0.75em;
  83. }
  84. .profile-card .pc-back-face .profile-other-details>div:has(~ div) {
  85.     border-right: 1px solid #a7a7a7;
  86. }
  87. .profile-card .pc-back-face .profile-other-details>div label{
  88.     color: #e1e1e1;
  89.     font-size: .8rem;
  90.     text-shadow: 0px 0px 3px #0000008f;
  91. }
  92. .profile-card .pc-back-face .profile-other-details>div div {
  93.     color: #e1e1e1;
  94.     font-size: 1.2rem;
  95.     text-shadow: 0px 0px 3px #0000008f;
  96.     text-align: center;
  97. }
  98. .profile-card .pc-back-face .profile-socials{
  99.     width:80%;
  100.     display: flex;
  101.     flex-wrap: wrap;
  102.     justify-content: space-evenly;
  103.     align-items: center;
  104.     padding: 0.35em 0;
  105. }
  106. .profile-card .pc-back-face .profile-socials a {
  107.     text-decoration: none;
  108.     text-transform: none;
  109.     background: #fff;
  110.     width: 30px;
  111.     height: 30px;
  112.     border-radius: 50% 50%;
  113.     display: flex;
  114.     align-items: center;
  115.     justify-content: center;
  116.     box-shadow: 1px 1px 5px #00000061;
  117.     color: #181818;
  118.     transition: transform .2s ease-in-out;
  119. }
  120. .profile-card .pc-back-face .profile-socials a:hover{
  121.     transform: scale(1.1);
  122. }

Snapshots

The images below are the overall result of the web page scripts I have provided above.

Page UI (Back Face [left card] and Front Face [right card])

Profile Cards using HTML and CSS Only

Cards Flipping Image #1

Profile Cards using HTML and CSS Only

Cards Flipping Image #2

Profile Cards using HTML and CSS Only

Cards Flipped

Profile Cards using HTML and CSS Only

There you go! I have also provided the complete source code zip file of the web page scripts I provided on this website and it is free to download. The download button can be found below this tutorial's content. Feel free to download and modify the source code the way you wanted to do some experiments and enhance your programming capabilities.

That's it! I hope this Interactive Profile Cards using HTML and CSS Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags

Add new comment

About text formats
  • 609 views