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?
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>
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%;
}
}
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.
- To change the profile card image just change the URL paste your original image URL in the src attribute.
- 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.
Top comments (14)
I can see that you change not only the colors but also the text and the image.
Good job emma
Nice
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.
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! ❤️
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....
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.
Muhammad Rauf, You are doing great please keep it up. Thank you for your contribution.
Criticism should be constructive, friend.
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.
I am not going to negotiate with you. I told you what I did. By
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.
i— the flushed justified paragraph is such a sore in the eyes. :(
meelix You are good but I think Emma has done better than you both.