Create Simple Responsive Material Design VCard : HTML5+CSS3

0 271

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.

<div class="root">
  <div class="card">
    <div class="right"></div>
    <div class="left">
      <div class="content">
        <h1 class="name">Rohit Kumar</h1>
        <h2 class="title">Programmer, Blogger, Entrepreneur</h2>
        <h3 class="status">www.iamrohit.in</h3>
      </div>
      <div class="action"> <a class="icon twitter" href="https://twitter.com/hi_iamrohit"><span></span>
        <div class="ripple"></div>
        </a> <a class="icon github" href="https://github.com/hiiamrohit"><span></span>
        <div class="ripple"></div>
        </a> <a class="icon codepen" href="#"><span></span>
        <div class="ripple"></div>
        </a> <a class="icon telegram" href="#"><span></span>
        <div class="ripple"></div>
        </a> </div>
    </div>
  </div>
</div>

CSS

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

<style>
html, body, .root {
  height: 100%;
  margin: 0;
}
 
.root {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3498DB;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
 
.card {
  flex-basis: 50ex;
  flex-grow: 0;
  flex-shrink: 1;
  border: 0;
  border-radius: 0.25ex;
  display: flex;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
 
.right {
  flex: 1.4;
  flex-grow: 1.4;
  flex-shrink: 1.4;
  background-color: #888;
  border: 0;
  border-radius: 0 0.25ex 0.25ex 0;
  background: url(https://www.iamrohit.in/wp-content/uploads/2016/08/rohit.jpg) no-repeat -1.5ex top local;
  background-size: cover;
}
 
.left {
  flex: 3;
  flex-grow: 3;
  flex-shrink: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
 
.content {
  flex: 2;
  flex-shrink: 2;
  flex-grow: 2;
  flex-basis: 14ex;
  font-family: 'Roboto';
  padding-left: 3ex;
}
 
.name {
  font-size: 18pt;
  font-family: 'Roboto';
  font-weight: 500;
  line-height: 2ex;
}
 
.title {
  font-size: 11pt;
  font-family: 'Roboto';
  font-weight: 500;
  line-height: 1.5ex;
  color: #666;
}
 
.status {
  font-size: 10pt;
  font-family: 'Roboto';
  font-weight: 500;
  line-height: 4ex;
  color: #444;
}
 
.action {
  flex: 1;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 7ex;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #eee;
}
 
.icon {
  font-family: FontAwesome;
  font-size: 18pt;
  flex: 1;
  flex-shrink: 1;
  flex-grow: 1;
  color: #aaa;
  cursor: pointer;
  text-align: center;
  padding: 0.4ex 0;
  background-color: #fff;
  transition: 0.25s;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
 
.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}
 @keyframes 
ripple {  0% {
 transform: scale(0, 0);
 opacity: 1;
}
 20% {
 transform: scale(25, 25);
 opacity: 1;
}
 100% {
 opacity: 0;
 transform: scale(40, 40);
}
}
 
.icon:hover {
  background-color: #eee;
  border: 0;
  border-radius: 0.2ex;
  transition: 0.25s;
}
 
.telegram {
  margin-right: 1ex;
  color: #0088cc;
}
 
.github { color: #333; }
 
.codepen { color: #0ebeff; }
 
.twitter {
  color: #1da1f2;
  margin-left: 1ex;
}
</style>

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.

DEMO | DOWNLOAD

Leave A Reply

Your email address will not be published.