Friday, February 7, 2014

Labels: ,

40+ Free Attractive User Profile Widget for About Page Design with HTML and CSS code

Posted by Abhay Makadiya at 2/07/2014
I am sure that, Many people who have websites or blogs and they want to add Profile Widget for Websites in profile page but don't get proper design with ready code. If you are one of them than this post is useful for you.

Now a days all websites needs a profile page for their website with information about each member, and this profile page or about us page is important for SEO , Usually User profile pages display features like an avatar, social media account links, small bio-data, follow button, through this you can give a chance  to your visitors to connect with you at social level, it also helps to get more traffic to your website or blog.

Here i am providing a collection of creative and attractive profile designs which are coded in HTML and CSS many of them are Profile Widgets if you have little knowledge of html then you can easily use in your about us page which showcase your profile.

In this collection we will give you creative examples of User Profile designs with Code. this Profile Designs are coded in HTML and CSS so easily you can modify as per your choice.

Ribbon Style User Profile Design

This is simple design with ribbons in background. background color of this profile design is Black. There is an image of Author at left side and details of authors are at right side. you can see layout of this profile design in below Image.
Ribbon Style User Profile Design

Metro Style User Profile Design with Flip Effect

Jquery Hover effect and CSS are used in this Profile Design. The concept of this profile design is like Business Card, so there are two parts Front and Back. In front side Name and photo of Author with Circle Border  with his/her designation. When you take mouse hover it displays Back part of the ecard with flip effect. In back part you can write your small bio data with your social profile links.


Metro Style User Profile Design with Flip Effect

Responsive Profile page (About Page)

This is full Page About Us page Design this design is fully responsive with transparent background. Author's Photo an Designation are In header part of about page. this profile page is mostly based on content about you self this. In bottom part of the page there are 4 icons.


Full Page About us Profile Page Design


Profile Page with Contact Form Design

This design will fulfils your 2 requirement Contact Form as well as Author's profile Box. In First row there are 5 social icons like Twitter, Facebook, google plus, Linkedin, Instagram, after that there is contact form so it is something different form other Profile Pages.

you can find code for this Contact Form with Profile Box Code.
http://codepen.io/anon/pen/rELlc

CV or Profile Page in HTML and CSS

this is the perfect layout to show your profile on your web site or blog this design is Responsive and Developed in HTML and CSS. In Header Part User name and City after that your Profile Photo and short description about your self. There is a Skills box where you can define you skill levels using progress bar. In this Design you can show your experience which makes it Proper CV page. this CV Profile Page is developed in HTML and CSS.

http://codepen.io/anon/pen/pbeDf

Vertical Profile Widget for Twitter

this is profile widget for twitter lover. in this widget you can put Photo and cover background like twitter profiles there is a one drop down menu for Add friend, Follow and Message in Upper left corner and In Upper right Corner "Following" button. You can write 2 lines about your self  in this widget and there is 4 social sharing menu at bottom of Profile.


http://codepen.io/anism/pen/fwiHG


Flat Mini Profile Widget

This profile widget has simple and flat design. it has vertical social sharing icon at Left side of the photo, when you hover on image small description about your self. This Flat Profile widget is made up with pure CSS3, HTML and transitions on hover and a couple of social network icons.


http://codepen.io/anon/pen/GueBs


Full Profile Display Layout

This design is perfect for social site lover it displays all your social profiles status in one box. You can display profile image and many more. When you hover on Author's Photo it shows three buttons first is search button which displays the search result of Author's Name, Second is About Me button which displays Small description of Author and last button is Location which shows Author's current location on google map. There on more manu at Upper-Left Corner of the box Which has three items for sharing.


http://codepen.io/ctsanders1/pen/Gogxv

Profile box with all contact icons. In this profile design on Left hand side all Contact icons like Contact Number, Chat icon, Image icon and Social Following icon and On Right hand side Author's Profile Image and at bottom of the image there is Location icon. 



http://codepen.io/ColeTownsend/pen/pBjFh


Panda Profile Widget

Panda profile widget is inspired from Dribbble this widget has simple design there is one profile picture with user Name and Designation and one statement which describes yourself. There is social icons at bottom of the page. 


User Profile Header

This profile widget can be placed in header section of your page this widget has Horizontal Layout with social icons and Your Designation with Specialization. This Profile header has a start-up animation.


Header Profile Widget

Flat Profile Design with Html and CSS

Here is the flat design for Profile widget. In this Widget you can put you Profile Image and social network links. you can write small description about yourself Below the Images.


Profile and Contact Card Widget with CV Link 

This is an extra ordinary design this profile widget is simple but it has eye catching design. it looks amazing. this widget is developed in pure CSS and HTML. You can describe details like Name, Email Address,  Mobile Number, Current Location, Twitter Id and CV Download link.


CSS UI Profile Design with sliding Effect

This is an UI of Profile widget with HTML and CSS code. In this Design when you take moves over the profile image it shows small description about your self and social links about your self. This design has Sliding animation using CSS. This Profile box is developed in CSS3 is used.








Profile Design adopted  from Google Plus

Here is Profile design which is adopted from Google+ profile Design There is menu with links like About, Photos, Likes, YouTube and Reviews. You can set image as background of your profile.



Dribbble Inspired Profile Module.

This profile design has border navigation icons and Social status counts.
This profile design has small layout so you can adjust this profile box any where in your About Page. there is follow button which can be any social network follow button. This design is small but yet perfect for About page.


About Page with Recent Works

This About page has large scale layout so it is suitable for Single person about page. this About me page has sidebar at left hand side with Author's image and other links for navigation.In Profile Widget You can display your last activity or work with images.

Twitter Profile Widget for Websites

This profile widget has Twitter counter for Tweets, Following and Followers. When you take mouse hover on Profile Box,  it displays menu with Edit, Like, Profile and Settings icons.

Twitter Like User Profile Design

Many Twitter lovers wants to display their Twitter Profiles in Websites or Blogs or In About Us page. So this widget is perfect for them. It also helps to display your recent tweets.

 Twitter Like User Profile Design code in html and css



Twitter Like User Profile Design



Profile Box Widget with Social Counters




Profile Box Design with Follow Button

This is small box design in which Author's Photo with follow button and other links with counters like Profile, Activity, Timeline, Files and Favorites. 
this profile design has only name of Author and social links, but yet attractive It has random background colors.




this is a simple Profile design with Profile pic and background cover and social icons at Bottom of Box with Hover Highlighting Effect.


Red Profile Box with Social links



Simple Twitter Profile Box with Articles and Follower Counter  

this is simple profile box with articles and  followers counter. This design has an author's photo and Twitter follow button. 

Metro style Profile Widget with Html and CSS

this design is metro style Profile widget with Author'e photo and 3 social links.


this profile widget has just one Follow Me Button. you can display images of your last three works and twitter counters.

http://codepen.io/uroboros/pen/qsDyg



CSS for Twitter Card

1 comment :

  1. AnonymousJanuary 7, 2017 at 5:17 PM

    This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this.
    School web design uk

    ReplyDelete

Subscribe to: Post Comments ( Atom )