Create Simple Responsive Material Design VCard : HTML5+CSS3

Responsive Material Design VCard

In this appendix I am going to portion code snippet written in HTML5+CSS3 by iMasoud for creating Simple Responsive Material Design VCard, With the alleviate of later code you can easily make your own awesome VCard and attached harshly speaking your website and share by now your customers, links etc.

Create Simple Responsive Material Design VCard : HTML5+CSS3

Follow under code sample to create easy supple 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 to your liking html container where you dependence to ornament your professional have the funds for advice taking into account your make known, 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 sprightly and Material see and mood. Styling all container when 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(http://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 mount happening jquery approaching page to grow easy effect taking into account ripple click effect though click in fable to 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>

Leave a Reply

Your email address will not be published. Required fields are marked *