Create Profile Card using HTML & CSS

What is Profile Card?

profile card in HTML and css
<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>
@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%;
}
}
  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 starts you just need to change.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Muhammad Rauf.

Muhammad Rauf.

Innovative tech mind with 15 years of experience working as a computer programmer. Capable of working with a variety of technology and software solutions…