"Project counter"
Bootstrap 4.1.1 Snippet by GSTSTUDIO

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Project counter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="sectiontitle"> <h2>Projects statistics</h2> <span class="headerLine"></span> </div> <div id="projectFacts" class="sectionClass"> <div class="fullWidth eight columns"> <div class="projectFactsWrap "> <div class="item wow fadeInUpBig animated animated" data-number="12" style="visibility: visible;"> <i class="fa fa-briefcase"></i> <p id="number1" class="number">12</p> <span></span> <p>Projects done</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="55" style="visibility: visible;"> <i class="fa fa-smile-o"></i> <p id="number2" class="number">55</p> <span></span> <p>Happy clients</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="359" style="visibility: visible;"> <i class="fa fa-coffee"></i> <p id="number3" class="number">359</p> <span></span> <p>Cups of coffee</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="246" style="visibility: visible;"> <i class="fa fa-camera"></i> <p id="number4" class="number">246</p> <span></span> <p>Photos taken</p> </div> </div> </div> </div> <footer> <div class="about-me-img"> <a href="http://www.jakubtursky.sk" target="_blank"> <img src="http://www.jakubtursky.sk/public/images/logo-brand-shadow-logo.png" alt="Jakub Turský" width="120px" > </a> <div class="authorWindowWrapper"> <div class="authorWindow"> <p><strong>Project statistics with counter </strong><br> Created by - <a href="http://www.jakubtursky.sk" target="_blank"><strong>Jakub Turský</strong></a> <br> For next info about me you can visit me site - <a href="http://www.jakubtursky.sk" target="_blank"> www.jakubtursky.sk </a> <br> </p> </div> </div> </div> </footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow); body { font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 13px; color: #666; position: relative; -webkit-font-smoothing: antialiased; margin: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 13px; direction: ltr; } .sectionClass { padding: 20px 0px 50px 0px; position: relative; display: block; } .fullWidth { width: 100% !important; display: table; float: none; padding: 0; min-height: 1px; height: 100%; position: relative; } .sectiontitle { background-position: center; margin: 30px 0 0px; text-align: center; min-height: 20px; } .sectiontitle h2 { font-size: 30px; color: #222; margin-bottom: 0px; padding-right: 10px; padding-left: 10px; } .headerLine { width: 160px; height: 2px; display: inline-block; background: #101F2E; } .projectFactsWrap{ display: flex; margin-top: 30px; flex-direction: row; flex-wrap: wrap; } #projectFacts .fullWidth{ padding: 0; } .projectFactsWrap .item{ width: 25%; height: 100%; padding: 50px 0px; text-align: center; } .projectFactsWrap .item:nth-child(1){ background: rgb(16, 31, 46); } .projectFactsWrap .item:nth-child(2){ background: rgb(18, 34, 51); } .projectFactsWrap .item:nth-child(3){ background: rgb(21, 38, 56); } .projectFactsWrap .item:nth-child(4){ background: rgb(23, 44, 66); } .projectFactsWrap .item p.number{ font-size: 40px; padding: 0; font-weight: bold; } .projectFactsWrap .item p{ color: rgba(255, 255, 255, 0.8); font-size: 18px; margin: 0; padding: 10px; font-family: 'Open Sans'; } .projectFactsWrap .item span{ width: 60px; background: rgba(255, 255, 255, 0.8); height: 2px; display: block; margin: 0 auto; } .projectFactsWrap .item i{ vertical-align: middle; font-size: 50px; color: rgba(255, 255, 255, 0.8); } .projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p{ color: white; } .projectFactsWrap .item:hover span{ background: white; } @media (max-width: 786px){ .projectFactsWrap .item { flex: 0 0 50%; } } /* AUTHOR LINK */ footer{ z-index: 100; padding-top: 50px; padding-bottom: 50px; width: 100%; bottom: 0; left: 0; } footer p { color: rgba(255, 255, 255, 0.8); font-size: 16px; opacity: 0; font-family: 'Open Sans'; width: 100%; word-wrap: break-word; line-height: 25px; -webkit-transform: translateX(-200px); transform: translateX(-200px); margin: 0; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; transition: all 250ms ease; } footer .authorWindow a{ color: white; text-decoration: none; } footer p strong { color: rgba(255, 255, 255, 0.9); } .about-me-img { width: 120px; height: 120px; left: 10px; /* bottom: 30px; */ position: relative; border-radius: 100px; } .about-me-img img { } .authorWindow{ width: 600px; background: #75439a; padding: 22px 20px 22px 20px; border-radius: 5px; overflow: hidden; } .authorWindowWrapper{ display: none; left: 110px; top: 0; padding-left: 25px; position: absolute; } .trans{ opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease; } @media screen and (max-width: 768px) { .authorWindow{ width: 210px; } .authorWindowWrapper{ bottom: -170px; margin-bottom: 20px; } footer p{ font-size: 14px; } }
$.fn.jQuerySimpleCounter = function( options ) { var settings = $.extend({ start: 0, end: 100, easing: 'swing', duration: 400, complete: '' }, options ); var thisElement = $(this); $({count: settings.start}).animate({count: settings.end}, { duration: settings.duration, easing: settings.easing, step: function() { var mathCount = Math.ceil(this.count); thisElement.text(mathCount); }, complete: settings.complete }); }; $('#number1').jQuerySimpleCounter({end: 12,duration: 3000}); $('#number2').jQuerySimpleCounter({end: 55,duration: 3000}); $('#number3').jQuerySimpleCounter({end: 359,duration: 2000}); $('#number4').jQuerySimpleCounter({end: 246,duration: 2500}); /* AUTHOR LINK */ $('.about-me-img').hover(function(){ $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans'); }, function(){ $('.authorWindowWrapper').stop().fadeOut('fast').find('p').removeClass('trans'); });

Related: See More


Questions / Comments: