Domů / UI Kit and Component Library SEOPRAKTICKY.CZ

UI Kit and Component Library SEOPRAKTICKY.CZ

Tato stránka slouží interním účelům a je určena pro zpracovatele obsahu na doméně SEOPRAKTICKY.CZ.

Odkaz na externí CSS pro AI: https://www.seoprakticky.cz/user/documents/upload/css/styl01.css

Sémantika nadpisů

Nadpis H1

Nadpis H2

Nadpis H3

Nadpis H4

Nadpis H5

Informační box v krátkém popisku produktu

⏱️

Nadpis

Textace. Důležité věty dělejme tučně.

Kód pro nasazení

<div style="font-family: 'Segoe UI', Helvetica, Arial, sans-serif; max-width: 800px; margin: 40px auto; position: relative;">
  <!-- Ikona nad rámečkem -->
  <div style="position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background-color: #ffd147; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #000; box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 1;">⏱️</div>

  <!-- Hlavní obsah -->
  <div style="background-color: #f8fdff; border: 2px dashed #5B9EA6; border-radius: 8px; padding: 45px 30px 30px 30px; text-align: center;">
    <meta charset="utf-8" />
    <h3 style="margin: 0 0 15px 0; font-size: 22px; font-weight: bold; color: #111;">Nadpis</h3>
    <p style="font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 0;">
      <meta charset="utf-8" />Textace. Důležité věty dělejme <strong>tučně</strong>.
    </p>
  </div>
</div>

 

Vložení kódu: .code-container


<div class="example">
  <h1>Ahoj světe!</h1>
  <p>Toto je ukázka kódu v moderním boxu.</p>
</div>

Kód pro tento prvek

Button pro vložení Google Meetu

Zamluvte si termín Google Meetu, kde můžeme probrat vaši konkrétní situaci a vybrat pro vás optimální řešení a rozsah splupráce.

Vše probereme nezávazně a s ohledem na vaše potřeby.

Kód pro nasazení

<div style="max-width: 800px; margin: 0 auto; text-align: center; font-family: 'Segoe UI', Helvetica, Arial, sans-serif;">
  <p style="color: #444; font-size: 15px; line-height: 1.5;">
    Zamluvte si termín Google Meetu, kde můžeme probrat vaši konkrétní situaci a vybrat pro vás optimální řešení a rozsah spolupráce.
  </p>

  <div style="margin-top: 25px;">
    <a href="https://calendar.app.google/rmcJkmKZHdXs9nkA7" target="_blank" rel="noopener noreferrer" style="display: inline-flex; align-items: center; justify-content: center; background-color: #ffd147; color: #000; text-decoration: none; padding: 16px 32px; border-radius: 50px; font-weight: bold; font-size: 16px; box-shadow: 0 6px 20px rgba(255, 209, 71, 0.4); border: none; transition: transform 0.2s ease;"> 
      <span style="margin-right: 10px; font-size: 20px;">📅</span> Rezeruji si konzultaci ZDARMA 
    </a>
  </div>

  <p style="font-size: 12px; color: #888; margin-top: 10px;">
    Vše probereme nezávazně a s ohledem na vaše potřeby.
  </p>
</div>

Informační box pro info ke kroku za krokem

📋

Postup nebo další sdělení

  • ✔ Bod č. 1
    (Méně důležitá dodatečná informace)
  • ✔ Bod č. 2 (nějaká dodatečná informace)
  •  

ℹ️ Informační sdělení vztahující se k tématu.

Kód pro nasazení

<div style="font-family: 'Segoe UI', Helvetica, Arial, sans-serif; max-width: 800px; margin: 50px auto; position: relative;">
<div style="position: absolute; top: -35px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; background-color: #ffd147; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 2;">📋</div>
<div style="background-color: #ffffff; border: 2px dashed #5B9EA6; border-radius: 8px; padding: 50px 40px 30px 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.02);">
<h3 style="margin: 0 0 30px 0; font-size: 22px; font-weight: 800; color: #111; text-align: center;">Postup nebo další sdělení</h3>
<ul style="list-style: none; padding: 0; margin: 0 0 30px 0;">
<li style="position: relative; padding-left: 35px; margin-bottom: 15px; font-size: 16px; line-height: 1.5; color: #333;"><span style="position: absolute; left: 0; top: 0px; color: #5b9ea6; font-size: 18px; font-weight: bold;">✔</span> <strong>Bod č. 1</strong><br /> <span style="color: #666; font-size: 14px;">(Méně důležitá dodatečná informace)</span></li>
<li style="position: relative; padding-left: 35px; margin-bottom: 15px; font-size: 16px; line-height: 1.5; color: #333;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-size: 18px; font-weight: bold;">✔</span> <strong>Bod č. 2</strong> (nějaká dodatečná informace)</li>
<li style="position: relative; padding-left: 35px; margin-bottom: 15px; font-size: 16px; line-height: 1.5; color: #333;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-size: 18px; font-weight: bold;">&amp;nbsp;</span></li>
</ul>
<div style="background-color: #f2f8f8; padding: 15px; border-radius: 4px; text-align: center;">
<p style="margin: 0; font-size: 14px; color: #444; font-style: italic;">ℹ️ Informační sdělení vztahující se k tématu.</p>
</div>
</div>
</div>

