Profile Card Design – CodingNepal

How to Create Profile Card in HTML & CSS

CodingNepal — Fri, 30 Sep 2022 21:11:20 +0000

Hey dude, I believe you are doing well. As usual, today you will learn to Create A Profile Card UI Design using only HTML and CSS. I have already created many Card Designs I hope you have watched them. Today’s profile card will be simple and valuable.

Profile cards are card design that contains important details of a specific person in a brief way. It could contain details like a person’s name, email, social media links for that person, and other important details. We can find this type of profile card on websites like portfolio websites and other types of websites

Have a quick look at the given image of our Profile Card Design. As you can see on the image there are lots of details I have added like profile image, name, social media link buttons, subscribe and message button, and the numbers of likes, comments, and shares.

You can watch the demo of this Profile Card UI Design from the video that I have provided below. Also, you can get all the ideas of HTML and CSS code that I have used to create this beautiful profile card design.

How to Create Profile Card in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this Profile Card UI Design. Before getting into the source code file. I would like to explain the given video tutorial on the profile card briefly.

As you have seen in the video tutorial on the Profile Card UI Design. There was an image with a beautiful border, some buttons,s and social media links. To create this profile card I used only HTML and CSS. As you have seen I have created this profile card from scratch.

I hope, now you can make this profile card using HTML and CSS. If you are feeling difficulty creating this profile card, I have provided all the source codes below, from there you can copy or download all the source code files of this beautiful profile card.

Profile Card UI Design [Source Code]

To get the following HTML and CSS code for the Profile Card. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
    
    
    

    
    

    
    
  
  
    
      
        
      

      
        CodingLab
        YouTuber & Blogger
      

      
        
          
        
        
          
        
        
          
        
        
          
        
      

      
        
        
      

      
        
          
          60k
        
        
          
          20k
        
        
          
          12k

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
}
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 370px;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  padding: 25px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}
.profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 36%;
  width: 100%;
  border-radius: 24px 24px 0 0;
  background-color: #4070f4;
}
.image {
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #4070f4;
  padding: 3px;
  margin-bottom: 10px;
}
.image .profile-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
}
.profile-card .text-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
}
.text-data .name {
  font-size: 22px;
  font-weight: 500;
}
.text-data .job {
  font-size: 15px;
  font-weight: 400;
}
.profile-card .media-buttons {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.media-buttons .link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  margin: 0 8px;
  background-color: #4070f4;
  text-decoration: none;
}
.profile-card .buttons {
  display: flex;
  align-items: center;
  margin-top: 25px;
}
.buttons .button {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 24px;
  margin: 0 10px;
  padding: 8px 24px;
  background-color: #4070f4;
  cursor: pointer;
  transition: all 0.3s ease;
}
.buttons .button:hover {
  background-color: #0e4bf1;
}
.profile-card .analytics {
  display: flex;
  align-items: center;
  margin-top: 25px;
}
.analytics .data {
  display: flex;
  align-items: center;
  color: #333;
  padding: 0 20px;
  border-right: 2px solid #e7e7e7;
}
.data i {
  font-size: 18px;
  margin-right: 6px;
}
.data:last-child {
  border-right: none;
}

3D Flip Card on Hover using only HTML & CSS

CodingNepal — Mon, 31 Aug 2020 17:23:00 +0000

Hello readers, Today in this blog you’ll learn how to create a 3D Flip Card on Hover using only HTML & CSS. Earlier I have shared a blog on how to create an Owl-carousel Image or Card Slider using jQuery and now it’s time to create a 3D Flip Image on Hover.

A card is a small rectangular box with images and text. It is an entrance point for users to learn more details. To maintain the usability of the website interface, the card UI pattern is a default choice. Because cards are easy to use, they can also show content that contains different details.

In this program (3D Flip Card on Hover), at first, on the webpage, there is a front part of the card which means image, and when you hover on that image, this card flip or rotate with 3d style and shows you the back part of the card. And in the backside of the card, there is a profile image, title, and some social media icons.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (3D Flip Card on Hover ).

Video Tutorial of Card with 3D Flip Animation on Hover

In the video, you have seen the Profile Card with 3D Flip Animation or Effect and I hope you have understood the basic codes behind creating this program. As you already know, this is a pure CSS program so if you’re a beginner then you can also easily create this type of 3D Flip animation on card or images.

If you like this program (Card with 3D Flip Animation or Effect) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this 3D Animation on your website images or project cards.

3D Flip Card on Hover Animation or Effect [Source Codes]

To create this program (Card with 3D Flip Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on these cards won’t appear. You’ve to download files from the given download button to use images also.




   
      
      3D Flip Card on Hover | CodingLab
      
      
   
   
      
         
            
         
         
            
            
               
                  CodingLab
               
               
                  User interface designer and 
front-end developer

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: linear-gradient(375deg, #1cc7d0, #2ede98);
}
::selection{
  color: #fff;
  background: #1cc7d0;
}
.wrapper{
  height: 400px;
  width: 320px;
  position: relative;
  transform-style: preserve-3d;
 perspective: 1000px;
}
.wrapper .card{
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  transform: translateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);
}
.wrapper:hover > .front-face{
  transform: rotateY(-180deg);
}
.wrapper .card img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.wrapper .back-face{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  transform: rotateY(180deg);
}
.wrapper:hover > .back-face{
  transform: rotateY(0deg);
}
.wrapper .back-face img{
  height: 150px;
  width: 150px;
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(375deg, #1cc7d0, #2ede98);
}
.wrapper .back-face .info{
  text-align: center;
}
.back-face .info .title{
  font-size: 30px;
  font-weight: 500;
}
.back-face ul{
  display: flex;
}
.back-face ul a{
  display: block;
  height: 40px;
  width: 40px;
  color: #fff;
  text-align: center;
  margin: 0 5px;
  line-height: 38px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(375deg, #1cc7d0, #2ede98);
  transition: all 0.5s ease;
}
.back-face ul a:hover{
  color: #1cc7d0;
  border-color: #1cc7d0;
  background: linear-gradient(375deg, transparent, transparent);
}

Animated Profile Card Design in HTML & CSS

CodingNepal — Sun, 10 May 2020 12:04:00 +0000

Hello readers, Today in this blog you’ll learn how to create an Animated Profile Card using only HTML & CSS. Previously I have shared a Responsive Navbar using CSS Flexbox, now it’s time to create a Profile Card Design with Hover Animation in HTML & CSS.

Cards are surfaces that display contents and actions on a particular topic. They should be easy to scan for appropriate and actionable information. Components, like text and images, should be placed on them.

As you can see in the image, this is a Profile Card using HTML & CSS. This is a simple CSS card. In this card, there is a cool hover animation on the card. That means at first there is only an image but when you hover on that image, the image will slide up, and then the bottom texts and center social buttons are visible.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Animated Profile Card Design).

Video Tutorial of Animated Profile Card Design in HTML CSS

If you are a beginner and have some basic knowledge of HTML & CSS then you can make this card fully responsive and can use this card in your project according to your requirements.

If you want to get the source code of this program (Animated Profile Card Design). You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Animated Profile Card Design in HTML CSS [Source Codes]

To create this program (Animated Profile Card Design). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
   Animated Profile Card | CodingNepal
   
   


   
      
         
      
      
         
            
               Andrew Neil
            
            Web Developer