Table of Contents

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.

Output

CSS code

 .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;  
 }