Mam problem, otóż robiłem krok po kroku, wszystko tak jak jest opisane w tym oto materiale [https://miroslawzelent.pl/kurs-css/szablon-strony-id-klasa-google-fonts-hover/] i nie mogę znaleźć błędu. Próbowałem znaleźć lecz nie mogę dojść. Jeśli mógłby mi to ktoś objaśnić byłbym bardzo wdzięczny.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Poznaj Linuxa! :)</title>
<meta name="descripiton" content="Serwis poświęcony systemowi Linux. Naucz się wszystkiego, co chcesz wiedzieć o Linuxie!" />
<meta name="keywords" content="linux, kurs, nauka, ubuntu" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="logo">
Poznaj Linuxa! :)
</div>
<div id="menu">
<div class="option">Strona główna</div>
<div class="option">Dystrybucje</div>
<div class="option">Pomoc</div>
<div class="option">Download</div>
<div class="option">Linus Torvalds</div>
<div style="clear:both;"></div>
</div>
<div id="topbar">
<div id="topbarL">
<img src="linux.png"/>
</div>
<div id="topbarR">
<span class="bigtittle">O projekcie słów kilka</span>
<div style="height: 15px;"></div>
Kiedy mówisz: " Napisałem program, który wywalił Windows, ludzie gapią się na ciebie głupkowato i mówią: Hej, ja dostałem to wraz z systemem, za darmo" - Linus Torvalds, twórca Linuxa. Zapraszamy do zapoznania się z witryną, dzięki której dowiesz się co to jest Linux i wybierzesz dystrybucję dla siebie!
</div>
<div style="clear:both;"></div>
</div>
<div id="sidebar">
<div class="optionL">Strona główna</div>
<div class="optionL">Dystrybucje</div>
<div class="optionL">Pomoc</div>
<div class="optionL">Download</div>
<div class="optionL">Linus Torvalds</div>
<div style="clear:both;"></div>
</div>
<div id="content">
<span class="bigtitle">Co to jest Linux?</span>
<div class="dottedline"></div>
Lorem ipsum dolor sit amet tellus. Vestibulum quam leo, pretium pellentesque. Nullam rutrum sit amet, nibh. Aliquam consequat tortor. Ut sagittis, mi quam, ultrices posuere laoreet, enim luctus non, nunc. Vivamus nec libero mollis neque quis eleifend at, egestas velit. Suspendisse potenti. In hac habitasse platea dictumst. Quisque porta turpis egestas. Mauris sit amet ultricies a, dolor. Praesent ac est sem, accumsan mollis faucibus, diam ut tellus dui non neque vitae ipsum vel ipsum primis in nibh porta urna. Nam id nibh. Duis elementum eu, magna. Curabitur volutpat aliquam at, egestas ac, suscipit in, pulvinar vitae, lorem. In mollis, purus sem sit amet, tellus. Nunc vehicula. Integer auctor non, vehicula dignissim. Donec tortor massa id nibh. Etiam ut felis vitae purus. Maecenas nisl nulla massa, dictum sapien enim eu eros. Suspendisse dignissim dolor ut nulla a neque vitae nunc volutpat quam interdum eu, luctus eu, tristique vitae, fringilla eget, dui. Etiam leo ac augue sit amet turpis vitae est eu dui aliquam sapien. Etiam ut metus. Quisque quis massa molestie tristique pede. Mauris vel neque dui, in leo et arcu. <br /><br />
Mauris leo. Suspendisse eu urna quis suscipit quis, wisi. Sed vehicula viverra. Cras est neque, blandit ultrices posuere in, tristique luctus eget, aliquet commodo pulvinar massa nec dui. Cras vitae metus. Maecenas mi facilisis neque, a ipsum. Praesent elit tincidunt tellus augue, ullamcorper libero in eleifend eget, lacinia eget, facilisis vel, wisi. Aliquam hendrerit sollicitudin lorem, at ipsum dolor ullamcorper at, pretium vitae, faucibus quis, pellentesque a, pharetra elementum. Aenean ipsum primis in turpis at magna. Aliquam rhoncus dolor sit amet, magna. Vestibulum non dui lectus, eu mauris. Praesent tortor metus bibendum metus mi ipsum primis in nulla orci ipsum, ultricies porta tincidunt. Nullam suscipit dui lectus, viverra accumsan, libero posuere cubilia Curae, Quisque sit amet nisl. Nulla cursus odio. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Sed ligula condimentum nec, eros. Etiam rutrum, urna sem eu urna. Aenean nonummy enim porttitor rutrum. Pellentesque nonummy risus eros mauris, consectetuer at, gravida varius commodo congue. Praesent dictum vel, arcu. Donec nulla massa, nonummy a, tellus. Donec molestie venenatis eu, vulputate luctus. Nulla hendrerit nonummy. Phasellus id dolor sit. <br /><br />
Proin nunc semper eu, pede. In tempus at, bibendum metus mi mauris, consequat eu, fringilla eget, eros. Donec suscipit lectus. Mauris vehicula wisi, mollis neque magna fringilla orci. In bibendum vel, ante. Maecenas sapien facilisis diam felis, nec tellus malesuada fames ac nunc. Phasellus vestibulum quis, velit. In hac habitasse platea dictumst. Aenean lobortis volutpat. Nam purus. Sed congue, sem at lacus malesuada fames ac quam nec velit. Suspendisse eu odio. Suspendisse adipiscing. Mauris pretium nec, accumsan dictum, laoreet sit amet, tellus. Cras magna et magnis dis parturient montes, nascetur ridiculus mus. Donec suscipit in, augue. Duis vehicula faucibus, erat volutpat. Ut id lacus. Cras iaculis in, ornare lacus sagittis odio lobortis vitae, imperdiet faucibus, dolor a augue quam in faucibus eu, odio. Nunc accumsan lorem. Mauris vehicula enim quis libero. Cras dignissim. Nunc volutpat ut, eleifend nunc faucibus orci luctus et orci mauris ac libero. Nulla ante. Nam pulvinar, libero. Nullam tellus tortor, a nibh. Sed nonummy consequat lacus ipsum at justo. Fusce ullamcorper augue, vel nulla. Aliquam auctor dignissim. Aliquam eget nunc neque, blandit vestibulum eget, nonummy eget.
</div>
<div id="footer">
Poznaj Linuxa - najlepszy darmowy system operacyjny. Strona w sieci od 2014r. © Wszelkie prawa zastrzeżone!
</div>
</div>
</body>
</html>
body
{
background-color: #404040;
font-family: 'Lato', sans-serif;
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo
{
color: white;
margin-top: 20px;
font-size: 44px;
letter-spacing: 3px;
font-weight: 900;
}
#menu
{
background-color: #303030;
margin-top: 20px;
color: #ffffff;
padding: 10px;
}
#topbar
{
background-color: #128870;
color: white;
padding: 10px;
margin-top: 20px;
margin-bottom: 25px;
height: 170px;
}
#topbarL
{
float:left;
padding: 20px;
width: 138px;
text-align: center;
border-right: 2px dotted #cccccc;
}
#topbarR
{
float: left;
padding: 20px;
width: 760px;
font-size: 16px;
text-align: justify;
}
#sidebar
{
float: left;
width: 148px;
min-height: 620px;
padding:20px;
background-color: lightgray;
text-align: center;
font-size: 18px;
border-right: 2px dotted #666666;
}
#content
{
float: left;
padding: 40px;
width: 730px;
background-color: #dedede;
min-height: 580px;
text-align: justify;
}
#footer
{
clear: both;
color: white;
text-align: center;
padding: 20px;
font-size: 18px;
}
.option
{
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
border-right: 2px dotted #444444;
opacity: 0.8;
}
.option:hover
{
background-color: #000000;
cursor: pointer;
}
.optionL
{
font-size:18px;
height:25px;
padding: 10px;
border-bottom: 2px dotted #444444;
}
.optionL:hover
{
background-color: #f36742;
color: white;
cursor: pointer;
}
.bigtitle
{
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
}
.dottedline
{
height: 5px;
margin-top: 15px;
margin-bottom: 20px;
border-bottom: 2px dotted #444444;
}
