Css profile card | create a profile card with html css – codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how to create a profile card. We use HTML & CSS  for these profile cards. Hope you enjoy our blog so let’s start with a basic HTML structure for the profile cards.

HTML code

 https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<div class="container">  
  <div class="card card0">  
   <div class="border">  
    <h2>codewithrandom</h2>  
    <div class="icons">  
     <i class="fa fa-codepen" aria-hidden="true"></i>  
     <i class="fa fa-instagram" aria-hidden="true"></i>  
     <i class="fa fa-dribbble" aria-hidden="true"></i>  
     <i class="fa fa-twitter" aria-hidden="true"></i>  
     <i class="fa fa-facebook" aria-hidden="true"></i>  
    </div>  
   </div>  
  </div>  
 </div>  

There is all HTML code for the profile card. Now, you can see output without CSS, then we write CSS for the profile card.

 .container {  
  height: 100vh;  
  width: 100vw;  
  max-height: 800px;  
  max-width: 1280px;  
  min-height: 600px;  
  min-width: 1000px;  
  display: flex;  
  justify-content: space-around;  
  align-items: center;  
  margin: 0 auto;  
 }  
 .border {  
  height: 369px;  
  width: 290px;  
  background: transparent;  
  border-radius: 10px;  
  transition: border 1s;  
  position: relative;  
 }  
 .border:hover {  
  border: 1px solid #fff;  
 }  
 .card {  
  height: 379px;  
  width: 300px;  
  background: #808080;  
  border-radius: 10px;  
  transition: background 0.8s;  
  overflow: hidden;  
  background: #000;  
  box-shadow: 0 70px 63px -60px #000;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  position: relative;  
 }  
 .card0 {  
  background: url("https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg") center center no-repeat;  
  background-size: 300px;  
 }  
 .card0:hover {  
  background: url("https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg") left center no-repeat;  
  background-size: 600px;  
 }  
 .card0:hover h2 {  
  opacity: 1;  
 }  
 .card0:hover .fa {  
  opacity: 1;  
 }  
 .card1 {  
  background: url("https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg") center center no-repeat;  
  background-size: 300px;  
 }  
 .card1:hover {  
  background: url("https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg") left center no-repeat;  
  background-size: 600px;  
 }  
 .card1:hover h2 {  
  opacity: 1;  
 }  
 .card1:hover .fa {  
  opacity: 1;  
 }  
 .card2 {  
  background: url("https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg") center center no-repeat;  
  background-size: 300px;  
 }  
 .card2:hover {  
  background: url("https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg") left center no-repeat;  
  background-size: 600px;  
 }  
 .card2:hover h2 {  
  opacity: 1;  
 }  
 .card2:hover .fa {  
  opacity: 1;  
 }  
 h2 {  
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  
  color: #fff;  
  margin: 20px;  
  opacity: 0;  
  transition: opacity 1s;  
 }  
 .fa {  
  opacity: 0;  
  transition: opacity 1s;  
 }  
 .icons {  
  position: absolute;  
  fill: #fff;  
  color: #fff;  
  height: 130px;  
  top: 226px;  
  width: 50px;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: space-around;  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Now we have completed our CSS section,  Here is our updated output with  CSS. Hope you like the profile card, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create profile cards using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Check out more…..