Załączniki są na dole strony - 20.02.2026
index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>malarz</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<div id="banner">
<h1><a href="index.html">Koszty farby</a></h1>
</div>
<main>
<aside id="left">
<h3>Mieszamy czy wyceniamy?</h3>
<a href="mieszamy.html">Mieszamy</a> <br>
<a href="cena.html">Wyceniamy</a>
</aside>
<aside id="right">
<p>Strona poświęcona malarstwu:)</p>
<img alt="abstrakcja" src="obraz.jpg">
</aside>
</main>
<footer>
MALARZ
Stronę opracował: 00000000000
</footer>
</body>
</html>cena.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>malarz</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<banner>
<h1><a href="index.html">Koszty farby</a></h1>
</banner>
<aside id="left">
<h3>Mieszamy czy wyceniamy?</h3>
<a href="mieszamy.html">Mieszamy</a> <br>
<a href="cena.html">Wyceniamy</a>
</aside>
<aside id="right">
<h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
<label for="farba">Podaj powierzchnię:</label>
<input type="number" id="powierzchnia">
<button id="bt1">Policz</button>
<div id="wynik"></div>
</aside>
<footer>
MALARZ
Stronę opracował: 00000000000
</footer>
<script>
function oblicz() {
const wynik=document.getElementById('wynik');
const powierzchnia=document.getElementById('powierzchnia').value;
wynik.innerHTML="Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: "+Math.ceil(powierzchnia/4);
}
var ref_button=document.getElementById('bt1');
ref_button.addEventListener('click',oblicz);
</script>
</body>
</html>mieszamy.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>malarz</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<banner>
<h1><a href="index.html">Koszty farby</a></h1>
</banner>
<aside id="left">
<h3>Mieszamy czy wyceniamy?</h3>
<a href="mieszamy.html">Mieszamy</a> <br>
<a href="cena.html">Wyceniamy</a>
</aside>
<aside id="right">
<p>Strona w trakcie budowy</p>
</aside>
<footer>
MALARZ
Stronę opracował: 00000000000
</footer>
</body>
</html>styl.css
#banner {
background-color: #829EB9;
height: 80px;
text-align: center;
font-family: Arial;
padding-top: 10px;
}
#left {
background-color: #B3C6D9;
width: 25%;
}
#right {
background-color: #E0E9F1;
width: 75%;
}
#left, #right {
text-align: center;
font-size: 20px;
padding-top: 100px;
height: 500px;
}
footer {
background-color: yellow;
text-align: center;
font-family: Arial;
height: 50px;
clear: both;
}
img {
margin: 30px;
padding: 10px;
}
main {
display: flex;
/* flex-direction: column; */
}