<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/metro-bootstrap.css" rel="stylesheet">
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
    <link href="css/iconFont.css" rel="stylesheet">
	<link href="css/docs.css" rel="stylesheet">

    <!-- Load JavaScript Libraries -->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
    <script src="js/jquery/jquery.mousewheel.js"></script>

    <!-- Metro UI CSS JavaScript plugins -->
    <script src="js/load-metro.js"></script>
	<script src="js/docs.js"></script>
    
    <style>
	</style>
	
<title> TB SILALAHI CENTER</title>

</head>

<body class="metro">
	<header class="bg-darkCobalt" data-load="atasan.php"></header>
	<br />
    <div class="container grid">
		<div class="border padding15">
        <div class="row">
			<div class="span7">
				<legend>Galeri Acara TB SILALAHI CENTER</legend>
				<div class="carousel" id="imgSlide">
					<div class="slide">
						<img src="images/acara/acara.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/acara/999.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/acara/acara2.jpg" class="cover1"/>
					</div>
					<div class="slide">
						<img src="images/acara/acara4.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/acara/acarafestival.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/acara/budaya.jpg" class="cover1" />
					</div>
				</div>
			</div>
			<div class="span7">
				<legend>Galeri Koleksi Museum TB SILALAHI</legend>
				<div class="carousel" id="imgSlide1">
					<div class="slide">
						<img src="images/museumtb/halaman.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumtb/1.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumtb/isimuseum1.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumtb/motor.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumtb/perpus.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumtb/paktb.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumtb/1.jpg" class="cover1" />
					</div>
				</div>
			</div>
        </div>
		</div>
		
		<div class="border padding15">
        <div class="row">
			<div class="span7">
				<legend>Galeri Pengunjung</legend>
				<div class="carousel" id="imgSlide2">
					<div class="slide">
						<img src="images/pengunjung/1.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/pengunjung/2.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/pengunjung/3.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/pengunjung/4.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/pengunjung/5.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/pengunjung/6.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/pengunjung/7.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/pengunjung/8.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/pengunjung/9.jpg" class="cover1" />
					</div>

				</div>
			</div>
			<div class="span7">
				<legend>Galeri Museum Batak</legend>
				<div class="carousel" id="imgSlide3">
					<div class="slide">
						<img src="images/museumbatak/1.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/2.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/3.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/4.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/5.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/6.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/7.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/8.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/9.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/10.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/11.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/12.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/13.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/14.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/15.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/16.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/17.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/18.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/19.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/20.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/21.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/22.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/23.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/24.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/25.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/26.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/27.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/28.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/29.jpg" class="cover1" />
					</div>
					<div class="slide">
						<img src="images/museumbatak/30.jpg" class="cover1" />
					</div>
					
				</div>
			</div>
        </div>
		</div>
	</div>
    <footer class="dark" data-load="bawahan.html"></footer>
	
	<script>
		$(function(){
			$("#imgSlide").carousel({
				effect: 'slide',
				period: 3000,
				markers: {
					show: true,
					type: 'default',
					position: 'bottom-right'
				}
			});
			$("#imgSlide1").carousel({
				effect: 'fade',
				period: 3000,
				markers: {
					show: true,
					type: 'default',
					position: 'bottom-right'
				}
			});
			$("#imgSlide2").carousel({
				effect: 'slowdown',
				period: 3000,
				markers: {
					show: true,
					type: 'default',
					position: 'bottom-right'
				}
			});
			$("#imgSlide3").carousel({
				effect: 'switch',
				period: 3000,
				markers: {
					show: true,
					type: 'default',
					position: 'bottom-right'
				}
			});
			$("#imgSlide4").carousel({
				effect: 'switch',
				period: 3000,
				markers: {
					show: true,
					type: 'default',
					position: 'bottom-right'
				}
			});
		})
	</script>
</body>
</html>
