Create A Profile Card With HTML And CSS

Welcome to Code With Random blog. In this blog, we learn 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.

In this article, we present how to Create A Profile Card With HTML And CSS with complete source code for you so you can copy and paste it into your project.

So Let’s start with the basic code of HTML code for easy learning.

 

Font Awesome link add to your Html link section

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

Don’t forget to add this font-awesome link to your Html code it is most important for creating a profile card.

HTML Code For Profile Card

<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 the HTML code for the profile card. Now, you can see output without CSS, then we write CSS for the profile card.

Output

CSS Code For 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;
}

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 the 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.

Thank You And Keep Learning!!!

Written by – Code With Random/Anki