Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css.css" type="text/css"> <title>Dokument bez názvu</title> </head> <body> <div id="pagewrap"> <div id="header"> <h1>hlavička</h1> </div> <div id="navbar"> <h3>Menu</h3> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> <div id="content"> <div class="obsah"> <h2>Donec aliquam lacinia ipsum</h2> <p>Lorem Ipsum, měli byste mít jistotu, že faucibus blandit ipsum, vitae congue mauris pretium eu. Donec aliquam lacinia ipsum congue aliquet. Mauris feugiat vehicula ullamcorper. Proin quis diam dui. Suspendisse vel viverra turpis. Proin pretium, elit scelerisque ultricies aliquam, risus dui fermentum arcu, ut convallis diam ligula <a href="#"> TEXT TEXT</a> sed massa. Nam pellentesque tellus eget varius ornare. Proin non velit vitae elit laoreet egestas. Duis est eros, fringilla sit amet odio fringilla, ullamcorper gravida lacus. Sed facilisis felis at velit condimentum rhoncus. Cum sociis natoque penatibus et magnis dis parturient montessrs. naprosto náhodných slov, což nevypadá zrovna uvěřitelně. Pokud plánujete použít pasáž z Lorem Ipsum, měli byste mít jistotu, že v textu nebude nic, co by jej mohlo narušovat. </p> </div> <div class="obsah"> <h2>Donec aliquam lacinia ipsum</h2> <p>Lorem Ipsum, měli byste mít jistotu, že faucibus blandit ipsum, vitae congue mauris pretium eu. Donec aliquam lacinia ipsum congue aliquet. Mauris feugiat vehicula ullamcorper. Proin quis diam dui. Suspendisse vel viverra turpis. Proin pretium, elit scelerisque ultricies aliquam, risus dui fermentum arcu, ut convallis diam ligula <a href="#"> TEXT TEXT</a> sed massa. Nam pellentesque tellus eget varius ornare. Proin non velit vitae elit laoreet egestas. Duis est eros, fringilla sit amet odio fringilla, ullamcorper gravida lacus. Sed facilisis felis at velit condimentum rhoncus. Cum sociis natoque penatibus et magnis dis parturient montessrs. naprosto náhodných slov, což nevypadá zrovna uvěřitelně. Pokud plánujete použít pasáž z Lorem Ipsum, měli byste mít jistotu, že v textu nebude nic, co by jej mohlo narušovat. </p> </div> </div> <div id="sidebar"> <h3>Archiv</h3> <p>text</p> <p>text</p> <p>text</p> </div> <div id="footer"> <h4>Footer</h4> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@charset "utf-8"; /* CSS Document */ body { line-height: 110%; font-family: Arial, Helvetica, Geneva, sans-serif, Verdana, Source Sans Pro, Tahoma; font-size: 14px; color: #111; background-color: #ccc; margin: 0; padding: 0; } a { color: #669; text-decoration: none; } a:hover { text-decoration: underline; } h1 { font: bold 36px; } /************************************************************************************ STRUCTURE *************************************************************************************/ #pagewrap { width: 1000px; margin: 0px auto; } #header { height: 100px; text-align: center; } #navbar { width: 180px; float: left; padding: 10px; background-color: #FFF; margin: 0 10px 10px 0; } #content { padding: 10px; background-color: #888; margin-bottom: 10px; width: 574px; float: left; } .obsah { padding: 10px; background-color: #eee; margin-bottom: 10px; } #sidebar { width: 160px; float: right; padding: 10px; background-color: #FFF; margin: 0 0 10px 5px; } #footer { clear: both; text-align: center; } /************************************************************************************ MEDIA QUERIES *************************************************************************************/ /* for 980px or less */ @media screen and (max-width: 980px) { #pagewrap { width: 94%; } #navbar { width: 25%; } #content { width: 40%; } #sidebar { width: 23%; } } /* for 700px or less */ @media screen and (max-width: 700px) { #navbar { width: auto; float: none; } #content { width: auto; float: none; } #sidebar { width: auto; float: none; } } /* for 480px or less */ @media screen and (max-width: 480px) { #header { height: auto; } h1 { font-size: 24px; } #navbar { display: none; } #sidebar { display: none; } } /* border & guideline (you can ignore these) */ #content { background: #f8f8f8; } #sidebar, #navbar #navbar { background: #f0efef; } #header, #content, #sidebar #navbar { margin-bottom: 5px; } #pagewrap, #header, #navbar, #content, #sidebar, #footer { border: solid 1px #000; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>