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.
.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;
}
fake on hover no icons are shown (000000/69);
I am not getting those icons