Video presentation of Nasa

by JEWEL3G

HTML

<!DOCTYPE html>
<html>
<head>
	<title>wildFire || Nasa 2018 </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

	<header>

	<div><h3 id="main-heading">NASA Space App Chalange 2018</h3></div>
	</header>
	<div>
	<h3 id="subject-heading">Spot That Fire!<br> Team: Power Explorers</h3>
	</div>
	<div id="map-table-div">
	<div>

    <div id="tb"><strong> Data Table </strong></div>
	<table border="1" id="data-table">

		<thead id="t-head">
		<tr>
		<td> <strong> Device Id </strong></td>
		<td> <strong>device location </strong></td>
		<td> <strong>Curret Status </strong></td>
		</tr>
		</thead>

		<tbody id="table-body">
			

		</tbody>	

	</table>
	</div>

	<div >

		<h2 id="map-head">Map View</h2>

		<div id="map"> </div>

		<script >
			function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: {lat: 23.8145218, lng:  90.4247211}
        });

        setMarkers(map);
      }
      var beaches = [
        ['Bondi Beach', 23.8145218, 90.4247211, 4]
        //, ['Coogee Beach', -33.923036, 151.259052, 5],
        //['Cronulla Beach', -34.028249, 151.157507, 3],
        //['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        //['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      function setMarkers(map) {
      	var image = {
          url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
          size: new google.maps.Size(20, 32),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(0, 32)

        };
        var shape = {
          coords: [1, 1, 1, 20, 18, 20, 18, 1],
          type: 'poly'
        };
        var infowindow = new google.maps.InfoWindow();

        for (var i = 0; i < beaches.length; i++) {
          var beach = beaches[i];
          var marker = new google.maps.Marker({
            position: {lat: beach[1], lng: beach[2]},
            map: map,
...

CSS

body{
	background: #EBEBEC;
}
h2{
	text-align:center;
}
footer{
	text-align: center;
	width: 100%;
	height: 60px;
	background: gray;
	margin: 10px;
}
#ft{
	padding-top: 10px;
}
#map-head{
	text-orientation: underline;
}
#tb{
	margin: 0 left;
	padding: 20px;
}
#map{
	text-align: center;
	height: 500px;
	width: 90%;
	margin: 0 center;
}
#main-heading{
	color: #FDFEFE;
	text-align: center;
	background: #0324FA;
	height: 50px;
	margin: 2px;
	padding: 5px;
	padding-top: 20px;
	border: 6px groove #EDBB99;
}
#data-table{
	text-align: center;
	width: 500px;
}
#subject-heading{
	color: #FDFEFE;
	text-align: center;
	background: #0324FA;
	height: 40px;
	padding: 5px;
	padding-top: 20px;
	border: 6px groove #EDBB99;
}
th{
	width: 180px;
	border: 2px solid gray;
}
table {
	margin: 0 left;
}