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="obal"> <h2>Fotbal</h2> <div class="novinky"> <h5><a href="javascript:console.log('1111111')">Titulek</a></h5> <div class="popisek">Lorem ipsum dolor amet set sancum dues…</div> </div> </div> <!-- Další --> <div class="obal"> <h2>Hokej</h2> <div class="novinky"> <h5><a href="javascript:console.log('2222222')">Titulek</a></h5> <div class="popisek">Lorem ipsum dolor amet set sancum dues…</div> </div> </div> <!-- Další --> <div class="obal"> <h2>Basketball</h2> <div class="novinky"> <h5><a href="javascript:console.log('3333333')">Titulek</a></h5> <div class="popisek">Lorem ipsum dolor amet set sancum dues…</div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { background: grey; } .obal { width: calc(33% - 100px); display: inline-block; background-color: white; padding: 20px 50px; } .tlacitko { background: #444; color: white; padding: 5px 8px; border-radius: 3px; margin: 15px auto; width: fit-content; } .tlacitko:hover { opacity: 0.8; }
CSS
Autoformát
CSS reset
Až na konci
(function () { var novinky = $(".novinky").each(function () { var tohle = $(this); var odkaz = tohle.find("a").attr('href'); tohle.append('<div class="tlacitko"><a class="tlacitko" href="' + odkaz + '" target="_blank"><span class="button_label">Číst více</span></a></div>'); }); })();
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>