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 xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="css/default.css" rel="stylesheet"> <meta charset="UTF-8"> <title>PizzaKE.sk</title> <script> function textChange() { document.getElementById("text").innerHTML = "momentálne nedostupné"; } </script> </head> <body> <div id="wrapper"> <div id="header"> <div class="logo"><h1>PizzaKE.sk</h1></div> </div> <div id="main"> <div class="leftPanel"> <div class="search"> <input type="search" size="18" value="Vyhľadávanie..." onfocus="if(this.value=='Vyhľadávanie...') this.value=''"> </div> <div id="nav"> <ul> <li><a href="#">Menu</a></li> <li><a href="#">Rezervácia</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Zľavy</a></li> </ul> </div> <div class="contact"> <address> <table> <tr><td>Mobil:</td><td>0911 966 523</td></tr> <tr><td>Pevná linka:</td><td>055 672 7244</td></tr> <tr><td>E-mail:</td><td>pizza.ke@pizzake.sk</td></tr> </table> </address> </div> </div> <div class="content"> <h2>Vitajte</h2> <h3 id="text" onclick="textChange()">Správa dňa</h3> </div> </div> <div id="footer">© copyright PizzaKE.sk 2014 , All rights reserved</div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { margin: 0 auto; padding: 0; background: url("../images/bodyBackground.jpg"); font-size: 14px; color: #000; } h1, h2, h3, h4, h5, h6 {margin: 0} #header, #main, #footer { border-radius: 5px; margin: 0; border: 1px solid; } #nav, .search, .contact { border-radius: 5px 0 0 5px; margin-top: 15px; border: 1px solid; border-right: none; } #wrapper { width: 800px; margin: 10px auto; } #header { background-color: #FC6; } #main { height: 500px; background-color: firebrick; overflow: hidden; } .leftPanel { float: left; width: 196px; height: 485px; padding-top: 15px; background-color: #b69d9d; border-right: 1px solid; } .search { margin-left: -5px; width: 180px; background-color: #f2ecec; padding: 10px; } .search:hover { background-color: firebrick; border-right: 1px solid firebrick; } #nav { margin-left: -5px; width: 200px; background-color: #f2ecec; font-size: 18px; } #nav ul { list-style: none; margin: 0; padding: 0; } #nav ul li { text-align: center; padding: 10px; width: 180px; border-bottom: 1px solid; } #nav ul li a { color: black; text-decoration: none; } #nav ul li:hover { background-color: firebrick; border-right: 1px solid firebrick; } .contact { margin-left: -5px; width: 190px; background-color: #f2ecec; padding: 5px; } .contact:hover { background-color: firebrick; border-right: 1px solid firebrick; } .content { padding: 10px; float: left; } h1 {font-size: 72px} h2 {font-size: 54px} h3 {font-size: 36px} #footer { background-color: #cd6464; padding: 10px; margin-bottom: 10px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>