<!DOCTYPE html>
<html lang="pl">

<head>
	<title></title>
	<meta charset="utf-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1" />
	<meta name="author" content="Olek Banasiak" />
	<link rel="stylesheet" href="szablon3.css" type="text/css">
	
	<style>
#main
{
	width:1000px;
	border:solid 3px;
	margin:auto;
}
#header
{
	background-color:#33a5ff;
	height:140px;
}
#nav
{
	float:left;
	background-color:#33a5ff;
	height:36px;
	width:780px;
}
#navd
{
	background-color:#33a5ff;
	float:left;
	height:36px;
	width:220px;
}
#left
{
	background-color:#9c2929;
	height:1000px;
	width:150px;
	float:left;
}
#right
{
	background-color:#db33ff;
	height:1000px;
	width:150px;
	float:left;
}
#mid
{
	background-color:#ff3368;
	
	height:1000px;
	width:700px;
	float:left;
}
#footer
{
	clear:both;
	background-color:#93ff33;
	height:30px;
	text-align:center;
}
h1
{
	float:right;
	margin-right:350px;
	font-family: 'Amiko', sans-serif;
	font-size:50px;
	font-weight:bolder;
	color:black;
}
.button
{
	background-color:#33a5ff;
	width:150px;
	padding:6px;
	color:black;
	font-weight:bolder;
	border:none;
}
.button:hover
{
	border:solid 3px black;
	color:white;
	margin-top:-30px;
	margin-left:50px;
}
a:hover,
a:visited,
a:link,
a:active
#kot
{
	margin:10px;
}
#dane
{
	margin:10px;
	display:none;
}
#zadania
{
	margin:10px;
	display:none;
}

#galeria
{
	margin-left:25%;
	margin-top:50px;
	display:none;
}
p.s
{
	margin-left:25%;
	margin-right:20%;
	
}
</style>

</head>
<body>
<div id="main">
 <div id="header">
  <img src="kot11.png" width="150px" height="150px">
   <h1>Zadanie 3</h1>
 </div>
 <div id="navd">
 </div>
 <div id="nav">
   <button onclick="Kot()" class="button">Kot</button>
   <button onclick="Dane()" class="button">Dane</button>
   <button onclick="Galeria()" class="button">Galeria</button>
   <button onclick="Zadania()" class="button">Zadania</button>
 </div>
 <div id="left">
 <p class="s">Coś</p>
 </div>
 <div id="mid">
 <p id="kot">
Kot domowy – udomowiony gatunek ssaka z rzędu drapieżnych z rodziny kotowatych.
 Koty zostały udomowione około 9500 lat temu i są obecnie najpopularniejszymi
 zwierzętami domowymi na świecie. Gatunek prawdopodobnie pochodzi od kota
 nubijskiego, przy czym w Europie krzyżował się ze żbikiem.</p>
  <p id="Dane">
Nazwa naukowa: Felis catus
Długość życia: 2 – 16 lat (Na wolności)
Okres ciąży: 58 – 67 dnia
Długość snu: 12 – 16 godziny
Masa: 3,6 – 4,5 kg (Dorosły)
Długość: 46 cm (bez ogona)
</p>
<div id="galeria">
<img src="kot1.jpg" width="300" height="260" class="galeria">
<img src="kot2.jpg" width="300" height="260" class="galeria">
<img src="kot3.jpg" width="300" height="260" class="galeria">
</div>
<p id="zadania">
Zadania
</p>
 </div>
 <div id="right">
 <p class="s">Też coś</p>
 </div>
 <div id="footer">
 Olek Banasiak.  Link do <a href="https://pl.wikipedia.org/wiki/Kot_domowy">Wikipedii</a>
 </div>
</div>
<script>
function Kot() {
  document.getElementById("galeria").style.display = "none";
  document.getElementById("dane").style.display = "none";
   document.getElementById("kot").style.display = "inline-block";
  document.getElementById("zadania").style.display = "none";

}
function dane() {
  document.getElementById("galeria").style.display = "none";
  document.getElementById("dane").style.display = "inline-block";
  document.getElementById("kot").style.display = "none";
  document.getElementById("zadania").style.display = "none";
}
function Galeria() {
  document.getElementById("galeria").style.display = "inline-block";
  document.getElementById("dane").style.display = "none";
  document.getElementById("kot").style.display = "none";
  document.getElementById("zadania").style.display = "none";
}
function zadania() {
  document.getElementById("galeria").style.display = "none";
  document.getElementById("dane").style.display = "none";
  document.getElementById("kot").style.display = "none";
  document.getElementById("zadania").style.display = "inline-block";
}
</script>
</body>
</html>