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
<div id=pruh> <div id=hlavicka> <menu> <li><a href="#">úvod</a> <li><a href="#">další stránka</a> </menu> <ul> <li><a href="https://www.facebook.com/"><img src="http://www.eco.enzone.cz/Obrazky/Facebook.png" at="Facebook stránka"></a> <li><a href="https://www.youtube.com/"><img src="http://www.eco.enzone.cz/Obrazky/youtube.png" at="Facebook stránka"></a> <li><a href="http://plug.dj/"><img src="http://www.eco.enzone.cz/Obrazky/plugdj.png" at="Facebook stránka"></a> </ul> </div> </div> <div id=obal> <div id=obsah> <div class=cernyramecek> <h1>Vítej na Minecraft serveru enZone</h1> <h2>Proč hrát na našem serveru?</h2> <ol> <li>hrajeme na poslední verzi od Mojangu <li>věnujeme se svým hráčům naplno <li>máme spousty zábavných pluginů <li>máme za sebou několika letou zkušenost </ol> <p align=center> Připoj se k nám do herní komunity, nebo nám pomáhej jako Admin serveru! <p align=center> Máme skvělé <a href="#">VIP</a> <a href=".">výhody</a>, které splňují podmínky. </div> </div> <div id=sloupek> <div class=cernyramecek> <h2>Status serveru</h2> <p>Momentálně nedostupný <h2>Aktuality</h2> <p>14.11.2014 - Příprava webu </div> <div class=cernyramecek> <h2>Hlasování</h2> <p>Momentálně nedostupné </div> </div> <div id=paticka></div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { background: #696 url("http://www.eco.enzone.cz/Obrazky/wallper.jpg") center 5em; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 85%; color: white; background-size: cover; margin: 0; padding: 0; } a img { border: 0; } img { vertical-align: middle; } #pruh { background-color: #696; background-image: linear-gradient(90deg, #363, #9c9); border: 0px solid #ddd; border-bottom-width: 3px; padding-top: 1px; margin-bottom: 3em; min-width: 960px; } #hlavicka { width: 960px; margin: 0 auto; min-height: 64px; position: relative; } #hlavicka menu, #hlavicka ul, #hlavicka li, #hlavicka menu a { margin: 0; padding: 0; display: block; list-style: none; } #hlavicka menu, #hlavicka ul { overflow: auto; } #hlavicka menu { margin-right: 256px; padding: 1em 0 0; } #hlavicka menu li { margin-bottom: 1em; margin-right: 1em; float: left; } #hlavicka menu a { background: #696; line-height: 2.4; padding: 0 3ex; border: 3px solid #ddd; border-radius:1.3em; text-align: center; text-decoration: none; transition: .5s; color: MediumBlue; } #hlavicka menu a:hover { background: white; color: black; } #hlavicka ul { position: absolute; top: -1px; right: 0; margin: 0; width: 256px; text-align: right; } #hlavicka ul li { float: right; } #hlavicka ul a img { opacity: 0.7; transition: .3s; } #hlavicka ul a:hover img { opacity: 1; } #obal { width: 960px; margin: auto; } #obsah { width: 64%; float: left; } #obsah a { color: PaleGreen; } #obsah a:visited { color: SeaGreen; } #obsah a:hover { color: SpringGreen; } #sloupek { float: right; width: 32%; } #sloupek p { text-align: center; } h1, h2 { text-align: center; } .cernyramecek { background: black; background: rgba(0,0,0,0.88); padding: 19px; border: 1px solid white; border-radius: 2.5em; margin: 0 0 3em; } #paticka { clear: both; } @media (max-width: 990px) { #obal, #pruh { width: 100%; min-width: 40ex; } #obsah, #sloupek, #hlavicka { width: 90%; margin: 0 5%; } } @media (max-width: 760px) { #hlavicka menu { width: 100%; } #hlavicka menu { padding-top: 72px; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>