DEV Community

Muhammad Rauf
Muhammad Rauf

Posted on

Create Profile Card using HTML & CSS

Do you want to create a responsive profile card using HTML & CSS? If you are a beginner and want to create a responsive card for best practice. I have done this layout for new learners only relying on HTML and CSS. As we see such profile layouts on different websites. This kind of CSS profile card design is also applied to many websites. In our previous post we discussed How to create 404 error page. So now, In this post we will see how to create a responsive profile card.

What is Profile Card?

Create Profile Card using HTML & CSS
As we know profile card proposes a card where is a simple picture of a special person and his remarkable details like name, social media links, Bio, & some other insignificant details.

First of all, you should create two files one is an HTML (index.html) file and another is a CSS (style.css) file, after producing these two files then you can copy the given codes and paste into your files.

HTML Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>  
  <div class="wrapper">
        <div class="container">
        <div class="image">
        <img src="https://i.ibb.co/3FZZgWZ/Rauf.png" alt="">
        </div>
        <strong>Muhammad Rauf</strong>
        <div class="rating">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="far fa-star"></i>
        </div>
        <p> I am a WordPress developer and IT administrator in Pakistan and have been working in web development for almost 10 years. <a href="">Create Profile Card in html</a></p>
        <div class="btns">
          <button>Subscribe</button>
          <button>Continue </button>

        </div>
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

Copy given HTML code and Paste it to index.html file.
CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.wrapper .container{
  width: calc(33% - 10px);
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 30px;
  border-radius: 15px;
  border:5px solid #c10037;
}
.container .quote i{
margin-top: 10px;
font-size: 45px;
color: #17c0eb;
}
.wrapper .container .image{
  margin: 10px 0;
  height: 150px;
  width: 150px;
  background: #c10037;
  padding: 5px;
  border-radius: 50%;
}
.container .image img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #fff;
}
.container p{
  text-align: justify;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
}

.rating i{
  font-size: 18px;
  color: #c10037;
  margin-bottom: 5px;
}
.btns{
  margin-top: 20px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.btns button{
  background: #c10037;
  width: 100%;
  padding: 9px 0px;
  outline: none;
  border: 2px solid #c10037;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  color: #c10037;
  transition: all 0.3s linear;
}
.btns button:first-child{
  background: none;
  margin-right: 5px;
}
.btns button:last-child{
  color: #fff;
  margin-left: 5px;
}
.btns button:first-child:hover{
  background: #c10037;
  color: #fff;
}
.btns button:hover{
  color: #fff;
}
@media (max-width:1045px){
  .wrapper .container{
    width: calc(50% - 10px);
    margin-bottom: 20px;
  }
}
@media (max-width:710px){
  .wrapper .container{
    width: 100%;
  }
}
Enter fullscreen mode Exit fullscreen mode

Copy the above HTML code and paste it to the style.css file. Now save both files and connect your CSS file in HTML or you can paste both codes into a single HTML file.

Note: You can also change the image, description and buttons. If you want to add more cards with one, you need to copy the HTML code from the first div to the last div and paste it one or more times as per your requirement.

  1. To change the profile card image just change the URL paste your original image URL in the src attribute.
  2. Modify profile stars, If you want to show 5 filled start you just need to change .

Want to read from official website Create Profile Card using HTML & CSS

SEE Live Pen : DEMO

That’s all! Hopefully, you have successfully implemented this profile card into your webpage. If you have any questions or suggestions let me know by discuss below.

Discussion (29)

Collapse
liamemma profile image
Liam Emma • Edited on

I can see that you change not only the colors but also the text and the image.
Changed Text and colors

Collapse
michael_linda profile image
Linda

Good job emma

Collapse
arizona profile image
Arizona

Nice

Collapse
liamemma profile image
Liam Emma

Hello @meelix You are having trouble. Your comment seems that you couldn't read complete post. They have mentioned a Note in post please read it out. and also I'll suggest you to read this article 4.1.3 Characters and case....

Collapse
oskargrosser profile image
Oskar Grosser

I enjoyed reading your comment quite a lot, though it would have been easier to read if you'd use the supported markdown, i.e. for code-snippets.

But I also have to say that at times your choice of words seemed disrespectful, where a point of yours could have been expressed in a more polite way.

Though I also think that such copy-paste articles are not what this site should be used for. In the end, we all want to learn, and this article does so poorly. Your tips, tricks and explanations of errors does the job (that the article should have done in the first place) well.

Collapse
michael_linda profile image
Linda

Muhammad Rauf, You are doing great please keep it up. Thank you for your contribution.

liamemma profile image
Liam Emma • Edited on

Hello meelix I didn't made changes in your code. I just copied post author code and made some changes like color, font family and font size etc. Keep learning. Thank you.

Collapse
getpasttime profile image
Whistler

Criticism should be constructive, friend.

Collapse
getpasttime profile image
Whistler

Muhammad Rauf: Good effort, friend. My only advice is to think of shorter codes. Does the type of program need such an effort? I am sure you'll take this positively.

liamemma profile image
Liam Emma

I am not going to negotiate with you. I told you what I did. By

michael_linda profile image
Linda

meelix You are good but I think Emma has done better than you both.

code913 profile image
code913

having skill !== good programmer

speaking of skill,

S K I L L I S S U E

Collapse
badumdumbadap profile image
Uhmmmmm No

i— the flushed justified paragraph is such a sore in the eyes. :(

Collapse
code913 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
code913

Can we get @inhuofficial on here to review the original site? tbh it looks worse than a beginner's site with code copied from stackoverflow.

Also good job @meelix the new card looks a LOT better and more professional.
ctrl c ctrl v

Collapse
elinabey profile image
elinabey • Edited on

Author of this post is quite good, he did something for us, I think if anybody know It can be better then he posted, just write your own post and do better then he did. Overall, Great job Muhammad Rauf. We need your contribution. Keep it up. Thank you.

Collapse
inhuofficial profile image
InHuOfficial

I think the tone of the comments on this article does not lend itself to me adding suggestions as I do not want to “pile on” when an author has received so much negative feedback already.

Some of the comments are a bit too attacking even for my liking and I only lean in hard when someone says “how to build an accessible XXX” and then gets it completely wrong.

Not often I turn down a chance to put my input in but this time I will refrain! ❤️