/doZBGb.markdown

## doZBGb.markdown

      
    Raw
  

              doZBGb.markdown
            
          
    doZBGb

A Pen by Captain Anonymous on CodePen.
License.

  
## index.html

<html>
<head>
<meta charset="UTF-8">
<link href="index.css" rel="stylesheet" type="text/css">
<title>Tourism of the lake Balaton</title>


<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: 46.8842145, lng: 17.7066432},
          zoom: 10
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

		var marker = new google.maps.Marker({
			position: { lat: 46.786931, lng: 17.192917},
			map: map,
			title: 'Hévíz'
			});
		var infowindow = new google.maps.InfoWindow({
			content:"Hévíz"
			});

		google.maps.event.addListener(marker, 'click', function() {
			infowindow2.close();
			infowindow1.close();
			infowindow3.close();
			infowindow4.close();
			infowindow5.close();
			infowindow6.close();
			infowindow.open(map,marker);
		});

		var marker1 = new google.maps.Marker({
			position: { lat: 46.910246, lng: 18.048979},
			map: map,
			title: 'Siófok'
			});
		var infowindow1 = new google.maps.InfoWindow({
			content:"Siófok"
			});
		google.maps.event.addListener(marker1, 'click', function() {
			infowindow2.close();
			infowindow.close();
			infowindow3.close();
			infowindow4.close();
			infowindow5.close();
			infowindow6.close();
			infowindow1.open(map,marker1);
		});

		var marker2 = new google.maps.Marker({
			position: { lat: 46.914450, lng: 17.887270},
			map: map,
			title: 'Tihany'
			});
			var infowindow2 = new google.maps.InfoWindow({
			content:"Tihany"
			});
		google.maps.event.addListener(marker2, 'click', function() {
			infowindow.close();
			infowindow1.close();
			infowindow3.close();
			infowindow4.close();
			infowindow5.close();
			infowindow6.close();
			infowindow2.open(map,marker2);
		});

		var marker3 = new google.maps.Marker({
			position: { lat: 46.954918, lng: 17.892286},
			map: map,
			title: 'Balatonfüred'
			});
			var infowindow3 = new google.maps.InfoWindow({
			content:"Balatonfüred"
			});
		google.maps.event.addListener(marker3, 'click', function() {
			infowindow.close();
			infowindow1.close();
			infowindow2.close();
			infowindow4.close();
			infowindow5.close();
			infowindow6.close();
			infowindow3.open(map,marker3);
		});

		var marker4 = new google.maps.Marker({
			position: { lat: 46.770645, lng: 17.242984},
			map: map,
			title: 'Keszthely'
			});
			var infowindow4 = new google.maps.InfoWindow({
			content:"Keszthely"
			});
		google.maps.event.addListener(marker4, 'click', function() {
			infowindow.close();
			infowindow1.close();
			infowindow2.close();
			infowindow3.close();
			infowindow5.close();
			infowindow6.close();
			infowindow4.open(map,marker4);
		});

		var marker5 = new google.maps.Marker({
			position: { lat: 46.770645, lng: 17.242984},
			map: map,
			title: 'Keszthely'
			});
			var infowindow5 = new google.maps.InfoWindow({
			content:"Keszthely"
			});
		google.maps.event.addListener(marker5, 'click', function() {
			infowindow.close();
			infowindow1.close();
			infowindow2.close();
			infowindow3.close();
			infowindow4.close();
			infowindow6.close();
			infowindow5.open(map,marker5);
		});

		var marker6 = new google.maps.Marker({
			position: { lat: 46.804346, lng: 17.493130},
			map: map,
			title: 'Badacsony'
			});
			var infowindow6 = new google.maps.InfoWindow({
			content:"Badacsony"
			});
		google.maps.event.addListener(marker6, 'click', function() {
			infowindow.close();
			infowindow1.close();
			infowindow2.close();
			infowindow3.close();
			infowindow4.close();
			infowindow5.close();
			infowindow6.open(map,marker6);
		});
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

	<header >
	<img src="balaton_2.jpg" style="max-width:100%;height:auto;/>
	<h1 id="title">Lake Balaton</h1>
	</header>

</head>

<body bgcolor="#E6E6FA">


<div id="hmenu">
<ul>
  <li><a href="index.html">Main</a></li>
  <li><a href="come.html">Infos & Sights</a></li>
  <li><a href="todo.html">Things to do</a></li>
  <li><a href="arrival.html">Arrival</a></li>
