"card services"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="title">
<p>One Year of</p>
<p>Receipts Takes</p>
</section>
<section class="cards">
<div class="card card--oil">
<div class="card__svg-container">
<div class="card__svg-wrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
<circle cx="40" cy="40" r="39" fill="#6a7a87"/>
<g filter="url(#goo)">
<path id="myTeardrop" fill="#FFFFFF" d="M48.9,43.6c0,4.9-4,8.9-8.9,8.9s-8.9-4-8.9-8.9S40,27.5,40,27.5S48.9,38.7,48.9,43.6z"/>
<path id="TopInit" fill="#FFFFFF" d="M13,10.8c5-5.3,10.7-8.5,18.3-9.8c11.2-1.8,9.2-1.4,17.6,0C58.3,2.7,66,6,69,13.1V-2.7L13-2.8V10.8z"/>
<path id="TopBulb" fill="#FFFFFF" d="M13,10.8c5-5.3,14.8-4,18.3,2.3c4.3,7.7,13.8,7.6,17.6,0c3.4-7,17.1-7.1,20.1,0V-2.7L13-2.8V10.8z" style="visibility: hidden"/>
<path id="TopBulbSm" fill="#FFFFFF" d="M13,10.8c5-5.3,18.5-14,23.3-8.8c3.6,3.9,3.9,4.5,7.6,0c5-6,22.1,3.9,25.1,11V-2.7L13-2.8V10.8z" style="visibility: hidden"/>
<path id="TopRound" fill="#FFFFFF" d="M13,10.8c5-5.3,10.6-6,18.3-6.8c6.5-0.7,10.5-0.8,17.6,0C58.4,5.1,66,6,69,13.1V-2.7L13-2.8V10.8z" style="visibility: hidden"/>
</g>
</svg>
</div>
</div>
<div class="card__count-container">
<div class="card__count-text">
<span class="card__count-text--big">250</span> Million
</div>
</div>
<div class="card__stuff-container">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-size: 62.5%;
font-family: 'Raleway', sans-serif;
}
@media screen and (max-width: 620px) {
html, body {
font-size: 45%;
}
}
@media screen and (max-width: 480px) {
html, body {
font-size: 70%;
}
}
.forhtml {
background: -webkit-radial-gradient(bottom, #aac1c7, #f7fbfb 80%) no-repeat center center fixed;
background: radial-gradient(to top, #aac1c7, #f7fbfb 80%) no-repeat center center fixed;
background-size: cover;
}
body {
color: #686e74;
overflow-x: hidden;
min-height: 100vh;
}
section {
width: 80vw;
max-width: 64rem;
min-width: 58.9rem;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
"use strict";
function newAnimationObj() {
var timeline = arguments.length <= 0 || arguments[0] === undefined ? new TimelineMax() : arguments[0];
var obj = {};
obj.last = false;
obj.start = function () {
obj.last = false;
timeline.resume();
};
obj.stop = function () {
obj.last = true;
};
return obj;
}
var newOilAnimation = function newOilAnimation() {
var oilTL = new TimelineMax({ repeat: -1, repeatDelay: 0.3 });
var oilObj = newAnimationObj(oilTL);
oilTL.to("#myTeardrop", 0.3, {
y: 55,
ease: Power3.easeIn
}).set("#myTeardrop", {
y: -53
}).to("#myTeardrop", 0.8, {
y: -24,
ease: Power4.easeIn
}).to("#TopInit", 0.8, {
morphSVG: { shape: "#TopBulb" },
ease: Power4.easeIn
}, "-=0.8").to("#TopInit", 0.17, {
morphSVG: { shape: "#TopBulbSm" },
ease: Power0.easeOut
}).to("#TopInit", 0.03, {
morphSVG: { shape: "#TopInit" },
ease: Power0.easeOut
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro
BOOTSTRAP 4 OUR SERVICES
Bootstrap 4 Our services
bootstrap 4 card

Questions / Comments: