Today we will learn how to create a profile card. Very important for the Profile Card website.Because there is no distraction from the author social media can use the link and contact facility. This Profile Card works on a website and works because it is part of web design. First of all, in the profile card, the author's image then names, working details then the social media link is then used to contact the facility. Today we will learn how to create this profile card and with this, Profile Card Making will give you all the code. You can put it on your website very easily.For use Blogger, This profile card can be used by Blogger to add a gadget. This is a professional look
, any users love it.
The following demo picture is given here. You can see how you would like to cut profiles. Hope you enjoy it.
, any users love it.
The following demo picture is given here. You can see how you would like to cut profiles. Hope you enjoy it.
See another post:
Make a Profile Card on your website
 |
| Profile Card |
Profile Card making code
Step 1:
Paste this code head to head tag
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
Step 2:
Paste this code body to the body tag
Blogger only this code paste HTML/Javascript Gadget. Social media icon not working then use Step 1 CDN link CSS put head to head tag.
<div card style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;">
<img src=" Image url " alt="Masum" style="width:100%">
<h1>Masum</h1>
<p title style="color: grey;
font-size: 18px;">
CEO & Code Decoder
</p>
<div style="margin: 24px 0;">
<a style="text-decoration: none;font-size: 22px;color: black;" href="YOUR URL"><i class="fa fa-dribbble"></i></a>
<a style="text-decoration: none;font-size: 22px;color: black;" href="YOUR URL"><i class="fa fa-twitter"></i></a>
<a style="text-decoration: none;font-size: 22px;color: black;" href="YOUR URL"><i class="fa fa-linkedin"></i></a>
<a style="text-decoration: none;font-size: 22px;color: black;" href="YOUR URL"><i class="fa fa-facebook"></i></a>
</div>
<p>
<a href="#YOUR CONTACT URL"><button style="border: none;outline: 0; display: inline-block; padding: 8px; color: white; background-color: #000; text-align: center; cursor: pointer; width: 100%; font-size: 18px; text-decoration: none">Contact </button></a>
</p>
</div>
Red color area changes it.
First image URL then your social media URL and last your contact URL put it.
Then complete.
Have any question ask me right now anyone.
Demo Image
If the tutorial is helpful, don't forget to subscribe to share comments.
Thank You
Post a Comment