Skip to main content

Attractive Profile Card Design | Rustcode

by Rustcode

Attractive Profile Card Design using html and css

"Profile Card" is a regularly used element in website development but in the sense of design, profile cards have various kinds of layout. We also have created a profile card with a simple concept, you can visit. This is a very important element because every website has a team page, profile cards.

This profile card has a profile image and cover image as you can see in the picture. We try to create a simple layout to align profile card elements. This profile card contains the name, job position and social media handles. We hope this will help you to design a profile card.

We tried to collect the best and unique profile cards from codepen and we found more than thirty-five profile cards. You can also check them.

You can read our interesting articles on web development. The link is given below.


01. HTML STRUCTURE

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

<body>

    main content.

</body>
</html>



02. HTML

Here we are using two images to design this profile card you can download both image from here.
01. Profile Image: Download
02. Cover Image: Download


Font-Awesome Link
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" type="text/css" >


<!DOCTYPE html>
<html>
  <head>
    <title>Attractive Profile Card Design</title>
    <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="cover-photo">
        <img src="profile.jpg" class="profile">
      </div>
      <div class="profile-name">Maria Paul</div>
      <p class="about">Full Stack Developer (Google)<br>Five Year Experience</p>
      <button class="msg-btn">Message</button>
      <button class="follow-btn">Following</button>
      <div>
        <i class="fab fa-facebook"></i>
        <i class="fab fa-youtube"></i>
        <i class="fab fa-instagram"></i>
        <i class="fab fa-twitter"></i>
      </div>
    </div>
  </body>
</html>



03. CSS

body{
  font-family: Montserrat, sans-serif;
  background: #fff;
}
.container{
  user-select: none;
  margin: 100px auto;
  background: #fff;
  color: #B3B8CD;
  border-radius: 5px;
  width: 350px;
  text-align: center;
  box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.75);
}
.cover-photo{
  background: url(cover.jpg);
  height: 160px;
  width: 100%;
  border-radius: 5px 5px 0px 0px;
}
.profile{
  height: 120px;
  width: 120px;
  border-radius: 50%;
  margin: 93px 0px 0px -175px;
  border: 1px solid #f0f0f0;
  padding: 7px;
  background: #f0f0f0;
}
.profile-name{
  font-size: 25px;
  font-weight: bold;
  margin: 27px 0px 0px 120px;
}
.about{
  margin-top: 35px;
  line-height: 21px;
}
button{
  margin: 10px 0px 40px 0px;
}
.msg-btn, .follow-btn{
  background: #03BFBC;
  border: 1px solid #03BFBC;
  padding: 10px 25px;
  color: #ffffff;
  border-radius: 3px;
  cursor: pointer;
}
.follow-btn{
  margin-left: 10px;
  background: transparent;
  color: #02899C;
}
.follow-btn:hover{
  background: #03BFBC;
  color: #FFFFFF;
  transition: 0.5s;
}
.container i{
  padding-left: 20px;
  font-size: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: 0.5s;
}
.container i:hover{
  color: #03BFBC;
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.





Comments

Post a Comment