Collection of free HTML and CSS profile card code examples from codepen and other resources. Update of April 2019 collection. 10 new items.

Related Articles

  1. CSS Cards
  2. Bootstrap Profiles

Author

  • black ellis

Made with

  • HTML / CSS

About a code

Profile Cards - CSS Grid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Profile Card

Author

  • Russ Perry

Made with

  • HTML / CSS (SCSS)

About a code

Profile Card

This is some kind of profile card. The Hire me button has a moving gradient hover animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Emil Alicic

Made with

  • HTML / CSS

About a code

InfoCard CSS Only

A simple self expanding info card using very basic tools and transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Card

Author

  • Carlita Centeno

Made with

  • HTML / CSS (SCSS)

About a code

CSS Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Fairly Colourful Profile Card

Author

  • Takane Ichinose

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Fairly Colourful Profile Card

A simple and a little bit colorful design concept of a profile card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Game-Based Cards

Author

  • Jorge Reyes

Made with

  • HTML / CSS (SCSS)

About a code

Game-Based Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Profile Card Design

Author

  • Florin Pop

Made with

  • HTML / CSS

About a code

Profile Card Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Atul Prajapati

Made with

  • HTML / CSS

About the code

Profile Card Hover Over It Once

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • FrankieDoodie

Made with

  • HTML / CSS

About the code

Profile Card UI Design

Profile card UI design with cool hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css

Author

  • Jove Angelevski

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Profile Card

Profile card with animation in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • neil pearce

Made with

  • HTML / CSS (SCSS)

About the code

UI Profile Cards

UI profile cards with CSS transition effects on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: CSS Profile Card

Author

  • Byurhan Beyzat

Made with

  • HTML / CSS (SCSS)

About the code

CSS Profile Card

CSS profile card UI with light and dark themes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Bobby Korec

Made with

  • HTML / CSS (SCSS)

About a code

Social Card + 3D Hover Effect

Hover card to reveal social media links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Twitter Author Card

Author

  • David East

Made with

  • HTML
  • CSS

About the code

Twitter Author Card

Flashing Twitter author card.

Author

  • Genaro Colusso

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Profile Card UI

HTML and CSS animated profile card UI.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: devicons.css

Demo image: Profile Card

Author

  • Matthias Martin

Made with

  • HTML / CSS (SCSS)

About the code

Profile Card

Simple profile card in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Emil Devantie Brockdorff

Made with

  • HTML / CSS

About the code

Material Design: Profile Card

Pure CSS Material Design profile card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: 90's Profile Card

Author

  • Ondřej Bárta

Made with

  • HTML / CSS

About the code

90's Profile Card

90’s profile card in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -