Collection of free HTML and CSS profile card code examples.

Related Articles

  1. CSS Cards
  2. Bootstrap Profiles

Author

  • FrankieDoodie

Links

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

Demo image: Awesome Profile Card

Author

  • Advanced Develope

Links

Made with

  • HTML / CSS

About the code

Awesome Profile Card

Simple & awesome profile card in HTML and CSS. Included: name, verification status, online status, avatar, role and action buttons.

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

Responsive: yes

Dependencies: bootstrap.css

Author

  • Jove Angelevski

Links

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

Links

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

Links

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

  • Genaro Colusso

Links

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

Links

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

Links

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

Links

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: -