<html>
<head>
<meta charset=utf-8/>
<title>Tutaj umieść tytuł kodowanego html'a</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
</head>
<body>
<header>
<a href="#"><img src="lokalizacja-obrazka.jpg" alt="Logo nazwa-firmy"></a>
<nav>
<a href="strona1.html">Strona 1</a>
<a href="strona2.html">Strona 2</a>
<a href="strona3.html">Strona 3</a>
<a href="strona4.html">Strona 4</a>
</nav>
</header>
<main>
<section>Sekcja 1</section>
<section>Sekcja 2</section>
<section>Sekcja 3</section>
</main>
<aside>
<a href=""><img src="https://www.fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt="Logo partnerskie 1"></img></a>
<a href=""><img src="https://www.fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt="Logo partnerskie 2"></img></a>
<a href=""><img src="https://www.fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt="Logo partnerskie 3"></img></a>
</aside>
<footer>
<p>Copyrights JacobSobota.pl</p>
</footer>
</body>
</html>
body {
width: 920px;
margin: 0 auto;
}
header {
background: #f68000
}
header > a > img {
float:left;
width: 200px;
height: 50px;
}
header nav {
text-align: right;
line-height: 50px;
}
header nav a {
margin: 0 20px;
}
header:after, aside:after, footer:after {
content: "";
display:table;
clear:both;
}
main {
width: 720px;
float:left;
background: #f2f2f2;
}
aside {
width: 200px;
float:right;
background: #a85680;
text-align: center;
}
aside img {
max-width: 100px;
}
footer {
background: #487659;
float: left;
width: 100%;
}
footer > p {
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.