CSS Profile Layouts | Bypeople

deals

premiumpacks & css profile layouts (34 items)

A collection of CSS profile layout snippets in popular styles like Flat and Material Design that feature responsive designs and stunning CSS effects & animations, every bit of code available for free to help you to create profile cards, widgets, and pages with creative designs.

freebies

This is a responsive, pure CSS concept for a photography app created by Codepen user Thomas d'Aubenton. It features buttons for Gallery, Collection...

This is a responsive, pure CSS concept for a photography app created by Codepen user Thomas d'Aubenton. It features buttons for Gallery, Collections, Groups, and About, which you can interact with, as well as follow and social sharing buttons.

A beautifully crafted profile box developed and animated in pure CSS placed on top of a JavaScript animated particles background.

A beautifully crafted profile box developed and animated in pure CSS placed on top of a JavaScript animated particles background.

A simple profile card showcasing a flip effect on the round main picture towards an avatar that can be a flat picture too, or an animated one as It...

A simple profile card showcasing a flip effect on the round main picture towards an avatar that can be a flat picture too, or an animated one as It is shown in this example.

820+ Isolated Objects From 3 Different Mock-up & Scene Generators! Ultra High-Quality Assets In PSD format, Separated Shadow Layers For Every Objec...

820+ Isolated Objects From 3 Different Mock-up & Scene Generators! Ultra High-Quality Assets In PSD format, Separated Shadow Layers For Every Object, Pre-made Scenes & Background Textures Included. Get this bundle for just $19! (98% Off)

A simple and sober square profile card with a smooth hovering effect showcasing a background zoom in, round main picture and social icons.

A simple and sober square profile card with a smooth hovering effect showcasing a background zoom in, round main picture and social icons.

An amazing pure CSS animated vCard design nicely crafted in flat style featuring an avatar riding an animated scooter towards you inside a name & p...

An amazing pure CSS animated vCard design nicely crafted in flat style featuring an avatar riding an animated scooter towards you inside a name & profession ribbon featured card. As you hover over the card it expands vertically to show you social icons, and hovering over the avatar gives you a first person description of the profile owner.

A cool profile layout crafted in Material Design featuring a nice animation for its loading that consists of a ball that first bounces and triggeri...

A cool profile layout crafted in Material Design featuring a nice animation for its loading that consists of a ball that first bounces and triggering the background illustration to expand as the ball goes back to its position and expands as a provile vCard

1500+ Vintage Vector Elements With 100+ Vintage Style Illustrations, 900+ Ornaments, and 450+ Borders, All Professionally Made With a 19th Century ...

1500+ Vintage Vector Elements With 100+ Vintage Style Illustrations, 900+ Ornaments, and 450+ Borders, All Professionally Made With a 19th Century Touch. File Formats Ai and EPS, Get This Pack For Just $29! (58% Off)

A CSS concept of a contact or profile card that includes an immerse section for chatting with the contact as it shows you the profile and cover pic...

A CSS concept of a contact or profile card that includes an immerse section for chatting with the contact as it shows you the profile and cover picture of them.

A cool concept of profile card layout nicely crafted under the guidelines of Material Design that shows you mainly posts or works of the person own...

A cool concept of profile card layout nicely crafted under the guidelines of Material Design that shows you mainly posts or works of the person owner of the profile, and as you click on the profile picture (round sticker) it expands to provide further information.

A vCard developed mainly in CSS that has the advantages of an accordion, providing different sorts of information in each section. This is a creati...

A vCard developed mainly in CSS that has the advantages of an accordion, providing different sorts of information in each section. This is a creation of Mohan Khadka who applied jQuery toggling, FontAwesome, UI Gradients and Google's Pacific and Roboto Fonts to this project.

1380 Animal themed icons delivered in 7 different design styles: from the trendy Material or Flat Styles to Iconshock's unique creations. Only $19 ...

1380 Animal themed icons delivered in 7 different design styles: from the trendy Material or Flat Styles to Iconshock's unique creations. Only $19 for a limited time.

A very appealing and fully customizable HTML and CSS animated ID card that initially is shown as a round photo and when you hover over, it pops ope...

A very appealing and fully customizable HTML and CSS animated ID card that initially is shown as a round photo and when you hover over, it pops open to a vertical identification card in a bouncy transition. Created by George Darkos.

A nice profile card design that features a skewed space for the profile picture that leans a bit towards the name and information section which lif...

A nice profile card design that features a skewed space for the profile picture that leans a bit towards the name and information section which lifts up a bit to show address, email, and phone icons as you hover over it.

A nicely crafted profile vCard that firstly consists of a square box that holds a circle frame for the profile picture and the name, a skill bar an...

