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
<div class="obrazky"style=""> <a href="#"><div class="mrkev"> <div class="pruh">Popis</div></div></a> <a href="#" style="margin-left: 25px"> <div class="mrkev"><div class="pruh">Popis</div></div></a> <a href="#" style="margin-left: 25px"> <div class="mrkev"><div class="pruh">Popis</div></div></a> <a href="#" style="margin-left: 25px"> <div class="mrkev"><div class="pruh">Popis</div></div></a> <br><br> <a href="#"> <div class="mrkev"><div class="pruh">Popis</div></div></a> <a href="#" style="margin-left: 25px"> <div class="mrkev"><div class="pruh">Popis</div></div></a> <a href="#" style="margin-left: 25px"> <div class="mrkev"><div class="pruh">Popis</div></div></a> <a href="#" style="margin-left: 25px"> <div class="mrkev"><div class="pruh">Popis</div></div></a> <br><br> <a href="#"> <div class="mrkev"> <div class="pruh">Popis</div> </div> </a> <a href="#" style="margin-left: 25px"> <div class="mrkev"><div class="pruh">Popis</div></div></a> <a href="#" style="margin-left: 25px"> <div class="mrkev"><div class="pruh">Prase</div></div></a> <a href="#" style="margin-left: 25px"> <div class="mrkev"><div class="pruh">Popis</div></div></a> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { background: #7C7C51; background: url(http://www.sweetteashakespeare.com/wp-content/uploads/FreeGreatPicture.com-15815-grass-material.jpg) no-repeat center top fixed; } .obrazky { width: 1207px; left: 50%; margin: 105px 0px 0px -628px; position: fixed; background-color: #cccccc; padding: 25px 25px 20px 25px; background-color: rgb(230, 226, 216); background-color: rgba(230, 226, 216, 0.4); } .mrkev { width: 280px; height: 180px; background-image: url(http://media.novinky.cz/992/109920-top_foto1-eybbu.jpg?1325497881); position: relative; display: inline-block; } .pruh { width: 100%; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.7); position: absolute; bottom: 0; padding: 15px 0px; font-family: sans-serif; font-weight: bold; color: white; text-align: center; } a:hover .mrkev .pruh { width: 100%; background-color: rgb(14, 118, 188); background-color: rgba(14, 118, 188, 0.7); position: absolute; bottom: 0; padding: 15px 0px; font-family: sans-serif; font-weight: bold; color: white; text-align: center; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>