<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet">


<div class="centerer">
	<div class="window">
		<div class="flex-cont">
			<h2 class="title">Activity on <span class="site-name">Showcase</span></h2>
			<div class="columns">
				<div class="name-column">
					<div class="name">
						<ul>
							<li>Users</li>
							<li>Pageviews</li>
							<li>New sessions</li>
							<li>Bounce rate</li>
						</ul>
					</div>
				</div>

				<div class="bar-column">
					<div class="bar u">
						<div class="fill fill-u">
						</div>
					</div>
					<div class="c-bar-p">
						<div class="bar p">
							<div class="fill fill-p">
							</div>
						</div>
						</div>
					<div class="c-bar-ns">
						<div class="bar ns">
							<div class="fill fill-ns">
							</div>
						</div>
					</div>
					<div class="c-bar-br">
						<div class="bar br">
							<div class="fill fill-br">
							</div>
						</div>
					</div>
				</div>

				<div class="num-column">
					<div class="number">
						<ul>
							<li>17,387</li>
							<li>32,581</li>
							<li>8,132</li>
							<li>77%</li>
						</ul>	
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

body {
	background: #2B2C31;
}

.centerer {
	top: 50%;
	left: 50%;
	position: absolute;
	margin-top: -140px;
}


.window {
	display: flex;
	justify-content: center;
	font-size: 18px;
	font-family: 'Quicksand', sans-serif;
}

.flex-cont {
	height: 280px;
	width: 500px;
	position: absolute;
}

.title{
	line-height: 20px;
	position: absolute;
	font-weight: 300;
	color: #DB728D;
}

.site-name {
	font-weight: 400;
	color: #FFA8D2;
	padding: 5px 12px 5px 12px;
	background-color: #333333;
	border-radius: 30px;
	box-shadow: 0px 0px 50px #111111;
	margin-left: 3px;
}

.columns {
	margin: 0px;
	top: 60px;
	position: absolute;
}

.name-column {
	position: absolute;
	white-space: nowrap;
}

.name {
	color: #AAAAAF;
	line-height: 50px;
	font-weight: 400;
}

.name ul {
	list-style-type: none;
	padding: 0;
}

.bar-column {
	left: 140px;
	top: 38px;
	position: absolute;
	display: inline-block;
}

.bar {
	height: 8px;
	width: 260px;
	border-radius: 4px;
	background-color: #484B53;
	position: absolute;
}

.fill {
	height: 8px;
	border-radius: 4px;
	background-color: #FF8095;
	box-shadow: 0px 0px 30px #FF2AA6;
	position: absolute;
}

.fill-u {
	width: 180px;
	animation-name: filling-u;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: initial;
}

@keyframes filling-u {
	0% {
		box-shadow: 0px 0px 0px #FF2AA6;
		width: 0px;
	}
	100% {
		box-shadow: 0px 0px 30px #FF2AA6;
		width: 180px;
	}
}

.c-bar-p {
	margin-top: 50px;
}

.fill-p {
	width: 198px;
	animation-name: filling-p;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: initial;
}

@keyframes filling-p {
	0% {
		box-shadow: 0px 0px 0px #FF2AA6;
		width: 0px;
	}
	100% {
		box-shadow: 0px 0px 30px #FF2AA6;
		width: 198px;
	}
}
	
.c-bar-ns {
	margin-top: 100px;
}

.fill-ns {
	width: 130px;
	animation-name: filling-ns;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: initial;
}

@keyframes filling-ns {
	0% {
		box-shadow: 0px 0px 0px #FF2AA6;
		width: 0px;
	}
	100% {
		box-shadow: 0px 0px 30px #FF2AA6;
		width: 130px;
	}
}

.c-bar-br {
	margin-top: 150px;
}

.fill-br {
	width: 190px;
	animation-name: filling-br;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: initial;
}

@keyframes filling-br {
	0% {
		box-shadow: 0px 0px 0px #FF2AA6;
		width: 0px;
	}
	100% {
		box-shadow: 0px 0px 30px #FF2AA6;
		width: 190px;
	}
}

.num-column {
	left: 430px;
	position: absolute;
}

.number {
	color: #727681;
	line-height: 50px;
	font-weight: 300;
	animation-name: fade-in;
	animation-duration: 2s;
	animation-delay: 0s;
	animation-iteration-count: initial;
}

.number ul {
	list-style-type: none;
	padding: 0;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}