A nicely crafted profile vCard that firstly consists of a square box that holds a circle frame for the profile picture and the name, a skill bar and social icons box slides out from behind the original box as you hover over it.

Get today more than 1000 Packages and Boxes Mockup Files in an extensive bundle for only $29 with a 95% limited discounted price of its normal $550...

Get today more than 1000 Packages and Boxes Mockup Files in an extensive bundle for only $29 with a 95% limited discounted price of its normal $550 USD. Find different materials and presentations (Box, Paper, Metal, Plastic and Bottle) and hundreds of possible matches and finishes for your packages.

A nicely crafted profile vCard that features a circle frame for the profile photo as it expels radial fading white waves which call for your attent...

A nicely crafted profile vCard that features a circle frame for the profile photo as it expels radial fading white waves which call for your attention.

A very nice profile layout page that features a centered profile image that glows as you hover over it, a translucid overlay with information on it...

A very nice profile layout page that features a centered profile image that glows as you hover over it, a translucid overlay with information on it slides in as you click on it. Also, at the bottom, you'll find nice hover highlighted social buttons.

A nicely crafted CSS profile card that primarily shows a circle framed profile picture that darkens a bit as you hover over it and as you click on ...

A nicely crafted CSS profile card that primarily shows a circle framed profile picture that darkens a bit as you hover over it and as you click on it expands into a full profile vCard with several options and social icons at the bottom.

131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bund...

131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bundle could be priced up to $380, get it only $14! Limited-time promo.

A simple profile badge made with CSS and a material design. It consists of a box with a profile picture and notifications on the top right. Right b...

A simple profile badge made with CSS and a material design. It consists of a box with a profile picture and notifications on the top right. Right below, there’s the name and a little description, and at the bottom some social icons. When you click the menu you’ll see the amount of shares / likes that your profile has.

A cool idea for profile cards that features a perspective inclined cover photo behind the circle framed profile photo as if it was side-facing the ...

A cool idea for profile cards that features a perspective inclined cover photo behind the circle framed profile photo as if it was side-facing the profile picture.

This code snippet is a lovely profile badge made in pure CSS. It has a flat style, rounded elements and outlined icons, a combination that makes it...

This code snippet is a lovely profile badge made in pure CSS. It has a flat style, rounded elements and outlined icons, a combination that makes it really simple and easy to implement.

Massive 23,000+ PowerPoint Presentation Slides Bundle, 2000+ Vector Icons, 3 Aspect Ratio Formats, Animated Transitions, Drag & Drop Image Placehol...

Massive 23,000+ PowerPoint Presentation Slides Bundle, 2000+ Vector Icons, 3 Aspect Ratio Formats, Animated Transitions, Drag & Drop Image Placeholders, Vector Shape Elements, Scalable World & USA State Maps, Infographics, Tons of Content More! Only 19$ (92% Off)

Dark Mobile Twitter UI, is an interface with a contrasting bright colors and a compact layout, ideal for mobile devices. It has a button to display...

Dark Mobile Twitter UI, is an interface with a contrasting bright colors and a compact layout, ideal for mobile devices. It has a button to display a text message box to send a new tweet.

This is a great code snippet we found at JSFiddle displaying a sort of profile preview. We have both a cover and profile photos along with a brief ...

This is a great code snippet we found at JSFiddle displaying a sort of profile preview. We have both a cover and profile photos along with a brief description created by the user in question. Everything is wrapped up in a stylish, basic design that does not overcharge the space. Awesome work!

A fairly simple approach here with a stripped-down profile preview. It contains the always-needed avatar on top along with a couple quick facts abo...

A fairly simple approach here with a stripped-down profile preview. It contains the always-needed avatar on top along with a couple quick facts about the user and the also essential "follow" button. This brief design was brought to life by CodePen user Cole Townsend.

40 Display Fonts Bundle, 9 Type Design Styles, Several Weights, Variations, Alternate Characters, Ligatures, and Multi Language Support! Slick desi...

40 Display Fonts Bundle, 9 Type Design Styles, Several Weights, Variations, Alternate Characters, Ligatures, and Multi Language Support! Slick designs with tons of mojo, only 19$ (93% Off)

A neatly organized interface to preview Twitter profiles. It manages to provide all of the basic information in a small space, including both cover...

A neatly organized interface to preview Twitter profiles. It manages to provide all of the basic information in a small space, including both cover and profile pictures, number of tweets, followers and even the bio when hovering on the large cover photo. Created by Marcelo Aguila and hosted in CodePen.

The title says it all with this one. Yet another box for checking a Twitter profile. The cool part about this one, though, is the option to compose...

The title says it all with this one. Yet another box for checking a Twitter profile. The cool part about this one, though, is the option to compose and send new Tweets straight from the widget. The tool also fetches the avatar and follower figures from the user in particular.

