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="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <link rel="stylesheet" href="aaa.css"> <body> <div class="wrapper"> <div class="header"> <img src="obrazek.jpg" alt="obrazek"> </div> <div class="recipe"> <h1>Sýrové jednohubky</h1> <p>Chutné jednohubky pro každou příležitost</p> <h2>Potřebné suroviny:</h2> <ul> <li>6 rohlíky</li> <li>pomazánkové máslo</li> <li>175g paprikové lučiny</li> <li>70g goudy</li> <li>1 balíček cherry rajčata</li> <li>balení slaných tyčinek</li> <li>salátové listy</li> </ul> <h2>Postup přípravy:</h2> <p>Na rohlíky naneseme zdobicím sáčkem směs pomazánkového másla a <br> lučiny. </p> <p class="author"> <b>Autorka receptu:</b> <br> <b>Kamila Nová, Brno</b> <br> </p> </div> <div class="footer">...</div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { background-color: yellow; margin: auto; font-size: 1rem; } .wrapper { max-width: 510px; margin: 0 auto; } .wrapper > div { padding: 1rem; border: 5px solid black; margin: 1rem 0; background-color: white; } div.header { border-color: red; text-align: center; } .header img { max-width: 100%; } .recipe h1 { text-align: center; } .author { text-align: right; } .footer { text-align: center; color: red; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>