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.
