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.
Oldest comments (15)
Muhammad Rauf, You are doing great please keep it up. Thank you for your contribution.
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....
Criticism should be constructive, friend.
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.
Hi Whisler, I just came across your comment & I wanted to thank you even though it’s been quite a while. Your advice about using shorter codes really stuck with me and has helped me improve a lot over time. I truly appreciate your thoughtful feedback and support. Thanks again for taking the time to share your insights.
I can see that you change not only the colors but also the text and the image.
Nice
Good job emma
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.
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.
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