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> <base href='http://game-world.8u.cz'> <html lang="cs" prefix="og: http://ogp.me/ns#"> <head> <!-- Hlavička --> <meta charset="UTF-8" /> <link rel="stylesheet" href="styl.css" type="text/css"> <title>Game-World | Vše o hrách</title> <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="description" content="Máte rádi hry? Tak to jste na správném místě, protože zde se dozvíte o nich vše. Nebudou chybět ani soutěže." /> <meta name="author" content="Game-World Entertaiment" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="css/style.css" type="text/css"/> <!-- Facebook --> <meta property="og:locale" content="cs_CZ"> <meta property="og:site_name" content="Game-World | vše o hrách"> <meta property="og:type" content="website"> <meta property="og:url" content="http://absolutni-adresa-sdileneho-objektu"> <!-- Toto dodělat --> <meta property="og:title" content="Game-World | vše o hrách"> <meta property="og:image" content="http://absolutni-adresa-obrazku.png"> <!-- Toto taky dodělat --> <meta property="og:description" content="Máš rád hry? Tak se k nám připoj a běž na naší stránku ;)"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@stranka_na_twitteru"> <meta name="twitter:creator" content="Game-World Entertaiment."> <meta name="twitter:title" content="c"> <meta name="twitter:description" content="Krátký popis"> <meta name="twitter:image" content="http://absolutni-adresa-obrazku.png"> <!-- Konec TWITTERU a začátek meta --> <meta name="description" content="Máš rád hry? Tak se neboj a běž na naší stránku, jsou zde soutěže, novinky o hrách apod. ;-)"> <meta name="keywords" content="Hry, Zábava, Soutěže"> <meta name="author" content="Game-World Entertaiment."> <!--[if lt IE 9]> <script src="jshtml5shiv.js"></script> <![endif]--> </head> <!-- Hlavička KONEC --> <body> <div id="flexbox"> <nav class="menu"> <ul> <li><a href="index.html">Domů</a></li> <li><a href="#">Novinky</a></li> <li><a href="#">Recenze</a></li> <li><a href="#">Soutěže</a></li> </ul> </nav> <div id="obsah"> <p>Ahoj</p> </div> <div id="reklama"> </div> <script src="js/script.js"></script> </div> <div ><div class="zoznam">Vyzkoušejte nový webhosting <a href="http://b.cz/">b.cz</a>. Nejkratší doména 2. řádu na českém trhu.</div></div></body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
nav.menu { display: block; width: 100%; background: black; font-size: 0; height: 50px; } nav.menu ul { list-style-type: none; margin: 0; padding: 0; } nav.menu ul li { width: 100%; } nav.menu a { display: block; color: white; text-decoration: none; font-family: sans-serif; font-size: 20px; } nav.menu a { line-height: 2em; padding: 0 15px; } nav.menu a:hover { background-color: grey; } #obsah { #flexbox { display: flex; max-width: 960px; margin: auto; } } @media (max-width: 700px) { nav.menu { background: black; height: 120px; } nav.menu ul li { width: auto; display: inline-block; } nav.menu a { line-height: 50px; }nav.menu ul { width: 100%; } } @media (max-width: 488px) { nav.menu { height: 120px; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>