HTML code
Clean, semantic HTML that powers this Bootstrap 3.3.7 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.
Download
<html ng-app="inigoTeamApp">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<md-content id="body" class="full-height mobile-mode" ng-controller="webCardController">
<div id="wrapper" class="content-box">
<div class="main-content layout-gt-sm-row">
<div id="primary">
<div class="shadow" ng-style="{background: cardDetails.colorCode}">
<div id="cardHeader" class="navbar card-background navbar-fixed-top">
<div class="layout-row layout-align-space-between">
<span class="profileName">{{cardDetails.title == ''? "Card Title" : cardDetails.title}}</span>
<button class="btn btn-success" ng-click="toggleSavePopup()"><b>SAVE</b></button>
</div>
</div>
<div>
<div id="cardBody">
<img class="cover" alt="" src="{{cardDetails.backgroundPictureURL}}" />
</div>
<div id="cardUserDetails">
<img class="avatar" alt="{{cardDetails.accountUserFirstName}}" src="{{cardDetails.pictureURL}}" />
<span class="accountName">{{cardDetails.accountUserFirstName + " " + cardDetails.accountUserLastName}}</span>
</div>
<div id="cardFooter" class="layout-row layout-align-start-center">
<img class="logo" ng-src="{{cardDetails.logo}}">
<span class="profileDescription">{{cardDetails.description}}</span>
</div>
</div>
<!-- ****Save Menu**** -->
<div class="navbar card-background navbar-fixed-top save-pop-up popup-save-hide popup" ng-style="{height: height}" ng-hide="!isPopupSave" style="color:white">
<div class="layout-row layout-align-space-between-center" style="margin:9px">
<div class="layout-row layout-align-start-center">
<img class="popup-avatar" ng-src="{{cardDetails.pictureURL}}" />
<div>
<h4>{{cardDetails.title}}</h4>
<p style="line-height: 0.05;">{{cardDetails.accountUserFirstName + " " + cardDetails.accountUserLastName}}<p>
</div>
</div>
<i class="fa fa-times md-margin" aria-hidden="true" ng-click="toggleSavePopup()" style="font-size:20px" ng-if="operation == 'NONE'"></i>
<i class="fa fa-times md-margin" aria-hidden="true" ng-click="setOperation('NONE')" style="font-size:20px" ng-if="operation != 'NONE'"></i>
</div>
<div class="layout-row layout-align-space-between-center cssFade" style="margin:16px 9px" ng-click="setOperation('SAVE')" ng-hide="operation != 'NONE'">
<div class="layout-row layout-align-start-center">
<i class="fa fa-mobile popup-icon-mobile" aria-hidden="true"></i>
<div>
<p style="font-size:small"><b>Save this contact to your phone</b></p>
<p style="line-height: 0.9;font-size:small">Will be saved as a card, stored in your phonebook<p>
</div>
</div>
<i class="fa fa-angle-right md-margin" aria-hidden="true"></i>
</div>
<div class="layout-row layout-align-space-between-center cssFade" style="margin:16px 9px" ng-click="setOperation('SEND')" ng-hide="operation != 'NONE'">
<div class="layout-row layout-align-start-center">
<i class="fa fa-user popup-icon-user" aria-hidden="true"></i>
<div>
<p style="font-size:small"><b>Send your contact details back</b></p>
<p style="line-height: 0.9;font-size:small">This contact would like to know more about you<p>
</div>
</div>
<i class="fa fa-angle-right md-margin" aria-hidden="true"></i>
</div>
<!-- ****Save contact details**** -->
<div class="full-height cssFade" ng-show="operation == 'SAVE'">
<br />
<h5 style="text-align:center">SAVE THIS CONTACT TO YOUR PHONE</h5>
<br /><br /><br />
<section class="full-width">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/GTT5cH-mEZA" frameborder="0" allowfullscreen></iframe>
</div>
</section><br /><br /><br />
<div class="layout-column layout-align-center-center">
<button class="btn btn-info"><b>SAVE TO PHONE BOOK</b></button>
</div>
</div>
<!-- ****Send contact details**** -->
<div class="layout-column layout-align-center-center cssFade full-height" ng-show="operation == 'SEND'">
<br/>
<header style="text-align:center">
<h5>SEND YOUR CONTACT DETAILS BACK</h5>
<h6>Enter as much detail as you want to send</h6>
</header>
<br/>
<form id="contactDetails" class="full-height" style="width:85%">
<md-input-container class="md-icon-float md-block">
<md-icon>account_circle</md-icon>
<input type="text" placeholder="Enter First and Last Name">
</md-input-container>
<md-input-container md-no-float class="md-block">
<md-icon>work</md-icon>
<input type="text" placeholder="Job Title/Position">
</md-input-container>
<md-input-container md-no-float class="md-block">
<md-icon>email</md-icon>
<input type="text" placeholder="Enter Email Address">
</md-input-container>
<md-input-container md-no-float class="md-block">
<md-icon>phone</md-icon>
<input type="text" placeholder="Enter Phone Number">
</md-input-container>
<br/>
<div class="layout-column layout-align-center-center">
<button class="btn btn-info"><b>SEND TO CONTACT</b></button>
</div>
</form>
</div>
</div>
</div>
</div>
<md-card class="card-elements shadow">
<md-list class="elements-list cssFade no-padding" ng-hide="showOneElement">
<md-list-item class="md-2-line" ng-repeat="templateElement in cardDetails.elements" ng-click="selectElement(templateElement)">
<img class="element-avatar" ng-src="{{templateElement.pictureURL}}" />
<div class="md-list-item-text preview-card-elements-text">
<h3 style="font-size: 15px; height:16px">{{templateElement.text}}</h3>
<p style="line-height: 2.05;">{{templateElement.url}}<p>
</div>
</md-list-item>
</md-list>
</md-card>
</div>
<br/>
<!-- ****Card Footer**** -->
<div id="footer">
<div class="footerInternal">
<div class="image-gradient-header"></div>
<div class="layout-column layout-align-center-center">
<p class="footer-text">{{cardDetails.footer.text1}}</p>
<div class="layout-gt-xs-row">
<img src="{{cardDetails.footer.picture1URL}}" class="footer-img" />
<img src="{{cardDetails.footer.picture2URL}}" class="footer-img" />
</div>
<p class="footer-constant-text">Powered By HP IT GURUP| 2017 © All Rights Reserved</p>
</div>
</div>
</div>
</div>
</md-content>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>
</body>
</html>CSS code
Scoped CSS that styles the component. Paste it after Bootstrap 3.3.7 to keep the design, spacing, and responsiveness consistent.
Download
html {
background-color: #fff;
margin: 0;
padding: 0;
font-size: 18px;
}
body {
background-color: #fff;
/*border-top: solid 10px #000;*/
color: #333;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: normal;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
.full-screen{
height:100%;
width:100%;
}
.full-height{
height:100%;
}
.no-padding {
padding:0;
}
.shadow{
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
}
.full-width{
width:100%;
}
.card-elements {
overflow-y: scroll;
max-width: 37%;
max-height: 716.92px;
position: relative;
width:400px;
}
.elements-list {
position: absolute;
top: 0;
max-width: 100%;
}
.card-background{
background-color: rgb(31, 67, 82);
}
#primary {
width: 100%;
float: none;
margin: 8px;
border-radius: 0;
max-width: 860px;
}
.content-box {
padding-top: 60px;
padding-bottom: 60px;
/* max-height: 840px; */
}
.main-content {
margin:auto;
max-width: 1280px;
margin-bottom: 65px;
}
#cardHeader {
display: table;
padding-top:17px;
padding-right:24px;
padding-left:16px;
height:60px;
width: 100%;
box-shadow: 0px 2px 10px 4px rgba(0,0,0,0.4);
}
#cardHeader .profileName {
position: relative;
font-size:1.2em;
color: white;
top: 2px;
word-wrap: break-word;
max-width: 280px;
padding: 0 25px;
}
#cardHeader #profileLogo {
width: 100%;
}
#cardBody {
position:relative;
background-color: blue;
display: block;
max-width: 860px;
}
#cardBody .cover{
display:block;
width:100%;
min-height:250px;
max-height: 643px;
max-width: 860px;
}
#cardBody .profileDetails {
position:absolute;
width:100%;
bottom: 0;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 43%, rgba(0,0,0,0.5) 44%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(43%,rgba(0,0,0,0)), color-stop(44%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.5) 44%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.5) 44%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.5) 44%,rgba(0,0,0,0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.5) 44%,rgba(0,0,0,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
z-index: 1;
min-height: 75px;
}
#cardBody .profilePicture {
position: absolute;
display: inline-block;
width: 75px;
height: 75px;
/*border: 1pt solid #000000;*/
box-shadow: 0px 0px 14px 4px rgba(0,0,0,0.50);
border-radius: 50%;
bottom:3px;
left:27px;
}
#cardFooter {
padding: 20px 100px 20px 10px;
text-align: left;
color: white;
word-wrap: break-word;
min-height: 60px;
}
#cardUserDetails {
padding: 20px 100px 20px 10px;
text-align: left;
color: white;
word-wrap: break-word;
min-height: 60px;
background-color: rgb(4, 22, 43);
position: relative;
}
#cardUserDetails .avatar {
display: inline-block;
width: 20%;
max-width: 100px;
border: medium solid #fff;
margin-left: 15px;
border-radius: 50%;
position: absolute;
bottom: 14px;
}
#cardUserDetails .accountName {
position: absolute;
bottom: 5px;
font-size: 20px;
color: white;
margin-left: 25px;
left: 110px;
word-break: break-all;
}
#cardUserDetails.lighter {
background-color: rgb(31, 67, 82) -50%
}
#cardFooter .logo {
max-height: 50px;
margin-right: 24px;
display: inline-block;
width: 20%;
max-width: 100px;
border: medium solid #fff;
margin-left: 15px;
bottom: 3px;
}
#wrapper {
min-height: 100%;
position: relative;
}
#footer {
width: 100%;
height: 100px;
position: absolute;
bottom: 33px;
left: 0;
}
.footerInternal{
position:relative;
text-align: center;
}
.element-avatar {
-webkit-box-flex: 0;
width: 48px;
height: 48px;
flex: 0 0 auto;
margin-right: 13px;
}
.selected-element-avatar {
-webkit-box-flex: 0;
width: 148px;
height: 148px;
flex: 0 0 auto;
margin-right: 13px;
}
.image-gradient-header {
position: absolute;
width: 100%;
opacity: 0.4;
bottom: 0px;
height: 145px;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#272727), to(rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, #272727, rgba(0,0,0,0));
background: -moz-linear-gradient(top, #272727, rgba(0,0,0,0));
background: -ms-linear-gradient(top, #272727, rgba(0,0,0,0));
background: -o-linear-gradient(top, #272727, rgba(0,0,0,0));
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.footer-img {
height: 55px;
width: 130px;
margin: 20px;
margin-top: 8px;
}
.footer-gradient {
position: relative;
width: 100.08%;
padding: 0 !important;
margin: 0;
right: 1px;
}
.footer-text {
font-size: smaller;
font-family: cursive;
color: black;
}
.footer-constant-text {
font-size: 10px;
font-family: cursive;
font-weight: bold;
color: black;
}
.card-footer {
text-align:center;
color:white;
}
.btn-custom {
color: #fff;
background-color: rgb(31, 67, 82);
border-color: #fff !important;
width: 100px;
border-radius: 20px !important;
padding: 3px !important;
}
.save-pop-up{
/* height: 185px; */
background-color: rgb(31, 67, 82);
width: 100%;
}
.popup-avatar {
height: 40px;
width: 40px;
border-radius: 30px;
margin: 0 14px;
}
.popup-icon-mobile {
font-size: 48px;
margin: 0 24px;
}
.popup-icon-user {
font-size: 36px;
margin: 0 20px;
}
@media (min-width: 960px){
.popup {
left: 65% !important;
max-width: 35% !important;
position: absolute !important;
}
}
.footer-popup-btn {
position: absolute;
width: 100%;
height: 8%;
text-align: center;
bottom:0;
}
.showme{
display: none !important;
}
.showhim:hover .showme{
display : block !important;
}
.popup-save-hide {
-webkit-transition:all cubic-bezier(0, 1, 0.5, 1) 1s;
-moz-transition:all cubic-bezier(0, 1, 0.5, 1) 1s;
-o-transition:all cubic-bezier(0, 1, 0.5, 1) 1s;
transition:all cubic-bezier(0, 1, 0.5, 1) 1s;
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
}
.popup-save-hide.ng-hide {
top: -100%;
opacity:0;
padding:0 10px;
height: 0;
}
.cssFade {
transition: 0.5s linear all;
opacity: 1;
}
.cssFade.ng-hide {
opacity: 0;
}
@media (min-width: 820px){
.layout-gt-sm-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
}
.layout-gt-sm, .layout-gt-sm-column, .layout-gt-sm-row {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.layout-gt-sm-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
}
.layout-gt-sm, .layout-gt-sm-column, .layout-gt-sm-row {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
}
@media (max-width: 820px) {
.card-elements {
overflow-y: hidden;
max-width: 100%;
width:100%;
margin:0;
box-shadow: white 0 0 0 0;
position:relative;
}
.elements-list {
position: relative;
}
#primary {
margin:0 !important;
}
.mobile-mode {
background-color: white;
}
.card-elements {
max-height: 100%;
}
}
Javascript/Jquery code
Lightweight JS to power any interactions this snippet needs. Drop it under your scripts (after Bootstrap 3.3.7) to mirror the live demo.
Download
var app = angular.module('inigoTeamApp', ['ngMaterial','ngAnimate']);
app.controller('webCardController', ['$scope','$timeout', '$document', function($scope, $timeout, $document) {
var long_para = "Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph.";
var elements_list = [{elementID: 1, pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_chrome.png", text: "Visit our Website", url:"harunpehlivantebimtebitagem.ml"}, {elementID: 2,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_phone.png", text: "Give me a Call", url:"+90 358 417 62 30"},
{elementID: 3,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_youtube.png", text: "What is Inigo", url:"harunpehlivan1"},
{elementID: 4,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_linkedin.png", text: "Add me on LinkedIn", url:"harun-pehlivan-0aa34252"},
{elementID: 5,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_gmail.png", text: "Send me a mail", url:"[email protected]"},
{elementID: 6,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_skype.png", text: "Call me on Skype", url:"trcmnhp"},
{elementID: 7,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_twitter.png", text: "Follow me on twitter", url:"HTERCUMANP"},
{elementID: 8, pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_chrome.png", text: "Visit our Website", url:"harunpehlivantebimtebitagem.ml"}, {elementID: 9,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_phone.png", text: "Give me a Call", url:"+90 358 417 62 30"},
{elementID: 10,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_youtube.png", text: "What is Inigo", url:"harunpehlivan1"},
{elementID: 11,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_linkedin.png", text: "Add me on LinkedIn", url:"harun-pehlivan-0aa34252"},
{elementID: 12,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_gmail.png", text: long_para, url:"[email protected]"},
{elementID: 13,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_skype.png", text: "Call me on Skype", url:"trcmnhp"},
{elementID: 14,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_twitter.png", text: "Follow me on twitter", url:"HTERCUMANP"},];
var footer = {
picture1LinkURL:"https://harunpehlivantebimtebitagem.carrd.co",
picture1URL:"https://dvz7s77q059yk.cloudfront.net/content/images/Footer/83a0836c-f199-4a73-bd0a-63ab55a7ec48_bg_boston.png",
picture2LinkURL:"https://harunpehlivantebimtebitagem.carrd.co",
picture2URL:"https://dvz7s77q059yk.cloudfront.net/content/images/Footer/3c2a6d73-9d04-44f2-acdc-4f0ed06b2f7e_leftnav_inigo_partner_logo.png",
publicProfileFooterID:28,
templateID:0,
text1:"Start for Free and Customize Your Digital Business Card Today"
};
$scope.cardDetails = {
accountID: 18,
accountUserFirstName: "HARUN",
accountUserLastName: "PEHLİVAN",
backgroundPictureURL: "http://d2f0ora2gkri0g.cloudfront.net/bkpam2342416_argeprojeegitimesnasndahallerim-1.jpg",
colorCode: "rgb(31, 67, 82)",
description: "TERCUMAN BİLİŞİM MERKEZİ & TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ",
elements : elements_list,
logo: "http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png",
pictureURL: "http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1505286021",
title:"Digital Business Card",
publicProfileID: 207070,
footer: footer
};
$scope.isPopupSave = false;
$scope.height = '230px';
$scope.operation = 'NONE';
$scope.showOneElement = false;
$scope.selectedElement = null;
$scope.isCardFooter = false;
$scope.setCardFooter = function (){
$scope.isCardFooter = !$scope.isCardFooter;
}
$scope.toggleSavePopup = function(){
$scope.isPopupSave = !$scope.isPopupSave;
}
$scope.selectElement = function(element){
$scope.showOneElement = true;
$scope.selectedElement = element;
}
$scope.closeElement = function(){
$scope.selectedElement = null;
$scope.showOneElement = false;
}
$scope.setOperation = function(operation){
$scope.operation = 'TEMP';
$timeout(function () {
$scope.operation = operation;
},700);
if (operation == 'NONE')
popupNormal();
else
popupFull();
}
var popupFull = function(){
$scope.height = '100%';
}
var popupNormal = function(){
$scope.height = '230px';
}
$document.ready(function() { if ($document.getElementById('content').scrollHeight < $document.body.clientHeight){ $document.getElementById('footer').style.position = "fixed";
$document.getElementById('footer').style.bottom = "0"; } });
}]); 
FAQ
How do I use this snippet?
Include Bootstrap 3.3.7, paste the HTML, add the CSS block, and include the JS (if any) to mirror the live preview.
Can I use it in commercial projects?
Yes. It’s free for personal and commercial work; check the snippets license for details.
Is it responsive?
Yes. It inherits the responsive grid and components from Bootstrap 3.3.7.
About this bootstrap example/template
This free Bootstrap 3.3.7 snippet, WebCardInigoaap, was published on Sep 19th 2017, 16:00 by HARUN PEHLIVAN.
Optimized for copy‑paste: clean HTML, scoped CSS, and minimal JS so you can ship production‑ready UI faster and keep designs consistent.
Mobile‑first and responsive by default. Tested across modern browsers to reduce polish time on your project.
Already trusted in 1.4K+ views. Reuse this snippet to speed up landing pages, dashboards, or onboarding flows.
Bootstrap 3.3.7
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
This code example is based on bootstrap 3.3.7 and the grid system of this framework
Responsive
Based on bootstrap framework makes all the layouts perfectly responsive for all devices
Crossbrowser compatibility
Tested on all major browsers, it works smoothly on all of them
Jquery plugins
Great built-in plugins with jquery framework, you can easy to change all declarations
semantic html 5
Built on html / css3 the code quality is really amazing
Simple Integration
This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working