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
<html lang="cs"> <head> <title>Flat UI</title> <link rel="stylesheet" href="style.css"> <meta charset="utf-8"> </head> <body> <nav class="top_menu"> <ul> <li><a href="#">ÚVOD</a></li><span class="line"> | </span> <li><a href="#">PORTFOLIO</a></li><span class="line"> | </span> <li><a href="#">REFERENCE</a></li><span class="line"> | </span> <li><a href="#">O MNĚ</a></li><span class="line"> | </span> <li><a href="#">KONTAKT</a></li> </ul> </nav> <div class="top_content"> <p>THE FUTURE STARTS HERE.</p> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body { background-image: url("img/bg_a_1.jpg"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; margin: 0; padding: 0; } .top_menu { display: table; width: 100%; height: 5%; background: #000; opacity: 0.5; } .top_menu ul li { display: inline; } .top_menu ul li a { color: #fff; font-size: 15px; text-decoration: none; } .top_menu ul li a:hover { color: #ff0000; font-weight: bold; } .line { color: #fff; } .top_content { margin-left: 0 auto; margin-right: 0 auto; color: #fff; font-weight: bold; font-size: 100%; background: red; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>