[CR] CSS (#2): Stylizacja szablonu strony. Właściwości CSS w akcji

CR = Code Review. O co chodzi? Zajrzyj tutaj
Pełna lista wszystkich Code Review? Zajrzyj tutaj

https://www.youtube.com/watch?v=clRo9ISlKKw

index.html:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Poznaj Linuxa :)</title>
	<meta name="description" content="Serwis poświęcony systemowi Linux. Naucz się wszystkiego, co chcesz wiedzieć o Linuxie!" />
	<meta name="keywords" content="linux, kurs, nauka, poznaj, co to jest linux, ubuntu, debian, mint, fedora, wybierz dystrybucję, instalacja linux, polecenia, terminal, bash" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Lato:400,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

</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">Instalacja</div>
			<div class="option">Polecenia</div>
			<div class="option">Linus Torvalds</div>
			<div class="option">O projekcie</div>
			<div style="clear:both;"></div>
		</div>
		
		<div id="topbar">
			<div id="topbarL">
				<img src="linux.png" />
			</div>
			<div id="topbarR">
				<span class="bigtitle">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">Instalacja</div>
			<div class="optionL">Polecenia</div>
			<div class="optionL">Linus Torvalds</div>
			<div class="optionL">O projekcie</div>
		</div>
		
		<div id="content">
			<span class="bigtitle">Dlaczego Linux?</span>
			
			<div class="dottedline"></div>
			
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia mollis odio eu bibendum. Praesent non hendrerit risus. Nulla id semper sem. Mauris risus mauris, ultrices sed ullamcorper sed, vulputate vel nisi. Aliquam augue ante, mattis in pulvinar vitae, ultrices nec leo. Nulla ultricies augue enim, sit amet semper tellus vulputate sit amet. Maecenas tincidunt, ex eu viverra scelerisque, quam lectus auctor nunc, at pretium nibh lacus in ligula. Cras condimentum felis ac aliquet tristique. Sed elementum eu nulla vel rutrum. Cras feugiat nulla non congue malesuada.
			
			<br /><br />
			Cras et nulla vehicula, efficitur enim non, fermentum tortor. Curabitur id elementum leo. Sed eget turpis accumsan dolor mollis imperdiet. Praesent pellentesque laoreet lectus, at commodo magna varius vitae. Aliquam erat volutpat. Curabitur commodo, tortor laoreet sagittis cursus, nulla enim laoreet libero, et egestas risus ante vel orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis posuere massa, sed sollicitudin lorem. Mauris lacinia, massa efficitur malesuada luctus, arcu ex mattis erat, a venenatis magna risus nec neque. Nulla vulputate nisl urna, quis egestas orci suscipit tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras auctor nec elit at ultricies. Morbi aliquam pharetra diam, vitae porta felis. Pellentesque vel arcu tincidunt, luctus justo quis, ultrices erat. Vivamus efficitur leo vitae dui molestie, eu varius sapien iaculis. In quis pharetra mauris.
			
			<br /><br />			
			Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
		</div>	
		
		<div id="footer">
			Poznaj Linuxa - najlepszy darmowy system operacyjny. Strona w sieci od 2014r. &copy; Wszelkie prawa zastrzeżone
		</div>
	
	</div>
	
</body>
</html>

style.css:

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;
}

Paczka z odcinka: POBIERZ