Proč spolupracovat se SEO PRAKTICKY - box

Proč spolupracovat se SEOPRAKTICKY.CZ?

Naše argumenty se opírají o hlubokou specializaci, prokazatelné výsledky, transparentní metody a závazek k neustálému rozvoji.

🚀

Specializace a špičkové know-how

(Odbornost a autorita)

SEOPRAKTICKY.CZ je úzce specializovaná agentura zaměřená pouze na SEO. Nejsme jen teoretici. Jsme největší ryze SEO agentura v Brně a jedna z největších v České republice.

  • ✔ Vzdělávání a hloubka znalostí: Naše know-how nedržíme pod pokličkou. Vydali jsme SEO knihy a video školení (např. knihu „SEO PRAKTICKY“ o rozsahu přes 500 stran, kterou CEO Collabimu označil za SEO bibli). Pořádáme SEO Akademii pro začátečníky i pokročilé.
  • ✔ Aktivní vývoj AI: Vyvíjíme vlastní AI aplikace (např. OCTODEEP - generická AI aplikace / ProFeed - AI-driven Feed Management Tool), což nám umožňuje implementovat pokročilé techniky Generative Engine Optimization (GEO/AIO).
📈

Prokazatelné a měřitelné výsledky

(Orientace na ROI)

Namísto planých slibů se zaměřujeme na měřitelné výsledky a transparentní reporting.

  • ✔ Růst organické návštěvnosti: Meziroční nárůsty dosahují tisíců procent (např. Collabim +2400 %). U e-shopu TOPNYZEBRIK.CZ jsme dosáhli 83 % všech frází v TOP3 na Google.
  • ✔ KPI zaměřené na byznys: Sledujeme nárůst organické návštěvnosti, posun v pozicích klíčových slov, konverze a technický stav webu.
  • ✔ Testování na vlastních projektech: Veškeré strategie aplikujeme na našich interních e-shopech a webech (obrat 15+ mil. Kč v r. 2025). Nebudete náš „pokusný králík“.
🤝

Koncepční a etický přístup

(Systematičnost a transparentnost)

Naše spolupráce je založena na systematičnosti, transparentnosti a etice, což je klíčové pro udržitelný dlouhodobý růst.

  • ✔ Systematické workflow: Jasně definované kroky od analýzy, přes on-page faktory a klíčová slova, až po tvorbu obsahu a vyhodnocování.
  • ✔ Poctivost a transparentnost: Reportujeme každý úkon. S klienty sdílíme veškeré postupy a know-how.
  • ✔ Odmítání Black-Hat SEO: Nikdy nepoužíváme rizikový nákup odkazů. Hrajeme podle pravidel pro dlouhodobé výsledky.

Díky našemu úzce specializovanému a datově řízenému přístupu se můžete soustředit na to, co děláte nejlépe, zatímco my se postaráme o to, aby vaše stránky rostly v organickém vyhledávání efektivně a udržitelně.

Kód pro nasazení

