HTML code
This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection
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
This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection
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
This is the javascript code used to create this bootstrap snippet, You can copy and paste the following javascript code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection
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"; } });
}]); 
About this bootstrap example/template
This example/template, WebCardInigoaap, was published on Sep 19th 2017, 16:00 by HARUN PEHLIVAN and it is free.
We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.
We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.
This code example currectly have 1.0K views, Using this bootstrap snippet you have the following benefits:
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