<section style="padding-bottom: 2rem;">
	<div class="container">
		<div class="row">
			<div class="col">
				<div class="card text-white bg-dark">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card text-white bg-dark">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card text-white bg-dark">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="card text-white bg-dark">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					</div>
				</div>
			</div>
		</div> 
	</div>
</section>
<section style="padding-bottom: 2rem;">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<div class="card bg-light-transparent">
					<div class="card-header bg-white">
						<h5 class="card-title">
							Company
						</h5>
					</div>
					<div class="card-body">
						<div class="card bg-light no-shadow">
							<div class="card-body">
								<canvas id="myChart"></canvas>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="card bg-light-transparent">
					<div class="card-header bg-white">
						<h5 class="card-title">
							Users
						</h5>
					</div>
					<div class="card-body">
						<div class="card bg-light no-shadow">
							<div class="card-body">
								<canvas id="myChart2"></canvas>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="bg-transparent" style="padding-bottom: 2rem;">
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<div class="card bg-light-transparent">
					<div class="card-header bg-white">
						<h5 class="card-title">Announcement</h5>
					</div>
					<div class="card-body">
						<div class="card bg-light no-shadow">
							<div class="card-body">
								<div class="container-fluid">
									<div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel">
										<div class="carousel-inner">
											<div class="carousel-item active">
												<div class="container">
													<p class="logo-font">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex nam error quo est cumque cum at eum quas iure ipsa, fuga id dolorum ipsam veritatis beatae voluptatum aliquam quam mollitia.</p>
												</div>
											</div>
											<div class="carousel-item">
												<div class="container">
													<p class="logo-font">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex nam error quo est cumque cum at eum quas iure ipsa, fuga id dolorum ipsam veritatis beatae voluptatum aliquam quam mollitia.</p>
												</div>
											</div>
											<div class="carousel-item">
												<div class="container">
													<p class="logo-font">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex nam error quo est cumque cum at eum quas iure ipsa, fuga id dolorum ipsam veritatis beatae voluptatum aliquam quam mollitia.</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="card bg-light-transparent">
					<div class="card-header bg-white">
						<h5 class="card-title">Calendar</h5>
					</div>
					<div class="card-body">
						<div class="card bg-light no-shadow">
							<div class="card-body">
								<div class="calendar"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<script>
	var ctx = document.getElementById("myChart").getContext('2d');
	var myChart = new Chart(ctx, {
		type: 'bar',
		data: {
			labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
			datasets: [{
				label: '# of Votes',
				data: [12, 19, 3, 5, 2, 3],
				backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
					'rgba(54, 162, 235, 0.2)',
					'rgba(255, 206, 86, 0.2)',
					'rgba(75, 192, 192, 0.2)',
					'rgba(153, 102, 255, 0.2)',
					'rgba(255, 159, 64, 0.2)'
				],
				borderColor: [
					'rgba(255,99,132,1)',
					'rgba(54, 162, 235, 1)',
					'rgba(255, 206, 86, 1)',
					'rgba(75, 192, 192, 1)',
					'rgba(153, 102, 255, 1)',
					'rgba(255, 159, 64, 1)'
				],
				borderWidth: 1
			}]
		},
		options: {
			scales: {
				yAxes: [{
					ticks: {
						beginAtZero:true
					}
				}]
			}
		}
	});

	var ctx2 = document.getElementById("myChart2").getContext('2d');
	var myChart = new Chart(ctx2, {
		type: 'bar',
		data: {
			labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
			datasets: [{
				label: '# of Votes',
				data: [12, 19, 3, 5, 2, 3],
				backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
					'rgba(54, 162, 235, 0.2)',
					'rgba(255, 206, 86, 0.2)',
					'rgba(75, 192, 192, 0.2)',
					'rgba(153, 102, 255, 0.2)',
					'rgba(255, 159, 64, 0.2)'
				],
				borderColor: [
					'rgba(255,99,132,1)',
					'rgba(54, 162, 235, 1)',
					'rgba(255, 206, 86, 1)',
					'rgba(75, 192, 192, 1)',
					'rgba(153, 102, 255, 1)',
					'rgba(255, 159, 64, 1)'
				],
				borderWidth: 1
			}]
		},
		options: {
			scales: {
				yAxes: [{
					ticks: {
						beginAtZero:true
					}
				}]
			}
		}
	});
</script>