A really cool concept based on a previous work by Niklas Mathiesen on Dribbble. This "ID card" displays the level of knowledge in certain areas, al...

A really cool concept based on a previous work by Niklas Mathiesen on Dribbble. This "ID card" displays the level of knowledge in certain areas, along with the name and position. It keeps a bit of fun on the table with a hover effect that transforms the profile picture into a confusing negative.

Cartoon Avatars Creator Pack With Over 1800 Vector Elements To Compose Unique Looking Characters With Their Own Facial Expressions, Outfits, Hairst...

Cartoon Avatars Creator Pack With Over 1800 Vector Elements To Compose Unique Looking Characters With Their Own Facial Expressions, Outfits, Hairstyles, And Much More! Endless Combinations, Only $19! (34% Off)

If GitHub had its own social network, I wouldn't mind this kind of look for its profile pages. This project provides a hypothetical header for this...

If GitHub had its own social network, I wouldn't mind this kind of look for its profile pages. This project provides a hypothetical header for this scenario that reminds me a bit of Facebook because of the large cover photo, except the avatar comes in a circular shape and the fact that it is filled with cool geeky people.

A well-organized idea for a profile view. A large profile picture takes most of the design while a number of pr...

A well-organized idea for a profile view. A large profile picture takes most of the design while a number of pretty buttons on the left allow us to interact with the user in question. This good piece of code was conceived by Cole Townsend from CodePen.

A cool way to provide extra information about yourself through an animated avatar. When clicking on the picture, a couple of social buttons come on...

A cool way to provide extra information about yourself through an animated avatar. When clicking on the picture, a couple of social buttons come on the screen to help the user get to know your profile a bit more. By the way, the buttons show or hide through a smooth animation that’s very easy on the eye.

Ultimate Tech Training Bundle: Lifetime Subscription for $19! 800+ Courses to learn Programming, Web Development, Software Testing, Mobile Apps, Ne...

Ultimate Tech Training Bundle: Lifetime Subscription for $19! 800+ Courses to learn Programming, Web Development, Software Testing, Mobile Apps, Networking, e-Commerce, Design, Data, IT Certifications, and much more! (98% Off)

This concept of a profile card comes with an attractive set of animations for both the avatar and the social info buttons located at the bottom of ...

This concept of a profile card comes with an attractive set of animations for both the avatar and the social info buttons located at the bottom of the design. Everything is based on a (very healthy) set of Dribbble shots originally created by Mike from Creative Mints.

A beautiful concept for displaying comments within bubbles from every user. Each comment starts with a profile picture of the author, the actual co...

A beautiful concept for displaying comments within bubbles from every user. Each comment starts with a profile picture of the author, the actual content is displayed when hovering on one of their bubbles. All of the boxes have a neat transparency effect that blends really well with the colorful background.

A simple design for a widget that can be used to display brief information to the reader. In this case, it is used to link the visitor to a person'...

A simple design for a widget that can be used to display brief information to the reader. In this case, it is used to link the visitor to a person's social networking profiles. This can be a great way to lead potential followers into discovering more content and generating interactivity.

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use ...

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use License.

As the name suggests, this basic piece of code contains a small widget that, in this case, displays a brief amount of personal information intended...

As the name suggests, this basic piece of code contains a small widget that, in this case, displays a brief amount of personal information intended to provide a means of introduction to a professional offering a service, with a big button allowing you to be followed on CodePen.

A cool Twitter profile box conceived for providing quick information about the user, displaying tweet count, followers and the bio. The background ...

A cool Twitter profile box conceived for providing quick information about the user, displaying tweet count, followers and the bio. The background picture is fetched from the actual cover on the users' profiles. This Twitter profile was created by Elliott Regan from CodePen and inspired in a Dribbble shot created by Edwin Delgado.

This is a simple, yet effective way to share yourself to the world through social media. Following a picture and a very brief "bio" section, visito...

This is a simple, yet effective way to share yourself to the world through social media. Following a picture and a very brief "bio" section, visitors will be able to access all social profiles you have decided to share with them. Created by CodePen user pantsable.

High-resolution video time-lapses, featuring city and natural landscapes from all over the world. 40+ assets for your next project, from video prod...

High-resolution video time-lapses, featuring city and natural landscapes from all over the world. 40+ assets for your next project, from video production to web design and presentations! Only $19!

A neat little box created with pure CSS by CodePen user Wayne Spiegel. It brings Twitter notifications, letting us know about mentions and messages...

A neat little box created with pure CSS by CodePen user Wayne Spiegel. It brings Twitter notifications, letting us know about mentions and messages and also giving us the possibility to RT, favorite or reply right from the box itself. Moreover, the profile picture is also retrieved from the user.