Awesome Profile Card Using Html Css | Profile Page Design Html Css










Table of Contents

Awesome Profile Card Using Html Css | Profile Page Design Html Css


Learners, In this article we are going to design a very interactive, impressive, and important project which is an Awesome profile card with detailed functionality.

Learners, let me explain what is profile card, so in our language, it could be like visiting card that encloses only a few social links and an about section. This is not a Resume or Cv but nothing smaller than that. With the help of social links, we are able to reach know more about him because we all know nowadays social presence matters. learner, we are going to design it by ourself,  so just join me on this blog and make sure your finger is free for scrolling down πŸ˜‰.
Hey learners..!


Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how Awesome profile card.


I hope you must have got an idea about the project.


Let’s have a look at our project.


Like in the first attached image you are able to observe there is two cards with an image with name and profession but when you will hover on it you will get animation from the top and bottom on both side and in the button border animation you will have with some social links.

Awesome Profile Card Using Html Css | Profile Page Design Html Css


HTML SECTION 

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.

So, let’s have count what is in the HTML part:-
  • First, we have a container that will enclose all other parts of the whether project.
  • Then we have 3card with similar functionality as images with content that is replicated in all three cards
Go through the below code πŸ‘‡ and run it in your IDE or where you used to design just HTML without CSS styling.



 <div class="container">  
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://picsum.photos/130/130?image=1027">
</div>
<div class="team-content">
<h3 class="name">Michele Miller</h3>
<h4 class="title">Web Developer</h4>
</div>
<ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://picsum.photos/130/130?image=839">
</div>
<div class="team-content">
<h3 class="name">Patricia Knott</h3>
<h4 class="title">Web Developer</h4>
</div>
<ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://picsum.photos/130/130?image=856">
</div>
<div class="team-content">
<h3 class="name">Justin Ramos</h3>
<h4 class="title">Web Developer</h4>
</div>
<ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://picsum.photos/130/130?image=836">
</div>
<div class="team-content">
<h3 class="name">Mary Huntley</h3>
<h4 class="title">Web Developer</h4>
</div>
<ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul>
</div>
</div>
</div>
</div>

CSS SECTION 

By CSS we will design our container and will bring in the center and then we will design our corner blog and most important will set Glassformism property to the cards and will design all the images and content within the card.

The Below code will analyze you moreπŸ‘‡. So just add in your HTML half complete file and wait to watch some magic.

 body {  
font-family: tahoma;
height: 100vh;
background-image: url(https://picsum.photos/g/3000/2000);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
}
.our-team {
padding: 30px 0 40px;
margin-bottom: 30px;
background-color: #f7f5ec;
text-align: center;
overflow: hidden;
position: relative;
}
.our-team .picture {
display: inline-block;
height: 130px;
width: 130px;
margin-bottom: 50px;
z-index: 1;
position: relative;
}
.our-team .picture::before {
content: "";
width: 100%;
height: 0;
border-radius: 50%;
background-color: #1369ce;
position: absolute;
bottom: 135%;
right: 0;
left: 0;
opacity: 0.9;
transform: scale(3);
transition: all 0.3s linear 0s;
}
.our-team:hover .picture::before {
height: 100%;
}
.our-team .picture::after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #1369ce;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.our-team .picture img {
width: 100%;
height: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.9s ease 0s;
}
.our-team:hover .picture img {
box-shadow: 0 0 0 14px #f7f5ec;
transform: scale(0.7);
}
.our-team .title {
display: block;
font-size: 15px;
color: #4e5052;
text-transform: capitalize;
}
.our-team .social {
width: 100%;
padding: 0;
margin: 0;
background-color: #1369ce;
position: absolute;
bottom: -100px;
left: 0;
transition: all 0.5s ease 0s;
}
.our-team:hover .social {
bottom: 0;
}
.our-team .social li {
display: inline-block;
}
.our-team .social li a {
display: block;
padding: 10px;
font-size: 17px;
color: white;
transition: all 0.3s ease 0s;
text-decoration: none;
}
.our-team .social li a:hover {
color: #1369ce;
background-color: #f7f5ec;
}

aaa

For a live preview, you can follow the below codepen..
 

See the Pen Profile Card UI Design Cool Hover Effect by FrankieDoodie (@FrankieDoodie) on CodePen.


By this blog… We have learned how we can design an Awesome profile card, Now I’m looking for your reviews.

So, How was the blog 😁, Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊

I hope that I’m able to make you understand this topic and you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.

You can follow me on Instagram 

Written by @Ankit kumar

 

Check out more…..

Share on:

Leave a Comment