hrubý html text pro aktuality

Předloha pro přidání aktuality

</div>

<h3 class="aktualita-title">NADPIS DLE VOLBY</h3>

TEXT AKTUALITY

</p>

<div class="aktualita-meta">ZATŘÍDĚNÍ AKTUALITY</div>

</div>

</article>

Jednotlivé publikované aktuality

</div>

<h3 class="aktualita-title">Otevření nového kroužku</h3>

Díky dostatečnému zájmu se letos otevřel nový kroužek - Volejbal pro děti ve věku 12 až 14 let. Trénink bude vedený od naprostých základů – cílem nebude výkon jako v profesionálním týmu, ale spíše zábavné aktivity, které se budou prolínat s volejbalovými cvičeními. Postupně se tak budeme učit technicky správně základní odbití (prsty, bagr), odbití jednoruč vrchem (smeč, podání) a správné postavení na hřišti společně se základními pravidly volejbalu.

</p>

<div class="aktualita-meta">Obecné informace</div>

</div>

</article>

</div>

<h3 class="aktualita-title">Sokolské kroužky začínají</h3>

Vítáme Vás srdečně v novém školním roce a připomínáme, že první Sokolská cvičení začínají již v pondělí 8.9.

</p>

<div class="aktualita-meta">Obecné informace</div>

</div>

</article>

</div>

<h3 class="aktualita-title">Přihlášky do kroužků letos on-line</h3>

V rámci technických inovací se snahou zjednodušit práci a ušetřit čas trenérům i rodičům fungují letos přihlášky do kroužků pouze on-line formou prostřednictvím oficiálního portálu TJ Sokol. Více info v kartě "Přihlášky".

</p>

<div class="aktualita-meta">Informace pro rodiče</div>

HTML kód pro obsažení aktuality

<style>

.aktuality {

--accent:#FF4D4D;

--text:#1c1c1c;

--muted:#6b6b6b;

--bg:#ffffff;

--radius:14px;

--shadow:0 6px 18px rgba(0,0,0,.08);

--gap:24px;

--maxw:1200px;

font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

}

.aktuality * { box-sizing:border-box; }

.aktuality a { color:inherit; text-decoration:none; }

.aktuality p { margin:0; }

.aktuality {

margin:0 auto;

max-width:var(--maxw);

padding:8px;

}

.aktuality-grid {

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:var(--gap);

}

@media(max-width:980px){

.aktuality-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

}

@media(max-width:640px){

.aktuality-grid{grid-template-columns:1fr;}

}

/* === karta === */

.aktualita-card {

background:var(--bg);

border-radius:var(--radius);

box-shadow:var(--shadow);

border:1px solid #eee;

position:relative;

padding:28px 24px 26px 24px;

overflow:hidden;

transition:.2s ease;

text-align:center;

}

.aktualita-card:hover {

box-shadow:0 10px 28px rgba(0,0,0,.12);

transform:translateY(-2px);

}

/* === oranžový blok === */

.aktualita-date {

position:absolute;

top:16px;

left:16px;

background:var(--accent);

color:#fff;

border-radius:10px;

text-align:center;

padding:8px 6px 6px;

line-height:1.1;

box-shadow:0 4px 10px rgba(242,101,34,.35);

min-width:58px;

}

.aktualita-date .den{font-size:20px;font-weight:900;display:block;}

.aktualita-date .mesic{font-size:13px;font-weight:700;text-transform:uppercase;display:block;}

.aktualita-date .rok{font-size:11px;opacity:.9;display:block;}

/* === obsah pod datem === */

.aktualita-content {

margin-top:64px; /* vyvážená mezera pod oranžovým blokem */

}

.aktualita-title {

font-size:18px;

font-weight:800;

color:var(--text);

margin:0 0 10px;

}

.aktualita-excerpt {

font-size:15px;

line-height:1.6;

color:#2b2b2b;

margin-bottom:10px; /* stejné jako mezi nadpisem a textem */

}

.aktualita-meta {

font-size:13px;

color:var(--muted);

margin-top:10px; /* stejné jako předchozí mezery */

}

</style>

SEM VKLÁDAT CELY HTML KÓD ZE SHORA S NAZVEM AKTUALITA (= MISTO TOHOT TEXTU, TEN SMAZAT)

</div>

</article>

</div>

</section

>

hrubý html text pro aktuality

Předloha pro přidání aktuality

Jednotlivé publikované aktuality

HTML kód pro obsažení aktuality

Pokročilá nastavení