User Profile Card Design Using Html And Css

User profile card design using html css is a graphical element that displays information about a user, such as their name, profile picture, and social media handles. It is often used on social media platforms, online communities, and other websites where users can create profiles.

We have one dedicated playlist for profile cards and a playlist for various product cards. You can check out them.

Designing a user profile card using only html and css allows you to create a visually appealing and functional element without relying on JavaScript or other programming languages. This can be useful for creating simple profile cards or for incorporating them into a larger web project.

To design a user profile card using HTML and CSS, you will need to do the following:

Create an HTML structure to hold the card's content. This could be an div element with a class of "card-container" or something similar.
Add elements to the html structure to display the user's name, profile picture, and other information. You might use an h2 element for the name, an img element for the profile picture, and p elements for the other information.
Use CSS to style the HTML elements and create the desired layout for the card. This might include setting the font, colors, and other visual properties of the elements, as well as positioning them on the page using layout techniques such as flexbox or grid.
Use CSS to add hover effects or other interactive elements to the card. For example, you might use the :hover pseudo-class to change the background color of the card when the mouse pointer is over it. Here we are using social media link for hover animation.

By following these steps, you can create a user profile card that is visually appealing and easy to use. You can customize the design and functionality of the card to meet the needs of your project.

Explore more about web development by checking out this playlist.

Read Also:

01. HTML
02. CSS
03. Output
04. Youtube Video
05. Source Code

HTML:

Let's start with the boilerplate of html document which you can see below.

<!DOCTYPE html>
<html>
<head>
 <title>User Profile Card Design | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

Body Content 

</body>
</html>

Let's include the file for icons.

<script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>

This is a script tag that links to the Font Awesome library. Font Awesome is a library of scalable vector icons that can be customized (size, color, drop shadow, etc.) using CSS. The library is used to add icons to a website, usually for aesthetic and functional purposes. The script tag is used to import the library into the current webpage, allowing the icons to be used.

With the basic html structure and all necessary dependencies already included in the html document, it's now time to write the html code, which is provided below.

<!DOCTYPE html>
<html>
<head>
 <title>User Profile Card Design | Rustcode</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="card-container">
  <div class="img-container">
    <img src="hero.jpg">
  </div>
  <div class="content">
    <div class="card-details">
      <h3>Robert Downey Jr</h3>
      <h4>Web Developer</h4>

      <ul class="social-media-links-container">
        <li><a href=""><i class="fab fa-twitter"></i></a></li>
        <li><a href=""><i class="fab fa-linkedin-in"></i></a></li>
        <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
      </ul>
    </div>
  </div>
</div>

<script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
</body>
</html>

This code represents the html document that creates a user profile card design using CSS. The document starts with a doctype declaration and an html element, which contains the head and body elements.

In the head, there is a title element that sets the title of the page and a link element that imports a css file called "style.css", which is used to style the elements on the page.

In the body, there is a div element with the class "card-container", which serves as a container for the entire profile card. Inside it, there are two other div elements, one with the class "img-container" which contains an img element that displays an image, and the other one is "content" which contains the card details such as name, title, and social media links.

The social media links are represented by anchor elements with the class "fab" which are Font Awesome icons imported with the script tag. The script tag is linking to the Font Awesome library, which is used to add icons to the webpage, such as Twitter, LinkedIn, and Facebook icons.

Output:

Read Also:

CSS:

secondAnimation

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

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

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: whitesmoke;
  font-family: "Poppins", sans-serif;
}

.card-container{
  position: relative;
  width: 260px;
  height: 420px;
  background: white;
  border-radius: 6px;
  border: 1px solid black;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.img-container{
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 6px 6px 0px 0px;
}

.img-container img{
  width: 100%;
  height: 65%;
}

.content{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 16px;
}

.card-details{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.card-details h3{
  color: #111;
  font-weight: 500;
}

.card-details h4{
  color: #333;
  font-weight: 500;
  font-size: 0.9em;
}

.social-media-links-container{
  position: relative;
  display: flex;
  margin-top: 12px;
}

.social-media-links-container li{
  list-style: none;
  margin: 6px;
}

.social-media-links-container li a{
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: transparent;
  font-size: 1em;
  color: #444;
  text-decoration: none;
  border: 2px solid black;
  transition: all 500ms;
}

.social-media-links-container li a:hover{
  background-color: black;
  color: #fff;
}

This is a css stylesheet that is used to style the profile card html document. It starts with an @import statement that imports the "Poppins" font from Google Fonts.

Then, there is a CSS rule that applies to all elements on the page, setting their margins, padding, and box-sizing properties. The body element is also styled, setting the display and elements alignment using a flexbox.

The CSS styles the ".card-container" element, setting its position, width, height, background, border-radius, border, box-shadow, and display properties.

The ".img-container" element is styled, setting its overflow, width, height, and border-radius properties. Also, the "img" element inside the ".img-container" is styled setting its width and height.

The ".content" element is styled, setting its position, width, height, display, justify-content, align-items, and padding-bottom properties. The ".card-details" element is styled, setting its display, justify-content, align-items, flex-direction, and text-align properties. The ".card-details h3" and ".card-details h4" elements are also styled, setting their color and font-weight properties.

The ".social-media-links-container" element is styled, setting its position, display, and margin-top properties. The ".social-media-links-container li a" elements are styled, setting their width, height, display, border-radius, background, font, and transition properties. The ".social-media-links-container li a:hover" elements are styled, setting the background-color and color properties.

Output:

Read Also:

Output:

Read Also:

Youtube Video:

We created a video tutorial on YouTube for "User Profile Card Design Using HTML and CSS", so you can learn every step of the design process by watching it.

Source Code:

Before downloading the source code, try writing it yourself. Then, you can compare your code to the reference code.

Read Also:

Archive

User Profile Card Design | Html And Css

User Profile Card Design Using Html And Css

Table Of Contents

HTML:

CSS:

Output:

Youtube Video:

Source Code:

Comments

Post a Comment