Untitled

<html>
<head>
<meta charset="UTF-8">
<title>
Portal ogłoszeniowy
</title>
<link href="style5.css" rel="stylesheet"/>
</head>
<body>
<div id="baner"><h1>„Portal Ogłoszeniowy”</h1></div>
<div id="panel1"><img src="rysunek1.png"></div>
<div id="panel2"><h3>Adres</h3>ul. Morska 45 <p>Gdynia</div>
<div id="panel3"><h3>Telefon</h3><p>601601601</div>
<div id="panel4"><h3>e-mail</h3><p>ogloszenia@poczta.pl</div>
<div id="blok1">
<h2>Ceny ogłoszeń</h2>
<table border=1 style="border-color:green;">
<tr><td>Liczba ogłoszeń</td><td>Cena ogłoszeń</td><td>Bonus</td></tr>
<tr><td>1-50</td><td>2 PLN</td><td rowspan=2> Subskrypcja newslettera to upset 0.20 PLN na ogłoszenie</td></tr>
<tr><td>51 i więcej</td><td>1 PLN</td></td></tr>
</table></div>
<div id="blok2">
<h2>Witamy na stronie naszego portalu!</h2>
<img src="rysunek.png" alt="ogłoszenia"/>
</div>
<div id="blok3">
<h2>Ile kosztuje ogłoszenie?</h2>
<form name="formularz">
Podaj liczbę ogłoszeń:<br><input type="number" name="a"></input><br>
<input type="checkbox" name="b"/>Policz upust na newsletter<br>
<input type="button" value="Oblicz" onclick="funkcja()" style="background-color:green;color:white;border:none;">
</form>
<span id="napis"/>
<script>
function funkcja()
{
var a=document.formularz.a.value;
var b=document.formularz.b.checked;
var c=a*2-0.2*a;
var d=a-(0.2*a);
if(a<=50 && b==true)
document.getElementById("napis").innerHTML="Koszt ogłoszeń: "+c+"PLN";
if(a>50 && b==true)
document.getElementById("napis").innerHTML="Koszt ogłoszeń: "+d+"PLN";
if(a<=50 && b==false)
document.getElementById("napis").innerHTML="Koszt ogłoszeń: "+a*2+"PLN";
if(a>50 && b==false)
document.getElementById("napis").innerHTML="Koszt ogłoszeń: "+a+"PLN";

}
</script>
</div>
<div id="stopka">Portal ogłoszeniowy opracował: Kacper</div>
</body>
</html>


///////////////
CSS

#baner
{
background:#009999;
text-align:center;
color:white;
height:80px;
width:100%;
}
#panel1
{
font-family:Arial;
text-align:center;
background:#009999;
float:left;
color:white;
height:150px;
width:25%;
}
#panel2
{
font-family:Arial;
text-align:center;
background:#009999;
color:white;
float:left;
height:150px;
width:25%;
}
#panel3
{
font-family:Arial;
text-align:center;
background:#009999;
color:white;
float:left;
height:150px;
width:25%;
}
#panel4
{
font-family:Arial;
text-align:center;
background:#009999;
color:white;
float:left;
height:150px;
width:25%;
}
#blok1
{
background:#669999;
float:left;
height:600px;
width:30%;
}
#blok2
{
text-align:center;
background:#99CCCC;
float:left;
height:600px;
width:40%;
}
#blok3
{
background:#669999;
float:left;
height:600px;
width:30%;
}
#stopka
{
background: #009999;
color:white;
text-align:center;
}