Skip to main content

Custom Profile Badge 2 inspired by Linked In

Image
By
Previously we had made a multi-profile badge which you can find here.

Now comes the version two of this badge. Which is nothing but the same badge with a cover background. Honestly it's just a rip off of LinkedIn profile badges. But since they are limited to LinkedIn, you can use this profile badge to meet your need.

Output of this post will be a profile badge that looks something like this,



Since this is basically a modified version of the previous profile badge we are going to reuse the same code.

Step 1. Define the CSS for circular image, then a CSS for list of links, and then the badge border and a background cover which is nothing but a background image positioned properly.

.profileBadge img {
  1. border-radius: 50%;
  2. width: 150px;
  3. height: 150px;
  4. margin: auto;
  5. display: block;
  6. padding: 5px;
  7. text-align: center;
}
.profileBadge li {
  1. text-transform: uppercase;
  2. list-style: none;
  3. line-heigth: 1.4px;
  4. text-align: center;
  5. padding: 5px;
}
.profileBadge {
  1. border: 1px solid #ddd;
  2. border-radius: 4px;
  3. padding: 5px;
  4. background-repeat: no-repeat;
  5. background-image: url(http://yourCoverImageUrl.com/image.jpg);
  6. background-size: 100%;
  7. background-position: 0% -20%;
}

Step 2. This badge uses font awesome, include following link to font awesome css.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"/>

If you are not sure how to use font awesome further, go here.

Step 3. Go to page layout and add a gadget of HTML/Javascript. If you're on WordPress you need to create a Text Widget and add the following.


<div class="profileBadge">
<img src="YOUR_PROFILE_PICTURE.png" alt="profile_picture" width="200" height="200" />
<p align='center'>Whatever you want to say goes here..</p>
<li><i class='fa fa-google-plus'></i> <a href="http://plus.google.com/u/0/+YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-instagram'></i> <a href="http://instagram.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-facebook'></i> <a href="http://facebook.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
</div>
With a little modification to the code above you can also make it look like this,
What I did was just included the icon and link in the same link row. 
That's it.


And in case you are wondering what is that image I am using as cover. It's Blink from X-men Days of Future Past fighting the Sentinels.

I'm using a smaller version of this image, just to reduce the load on my visitors. Let me know your thoughts.

Labels:

Comments

Post a Comment

Popular posts from this blog

How to delete Hot Apps folder on Oppo Realme

By
Bloat wares are the single worst enemy of anyone who just wants a simple experience with the mobile phones. Oppo goes to a next level in spamming stuff we don't need by their Hot Apps shortcut on Homescreen. And it is not always available in a new phone but comes after few hours sometimes days of usage. To disable this icon/folder/shortcut follow the steps below. 1. Open Settings. Swipe down the notification bar and open settings. 2. Open OPPO AppStore settings. Scroll all the way down and click OPPO AppStore. 3. Disable Homescreen folder for hot apps. That's it. You can also disable notification alert from App Store and Browser for even better Android experience as these apps spam a lot.
Post a Comment
Read more

How to fix clothes flickering in Unreal Engine 5.

By
 This issue can be noticed some of the character clothes when using Paragon Characters in UE5. To fix the flickering issue, Use Self Collisions checkbox in collisions properties under the Static Mesh option of your character. Open the character model go to   Asset Details > Clothing Properties - Cloth Config - ChaosClothConfig - Collision Properties - Use Self Collisions > False
Post a Comment
Read more

How to make download file button in react js

By
To create a download file button in React.js, follow these steps: Import the necessary dependencies: javascript Copy code import React from 'react' ; import { saveAs } from 'file-saver' ; Create a function that handles the download action: javascript Copy code const handleDownload = ( ) => { // Create a new Blob object with the desired content const fileContent = 'This is the content of the file you want to download.' ; const blob = new Blob ([fileContent], { type : 'text/plain;charset=utf-8' }); // Use the saveAs function from the file-saver library to initiate the download saveAs (blob, 'download.txt' ); }; Create a button component and attach the handleDownload function to the button's onClick event: javascript Copy code const DownloadButton = ( ) => { return ( < button onClick = {handleDownload} > Download File </ button > ); }; Use the DownloadButton component wherever ...
Post a Comment
Read more