<div style="font-family: 'Segoe UI', Helvetica, Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 40px 20px; color: #333;">
<div style="text-align: center; margin-bottom: 70px;">
<h2 style="font-size: 32px; font-weight: 800; margin: 0 0 15px 0; color: #111;">Proč spolupracovat se SEOPRAKTICKY.CZ?</h2>
<p style="font-size: 18px; color: #555; max-width: 700px; margin: 0 auto; line-height: 1.6;">Naše argumenty se opírají o hlubokou specializaci, prokazatelné výsledky, transparentní metody a závazek k neustálému rozvoji.</p>
</div>
<div style="position: relative; margin-bottom: 70px;">
<div style="position: absolute; top: -35px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; background-color: #ffd147; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 2;">🚀</div>
<div style="background-color: #f2f8f8; border: 1px dashed #5B9EA6; padding: 55px 40px 40px 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.03);">
<h3 style="margin: 0 0 5px 0; font-size: 22px; color: #111; font-weight: 800; text-align: center;">Specializace a špičkové know-how</h3>
<p style="margin: 0 0 25px 0; font-size: 14px; color: #666; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; text-align: center;">(Odbornost a autorita)</p>
<p style="margin-bottom: 20px; line-height: 1.6; font-size: 16px;"><strong>SEOPRAKTICKY.CZ</strong> je úzce specializovaná agentura zaměřená pouze na SEO. Nejsme jen teoretici. Jsme největší ryze SEO agentura v Brně a jedna z největších v České republice.</p>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="position: relative; padding-left: 25px; margin-bottom: 15px; line-height: 1.6;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-weight: bold;">✔</span> <strong>Vzdělávání a hloubka znalostí:</strong> Naše know-how nedržíme pod pokličkou. Vydali jsme SEO knihy a video školení (např. knihu „SEO PRAKTICKY“ o rozsahu přes 500 stran, kterou CEO Collabimu označil za SEO bibli). Pořádáme SEO Akademii pro začátečníky i pokročilé.</li>
<li style="position: relative; padding-left: 25px; margin-bottom: 0; line-height: 1.6;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-weight: bold;">✔</span> <strong>Aktivní vývoj AI:</strong> Vyvíjíme vlastní AI aplikace (např. OCTODEEP - generická AI aplikace / ProFeed - AI-driven Feed Management Tool), což nám umožňuje implementovat pokročilé techniky Generative Engine Optimization (GEO/AIO).</li>
</ul>
</div>
</div>
<div style="position: relative; margin-bottom: 70px;">
<div style="position: absolute; top: -35px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; background-color: #ffd147; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 2;">📈</div>
<div style="background-color: #f2f8f8; border: 1px dashed #5B9EA6; padding: 55px 40px 40px 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.03);">
<h3 style="margin: 0 0 5px 0; font-size: 22px; color: #111; font-weight: 800; text-align: center;">Prokazatelné a měřitelné výsledky</h3>
<p style="margin: 0 0 25px 0; font-size: 14px; color: #666; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; text-align: center;">(Orientace na ROI)</p>
<p style="margin-bottom: 20px; line-height: 1.6; font-size: 16px;">Namísto planých slibů se zaměřujeme na měřitelné výsledky a transparentní reporting.</p>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="position: relative; padding-left: 25px; margin-bottom: 15px; line-height: 1.6;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-weight: bold;">✔</span> <strong>Růst organické návštěvnosti:</strong> Meziroční nárůsty dosahují tisíců procent (např. Collabim +2400 %). U e-shopu TOPNYZEBRIK.CZ jsme dosáhli 83 % všech frází v TOP3 na Google.</li>
<li style="position: relative; padding-left: 25px; margin-bottom: 15px; line-height: 1.6;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-weight: bold;">✔</span> <strong>KPI zaměřené na byznys:</strong> Sledujeme nárůst organické návštěvnosti, posun v pozicích klíčových slov, konverze a technický stav webu.</li>
<li style="position: relative; padding-left: 25px; margin-bottom: 0; line-height: 1.6;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-weight: bold;">✔</span> <strong>Testování na vlastních projektech:</strong> Veškeré strategie aplikujeme na našich interních e-shopech a webech (obrat 15+ mil. Kč v r. 2025). Nebudete náš „pokusný králík“.</li>
</ul>
</div>
</div>
<div style="position: relative; margin-bottom: 40px;">
<div style="position: absolute; top: -35px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; background-color: #ffd147; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 2;">🤝</div>
<div style="background-color: #f2f8f8; border: 1px dashed #5B9EA6; padding: 55px 40px 40px 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.03);">
<h3 style="margin: 0 0 5px 0; font-size: 22px; color: #111; font-weight: 800; text-align: center;">Koncepční a etický přístup</h3>
<p style="margin: 0 0 25px 0; font-size: 14px; color: #666; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; text-align: center;">(Systematičnost a transparentnost)</p>
<p style="margin-bottom: 20px; line-height: 1.6; font-size: 16px;">Naše spolupráce je založena na systematičnosti, transparentnosti a etice, což je klíčové pro udržitelný dlouhodobý růst.</p>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="position: relative; padding-left: 25px; margin-bottom: 15px; line-height: 1.6;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-weight: bold;">✔</span> <strong>Systematické workflow:</strong> Jasně definované kroky od analýzy, přes on-page faktory a klíčová slova, až po tvorbu obsahu a vyhodnocování.</li>
<li style="position: relative; padding-left: 25px; margin-bottom: 15px; line-height: 1.6;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-weight: bold;">✔</span> <strong>Poctivost a transparentnost:</strong> Reportujeme každý úkon. S klienty sdílíme veškeré postupy a know-how.</li>
<li style="position: relative; padding-left: 25px; margin-bottom: 0; line-height: 1.6;"><span style="position: absolute; left: 0; top: 2px; color: #5b9ea6; font-weight: bold;">✔</span> <strong>Odmítání Black-Hat SEO:</strong> Nikdy nepoužíváme rizikový nákup odkazů. Hrajeme podle pravidel pro dlouhodobé výsledky.</li>
</ul>
</div>
</div>
<div style="text-align: center; margin-top: 50px; padding: 20px; background-color: #fff; border-radius: 8px;">
<p style="font-size: 16px; font-weight: 500; color: #333; line-height: 1.6; max-width: 750px; margin: 0 auto;">Díky našemu úzce specializovanému a datově řízenému přístupu se můžete soustředit na to, co děláte nejlépe, zatímco my se postaráme o to, aby vaše stránky rostly v organickém vyhledávání efektivně a udržitelně.</p>
</div>
</div>

Co potřebujete najít?

Doporučujeme