Create Simple Responsive Material Design VCard : HTML5+CSS3

In this post I am going to share code snippet written in HTML5+CSS3 by iMasoud for creating Simple Responsive Material Design VCard, With the help of following code you can easily create your own awesome VCard and attached on your website and share with your customers, friends etc.

Create Simple Responsive Material Design VCard : HTML5+CSS3

Follow below code sample to create simple responsive material design VCard.

Libraries

Include font and jquery library for styling your VCard.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
<script src="//code.jquery.com/jquery-latest.min.js">script>

HTML

Create a simple html container where you need to insert your professional information like your name, designation,website etc.

CSS

Add card css for making your VCard responsive and Material look and feel. Styling all container with your social profile icon.

JS

Now finally add jquery on page to add simple effect like ripple click effect while click on your social profile icon.

<script>
$('body').on('click', '.icon', function() {
    var element = $(this).children().last();
    console.log(element);
 
    element.css('animation', 'ripple 1s ease-out');
    setTimeout(function() {
        element.css('animation', '');
    }, 1000);
});
script>

See live demo and download source code.

Related