</ul>
</div>

<div class="section group">
	<div class="col span_1_of_2">
	<h2>Basic informations</h2>

	  		<p>Lake Balaton is a freshwater lake in the Transdanubian region of Hungary. It is the largest lake in Central Europe, and one of
			the region's foremost tourist destinations. The Zala River provides the largest inflow of water to the lake, and the canalised Sió
			is the only outflow.
			The mountainous region of the northern shore is known both for its historic character and as a major wine region, while the flat
			southern shore is known for its resort towns. Balatonfüred and Hévíz developed early as resorts for the wealthy, but it was not
			until the late 19th century when landowners, ruined by Phylloxera attacking their grape vines, began building summer homes to rent
			out to the emerging middle classes.</p>
	</div>
	<div class="col span_1_of_2">
		<div id="map-canvas"></div>
	This is column 2
	</div>
</div>

</body>

</html>

## style.css
@charset "UTF-8";
<meta name="viewport" content="width=device-width, initial-scale=1">


header{
margin: 0 0 24px 0;
}

#title{
content:3px;
text-align: center;
}

div#hmenu {
   margin: 0;
   padding: .3em 0 .3em 0;
   background: ;
   width: 100%;
   text-align: center;
}

div#hmenu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

div#hmenu ul li {
   margin: 0;
   padding: 0;
   display: inline;
}

div#hmenu ul a:link{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: big;
   color: #004415;
}

div#hmenu ul a:active{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: big;
   color: #227755;
}

