<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="styly.css">
<title>Title</title>
</head>
<body>
<header>
<h1>Můj cestovní blog</h1>
</header>
<div class="row">
<div class="three columns col-m-3">
<div class="offset-by-one six columns clanky col-m-7">
<a href="" class="clanek"><p>Článek 1</p></a>
</div>
<br><br>
<div class="offset-by-one six columns clanky col-m-7">
<a href="" class="clanek"><p>Článek 2</p></a>
</div>
<br><br>
<div class="offset-by-one six columns clanky col-m-7">
<a href="" class="clanek"><p>Článek 3</p></a>
</div>
<br><br>
<div class="offset-by-one six columns clanky col-m-7">
<a href="" class="clanek"><p>Článek 4</p></a>
</div>
<br><br>
<div class="offset-by-one six columns clanky col-m-7">
<a href="" class="clanek"><p>Článek 5</p></a>
</div>
</div>
<div class="nine columns col-m-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non consequat leo. Sed semper, libero a molestie eleifend, ex turpis mollis arcu, ullamcorper venenatis diam ex sed metus. Nunc vitae erat nunc. Donec efficitur orci turpis, non ultricies nibh rhoncus sit amet. Quisque semper venenatis tincidunt. Sed ac volutpat tortor, in pharetra mi. Integer laoreet, felis sit amet rutrum ultricies, massa sem lobortis neque, ac blandit velit odio sed elit. In sed purus at magna porta iaculis porta eget eros.</p>
<p>Mauris augue lacus, viverra at laoreet vel, ultrices id ligula. Proin placerat lectus at neque porta, a imperdiet sem maximus. Proin interdum, lectus in vehicula fermentum, tellus ante cursus dolor, sed suscipit libero libero nec mauris. Proin mollis ex a erat gravida, ut fringilla leo venenatis. Mauris non finibus tellus, id posuere ipsum. Proin eget fringilla nibh. Suspendisse luctus feugiat felis, id pharetra nisl venenatis sit amet. Quisque eu est eros. Maecenas feugiat faucibus mollis. Mauris rhoncus mi non ligula dignissim ultricies. Quisque pretium facilisis condimentum.</p>
<p>Donec eget velit ut felis lacinia malesuada sed accumsan nibh. Maecenas aliquam diam sem, quis venenatis urna imperdiet venenatis. Pellentesque eu urna sit amet dui egestas semper vel quis tortor. Aliquam aliquam quis lorem sed tincidunt. Fusce luctus tincidunt sollicitudin. </p>
<div class="offset-by-two columns">
<img class="obr" onmouseover="document.getElementById('activeobr').src='img1.jpg'" src="img1.jpg">
<img class="obr" onmouseover="document.getElementById('activeobr').src='img2.jpg'" src="img2.jpg">
<img class="obr" onmouseover="document.getElementById('activeobr').src='img3.jpg'" src="img3.jpg">
<br>
<img id="activeobr" src="img1.jpg">
</div>
</div>
</div>
<br>
<address><footer><div>
<p>Autor: </p>
<p>Kontakt: <img src="fb.jpg"> <img src="tw.jpg"> <img src="ig.jpg"></p>
</div></footer></address>
</body>
</html>
To by mě v životě nenapadlo.