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.

HTML

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

  

    

    

      

        
Rohit Kumar
        
Programmer, Blogger, Entrepreneur
        
www.iamrohit.in
      
      
 
        

         
        

         
        

         
        

         
    
  

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.

See live demo and download source code.

DEMO | DOWNLOAD