Untitled

HTML

<!doctype html>

<html lang="pl">
<head>
  <meta charset="utf-8">

  <title>cwiczenia</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="style.css">


 </head>


<body>

<div class="pierwszy">
<header>
<h1>Lorem ipsum</h1>
<nav>
<ul>
<li><a href="strona.html">Start</a></li>
<li><a href="katalog.html">Katalog</a></li>
<li><a href="zamowienia.html">Zamówienia</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="pomoc.html">Pomoc</a></li>
</ul>
</nav>
</header>
<img src="images/intro_big.jpg" alt="obrazek" class="obraz1">
<article class="drugi">
<h2>Coś <span>tam</span></h2>
<p>halo halo</p>
<article>
<h3>Pierwszy</h3>
<p><img src="images/img_1.jpg"</p>
<p>dqwndiqjwndiqwjdn</p>
<p><a href="#">Zobacz</a></p>
</article>
<article>
<h3>Drugi</h3>
<p><img src="images/img_2.jpg"</p>
<p>dqwndiqjwndiqwjdn</p>
<p><a href="#">Zobacz</a></p>
</article>
<article>
<h3>Trzeci</h3>
<p><img src="images/img_3.jpg"</p>
<p>dqwndiqjwndiqwjdn</p>
<p><a href="#">Zobacz</a></p>
</article>
<article>
<h3>Czwarty</h3>
<p><img src="images/img_4.jpg"</p>
<p>dqwndiqjwndiqwjdn</p>
<p><a href="#">Zobacz</a></p>
</article>
</article>
</div>

<div id="stopka">
<footer>

<section>
<h4>Pomoc</h4>
<ul>
<li><a href="strefakursow.html">Strefa kursów</a></li>
<li><a href="odnosnik2.html">Odnośnik 2</a></li>
<li><a href="odnosnik3.html">Odnośnik 3</a></li>
<li><a href="odnosnik4.html">Odnośnik 4</a></li>
</ul>
</section>
<section>
<h4>Twoje konto</h4>
<ul>
<li><a href="strefakursow.html">Strefa kursów</a></li>
<li><a href="odnosnik2.html">Odnośnik 2</a></li>
<li><a href="odnosnik3.html">Odnośnik 3</a></li>
<li><a href="odnosnik4.html">Odnośnik 4</a></li>
</ul>
</section>
<section>
<h4>Kontakt</h4>
<ul>
<li><a href="strefakursow.html">Strefa kursów</a></li>
<li><a href="odnosnik2.html">Odnośnik 2</a></li>
<li><a href="odnosnik3.html">Odnośnik 3</a></li>
<li><a href="odnosnik4.html">Odnośnik 4</a></li>
</ul>
</section>
<section>
<h4>Map</h4>
<ul>
<li><a href="strefakursow.html">Strefa kursów</a></li>
<li><a href="odnosnik2.html">Odnośnik 2</a></li>
<li><a href="odnosnik3.html">Odnośnik 3</a></li>
<li><a href="odnosnik4.html">Odnośnik 4</a></li>
</ul>
</section>
<p>&copy Wszelkie prawa zastrzeżone</p>
</footer>
</div>


</body>

</html>


CSS


body{
font-style:normal;
font-weight:300;
font-family:open-sance;
}
.pierwszy{
margin-left:auto;
margin-right:auto;
width: 960px;
}
.drugi{
width:650px;
margin-left:auto;
margin-right:auto;
}
.drugi h2{
text-align:center;
}

span{
color:#4cb0c9;
}

nav{
margin:0 auto;
width:60%;
}

nav ul{
list-style-type:none;
padding:0;
}

nav ul li a{
float:left;
padding:3px 16px 19px 18px;
color:#404040;
font-weight:600;
text-transform:uppercase;
text-decoration:none;
text-align:center;
display:inline-block;
}
nav ul li a:hover{
color:#4cb0c9;

}

.obraz1{
border-top:1px solid #b7b7b7;
border-bottom:1px solid #b7b7b7;
padding-top:5px;
padding-bottom:5px;
}