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
<title>Stylování citace návštěvníka s obrázkem</title> <h1>Stylování názoru návštěvníka s obrázkem</h1> <blockquote> <p>Moderní tvorba webových stránek</p> <small> <b>Bohumil Jahoda</b>, <cite><a href="http://jecas.cz">Ječas.cz</a></cite> <img src="http://jecas.cz/files/article/kontakt.png" alt="Bohumil Jahoda"> <span class="arrow left"></span> </small> </blockquote> <div> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, hic repellat ea minus tenetur dolores veritatis!</p> <p></p>Exercitationem, ex atque enim consequuntur deserunt quam fuga? Veniam voluptates expedita velit repellat quae!</p> <small> <b>Bohumil Jahoda</b>, <cite><a href="http://jecas.cz">Ječas.cz</a></cite> <img src="http://jecas.cz/files/article/kontakt.png" alt="Bohumil Jahoda"> <span class="arrow left"></span> </small> </blockquote> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
* { box-sizing: border-box; } blockquote { border: 1px solid #bbb; border-radius: .5em; padding: 0 1em 1em; margin: 1em 0 1em 10px; min-height: 112px; padding-left: 112px; position: relative; display: inline-block; max-width: 30em; } blockquote img { position: absolute; top: 16px; left: 16px; border-radius: 50%; width: 80px; height: 80px; } blockquote small b:before { content: "— "; } blockquote:before, blockquote:after {border: 10px solid transparent; width: 0px; height: 0px; display: inline-block; position: absolute; content: "";} blockquote:before {border-right: 10px solid #bbb; left: -20px; top: 44px;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>