wargabasdat · priskar · Jul 8, 2017 · Jul 8, 2017 · Jul 8, 2017 · Jul 10, 2017
diff --git a/README.md b/README.md
@@ -1,3 +1,6 @@
-# Seleksi Warga Basdat 2017
+Tugas Seleksi Warga Basdat
 
-Repository ini digunakan untuk pengumpulan tugas. Di awal pengerjaan, fork repository ini. Ketika akan mengumpulkan, buat pull request dengan nama `[TUGAS_SELEKSI_2_<NIM 1>_<NIM 2>]`. 
+Kelompok DV1
+
+Francisco Kenandi (13515140)
+Priska Reysa (18215001)
diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
diff --git a/css/media.css b/css/media.css
diff --git a/css/theme.css b/css/theme.css
diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf
diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot
diff --git a/fonts/fontawesome-webfont.svg b/fonts/fontawesome-webfont.svg
diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf
diff --git a/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff
diff --git a/fonts/fontawesome-webfont.woff2 b/fonts/fontawesome-webfont.woff2
diff --git a/img/Banner-bg.jpg b/img/Banner-bg.jpg
diff --git a/img/Contact-bg.jpg b/img/Contact-bg.jpg
diff --git a/img/Develop-hover-icn.png b/img/Develop-hover-icn.png
diff --git a/img/Development-bg.jpg b/img/Development-bg.jpg
diff --git a/img/Development-cn.png b/img/Development-cn.png
diff --git a/img/Get-bg.jpg b/img/Get-bg.jpg
diff --git a/img/Services-bg.jpg b/img/Services-bg.jpg
diff --git a/img/Shadow-img.png b/img/Shadow-img.png
diff --git a/img/Slider-img1.jpg b/img/Slider-img1.jpg
diff --git a/img/Slider-img2.jpg b/img/Slider-img2.jpg
diff --git a/img/about-shadow.png b/img/about-shadow.png
diff --git a/img/concept-bg.jpg b/img/concept-bg.jpg
diff --git a/img/concept-hover-icn.png b/img/concept-hover-icn.png
diff --git a/img/concept-icn.png b/img/concept-icn.png
diff --git a/img/desgin-bg.jpg b/img/desgin-bg.jpg
diff --git a/img/desgin-hover-icn.png b/img/desgin-hover-icn.png
diff --git a/img/desgin-icn.png b/img/desgin-icn.png
diff --git a/img/divider-black.png b/img/divider-black.png
diff --git a/img/divider.png b/img/divider.png
diff --git a/img/facebook-icn.png b/img/facebook-icn.png
diff --git a/img/google-plus-icn.png b/img/google-plus-icn.png
diff --git a/img/location-icn.png b/img/location-icn.png
diff --git a/img/mail-icn.png b/img/mail-icn.png
diff --git a/img/map.jpg b/img/map.jpg
diff --git a/img/next-arrow.png b/img/next-arrow.png
diff --git a/img/phone-icn.png b/img/phone-icn.png
diff --git a/img/prev-arrow.png b/img/prev-arrow.png
diff --git a/img/systam-bg.jpg b/img/systam-bg.jpg
diff --git a/img/systam-hover-icn.png b/img/systam-hover-icn.png
diff --git a/img/systam-icn.png b/img/systam-icn.png
diff --git a/img/twitter-icn.png b/img/twitter-icn.png
diff --git a/img/using-internet1.jpg b/img/using-internet1.jpg
diff --git a/img/using-internet2.jpg b/img/using-internet2.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,62 @@
+
+        .container {
+            width : 100%;
+        }
+
+        /*header {
+            position: absolute;
+            right:0;
+            top:0;
+            left:0;
+            padding: 1em;
+            color: white;
+            background-color: black;
+            clear:left;
+            text-align:center;
+        }*/
+
+        footer {
+            position: absolute;
+            right:0;
+            bottom:0;
+            left:0;
+            padding: 1rem;
+            color: white;
+            background-color: black;
+            clear:left;
+            text-align:center;
+        }
+
+        .topnav {
+            background-color: #333;
+            overflow: hidden;
+        }
+
+        .topnav a {
+            float:left;
+            display : block;
+            color:#f2f2f2;
+            text-align: center;
+            padding: 14px 16px;
+            text-decoration: none;
+            font-size: 17px;
+        }
+
+        .topnav a:hover{
+            background :#ddd;
+        }
+
+        .topnav a.active{
+            background-volor: #4CAF50;
+            color:white;
+        }
+        /*nav ul a{
+            text-decoration: none;
+        }
+*/
+        article {
+            /*margin-left : 170px;
+            border-left: 1px solid gray;*/
+            padding: 1em;
+            overflow: hidden;
+        }
diff --git a/index.html b/index.html
@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+
+    <!-- Title Tag -->
+    <title>ASEAN Internet Growth</title>
+<!--
+
+November Template
+
+http://www.templatemo.com/tm-473-november
+
+-->
+    <!-- <<Mobile Viewport Code>> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+    <!-- <<Attched Stylesheets>> -->
+    <link rel="stylesheet" href="css/theme.css" type="text/css" />
+    <link rel="stylesheet" href="css/media.css" type="text/css" />
+    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,600italic,400italic,800,700' rel='stylesheet' type='text/css'>    
+    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <style>
+        .chart-container {
+            background-color: white;
+            margin-top: 5px;
+            margin-bottom: 5px;
+            padding-top: 5px;
+            padding-bottom: 5px;
+            border-radius:8px;
+        }
+    </style>
+
+</head>
+<body>
+
+<!-- \\ Begin Holder \\ -->
+<div class="DesignHolder">
+	<!-- \\ Begin Frame \\ -->
+	<div class="LayoutFrame">
+        <!-- \\ Begin Header \\ -->
+        <header>
+            <div class="Center">
+               <div id="mobile_sec">
+               <div class="mobile"><i class="fa fa-bars"></i><i class="fa fa-times"></i></div>
+                <div class="menumobile">
+                    <!-- \\ Begin Navigation \\ -->
+                    <nav class="Navigation">
+                        <ul>
+                            <li class="active">                                
+                                <a href="#home">Home</a>
+                                <span class="menu-item-bg"></span>
+                            </li>
+                            <li>
+                                <a href="#about">About</a>
+                                <span class="menu-item-bg"></span>
+                            </li>
+                            <li>
+                                <a href="#services">Per Tahun</a>
+                                <span class="menu-item-bg"></span>
+                            </li>
+                            <li>
+                                <a href="#pricing">Peta ASEAN</a>
+                                <span class="menu-item-bg"></span>
+                            </li>
+							<li>
+                                <a href="#contact">Per Negara</a>
+                                <span class="menu-item-bg"></span>
+                            </li>
+                        </ul>
+                    </nav>
+                    <!-- // End Navigation // -->
+				</div>
+				</div>
+                <div class="clear"></div>
+            </div>
+        </header>
+        <!-- // End Header // -->
+        <!-- \\ Begin Banner Section \\ -->
+        <div class="Banner_sec" id="home">
+            <!--  \\ Begin banner Side -->
+            <div class="bannerside">
+	            <div class="Center">
+                    <!--  \\ Begin Left Side -->
+                    <div class="leftside">
+                        <h3>
+							<span>ASEAN Internet Growth</span>
+						</h3>
+						<br> </br>
+						<a href="#about">MORE DETAILS</a>
+                    </div>                        								
+                    <!--  // End Left Side // -->
+                    <!--  \\ Begin Right Side -->
+                    <div class="rightside">
+                    	<ul id="slider">	
+                    		<li>
+                                <div class="Slider">
+                                    <figure><img src="img/using-internet1.jpg" alt="image"></figure>
+                                </div>
+							</li>
+                    		<li>
+                                <div class="Slider">
+                                    <figure><img src="img/using-internet2.jpg" alt="image"></figure>
+                                </div>
+							</li>
+						</ul>                                                            
+            	        <figure><img src="img/Shadow-img.png" alt="image" class="Shadow"></figure>                                                        
+                    </div>
+                    <!--  // End Right Side // -->
+	            </div>
+            </div>
+            <!--  // End banner Side // -->
+            <div class="clear"></div>
+        </div>
+        <!-- // End Banner Section // -->
+         <div class="bgcolor"></div>
+        <!-- \\ Begin Container \\ -->
+        <div id="Container">
+
+            <!-- \\ Begin About Section \\ -->
+            <div class="About_sec" id="about">
+                <div class="Center">            	
+                    <h2>About Us</h2>           
+					<br> </br>
+						<h3>
+							<span>
+								<br> Francisco Kenandi (13515140) </br>
+								<br> Priska Reysa (18215001) </br>
+							</span>
+						</h3>   
+					<br> </br>
+                    <div class="Line"></div>
+					<div class="Description">
+						<h4>
+							<span>
+								<br> Tugas Seleksi Asisten Basdat </br>
+								<br> Kelompok DV1 </br>
+							<span>
+						</h4>
+					</div>			
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- // End About Section // -->
+
+	<!-- \\ Begin Per Tahun Section \\ -->
+        <div class="Services_sec" id="services">
+            <div class="Center">
+                <h2>Pengguna per Tahun</h2>	
+                <!-- MODAL CHARTS -->
+                    <!-- Modal -->
+                      <div class="modal fade" id="Modal2014" role="dialog">
+                        <div class="modal-dialog">
+
+                          <!-- Modal content-->
+                          <div class="modal-content">
+                            <div class="modal-header">
+                              <button type="button" class="close" data-dismiss="modal">&times;</button>
+                              <h4 class="modal-title"></h4>
+                            </div>
+                            <div class="modal-body">
+                              <canvas id="bar-chartcanvas2014"></canvas>
+                            </div>
+                            <div class="modal-footer">
+                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                            </div>
+                          </div>
+
+                        </div>
+                      </div>
+
+                      <div class="modal fade" id="Modal2015" role="dialog">
+                        <div class="modal-dialog">
+
+                          <!-- Modal content-->
+                          <div class="modal-content">
+                            <div class="modal-header">
+                              <button type="button" class="close" data-dismiss="modal">&times;</button>
+                              <h4 class="modal-title"></h4>
+                            </div>
+                            <div class="modal-body">
+                              <canvas id="bar-chartcanvas2015"></canvas>
+                            </div>
+                            <div class="modal-footer">
+                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                            </div>
+                          </div>
+
+                        </div>
+                      </div>
+
+                      <div class="modal fade" id="Modal2016" role="dialog">
+                        <div class="modal-dialog">
+
+                          <!-- Modal content-->
+                          <div class="modal-content">
+                            <div class="modal-header">
+                              <button type="button" class="close" data-dismiss="modal">&times;</button>
+                              <h4 class="modal-title"></h4>
+                            </div>
+                            <div class="modal-body">
+                              <canvas id="bar-chartcanvas2016"></canvas>
+                            </div>
+                            <div class="modal-footer">
+                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                            </div>
+                          </div>
+
+                        </div>
+                      </div>
+                <!-- END MODAL CHARTS -->
+                <!-- \\ Begin Per Tahun Side  \\ -->
+                <div class="Serviceside">
+                    <ul>
+	                    <li class="Development"><a class="btn btn-link btn-lg" data-toggle="modal" data-target="#Modal2014"><h4>2014</h4></a></li>
+    	                <li class="Desdin"><a class="btn btn-link btn-lg" data-toggle="modal" data-target="#Modal2015"><h4>2015</h4></a></li>
+	                    <li class="Concept"><a class="btn btn-link btn-lg" data-toggle="modal" data-target="#Modal2016"><h4>2016</h4></a></li>
+                    </ul>
+                </div>
+                <!-- // End Per Tahun Side // -->
+            </div>                
+        </div>
+        <!-- // End Per Tahun Section // -->
+
+        <!-- \\ Begin Peta ASEAN Section \\ -->
+        <div class="Pricing_sec" id="pricing">
+            <div class="Center">
+                <h2>Peta ASEAN</h2>
+
+
+                <!-- PETA ASEAN SECTION-->
+                    <div id="peta" class="asean">
+                        <!-- Peta ASEAN -->
+                    </div>
+                    <h3 id="nama-negara"></h3>
+                <!-- END  OF PETA ASEAN SECTION -->
+
+            </div>
+        </div>
+        <!-- // End Peta ASEAN Section // -->
+
+		        <!-- \\ Begin Per Negara Section \\ -->
+        <div class="Contact_sec" id="contact">
+            <div class="Contactside">
+                <div class="Center">
+                    <h2>per negara</h2>
+					<br> </br>
+                    <div class="chart-container">
+                    <canvas id="line-chartcanvas-malaysia" class="malaysia"></canvas>
+                    <canvas id="line-chartcanvas-indonesia" class="indonesia" ></canvas>
+                    <canvas id="line-chartcanvas-kamboja" class="kamboja"></canvas>
+                    <canvas id="line-chartcanvas-brunei" class="brunei"></canvas>
+                    <canvas id="line-chartcanvas-laos" class="laos"></canvas>
+                    <canvas id="line-chartcanvas-singapura" class="singapura"></canvas>
+                    <canvas id="line-chartcanvas-vietnam" class="vietnam"></canvas>
+                    <canvas id="line-chartcanvas-thailand" class="thailand"></canvas>
+                    <canvas id="line-chartcanvas-myanmar" class="myanmar"></canvas>
+                    <canvas id="line-chartcanvas-filipina" class="filipina"></canvas>
+
+                    </div>
+
+                </div>  
+
+            </div>
+		</div>
+        <!-- // End Per Negara Section // -->
+
+</div>
+<!-- // End Container // -->
+
+<div id="loader-wrapper">
+<div id="loader"></div>
+
+    <div class="loader-section section-left"></div>
+    <div class="loader-section section-right"></div>
+
+</div>
+
+<!-- <<Attched Javascripts>> -->
+<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
+<script type="text/javascript" src="js/jquery.sudoSlider.min.js"></script>
+<script type="text/javascript" src="js/global.js"></script>
+<script type="text/javascript" src="javascript/Chart.min.js"></script>
+<script type="text/javascript" src="javascript/data-pengguna.js"></script>
+<script type="text/javascript" src="javascript/pengguna-2014.js"></script> 
+<script type="text/javascript" src="javascript/pengguna-2015.js"></script> 
+<script type="text/javascript" src="javascript/pengguna-2016.js"></script> 
+<!-- Latest compiled JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="js/modernizr.js"></script>
+<script src="javascript/raphael-min.js"></script>
+<script src="javascript/peta-asean.js"></script>
+
+<script src="javascript/pengguna-malaysia.js"></script>
+<script src="javascript/pengguna-indonesia.js"></script>
+<script src="javascript/pengguna-myanmar.js"></script>
+<script src="javascript/pengguna-singapura.js"></script>
+<script src="javascript/pengguna-thailand.js"></script>
+<script src="javascript/pengguna-kamboja.js"></script>
+<script src="javascript/pengguna-brunei.js"></script>
+<script src="javascript/pengguna-laos.js"></script>
+<script src="javascript/pengguna-vietnam.js"></script>
+<script src="javascript/pengguna-filipina.js"></script>
+
+</body>
+</html>
diff --git a/javascript/Chart.min.js b/javascript/Chart.min.js