Responsive User Profile Card Design

Web developers add some CSS cards to a website or app to digitally represent a person's information and attributes. These types of cards are called user profile cards. It summarizes a person's various information such as username, profile picture, bio or description, and additional related information. Today we will show you how to design a horizontal user profile card using only HTML and CSS. The step-by-step process of creating this snippet is shown in the video tutorial below. Before collecting the source code, watching the video will help you understand the code. And if you find the content of our YouTube channel useful, you can subscribe to our channel.

Video Tutorial:

We Hope you have watched the video tutorial. User profile cards or CSS cards play an important role in increasing the credibility of any company or personal website. It plays an important role in promoting user engagement, trust, and personalization within the website. Moreover, it facilitates connectivity, improving user experience. In our today's project, we created a horizontal user profile card with an image on the left side. On the right side, some information related to the image such as the person's name, email address, location, occupation, and a little bio is given. Here you can add more information if you want. The snippet has been made responsive so that it presents nicely on small devices. A horizontal CSS card will become vertical on mobile devices. This will move the image above and the info below it.

You May Also Like:

Responsive User Profile Card Design [ Source Code ]:

To create this Responsive User Profile Card or CSS Card, first, create an HTML and then a CSS file. After that, copy all the code from the code box below and paste it into the appropriate file. You can save the files and open the snippet in your web browser. You can download the code from the download button below if it doesn't work.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive User Profile Card using HTML and CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="user-card">
            <div class="user-card-img">
              <img src="img/1.jpg" alt="">
            </div>
            <div class="user-card-info">
              <h2>Jason Walker</h2>
              <p><span>Email:</span> example@example.com</p>
              <p><span>Location:</span> London, United Kingdom</p>
              <p><span>Occupation:</span> Web Developer</p>
              <p><span>About me:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
      
</body>
</html>

ADD CSS:

body,html{
   height: 100%;
}
body {
   background: #daa000;   
   font-family: 'Montserrat', sans-serif;
 }
 .wrapper{
   display: flex;
   justify-content: center;
   align-items: center;
   padding-top: 12%;
 }
 .user-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-radius: 10px;
	padding: 40px;
	width: 650px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 20px -5px rgba(0,0,0,0.5);
}
 
.user-card:before {
   content: '';
   position: absolute;
   height: 300%;
   width: 173px;
   background: #262626;
   top: -60px;
   left: -125px;
   z-index: 0;
   transform: rotate(17deg);
 }
 
 .user-card-img {
   display: flex;
   justify-content: center;
   align-items: center;   
   z-index: 3;
 }
 
 .user-card-img img {
   width: 150px;
   height: 200px;
   object-fit: cover;
 }
 
 .user-card-info {
   text-align: center;
 }
 
 .user-card-info h2 {
   font-size: 24px;
   margin: 0;
   margin-bottom: 10px;
   font-family: 'Bebas Neue', sans-serif;
 }
 
 .user-card-info p {
   font-size: 14px;
   margin-bottom: 2px;
 }
 .user-card-info p span {
	font-weight: 700;
	margin-right: 10px;
}
 @media only screen and (min-width: 768px) {
   .user-card {
     flex-direction: row;
     align-items: flex-start;
   }   
   .user-card-img {
     margin-right: 20px;
     margin-bottom: 0;
   }
 
   .user-card-info {
     text-align: left;
   }
 }

 @media (max-width: 767px){
   .wrapper{
      padding-top: 3%;
   }
   .user-card:before {
      width: 300%;
      height: 200px;
      transform: rotate(0);
   }
   .user-card-info h2 {
      margin-top: 25px;
      font-size: 35px;
   }
   .user-card-info p span {
      display: block;
      margin-bottom: 15px;
      font-size: 18px;
   }
 }

Hope the code is working properly for you. If you want more like this, then return to the homepage of this website and click load more button below. Thanks for the visit.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box