<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div>
<div class="fixed-top">
<header class="topbar">
<div class="container">
<div class="row">
<!-- social icon-->
<div class="col-sm-12">
<ul class="social-network">
<li><a class="waves-effect waves-dark" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="waves-effect waves-dark" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="waves-effect waves-dark" href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a class="waves-effect waves-dark" href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a class="waves-effect waves-dark" href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-dark mx-background-top-linear">
<div class="container">
<a class="navbar-brand" href="index.html" style="text-transform: uppercase;"> domain.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">E-Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">E-Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Earning Apps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<br><br><br><br><br>
<div class="col text-center">
<h2>Our History</h2>
<p>counter to count up to our target number</p>
</div>
<div class="row text-center">
<div class="col">
<div class="counter">
<i class="fa fa-code fa-2x"></i>
<h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
<p class="count-text ">Our Customer</p>
</div>
</div>
<div class="col">
<div class="counter">
<i class="fa fa-coffee fa-2x"></i>
<h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
<p class="count-text ">Happy Clients</p>
</div>
</div>
<div class="col">
<div class="counter">
<i class="fa fa-lightbulb-o fa-2x"></i>
<h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
<p class="count-text ">Project Complete</p>
</div></div>
<div class="col">
<div class="counter">
<i class="fa fa-bug fa-2x"></i>
<h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
<p class="count-text ">Coffee With Clients</p>
</div>
</div>
</div>
</div>
<hr style="border-top: 2px dashed #d1d6d8 ">
<div>
</div>
<div id="feedback">
<a href="#popup1" >Quick Enquiry</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<div class="div1" style="background:#fff">
<div class="content" id="quickenquire">
<h3 style="text-align:center">Send Enquiry</h3>
<form action="#">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="email">Email Id</label>
<input type="email" id="email" name="email">
<label for="comment">Your Message</label>
<textarea></textarea>
<label for="contact">Contact No</label>
<input type="text" id="contact" name="contact">
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
<script>
(function ($) {
$.fn.countTo = function (options) {
options = options || {};
return $(this).each(function () {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
}(jQuery));
jQuery(function ($) {
// custom formatting example
$('.count-number').data('countToOptions', {
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});</script>
</body>
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #f7f7f7;
}
.navbar {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 5px;
}
/*
headeer top
*/
.topbar{
background-color: #212529;
padding: 0;
}
.topbar .container .row {
margin:-7px;
padding:0;
}
.topbar .container .row .col-md-12 {
padding:0;
}
.topbar p{
margin:0;
display:inline-block;
font-size: 13px;
color: #f1f6ff;
}
.topbar p > i{
margin-right:5px;
}
.topbar p:last-child{
text-align:right;
}
header .navbar {
margin-bottom: 0;
}
.topbar li.topbar {
display: inline;
padding-right: 18px;
line-height: 52px;
transition: all .3s linear;
}
.topbar li.topbar:hover {
color: #1bbde8;
}
.topbar ul.info i {
color: #131313;
font-style: normal;
margin-right: 8px;
display: inline-block;
position: relative;
top: 4px;
}
.topbar ul.info li {
float: right;
padding-left: 30px;
color: #ffffff;
font-size: 13px;
line-height: 44px;
}
.topbar ul.info i span {
color: #aaa;
font-size: 13px;
font-weight: 400;
line-height: 50px;
padding-left: 18px;
}
ul.social-network {
border:none;
margin:0;
padding:0;
}
ul.social-network li {
border:none;
margin:0;
}
ul.social-network li i {
margin:0;
}
ul.social-network li {
display:inline;
margin: 0 5px;
border: 0px solid #2D2D2D;
padding: 5px 0 0;
width: 32px;
display: inline-block;
text-align: center;
height: 32px;
vertical-align: baseline;
color: #000;
}
ul.social-network {
list-style: none;
margin: 5px 0 10px -25px;
float: right;
}
.waves-effect {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
will-change: opacity, transform;
transition: .3s ease-out;
color: #fff;
}
a {
color: #0a0a0a;
text-decoration: none;
}
li {
list-style-type: none;
}
.bg-image-full {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.bg-dark {
background-color: #222!important;
}
.mx-background-top-linear {
background: -webkit-linear-gradient(45deg, #4AD1E5 48%, #1b1e21 48%);
background: -webkit-linear-gradient(left, #4AD1E5 48%, #1b1e21 48%);
background: linear-gradient(45deg, #4AD1E5 48%, #1b1e21 48%);
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 30px auto;
padding: 15px;
border-radius: 5px;
width: 49%;
position: absolute;
left: 35%;
/* transition: all 5s ease-in-out; */
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.search {
position: absolute;
top: 19px;
left: 45%;
/* background: #ce00ff; */
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #000;
padding: 0px 5px;
}
.popup .close:hover {
color: #ffffff;
}
.popup .content {/* max-height: 30%;
*/overflow: auto;border-top: 2px dashed #d1d6d8;margin-top: 75px;}
.div1 {
width: 50%;
padding: 20px;
/* float: left; */
height: auto;
background:#fff;
border-radius: 25px;
}
.content h3 { text-align: center;
margin: 15px 0 -1px 0;
text-transform: uppercase;
color: #00495d;
}
@media screen and (max-width: 1024px) {
.box {
width: 70%;
}
.popup {
width: 70%;
left:20%;
}
.div1 {
width: 70%;
padding: 20px;
float: left;
}
}
/* sticky button */
#feedback1 {
height: 0px;
width: 85px;
position: fixed;
right: 0;
top: 30%;
z-index: 1000;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback1 a {
display: block;
background:url(pc.png) no-repeat;
height: 52px;
width: 155px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
#feedback1 a:hover {
background:url(pc-over.png) no-repeat;
}
#feedback {
height: 0px;
width: 85px;
position: fixed;
right: 0;
top: 50%;
z-index: 1000;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback a {
display: block;
background:#000;
height: 52px;
padding-top: 10px;
width: 155px;
text-align: center;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
#feedback a:hover {
background:#00495d;
}
/* enquiry form */
#quickenquire input[type=text], input[type=email], textarea, select {
width: 100%;
padding: 5px 15px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
#quickenquire label {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 0px!important;
margin: 0px!important;
}
#quickenquire input[type=submit] {
width: 100%;
background-color: #00495d;
color: white;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
padding: 7px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#quickenquire input[type=submit]:hover {
background-color: #000000;
}
.counter {
background-color:#f5f5f5;
padding: 20px 0;
border-radius: 5px;
}
.count-title {
font-size: 40px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
color: #4ad1e5;
}