div#hmenu ul a:hover{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: big;
   color: #113a29;
   background-color: ;
}
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}
#map-canvas {
		height: 100%;
		width: 100%;
		}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col {
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2, .map-canvas { width: 100%; }
}

	<html>
	<head>
	<meta charset="UTF-8">
	<link href="index.css" rel="stylesheet" type="text/css">
	<title>Tourism of the lake Balaton</title>


	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js">
	</script>
	<script type="text/javascript">
	function initialize() {
	var mapOptions = {
	center: { lat: 46.8842145, lng: 17.7066432},
	zoom: 10
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	var marker = new google.maps.Marker({
	position: { lat: 46.786931, lng: 17.192917},
	map: map,
	title: 'Hévíz'
	});
	var infowindow = new google.maps.InfoWindow({
	content:"Hévíz"
	});

	google.maps.event.addListener(marker, 'click', function() {
	infowindow2.close();
	infowindow1.close();
	infowindow3.close();
	infowindow4.close();
	infowindow5.close();
	infowindow6.close();
	infowindow.open(map,marker);
	});

	var marker1 = new google.maps.Marker({
	position: { lat: 46.910246, lng: 18.048979},
	map: map,
	title: 'Siófok'
	});
	var infowindow1 = new google.maps.InfoWindow({
	content:"Siófok"
	});
	google.maps.event.addListener(marker1, 'click', function() {
	infowindow2.close();
	infowindow.close();
	infowindow3.close();
	infowindow4.close();
	infowindow5.close();
	infowindow6.close();
	infowindow1.open(map,marker1);
	});

	var marker2 = new google.maps.Marker({
	position: { lat: 46.914450, lng: 17.887270},
	map: map,
	title: 'Tihany'
	});
	var infowindow2 = new google.maps.InfoWindow({
	content:"Tihany"
	});
	google.maps.event.addListener(marker2, 'click', function() {
	infowindow.close();
	infowindow1.close();
	infowindow3.close();
	infowindow4.close();
	infowindow5.close();
	infowindow6.close();
	infowindow2.open(map,marker2);
	});

	var marker3 = new google.maps.Marker({
	position: { lat: 46.954918, lng: 17.892286},
	map: map,
	title: 'Balatonfüred'
	});
	var infowindow3 = new google.maps.InfoWindow({
	content:"Balatonfüred"
	});
	google.maps.event.addListener(marker3, 'click', function() {
	infowindow.close();
	infowindow1.close();
	infowindow2.close();
	infowindow4.close();
	infowindow5.close();
	infowindow6.close();
	infowindow3.open(map,marker3);
	});

	var marker4 = new google.maps.Marker({
	position: { lat: 46.770645, lng: 17.242984},
	map: map,
	title: 'Keszthely'
	});
	var infowindow4 = new google.maps.InfoWindow({
	content:"Keszthely"
	});
	google.maps.event.addListener(marker4, 'click', function() {
	infowindow.close();
	infowindow1.close();
	infowindow2.close();
	infowindow3.close();
	infowindow5.close();
	infowindow6.close();
	infowindow4.open(map,marker4);
	});

	var marker5 = new google.maps.Marker({
	position: { lat: 46.770645, lng: 17.242984},
	map: map,
	title: 'Keszthely'
	});
	var infowindow5 = new google.maps.InfoWindow({
	content:"Keszthely"
	});
	google.maps.event.addListener(marker5, 'click', function() {
	infowindow.close();
	infowindow1.close();
	infowindow2.close();
	infowindow3.close();
	infowindow4.close();
	infowindow6.close();
	infowindow5.open(map,marker5);
	});

	var marker6 = new google.maps.Marker({
	position: { lat: 46.804346, lng: 17.493130},
	map: map,
	title: 'Badacsony'
	});
	var infowindow6 = new google.maps.InfoWindow({
	content:"Badacsony"
	});
	google.maps.event.addListener(marker6, 'click', function() {
	infowindow.close();
	infowindow1.close();
	infowindow2.close();
	infowindow3.close();
	infowindow4.close();
	infowindow5.close();
	infowindow6.open(map,marker6);
	});
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>

	<header >
	<img src="balaton_2.jpg" style="max-width:100%;height:auto;/>
	<h1 id="title">Lake Balaton</h1>
	</header>

	</head>

	<body bgcolor="#E6E6FA">


	<div id="hmenu">
	<ul>
	<li><a href="index.html">Main</a></li>
	<li><a href="come.html">Infos & Sights</a></li>
	<li><a href="todo.html">Things to do</a></li>
	<li><a href="arrival.html">Arrival</a></li>
	</ul>
	</div>

	<div class="section group">
	<div class="col span_1_of_2">
	<h2>Basic informations</h2>

	<p>Lake Balaton is a freshwater lake in the Transdanubian region of Hungary. It is the largest lake in Central Europe, and one of
	the region's foremost tourist destinations. The Zala River provides the largest inflow of water to the lake, and the canalised Sió
	is the only outflow.
	The mountainous region of the northern shore is known both for its historic character and as a major wine region, while the flat
	southern shore is known for its resort towns. Balatonfüred and Hévíz developed early as resorts for the wealthy, but it was not
	until the late 19th century when landowners, ruined by Phylloxera attacking their grape vines, began building summer homes to rent
	out to the emerging middle classes.</p>
	</div>
	<div class="col span_1_of_2">
	<div id="map-canvas"></div>
	This is column 2
	</div>
	</div>

	</body>

	</html>
	@charset "UTF-8";
	<meta name="viewport" content="width=device-width, initial-scale=1">


	header{
	margin: 0 0 24px 0;
	}

	#title{
	content:3px;
	text-align: center;
	}

	div#hmenu {
	margin: 0;
	padding: .3em 0 .3em 0;
	background: ;
	width: 100%;
	text-align: center;
	}

	div#hmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	div#hmenu ul li {
	margin: 0;
	padding: 0;
	display: inline;
	}

	div#hmenu ul a:link{
	margin: 0;
	padding: .3em .4em .3em .4em;
	text-decoration: none;
	font-weight: bold;
	font-size: big;
	color: #004415;
	}

	div#hmenu ul a:active{
	margin: 0;
	padding: .3em .4em .3em .4em;
	text-decoration: none;
	font-weight: bold;
	font-size: big;
	color: #227755;
	}

	div#hmenu ul a:hover{
	margin: 0;
	padding: .3em .4em .3em .4em;
	text-decoration: none;
	font-weight: bold;
	font-size: big;
	color: #113a29;
	background-color: ;
	}
	/* SECTIONS */
	.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	}

	/* COLUMN SETUP */
	.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	}
	.col:first-child { margin-left: 0; }

	/* GROUPING */
	.group:before,
	.group:after { content:""; display:table; }
	.group:after { clear:both;}
	.group { zoom:1; /* For IE 6/7 */ }
	/* GRID OF TWO */
	.span_2_of_2 {
	width: 100%;
	}
	.span_1_of_2 {
	width: 49.2%;
	}
	#map-canvas {
	height: 100%;
	width: 100%;
	}

	/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

	@media only screen and (max-width: 480px) {
	.col {
	margin: 1% 0 1% 0%;
	}
	}

	@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2, .map-canvas { width: 100%; }
	}