Table of Contents

Collection of free HTML and CSS profile card code examples.

PROFILE CARD UI DESIGN

Profile card UI design with cool hover effect. Made with HTML / CSS by FrankieDoodie.

See the Pen
Profile Card UI Design Cool Hover Effect by FrankieDoodie (@FrankieDoodie)
on CodePen.

Demo and Download

AWESOME PROFILE CARD

Simple & awesome profile card in HTML and CSS. Included: name, verification status, online status, avatar, role and action buttons. Made with HTML / CSS by Advanced Develope.

See the Pen
Awesome Profile Card by Advanced Develope (@advdevelope)
on CodePen.

Demo and Download

PROFILE CARD

Profile card with animation in HTML, CSS and JS by Jove Angelevski.

See the Pen
UI #3 – Profile Card by Jove Angelevski (@AlbertFeynman)
on CodePen.

Demo and Download

UI PROFILE CARDS

UI profile cards with CSS transition effects on hover. Made with HTML / CSS (SCSS) by neil pearce.

See the Pen
UI Profile Cards by neil pearce (@2975)
on CodePen.

Demo and Download

CSS PROFILE CARD

CSS profile card UI with light and dark themes. Made with HTML / CSS (SCSS) by Byurhan Beyzat.

See the Pen
CSS Profile Card by Byurhan Beyzat (@byurhanbeyzat)
on CodePen.

Demo and Download

PROFILE CARD UI

HTML and CSS animated profile card UI by Genaro Colusso.

See the Pen
Daily UI #6 – Profile by Genaro Colusso (@genarocolusso)
on CodePen.

Demo and Download

PROFILE CARD

Simple profile card in HTML and CSS by Matthias Martin.

See the Pen
006 – Profile by Matthias Martin (@roydigerhund)
on CodePen.

Demo and Download

MATERIAL DESIGN: PROFILE CARD

Pure CSS Material Design profile card. Made with HTML/CSS by Emil Devantie Brockdorff.

See the Pen
Material Design: Profile Card by Emil Devantie Brockdorff (@Mestika)
on CodePen.

Demo and Download

90’S PROFILE CARD

90’s profile card in HTML and CSS by Ondrej Barta.

See the Pen
90’s profile card by OndÅ™ej Bárta (@bartaxyz)
on CodePen.

Demo and Download

Categorized in:

HTML,

Tagged in:

, , , , , , , , , , ,