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 lang="cs-cz"> <head> <meta charset="ISO 8859-2"> <link rel="stylesheet" href="styl.css" type="text/css"> <title>Moje Portfolio</title> </head> <body> <header> <div id="logo"<h1>To bude zábava</h1></div> <nav> <ul> <li class="aktivni"><a href="#">Domů</a></li> <li><a href="#">O mně</a></li> <li><a href="#">Dovednosti</a></li> <li><a href="#">Reference</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> </header> <article> <div id="centrovac"> <header> <h1>O mně</h2> </header> <section> <p> Jednou bych se chtěl odstěhovat na daleký ostrov a žít jako tento domorodec.</p> <p><img src="fighter.png" alt="fighter" class="vlevo"> </p> <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p> <div class="cistic"></div> <h2>Příští koncert:</h2> <p> <strong>KnL</strong> dne: <strong>11.6.2013</strong> Konec </p> <p> <a href="C:/Users/Michal/Desktop/Programování/HTML/Kontakt.html" target="_blank" >Kontakt</a> </p> <p> <a href="C:/Users/Michal/Desktop/Programování/HTML/dovednosti.html" target="_blank" >Michalovi dovednosti</a> </p> </section> <div class="cistic"></cistic></div> </div> </article> <footer> Vytvořil ©HoBi 2015 pro <a href="http://devbook.cz">DEVBOOK.CZ</a> </footer> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* CSS Document */ body { font/family: Verdana; font-size: 20px; background: url('pozadibody.png') #ced9ed; margin: 0px; font: 20px Verdana; min-width: 960px; } h2, h3, h4, h5 { text-align: center; text-shadow: 1px 1px 0px #CCC9E4; font-weight: normal; } h1 { font-size: 2.7em; font-weight: normal; color: white; text-align: center; text-shadow: 2px 2px 1px #0a294b; } .centruj { text-align: center; } article { background: url("noisy.png") #0e4cc7; padding: 30px 0px; } article header { width: 250px; float: left; position: static; background: none; } article section { width: 710px; float: left; background: white; border: 2px solid #0e4cc7; border-radius: 10px; padding: 20px; margin-left: 250px; } .cistic { clear: both; } .vlevo { float: left; } header { height: 73px; position: fixed; top: 0px; margin: 1px 0px 0px 0px; width: 100%; background: url('pozadibody.png') #ced9ed } #logo { background: url('pictures/ninja2.png') no-repeat; width: 250px; height: 60px; float: left; margin: 7px 0px 0px 20px; } #logo h1 { margin-left: 14px 0px 0px 10px; } nav ul { margin: 0px; list-style-type: none; } nav ul li { float: left; padding: 0px 25px; margin: 0 5px; font-size: 17px; height: 73px; line-height: 4.3em; } nav a { color: white; text-decoration: none; } nav ul li:hover, .aktivni { background: #ffbb00; box-shadow: 0px 0px 5px black; } footer { height: 40px; color: white; margin: 20px 0 0 30px; } footer a { color: #ffbb00; text-decoration: none; } #centrovac { margin: 0px 150px; width: 960px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>