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.
What is Profile Card
As we know profile card proposes a card that is a simple picture of a special person and his remarkable details like name, social media links, Bio, & some other insignificant details. A profile card is used to identify a specific person/company. In our previous article, we discussed How to Create a Custom 404 error page. So now, We’ll create cards using HTML & CSS. Let’s start.
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 them 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.</p>
<div class="btns">
<button>Subscribe</button>
<button>Continue </button>
</div>
</div>
</div>Copy the above HTML code and paste it to the index.html file.
CSS Code:
<style>
.wrapper .container{
width: calc(33% - 10px);
background: #fff; display: flex;
flex-direction: column; justify-content: center;
align-items: center; padding: 20px 30px;
border-radius: 5px;
}
.container .quote i{
margin-top: 10px;font-size: 45px;color: #17c0eb
}
.wrapper .container .image{
margin: 10px 0;
height: 150px; width: 150px; background: #c10037;
padding: 3px; border-radius: 50%;
}
.container .image img{
height: 100%; width: 100%;
border-radius: 50%; object-fit: cover;
border: 2px 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%;
}
}
</style>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 are able to change the image description and buttons as well.
- To change the profile card image just change the URL and 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 <i class=”far fa-star> to <i class=”fas fa-star”> .
- change the button text and add the URL where you want to target.
Hopefully from the tutorial, you have learned how to create a profile card design. If there is any problem, you can definitely let us know by contacting us.
Great.