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="udalost"> <div class="hlavicka"> <div class="datum_cas"> <div class="den">8</div> <div class="mesic">listopad koko kokok </div> <div class="cas">9:00</div> </div> <img src="no-img.png"> <div class="nazev_akce">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</div> </div> <div class="detail_udalosti"> <h3>Místo</h3> <p>Lokalita</p> <h3>Účastníci</h3> <p>Jména</p> <p>text o akci</p> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.udalost { margin: 0 20px 50px; padding: 20px 38px; background: #2158ad; color: #ffffff; } .hlavicka { padding: 20px 0; width: 100%; } .datum_cas { float: left; width: 80px; font-weight: bold; text-align: center; } .den { padding: 5px 0; background-color: #004687; color: #ffffff; font-size: 20px; } .mesic { padding-bottom: 5px; background-color: #004687; color: #ffffff; font-size: 14px; } .cas { padding: 7px 0px; background-color: #e6f5ff; color: #004687; font-size: 12px; text-align: center; } .hlavicka img{ float: right; height: 120px; width: 120px; /*border: 1px solid #000000;*/ background-color: green; } .nazev_akce { margin: 0 140px 0 100px; vertical-align: middle; font-size: 16px; font-weight: bold; line-height: 56px; text-decoration: none; background-color: red; } .detail_udalosti { width: 100%; } .detail_udalosti h3 { font-style: italic; font-weight: bold; line-height: 180%; border: 1px solid #000000; } .detail_udalosti p { text-align: justify; border: 1px solid #ffffff; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>