Statistieken | Notion

Statistieken HTML

Voeg de onderstaande code toe onder het portfolio gedeelte in het index.html bestand.

<div id="stats" class="statsSection section">
		<div class="container">
			<div class="row">
				<div class="col-md-3 col-sm-6">
					<div class="squareItem">
						<div class="squareInnerContainer">
							<div class="squareIcon">
								<i class="fa fa-clock"></i>
							</div>
							<div class="squareContent">
                                <h2 class="counter">4</h2>
                                <h3>Jaar ervaring</h3>
                            </div>
						</div>
					</div>
				</div>

				<div class="col-md-3 col-sm-6">
					<div class="squareItem">
						<div class="squareInnerContainer">
							<div class="squareIcon">
								<i class="fa fa-calendar"></i>
							</div>
							<div class="squareContent">
                                <h2 class="counter">37</h2>
                                <h3>Klanten</h3>
                            </div>
						</div>
					</div>
				</div>

				<div class="col-md-3 col-sm-6">
					<div class="squareItem">
						<div class="squareInnerContainer">
							<div class="squareIcon">
								<i class="fa fa-bolt"></i>
							</div>
							<div class="squareContent">
                                <h2 class="counter">28</h2>
                                <h3>Logo's</h3>
                            </div>
						</div>
					</div>
				</div>

				<div class="col-md-3 col-sm-6">
					<div class="squareItem">
						<div class="squareInnerContainer">
							<div class="squareIcon">
								<i class="fa fa-cloud"></i>
							</div>
							<div class="squareContent">
                                <h2 class="counter">58</h2>
                                <h3>Websites</h3>
                            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

Statistieken CSS

Voeg de onderstaande CSS styling toe aan het style.css bestand.

css/style.css

.squareItem {
	margin-top: 30px;
	position: relative;
}

.squareInnerContainer {
	position: relative;
	padding: 50px 15px 35px;
	text-align: center;
	border: 2px solid #444;
	border-top: none;
}

.squareInnerContainer:before,
.squareInnerContainer:after {
	content: '';
	position: absolute;
	top: 0px;
	width: 30%;
	border-bottom: 2px solid #444;
}

.squareInnerContainer:before {
	right: 0px;
}

.squareInnerContainer:after {
	left: 0px
}

.squareContent h2 {
	font-size: 56px;
	margin-bottom: 10px;
	font-weight: 400;
	color: #e74c3c;
}

.squareContent h3 {
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

.squareIcon {
	position: absolute;
	left: 50%;
	top: -30px;
	width: 40%;
	height: 60px;
	font-size: 45px;
	margin-left: -20%;
	color: #444;
}

FontAwesome - iconen

Op de website van FontAwesome is het mogelijk om super veel verschillende iconen gemakkelijk in een website te integreren.

Link: fontawesome.com

Maak een account en kopieer de gekregen kit (JS bestand zie code hieronder).

<script src="[<https://kit.fontawesome.com/*NUMMER*.js>](<https://kit.fontawesome.com/*NUMMER*.js>)" crossorigin="anonymous"></script>

Plak de de script tag tussen de <head> </head> tags van het index.html bestand.

Hierna zullen de iconen in het HTML bestand fa fa-clock, fa fa-calendar, fa fa-bolt, fa fa-cloud zichtbaar worden.

Javascript - Statistieken

Voor de counter is er gebruik gemaakt van CountUp JS.

Download CountUp van Github: https://inorganik.github.io/countUp.js/