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
Links
Made with
- HTML / CSS
About a code
Profile Cards - CSS Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
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
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Game-Based Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Profile Card Design
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Profile Card Hover Over It Once
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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
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
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
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
Links
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: -
Links
Made with
- HTML
- CSS
About the code
Twitter Author Card
Flashing Twitter author card.
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
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: -
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
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: -