Count Up

500,000+

SQUARE FEET OF GRASS SOLD

6,000+

PROJECTS SUPPLIED

Documentation

Count Up install files:

HTML
<div class="counters">
	<div class="wrapper">
		<div class="counter_wrap">
			<div class="counter_item">
				<p class="number">
					<span class="counter">500,000</span>+
				</p>
				<p>SQUARE FEET OF GRASS SOLD</p>
			</div>
			<div class="counter_item">
				<p class="number">
					<span class="counter">6,000</span>+
				</p>
				<p>PROJECTS SUPPLIED</p>
			</div>
		</div>
	</div>
</div>
CSS
.counters{background-color:#274684;padding:3.4rem 0 3.1rem}
.counters .counter_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:0;margin:0 -1.5rem}
.counters .counter_item{display:inline-block;vertical-align:top;width:-webkit-calc(100% / 2 - 3.01rem);width:-moz-calc(100% / 2 - 3.01rem);width:calc(100% / 2 - 3.01rem);margin:0 1.5rem}
.counters .counter_item p{font-size:2.2rem;line-height:1.16;font-weight:400;text-transform:uppercase;color:#fff;text-align:center}
.counters .counter_item p.number{font-size:5rem;font-weight:400;margin:0 0 4.6rem;position:relative}
.counters .counter_item p.number::after{content:'';position:absolute;bottom:-2.1rem;left:50%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);display:block;width:5rem;height:.1rem;background-color:#fff}

@media only screen and (max-width: 640px) {
	.counters{padding:4rem 0 4.2rem}
	.counters .counter_item{width:100%;margin:0 0 2rem}
	.counters .counter_item:last-child{margin:0}
	.counters .counter_item:last-child p:last-of-type{margin:1rem 0 0}
	.counters .counter_item p{font-size:1.8rem}
	.counters .counter_item p.number{font-size:4rem;margin:0 0 3.5rem}
	.counters .counter_item p.number::after{bottom:-1.1rem;width:7.5rem}
}
SCSS
.counters {
	background-color: #274684;
	padding: 3.4rem 0 3.1rem;
	
	.counter_wrap {
		display: flex;
		flex-wrap: wrap;
		font-size: 0;
		margin: 0 -1.5rem;
	}
	
	.counter_item {
		display: inline-block;
		vertical-align: top;
		width: calc(100% / 2 - 3.01rem);
		margin: 0 1.5rem;
		
		p {
			font-size: 2.2rem;
			line-height: 1.16;
			font-weight: 400;
			text-transform: uppercase;
			color: #fff;
			text-align: center;
			
			&.number {
				font-size: 5rem;
				font-weight: 400;
				margin: 0 0 4.6rem;
				position: relative;
				
				&::after {
					content: '';
					position: absolute;
					bottom: -2.1rem;
					left: 50%;
					transform: translate(-50%, 0);
					display: block;
					width: 5rem;
					height: .1rem;
					background-color: #fff;
				}
			}
		}
	}
}

@media only screen and (max-width: 640px) {
	.counters {
		padding: 4rem 0 4.2rem;
		
		.counter_item {
			width: 100%;
			margin: 0 0 2rem;
			
			&:last-child {
				margin: 0;
				
				p:last-of-type {
					margin: 1rem 0 0;
				}
			}
			
			p {
				&.number {
					font-size: 4rem;
					margin: 0 0 3.5rem;
					
					&::after {
						bottom: -1.1rem;
						width: 7.5rem;
					}
				}
				
				font-size: 1.8rem;
			}
		}
	}
}
JavaScript
$('.counter').countUp({
	delay: 10,
	time: 1000
});