# Design system Blue Studio

Tento soubor popisuje design system Blue Studio. Při návrhu nebo kódu se drž jeho pravidel, používej jen uvedené barvy, písma a komponenty a jejich HTML přebírej beze změny tříd. Nevymýšlej nové barvy ani styly.

Bílé stránky, černý text, sytě modrá tlačítka a světle šedozelené plochy.

Písmo: Matter. Ukázkový web: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/. Katalog: https://www.romankacerek.cz/dev/designsystem/bluestudio/. Sestaveno 12. 11. 2026.

## Soubory

Načti je v tomto pořadí:

- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/cache/min/dsx46tf0/dxk6y.css
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/cache/min/2qfxyb5t/fklj0.css
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs-child/style.css
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/cache/min/8linptjj/fklj0.css
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/zaklad/js/jquery/jquery.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/zaklad/js/jquery/jquery-migrate.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/zaklad/js/dist/hooks.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/moduly/bs-popups-lite/src/assets/js/bspopups.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/moduly/embedder-for-google-reviews/dist/js/public-bundle.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/jquery.easing.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/priority.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/transit.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/waypoints.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/moduly/bs-portfolio/js/third-party/imagesLoaded.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/hoverintent.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/jquery.fancybox.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/anime.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/flickity.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/stickkit.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/vivus.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/superfish.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/init.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/moduly/bs-core/js/third-party/touchswipe.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/sablony/bs/js/build/third-party/select2.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/assets/moduly/stavebnice_bs/assets/js/dist/stavebnice_front.min.js
- https://www.romankacerek.cz/dev/designsystem/bluestudio/site/styly-stranky.css

Relativní cesty v HTML níže vedou do https://www.romankacerek.cz/dev/designsystem/bluestudio/site/.

## Pravidla

### Základ
- Bílé stránky s černým textem `#0a0a0a`, sytě modrá `#0000ff` jen na tlačítka, štítky a akcenty.
- Světle šedozelená `#eef2f0` odděluje sekce a nese karty služeb.
- Písmo Matter ve všech velikostech, nadpisy řez 500, text 22 px.
- Obsah široký nejvýš 1520 px na monitorech do 1920 px, na větších 2130 px. Hlavička jde vždy přes celou šířku.
- Sekce oddělují velké svislé mezery.

### Tlačítka
- Plné modré tlačítko `tlacitko-modre` ve tvaru pilulky, rámeček 2 px, řez 500.
- Obrysové tlačítko `tlacitko-obrys`, bílé s modrým rámečkem, v kartách přes celou šířku.
- V hlavičce je výzva „Probrat váš projekt“ jako malá modrá pilulka.

### Obrázky
- Fotky a videa projektů nahrazuje sada 20 modrých vzorů, tmavých i světlých.
- Obrázky mají zaoblení 10 px, náhledy projektů a článků jsou na šířku.

### Navigace
- Hlavička s logem, odkazy a podmenu Služby (Design, Weby, Marketing).
- Na telefonu se menu otevírá z boku přes celou výšku a zavírá křížkem.
- Patička s tlačítkem, kontaktem, dvěma sloupci odkazů a řádkem s právními odkazy.

## Barvy

| Název | Hodnota | V tmavém tématu | Použití |
| --- | --- | --- | --- |
| modrá | #0000ff |  | Tlačítka, štítky, odrážky, hvězdičky a odkazy v textu. |
| inkoust | #0a0a0a |  | Nadpisy, text, ikony a čáry v patičce. |
| šedozelená | #eef2f0 |  | Podklad střídavých sekcí, karet a polí formuláře. |
| bílá | #ffffff |  | Stránka, karty služeb a text na modré. |
| šedá | #696a74 |  | Data článků, popisky a doplňující text. |
| jasná modrá | #3452ff |  | Světlejší odstín modré v ilustracích a vzorech. |

## Typografie

| Styl | Hodnoty | Použití |
| --- | --- | --- |
| H1 úvodu | viz CSS | Hlavní nadpis stránky, nejvýš dva řádky. |
| Nadpis sekce | viz CSS | Nadpis sekce ve velikosti H1, například Nejnovější projekty. Na stránce je jen jeden H1. |
| H2 karty | viz CSS | Nadpis karty služby. |
| H3 sekce | viz CSS | Menší nadpis v obsahu služby. |
| H4 seznamu | viz CSS | Nadpis položky seznamu s ikonou. |
| Cena | viz CSS | Cena balíčku. |
| Text | viz CSS | Běžný odstavec, tučné jen klíčová slova. |
| Nadpis článku | viz CSS | Titulek článku. |
| H2 článku | viz CSS | Mezititulek v textu článku. |
| Text článku | viz CSS | Odstavec článku. |

## Mezery a šířky

| Název | Hodnota | Použití |
| --- | --- | --- |
| šířka obsahu | 1520px | Nejvyšší šířka obsahu na monitorech do 1920 px, na větších 2130 px. |
| okraj stránky | 90px | Boční okraj na počítači, na telefonu 20 px. |
| sekce | 120px | Svislá mezera mezi hlavními sekcemi. |
| mezera mřížky | 30px | Mezera mezi kartami a náhledy. |
| tlačítko | 30px 60px | Vnitřní okraj velkého tlačítka. |

## Rádiusy

| Název | Hodnota | Použití |
| --- | --- | --- |
| obrázek a karta | 10px | Fotky, náhledy projektů a karty služeb. |
| pilulka | 100px | Tlačítka a štítky. |
| velká plocha | 30px | Rámeček sekce a formuláře. |
| hodnocení | 50px 50px 50px 0 | Bublina hodnocení klienta, ostrý roh vlevo dole. |

## Komponenty: Hlavička a patička

### Hlavička

Logo vlevo, odkazy menu a modrá výzva vpravo. Odkazy 20 px řez 500, při najetí podtržení 1 px. Třídy: `#header-outer`, `sf-menu`, `menu-item-btn-style-button`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div data-box-shadow="none" data-cart="false" data-condense="false" data-format="menu-left-aligned" data-full-width="true" data-has-buttons="no" data-has-menu="true" data-header-button_style="hover_scale" data-header-resize="0" data-lhe="animated_underline" data-logo-height="48" data-m-logo-height="36" data-megamenu-rt="1" data-mobile-fixed="1" data-padding="28" data-permanent-transparent="false" data-ptnm="false" data-remove-fixed="0" data-shrink-num="6" data-transparency-option="0" data-user-set-bg="#ffffff" data-using-logo="1" data-using-pr-menu="true" data-using-secondary="0" id="header-outer">
<div class="nectar" data-nosnippet="" id="search-outer">
<div id="search">
<div class="container">
<div id="search-box">
<div class="inner-wrap">
<div class="col span_12">
<form role="search">
<input aria-label="Search" name="s" placeholder="Hledat…" type="text" value=""/>
<button aria-label="Search" class="search-box__button" type="submit">Search</button> </form>
</div>
</div>
</div>
<div id="close"><a href="#" role="button"><span class="screen-reader-text">Close Search</span>
<span class="close-wrap"> <span class="close-line close-line1" role="presentation"></span> <span class="close-line close-line2" role="presentation"></span> </span> </a></div>
</div>
</div>
</div>
<header aria-label="Main Menu" id="top" role="banner">
<div class="container">
<div class="row">
<div class="col span_3">
<a data-supplied-ml="false" data-supplied-ml-starting="false" data-supplied-ml-starting-dark="false" href="#" id="logo">
<img alt="BLUE STUDIO Brno" class="stnd skip-lazy" height="34" src="obrazky/logo.svg" width="34"/> </a>
</div>
<div class="col span_9 col_last">
<div class="nectar-mobile-only mobile-header"><div class="inner"></div></div>
<div class="slide-out-widget-area-toggle mobile-icon slide-out-from-right-hover" data-custom-color="false" data-icon-animation="simple-transform">
<div> <a aria-expanded="false" aria-label="Navigation Menu" class="closed using-label" href="#" role="button">
<i class="label">Menu</i><span aria-hidden="true"> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a></div>
</div>
<nav aria-label="Main Menu">
<ul class="sf-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nectar-regular-menu-item menu-item-5197" id="menu-item-5197"><a aria-expanded="false" aria-haspopup="true" href="#"><span class="menu-title-text">Služby</span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-7486" id="menu-item-7486"><a href="#"><span class="menu-title-text">Design</span></a></li><li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-5138" id="menu-item-5138"><a href="#"><span class="menu-title-text">Weby</span></a></li><li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-5175" id="menu-item-5175"><a href="#"><span class="menu-title-text">Marketing</span></a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-1480" id="menu-item-1480"><a href="#"><span class="menu-title-text">Projekty</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category nectar-regular-menu-item menu-item-9260" id="menu-item-9260"><a href="#"><span class="menu-title-text">Případové studie</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-1481" id="menu-item-1481"><a href="#"><span class="menu-title-text">Klienti</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-3314" id="menu-item-3314"><a href="#"><span class="menu-title-text">Články</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-11827" id="menu-item-11827"><a href="#"><span class="menu-title-text">Kontakt</span></a></li>
</ul>
</nav>
</div>
<div class="right-aligned-menu-items">
<nav>
<ul class="buttons sf-menu" data-user-set-ocm="off"><li class="button menu-item menu-item-type-post_type menu-item-object-page button_solid_color_2 menu-item-9004" id="menu-item-9004"><a href="#"><span class="menu-title-text">Probrat váš projekt</span></a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div></div></div>
```

### Podmenu Služby

Rozbalené podmenu položky Služby s odkazy Design, Weby a Marketing. Otevírá se najetím, má jemný stín a zaoblené spodní rohy. Podtržená je jen aktuální a najetá položka. Třídy: `menu-item-has-children`, `sub-menu`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div data-box-shadow="none" data-cart="false" data-condense="false" data-format="menu-left-aligned" data-full-width="true" data-has-buttons="no" data-has-menu="true" data-header-button_style="hover_scale" data-header-resize="0" data-lhe="animated_underline" data-logo-height="48" data-m-logo-height="36" data-megamenu-rt="1" data-mobile-fixed="1" data-padding="28" data-permanent-transparent="false" data-ptnm="false" data-remove-fixed="0" data-shrink-num="6" data-transparency-option="0" data-user-set-bg="#ffffff" data-using-logo="1" data-using-pr-menu="true" data-using-secondary="0" id="header-outer">
<div class="nectar" data-nosnippet="" id="search-outer">
<div id="search">
<div class="container">
<div id="search-box">
<div class="inner-wrap">
<div class="col span_12">
<form role="search">
<input aria-label="Search" name="s" placeholder="Hledat…" type="text" value=""/>
<button aria-label="Search" class="search-box__button" type="submit">Search</button> </form>
</div>
</div>
</div>
<div id="close"><a href="#" role="button"><span class="screen-reader-text">Close Search</span>
<span class="close-wrap"> <span class="close-line close-line1" role="presentation"></span> <span class="close-line close-line2" role="presentation"></span> </span> </a></div>
</div>
</div>
</div>
<header aria-label="Main Menu" id="top" role="banner">
<div class="container">
<div class="row">
<div class="col span_3">
<a data-supplied-ml="false" data-supplied-ml-starting="false" data-supplied-ml-starting-dark="false" href="#" id="logo">
<img alt="BLUE STUDIO Brno" class="stnd skip-lazy" height="34" src="obrazky/logo.svg" width="34"/> </a>
</div>
<div class="col span_9 col_last">
<div class="nectar-mobile-only mobile-header"><div class="inner"></div></div>
<div class="slide-out-widget-area-toggle mobile-icon slide-out-from-right-hover" data-custom-color="false" data-icon-animation="simple-transform">
<div> <a aria-expanded="false" aria-label="Navigation Menu" class="closed using-label" href="#" role="button">
<i class="label">Menu</i><span aria-hidden="true"> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a></div>
</div>
<nav aria-label="Main Menu">
<ul class="sf-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nectar-regular-menu-item menu-item-5197" id="menu-item-5197"><a aria-expanded="false" aria-haspopup="true" href="#"><span class="menu-title-text">Služby</span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-7486" id="menu-item-7486"><a href="#"><span class="menu-title-text">Design</span></a></li><li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-5138" id="menu-item-5138"><a href="#"><span class="menu-title-text">Weby</span></a></li><li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-5175" id="menu-item-5175"><a href="#"><span class="menu-title-text">Marketing</span></a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-1480" id="menu-item-1480"><a href="#"><span class="menu-title-text">Projekty</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category nectar-regular-menu-item menu-item-9260" id="menu-item-9260"><a href="#"><span class="menu-title-text">Případové studie</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-1481" id="menu-item-1481"><a href="#"><span class="menu-title-text">Klienti</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-3314" id="menu-item-3314"><a href="#"><span class="menu-title-text">Články</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nectar-regular-menu-item menu-item-11827" id="menu-item-11827"><a href="#"><span class="menu-title-text">Kontakt</span></a></li>
</ul>
</nav>
</div>
<div class="right-aligned-menu-items">
<nav>
<ul class="buttons sf-menu" data-user-set-ocm="off"><li class="button menu-item menu-item-type-post_type menu-item-object-page button_solid_color_2 menu-item-9004" id="menu-item-9004"><a href="#"><span class="menu-title-text">Probrat váš projekt</span></a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div></div></div>
```

### Mobilní menu

Menu na telefonu otevřené z boku přes celou výšku, s podmenu a kontaktem. Zavírá se křížkem. Třídy: `slide-out-widget-area`, `off-canvas-menu-container`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div aria-label="Off Canvas Menu" aria-modal="true" class="slide-out-from-right-hover" data-back-txt="zpět" data-dropdown-func="default" id="slide-out-widget-area" role="dialog">
<div class="inner-wrap">
<div class="inner" data-prepend-menu-mobile="false">
<a class="slide_out_area_close" href="#"><span class="screen-reader-text">Close Menu</span>
<span class="close-wrap"> <span class="close-line close-line1" role="presentation"></span> <span class="close-line close-line2" role="presentation"></span> </span> </a>
<div class="off-canvas-menu-container mobile-only" role="navigation">
<ul class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-5197"><a aria-expanded="false" aria-haspopup="true" href="#">Služby</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7486"><a href="#">Design</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5138"><a href="#">Weby</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5175"><a href="#">Marketing</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1480"><a href="#">Projekty</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9260"><a href="#">Případové studie</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1481"><a href="#">Klienti</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3314"><a href="#">Články</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11827"><a href="#">Kontakt</a></li>
<li class="button menu-item menu-item-type-post_type menu-item-object-page menu-item-9004"><a href="#">Probrat váš projekt</a></li>
</ul>
<ul class="menu secondary-header-items">
</ul>
</div>
</div>
<div class="bottom-meta-wrap"><div class="widget widget_nav_menu" id="nav_menu-4"><div class="menu-off-canvas-container"><ul class="menu" id="menu-off-canvas"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10873" id="menu-item-10873"><a href="#">Design magazín</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4328" id="menu-item-4328"><a href="#">Podmínky spolupráce</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-10754" id="menu-item-10754"><a href="#" rel="privacy-policy">Osobní údaje</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10755" id="menu-item-10755"><a href="#">Cookies</a></li>
</ul></div></div></div></div>
</div></div></div></div>
```

### Patička

Tlačítko, firma s kontaktem, dva sloupce odkazů a spodní řádek s copyrightem a právními odkazy. Třídy: `#footer-outer`, `#footer-widgets`, `#copyright`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div data-bg-img-overlay="1.0" data-cols="5" data-copyright-line="false" data-custom-color="true" data-disable-copyright="false" data-full-width="false" data-link-hover="default" data-matching-section-color="true" data-midnight="light" data-using-bg-img="false" data-using-widget-area="true" id="footer-outer" role="contentinfo">
<div data-cols="5" data-has-widgets="true" id="footer-widgets">
<div class="container">
<div class="row">
<div class="col span_3">
<div class="widget widget_text" id="text-4"> <div class="textwidget"><a class="nectar-button small regular accent-color regular-button tlacitko-modre" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-bottom: 30px; color: #ffffff; background-color: #0a0a0a;" target="_blank"><span>Probrat váš projekt</span></a>
</div>
</div> </div>
<div class="col span_3">
<div class="widget widget_text" id="text-2"> <div class="textwidget"><p><strong>BLUE STUDIO s.r.o.</strong></p>
<div class="footer-kontakt"><a href="#" id="CTAlinkEmailTo">info@blue.example</a><br/>
<a href="#" id="CTAlinkCallTo">+420 234 567 890</a></div>
</div>
</div>
</div>
<div class="col span_3">
<div class="widget widget_nav_menu" id="nav_menu-2"><div class="menu-footer-menu-03-container"><ul class="menu" id="menu-footer-menu-03"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3328" id="menu-item-3328"><a href="#">Projekty</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5198" id="menu-item-5198"><a href="#">Služby</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9153" id="menu-item-9153"><a href="#">Případové studie</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3330" id="menu-item-3330"><a href="#">Klienti</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5203" id="menu-item-5203"><a href="#">Články</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9286" id="menu-item-9286"><a href="#">Kontakt</a></li>
</ul></div></div>
</div>
<div class="col span_3">
<div class="widget widget_nav_menu" id="nav_menu-3"><div class="menu-footer-menu-04-container"><ul class="menu" id="menu-footer-menu-04"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4562" id="menu-item-4562"><a href="#">Praktický magazín</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4783" id="menu-item-4783"><a href="#">Ke stažení</a></li>
</ul></div></div>
</div>
</div>
</div>
</div>
<div class="row" data-layout="default" id="copyright">
<div class="container">
<div class="col span_5">
<p></p><div class="left">2008-2026 © BLUE STUDIO s.r.o., IČO: 12345678</div> <div class="right"><a href="#">Podmínky spolupráce</a> <a href="#">Osobní údaje</a> <a href="#">Cookies</a></div>
</div>
<div class="col span_7 col_last">
<ul class="social">
</ul>
</div>
</div>
</div>
</div></div></div></div>
```

## Komponenty: Úvod

### Úvod domovské stránky

Nadpis, perex, modré tlačítko a hodnocení 4,8 s hvězdičkami, vpravo obrázek posledního projektu s odkazem. Třídy: `top-level`, `tlacitko-modre`, `nectar-post-grid-wrap`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row top-level has-global-section full-width-section vc_row-o-equal-height vc_row-flex vc_row-o-content-middle top_padding_tablet_40px top_padding_phone_20px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="dark" id="fws_6aaec9d5ee163" style="padding-top: 70px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-12 bsb_column column_container vc_column_container col no-extra-padding top_margin_tablet_40px top_margin_phone_20px bottom_margin_tablet_40px bottom_margin_phone_20px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-top: 20px; margin-bottom: 40px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_0px top_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aaec9d5eec7f" style="padding-top: 20px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-responsive-text font_size_desktop_2-3em font_size_tablet_2-1em font_size_phone_1-8em font_line_height_1-2em nectar-link-underline-effect" style="max-width: 760px;"><div class="bsb_row vc_row-fluid vc_row inner_row right_padding_100px bottom_padding_tablet_20px bottom_padding_phone_20px right_padding_tablet_0px right_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_67bdcac3781cd">
<div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<div class="bsb_wrapper">
<h1><strong>Vaše firma si zaslouží vypadat profesionálně</strong></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bsb_text_column bsb_content_element" style=" max-width: 900px; display: inline-block;">
<p data-end="361" data-start="294">Vytvoříme pro vás <strong>design, web i marketing tak, aby lidé hned pochopili, co děláte a proč si vybrat právě vás</strong>. Jsme BLUE STUDIO, grafické a webové studio z Brna pro celou ČR.</p>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d5ef6f3" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<a class="nectar-button jumbo regular accent-color regular-button tlacitko-modre" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" id="CTAbtnHeroKonzultace" role="button" style="margin-top: 10px; margin-bottom: 10px; color: #ffffff; background-color: #0a0a0a;"><span>Domluvit nezávaznou konzultaci</span></a>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row male" data-column-margin="default" data-midnight="" id="fws_6aaec9d5efdfa" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row" data-column-margin="default" data-midnight="dark" id="fws_6aaec9d5f0f3b" style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="iwithtext"><div class="iwt-icon"> <img alt="Google" decoding="async" src="assets/soubory/2025/12/google-logo.svg"/> </div><div class="iwt-text">
<div class="hodnoceni"><span class="stredni-text"><strong>4,8</strong></span></div>
<p><img alt="" class="size-full bs-image-5523 alignnone" decoding="async" height="18" role="img" src="assets/soubory/2024/12/star.svg" width="18"/><img alt="" class="size-full bs-image-5523 alignnone" decoding="async" height="18" role="img" src="assets/soubory/2024/12/star.svg" width="18"/><img alt="" class="size-full bs-image-5523 alignnone" decoding="async" height="18" role="img" src="assets/soubory/2024/12/star.svg" width="18"/><img alt="" class="size-full bs-image-5523 alignnone" decoding="async" height="18" role="img" src="assets/soubory/2024/12/star.svg" width="18"/><img alt="" class="size-full bs-image-5523 alignnone" decoding="async" height="18" role="img" src="assets/soubory/2024/12/star.svg" width="18"/><br/>
<a href="#" rel="noopener">recenze od našich klientů</a> </p></div><div class="clear"></div></div>
</div>
</div>
</div>
</div></div>
<style data-type="vc_custom-css" type="text/css">img.size-full.bs-image-5523.alignnone {
display: inline-flex;
}
@media (min-width: 1000px) {
.row .col .iwithtext .iwt-icon img:not([srcset]) {
width: 32px;
border-radius: 0 !important;
margin-top: 5px;
}
}
.iwithtext .iwt-icon {
top: 3px!important;
}
.iwithtext .iwt-text {
padding-left: 45px !important;
}
.hodnoceni {
display: flex;
position: absolute;
font-size: 1.2em;
}
.iwithtext .iwt-text p {
padding-top:5px;
padding-left: 3em !important;
line-height: 1.2em;
}</style><style data-type="vc_custom-css">img.size-full.bs-image-5523.alignnone {
display: inline-flex;
}
@media (min-width: 1000px) {
.row .col .iwithtext .iwt-icon img:not([srcset]) {
width: 32px;
border-radius: 0 !important;
margin-top: 5px;
}
}
.iwithtext .iwt-icon {
top: 3px!important;
}
.iwithtext .iwt-text {
padding-left: 45px !important;
}
.hodnoceni {
display: flex;
position: absolute;
font-size: 1.2em;
}
.iwithtext .iwt-text p {
padding-top:5px;
padding-left: 3em !important;
line-height: 1.2em;
}</style>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-12 bsb_column column_container vc_column_container col no-extra-padding top_margin_tablet_20px top_margin_phone_20px bottom_margin_tablet_20px bottom_margin_phone_40px inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-bottom: 20px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-post-grid-wrap text-color-light spacing-none" data-el-settings='{"post_type":"portfolio","pagination":"none","image_size":"medium","parallax_scrolling":"","aspect_ratio_image_size":"","category_position":"default","category_display":"default","display_categories":"0","display_excerpt":"0","excerpt_length":"20","content_next_to_image_excerpt_pos":"default","display_date":"0","display_estimated_reading_time":"0","display_author":"0","author_functionality":"default","author_position":"default","color_overlay":"","color_overlay_opacity":"0.3","color_overlay_hover_opacity":"0.4","card_bg_color":"","grid_style":"content_overlaid","hover_effect":"animated_underline","post_title_overlay":"","heading_tag":"default","heading_tag_render":"default","enable_gallery_lightbox":"0","remove_links":"0","category_style":"underline","overlay_secondary_project_image":"","vertical_list_hover_effect":"none","vertical_list_read_more":"","vertical_list_read_more_style":"text","read_more_button":"0","animation":"none","custom_fields":"","custom_fields_location":"before_post_meta","display_type":"grid","text_content_layout":"all_bottom_left"}' data-load-more-color="black" data-load-more-text="Zobrazit další" data-query='{"post_type":"portfolio","posts_per_page":"1","order":"DESC","orderby":"date","offset":"0","cpt_name":"post","custom_query_tax":"","ignore_sticky_posts":"","exclude_current_post":""}' data-style="content_overlaid"><div class="nectar-post-grid-filters" data-active-color="default" data-align="default" data-animation="none" data-sortable=""><div><a class="active all-filter" data-filter="-1" data-total-count="30" href="#">Vše</a><a data-filter="eshop" data-total-count="3" href="#">E-shop</a><a data-filter="vizualni-identita" data-total-count="23" href="#">Logo a identita</a><a data-filter="marketing" data-total-count="6" href="#">Marketing</a><a data-filter="tiskoviny" data-total-count="22" href="#">Tiskoviny</a><a data-filter="web" data-total-count="14" href="#">Tvorba webu</a><a data-filter="ux-webdesign" data-total-count="20" href="#">Webdesign</a></div></div><div class="nectar-post-grid custom_font_size_22px font_size_tablet_22px font_size_phone_18px text-opacity-1 text-opacity-hover-1 overlaid-aspect-ratio-image-size-16-9 category-position-before-title" data-animation="none" data-animation-stagger="90" data-border-radius="none" data-cat-click="default" data-columns="1" data-grid-item-height="60vh" data-grid-spacing="none" data-hover-effect="animated_underline" data-indicator="" data-indicator-color="#000" data-indicator-style="default" data-indicator-text="ZOBRAZIT" data-indicator-text-color="#fff" data-shadow-hover="" data-text-color="light" data-text-hover-color="light" data-text-layout="all_bottom_left" data-text-style="default"><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="9730"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Excursia" class="nectar-post-grid-item-bg__media" decoding="async" fetchpriority="high" height="450" src="obrazky/excursia-video-b097d3.webp" width="800"/></div></div></div><div class="bg-overlay" data-hover-opacity="0.4" data-opacity="0.3"></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Excursia: Nová tvář dobrodružných zájezdů</span></a><div class="item-main"><h3 class="post-heading"><span>Excursia: Nová tvář dobrodružných zájezdů</span></h3></div></div></div></div></div></div>
<div class="bsb_text_column bsb_content_element nejmensi">
<p>Nejnovější projekt: <a href="#">Excursia: Nová tvář dobrodružných zájezdů</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Úvod služby

Nadpis služby, perex a tlačítka vedle obrázku. Třídy: `top-level`, `nectar-responsive-text`, `img-with-aniamtion-wrap`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row top-level full-width-section vc_row-o-equal-height vc_row-flex vc_row-o-content-middle reverse_columns_desktop top_padding_tablet_40px top_padding_phone_20px bs-uvod" data-column-margin="default" data-midnight="dark" id="fws_6ab1a0a965e1e" style="padding-top: 60px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-12 bsb_column column_container vc_column_container col no-extra-padding top_margin_tablet_40px top_margin_phone_20px bottom_margin_tablet_20px bottom_margin_phone_20px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-top: 40px; margin-bottom: 60px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row top_padding_phone_20px bottom_padding_tablet_0px bottom_padding_phone_0px right_padding_tablet_0px right_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6ab1a0a9668e4" style="padding-bottom: 20px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-responsive-text font_size_desktop_2-3em font_size_tablet_2-1em font_size_phone_1-8em font_line_height_1-2em nectar-link-underline-effect" style="max-width: 1260px;"><div class="bsb_row vc_row-fluid vc_row inner_row right_padding_100px bottom_padding_tablet_20px bottom_padding_phone_20px right_padding_tablet_0px right_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_67bdcac3781cd">
<div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<div class="bsb_wrapper">
<h1><strong>Představte si nový web, který odráží jedinečnost vaší značky</strong></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row right_padding_tablet_0px right_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6ab1a0a9672b8" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element" style=" max-width: 690px; display: inline-block;">
<p>Funkční struktura, promyšlený design a technické řešení bez zbytečných efektů. Web je pracovní nástroj. Navrhujeme řešení, která fungují dnes i za pár let.</p>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6ab1a0a96790b" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<a class="nectar-button jumbo regular accent-color regular-button tlacitko-modre" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-top: 20px; margin-bottom: 20px; color: #ffffff; background-color: #0a0a0a;"><span>Probrat váš projekt</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-12 bsb_column column_container vc_column_container col centered-text no-extra-padding top_margin_tablet_30px top_margin_phone_30px bottom_margin_tablet_30px bottom_margin_phone_30px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-bottom: 10px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap center" data-animation="none" data-max-width="100%" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="pp center" href="#">
<img alt="Originální web, který přemění návštěvníky na zákazníky" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" fetchpriority="high" height="1513" src="obrazky/originalni-web-01-56da98.webp" width="2344"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Úvod projektu

Titulek detailu projektu se štítky oboru. Třídy: `project-title`, `section-title`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div id="full_width_portfolio"><div class="row project-title">
<div class="container">
<div class="title-wrap">
<div class="col span_12 section-title no-date">
<h1>Excursia: Nová tvář dobrodružných zájezdů</h1>
</div>
</div>
</div>
</div></div></div></div></div>
```

### Úvod článku

Titulek článku s datem a kategorií. Třídy: `blog-title`, `heading-title`, `meta-category`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap no-sidebar"><div class="container main-content"><div class="row heading-title hentry"><div class="col span_12 section-title blog-title">
<h1 class="entry-title">Jak probíhá tvorba webu: nejčastější obavy zákazníků a proces od první konzultace po spuštění</h1>
<div data-hide-on-mobile="false" id="single-below-header">
<span class="meta-author vcard author"><span class="fn"><span class="author-leading">By</span> <a href="#" rel="author">Jan Modrý</a></span></span><span class="meta-date date published">10. března 2026</span><span class="meta-date date updated rich-snippet-hidden">15 března, 2026</span><span class="meta-category"><a class="design" href="#">Design</a>, <a class="podnikani" href="#">Podnikání</a>, <a class="web" href="#">Web</a></span> </div>
</div></div></div></div></div></div></div>
```

## Komponenty: Služby

### Karty služeb

Tři bílé karty na šedozelené ploše: štítek, obrázek, nadpis, text, seznam s fajfkami a obrysové tlačítko. Nadpis je odkaz a podtrhne se i při najetí na obrázek. Třídy: `full-width-section`, `tlacitko-obrys`, `male`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row full-width-section has-row-bg-color vc_row-o-equal-height vc_row-flex top_margin_60px bottom_margin_0px top_padding_tablet_60px top_padding_phone_40px bottom_padding_tablet_60px bottom_padding_phone_40px right_padding_tablet_0px right_padding_phone_0px left_padding_tablet_0px left_padding_phone_0px top_margin_tablet_40px top_margin_phone_20px bottom_margin_tablet_0px bottom_margin_phone_0px" data-column-margin="40px" data-midnight="dark" id="fws_6aaec9d605fd8" style="padding-top: 120px; padding-bottom: 100px; --row-bg-color: #eef2f0;"><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop using-bg-color" style="background-color: #eef2f0; "></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_20px top_padding_phone_20px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aaec9d6068e1" style="padding-bottom: 60px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element stredni-text" style=" max-width: 1200px; display: inline-block;">
<p>Spolehlivé a dlouhodobé partnerství pro vaši firmu</p>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col no-extra-padding top_margin_phone_0px no-extra-padding_tablet no-extra-padding_phone" data-animation="" data-bg-color="#ffffff" data-bg-opacity="1" data-border-radius="10px" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #ffffff;"></div></div>
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d607663" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column padding-8-percent padding-6-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper bs-sluzba">
<div class="bsb_text_column bsb_content_element male">
<p><span style="color: #0000ff;"><strong>DESIGN</strong></span></p>
</div>
<div class="img-with-aniamtion-wrap tl_br_6px tr_br_6px bl_br_6px br_br_6px" data-animation="none" data-border-radius="custom" data-max-width="100%" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="" href="#" target="_self">
<img alt="Dejte svému brandu tvář, na kterou budete hrdí" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="1652" src="obrazky/brand-f74b00.webp" width="2560"/>
</a>
</div>
</div>
</div>
</div><div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 40px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<h2><a href="#"><strong>Logo a vizuální identita</strong></a></h2>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<p>Navrhujeme <strong>logotypy na míru, vizuální identity a brand manuály</strong> pro malé a střední firmy. <strong>Branding Brno</strong>, který vám pomůže působit konzistentně napříč všemi kanály.</p>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div>
<div class="bsb_text_column bsb_content_element male">
<ul>
<li>Originální návrh loga (ne šablona)</li>
<li>Kompletní vizuální identita firmy</li>
<li>Brand manuál a podklady pro tisk i online</li>
<li>Rebranding a modernizace stávajícího loga</li>
</ul>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div><a class="nectar-button large regular accent-color regular-button tlacitko-obrys tlacitko-full" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-top: 20px; margin-bottom: 20px; color: #ffffff; background-color: #0a0a0a;"><span>Další informace</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="#ffffff" data-bg-opacity="1" data-border-radius="10px" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #ffffff;"></div></div>
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d609460" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column padding-8-percent padding-6-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper bs-sluzba">
<div class="bsb_text_column bsb_content_element male">
<p><span style="color: #0000ff;"><strong>WEBY</strong></span></p>
</div>
<div class="img-with-aniamtion-wrap tl_br_6px tr_br_6px bl_br_6px br_br_6px" data-animation="none" data-border-radius="custom" data-max-width="100%" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="" href="#" target="_self">
<img alt="Originální web, který přemění návštěvníky na zákazníky" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="1513" src="obrazky/originalni-web-01-56da98.webp" width="2344"/>
</a>
</div>
</div>
</div>
</div><div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 40px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<h2><a href="#"><strong>Firemní nebo osobní web</strong></a></h2>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<p>Tvoříme <strong>firemní a osobní weby</strong> na míru na platformě <strong>WordPress</strong> a <strong>Shoptet e-shopy</strong>. Zaměřujeme se na tvorbu webu, UX, SEO a dlouhodobou udržitelnost.</p>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div>
<div class="bsb_text_column bsb_content_element male">
<ul>
<li>Analýza, struktura a obsah webu</li>
<li>UX a UI design, responzivní provedení</li>
<li>Technické SEO, rychlost a bezpečnost</li>
<li>Analytické a marketingové nástroje</li>
</ul>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div><a class="nectar-button large regular accent-color regular-button tlacitko-obrys tlacitko-full" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-top: 20px; margin-bottom: 20px; color: #ffffff; background-color: #0a0a0a;"><span>Další informace</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="#ffffff" data-bg-opacity="1" data-border-radius="10px" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #ffffff;"></div></div>
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d60b3df" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column padding-8-percent padding-6-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper bs-sluzba">
<div class="bsb_text_column bsb_content_element male">
<p><span style="color: #0000ff;"><strong>MARKETING</strong></span></p>
</div>
<div class="img-with-aniamtion-wrap tl_br_6px tr_br_6px bl_br_6px br_br_6px" data-animation="none" data-border-radius="custom" data-max-width="100%" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="" href="#" target="_self">
<img alt="Kompletní marketing pro vaši firmu" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="1513" src="obrazky/marketing-06-3d5b47.webp" width="2344"/>
</a>
</div>
</div>
</div>
</div><div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 40px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<h2><a href="#"><strong>Marketing a kampaně</strong></a></h2>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<p>Nastavujeme <strong>marketingovou strategii, </strong>spravujeme <strong>sociální sítě a </strong>spouštíme <strong>PPC kampaně</strong>. Zaměřujeme se na marketing pro malé firmy.</p>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div>
<div class="bsb_text_column bsb_content_element male">
<ul>
<li>Strategie komunikace a obsahový plán</li>
<li>Správa sociálních sítí (Facebook, Instagram)</li>
<li>Meta a Google Ads kampaně</li>
<li>Pravidelné reporty a optimalizace výsledků</li>
</ul>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div><a class="nectar-button large regular accent-color regular-button tlacitko-obrys tlacitko-full" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-top: 20px; margin-bottom: 20px; color: #ffffff; background-color: #0a0a0a;"><span>Další informace</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Postup v krocích

Číslované kroky 01. až 05., text vedle obrázku a střídání stran. Třídy: `vc_row-o-equal-height`, `img-with-animation`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row vc_row-o-equal-height vc_row-flex vc_row-o-content-middle max-width reverse_columns_desktop top_padding_tablet_0px top_padding_phone_0px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="70px" data-midnight="dark" id="fws_6ab1a0a96d331" style="padding-top: 20px; padding-bottom: 20px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-12 bsb_column column_container vc_column_container col no-extra-padding bottom_margin_tablet_20px bottom_margin_phone_20px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-bottom: 20px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap" data-animation="none" data-max-width="100%" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a aria-label="Brand manuál vám zajistí konzistenci a rozpoznatelnost vaší značky" class="pp" href="#" title="">
<img alt="Unikátní vzhled, který vynikne" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="1330" src="obrazky/originalni-web-02-f7c3ca.webp" width="1772"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-12 bsb_column column_container vc_column_container col no-extra-padding top_margin_tablet_20px top_margin_phone_20px bottom_margin_tablet_20px bottom_margin_phone_20px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row right_padding_100px bottom_padding_tablet_20px bottom_padding_phone_20px right_padding_tablet_0px right_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6ab1a0a96e1f7" style="padding-bottom: 20px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<h2 class="bs-h1"><span style="color: #0000ff;"><strong>01.</strong></span></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<h2 class="bs-h1"><strong>Unikátní vzhled, který vynikne</strong></h2>
</div>
<div class="bsb_text_column bsb_content_element" style=" max-width: 960px; display: inline-block;">
<p data-end="470" data-start="178"><strong data-end="224" data-start="178">Váš web nebude vypadat jako stovky jiných.</strong> Navrhneme pro vás originální vizuální styl na míru - žádné šablony, ale design, který vychází z vaší značky a z požadovaných cílů. Vytváříme funkční weby, které budí důvěru, zaujmou na první pohled a vedou návštěvníka k akci.</p>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Ceník

Seznam problémů s ikonami, kruhové fotky, štítky a tři balíčky s cenou „od“. Třídy: `nectar-icon-list-item`, `nectar-circle-images`, `nectar-badge`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row full-width-section has-row-bg-color vc_row-o-equal-height vc_row-flex top_margin_60px bottom_margin_0px top_padding_tablet_60px top_padding_phone_40px bottom_padding_tablet_40px bottom_padding_phone_40px right_padding_tablet_0px right_padding_phone_0px left_padding_tablet_0px left_padding_phone_0px top_margin_tablet_40px top_margin_phone_20px bottom_margin_tablet_0px bottom_margin_phone_0px" data-column-margin="40px" data-midnight="dark" id="ceny" style="padding-top: 120px; padding-bottom: 80px; --row-bg-color: #eef2f0;"><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop using-bg-color" style="background-color: #eef2f0; "></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_40px top_padding_phone_40px bottom_padding_tablet_40px bottom_padding_phone_20px" data-column-margin="default" data-midnight="" id="fws_6ab1a0a97623c" style="padding-bottom: 80px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element nadpis" style=" max-width: 1200px; display: inline-block;">
<h3>První dojem rozhoduje. Struktura, obsah, promyšlený design a technické řešení bez zbytečných efektů. Navrhujeme weby, které fungují dnes i za pár let.</h3>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="#ffffff" data-bg-opacity="1" data-border-radius="10px" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #ffffff;"></div></div>
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6ab1a0a976f0a" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column padding-8-percent padding-6-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<p><span style="color: #0000ff;"><strong>Balíček MINI</strong></span></p>
</div>
<div class="bsb_text_column bsb_content_element">
<h2 class="bs-h1"><strong>Začněte prodávat</strong></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p>Funkční web do 2 stránek - ideální pro menší nebo začínající projekty.</p>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
<div class="bsb_text_column bsb_content_element vc_custom_1757769304986">
<h2><span style="color: #0000ff;"><strong>od 24 990 Kč</strong></span></h2>
</div>
<div class="bsb_text_column bsb_content_element vc_custom_1759235168963 male" style=" max-width: 360px; display: inline-block;">
<p>+ bonus: správa webu v hodnotě 3 000 Kč na <strong>3 měsíce zdarma</strong></p>
</div>
<a class="nectar-button jumbo regular accent-color regular-button tlacitko-obrys tlacitko-full" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-top: 20px; margin-bottom: 40px; color: #ffffff; background-color: #0a0a0a;"><span>Probrat váš projekt</span></a><div class="divider-wrap height_tablet_10px height_phone_0px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<ul>
<li>2 stránky webu</li>
<li>Originální grafický návrh webu v ceně</li>
<li>Responzivní design je u nás standard</li>
<li>Praktické a funkční SEO</li>
<li>HTTPS a SSL certifikát</li>
<li>Zřízení e-mailů</li>
<li>Kontaktní formulář</li>
<li>Integrace GDPR</li>
<li>Možnost rozšíření o jazykové mutace</li>
<li>Podpora přes e-mail i telefon</li>
<li>Správa webu na 3 měsíce zdarma</li>
</ul>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="#ffffff" data-bg-opacity="1" data-border-animation="" data-border-animation-delay="" data-border-color="#0000FF" data-border-radius="10px" data-border-style="solid" data-border-width="1px" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner" style="border: 1px solid #0000FF;"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #ffffff;"></div></div>
<div class="bsb_wrapper">
<div class="nectar-badge nectar-inherit-body nectar-display-block text-color-0000FF padding-amount-large badge-style-default border-radius-20px"><div class="nectar-badge__inner nectar-bg-extra-color-2">Nejoblíbenější volba</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6ab1a0a978de4" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column padding-8-percent top_margin_tablet_-40px top_margin_phone_-40px padding-6-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<p><span style="color: #0000ff;"><strong>Balíček MAXI</strong></span></p>
</div>
<div class="bsb_text_column bsb_content_element">
<h2 class="bs-h1"><strong>Rozšiřte své podnikání<br/>
</strong></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p>Rozsáhlý web do 10 stránek, který pokryje všechny vaše služby a nabídky.</p>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
<div class="bsb_text_column bsb_content_element vc_custom_1763660665708">
<h2><span style="color: #0000ff;"><strong>od 59 990 Kč</strong></span></h2>
</div>
<div class="bsb_text_column bsb_content_element vc_custom_1773171648356 male" style=" max-width: 360px; display: inline-block;">
<p>+ bonus: správa webu v hodnotě 3 000 Kč na <strong>3 měsíce zdarma</strong></p>
</div>
<a class="nectar-button jumbo regular accent-color regular-button tlacitko-modre tlacitko-full" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-top: 20px; margin-bottom: 40px; color: #ffffff; background-color: #0a0a0a;"><span>Probrat váš projekt</span></a><div class="nectar-circle-images nectar-circle-images--position_overlapping size_40px alignment_left_desktop border_color_ffffff bs-varianta"><div class="nectar-circle-images__inner"><div class="nectar-circle-images__image nectar-circle-images__item" style='z-index: 100; background-image: url("obrazky/klient-lukas-berkovec-143cb1.webp");'></div><div class="nectar-circle-images__image nectar-circle-images__item" style='z-index: 99; background-image: url("obrazky/vyjadreni-klienta-petra-cvrkalova-5d4479.webp");'></div><div class="nectar-circle-images__image nectar-circle-images__item" style='z-index: 98; background-image: url("obrazky/vyjadreni-klienta-ondrej-jirovec-eca1f3.webp");'></div><div class="nectar-circle-images__image nectar-circle-images__item" style='z-index: 97; background-image: url("obrazky/vyjadreni-klienta-vit-pivonka-8eb923.webp");'></div></div><div class="nectar-circle-images__text nectar-circle-images__item">65% klientů vybírá tuto variantu</div></div><div class="divider-wrap height_tablet_10px height_phone_0px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<ul>
<li>Web do 10 stránek</li>
<li>Originální grafický návrh webu v ceně</li>
<li>Responzivní design je u nás standard</li>
<li>Detailní rozbor klíčových slov pro SEO</li>
<li>HTTPS a SSL certifikát</li>
<li>Zřízení e-mailů</li>
<li>Kontaktní stránka + formulář</li>
<li>Integrace GDPR a Cookies</li>
<li>Možnost rozšíření o jazykové mutace</li>
<li>Firemní zápis na Google a Seznam</li>
<li>Doména a hosting na 1. rok zdarma</li>
<li>Napojení na Google Analytics 4</li>
<li>Blog, fotogalerie, nabídka služeb</li>
<li>Podpora přes e-mail i telefon</li>
<li>Správa webu na 3 měsíce zdarma</li>
</ul>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="#ffffff" data-bg-opacity="1" data-border-radius="10px" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #ffffff;"></div></div>
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6ab1a0a97b674" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column padding-8-percent padding-6-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<p><span style="color: #0000ff;"><strong>Balíček PRO</strong></span></p>
</div>
<div class="bsb_text_column bsb_content_element">
<h2 class="bs-h1"><strong>Ovládněte váš trh</strong></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p>Kompletní řešení pro 10+ stránek i speciální funkce, které váš web posunou.</p>
</div>
<div class="divider-wrap height_tablet_10px height_phone_10px" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
<div class="bsb_text_column bsb_content_element vc_custom_1763660676239">
<h2><span style="color: #0000ff;"><strong>od 89 990 Kč</strong></span></h2>
</div>
<div class="bsb_text_column bsb_content_element vc_custom_1759235230946 male" style=" max-width: 360px; display: inline-block;">
<p>+ bonus: správa webu v hodnotě 6 000 Kč na <strong>6 měsíců zdarma</strong></p>
</div>
<a class="nectar-button jumbo regular accent-color regular-button tlacitko-obrys tlacitko-full" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" id="CTAbtnSluzbyWebBalicek3" role="button" style="margin-top: 20px; margin-bottom: 40px; color: #ffffff; background-color: #0a0a0a;"><span>Probrat váš projekt</span></a><div class="divider-wrap height_tablet_10px height_phone_0px" data-alignment="default"><div class="divider" style="height: 10px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<ul>
<li>10+ stránek webu</li>
<li>Originální grafický návrh webu v ceně</li>
<li>Responzivní design je u nás standard</li>
<li>SEO s ohledem na dohledatelnost</li>
<li>HTTPS a SSL certifikát</li>
<li>Zřízení e-mailů</li>
<li>Kontaktní stránka a individuální formuláře</li>
<li>Integrace GDPR a Cookies</li>
<li>Možnost rozšíření o jazykové mutace</li>
<li>Firemní zápis na Google a Seznam</li>
<li>Doména a hosting na 1. rok zdarma</li>
<li>Napojení na Google Analytics 4</li>
<li>Blog, fotogalerie, nabídka služeb</li>
<li>Zaškolení vašich zaměstnanců</li>
<li>Propojení s nástroji pro newsletter</li>
<li>Prémiová podpora i o víkendech</li>
<li>Správa webu na 6 měsíců zdarma</li>
</ul>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding top_margin_tablet_40px top_margin_phone_40px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-top: 60px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-icon-list" data-animate="" data-columns="2" data-direction="horizontal" data-icon-color="default" data-icon-size="small" data-icon-style="border"><div class="nectar-icon-list-item content_color_000000"><div class="list-icon-holder" data-icon_type="numerical"><span>1</span></div><div class="content"><h4>Máte zastaralý web nebo žádný nemáte?</h4>Mnoho firem zjistí, že jejich web už neodpovídá tomu, co dnes dělají, nebo jim chybí úplně. Profesionální, moderní web může výrazně zlepšit vaši viditelnost a důvěryhodnost.</div></div><div class="nectar-icon-list-item content_color_000000"><div class="list-icon-holder" data-icon_type="numerical"><span>2</span></div><div class="content"><h4>Web nepřivádí žádné zákazníky</h4>Nestačí mít jen web - musí být efektivním nástrojem, který návštěvníky osloví a promění je v zákazníky. Vytváříme webové stránky, které přináší výsledky.</div></div><div class="nectar-icon-list-item content_color_000000"><div class="list-icon-holder" data-icon_type="numerical"><span>3</span></div><div class="content"><h4>Nechcete už ztrácet čas a plácat se v tom sami?</h4>Pokud jste se pokoušeli vytvořit web sami, možná jste zjistili, že to bere čas a výsledky nejsou ideální. Spolehněte se na profesionály, kteří vše nastaví a ušetří vám starosti.</div></div><div class="nectar-icon-list-item content_color_000000"><div class="list-icon-holder" data-icon_type="numerical"><span>4</span></div><div class="content"><h4>Chcete se odlišit od konkurence?</h4>Šablonové weby často splývají s ostatními. Nabízíme originální řešení, které vystihne podstatu vaší značky a zanechá dojem.</div></div><div class="nectar-icon-list-item content_color_000000"><div class="list-icon-holder" data-icon_type="numerical"><span>5</span></div><div class="content"><h4>Potřebujete web, který poroste s vámi</h4>Firmy se vyvíjejí a web by měl růst s nimi. Ať už plánujete rozšíření o blog, e-shop nebo jazykové mutace, váš web na to bude připravený.</div></div><div class="nectar-icon-list-item content_color_000000"><div class="list-icon-holder" data-icon_type="numerical"><span>6</span></div><div class="content"><h4>Web není jednorázová záležitost</h4>Nabízíme podporu, rady a úpravy i po spuštění, abyste vždy věděli, na koho se obrátit.</div></div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6ab1a0a97d32f" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="divider-wrap height_tablet_20px height_phone_0px" data-alignment="default"><div class="divider-border" data-animate="" data-animation-delay="" data-color="default" data-width="100%" style="margin-top: 20px; height: 1px; margin-bottom: 20px;"></div></div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_60px top_padding_phone_60px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6ab1a0a97d8f9" style="padding-top: 60px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column centered-text neg-marg no-extra-padding top_margin_tablet_-30px top_margin_phone_-40px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-top: -40px; margin-bottom: 20px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<a class="nectar-button medium regular accent-color regular-button tlacitko-modre" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" id="CTAbtnSluzbyObjednat" role="button" style="color: #ffffff; background-color: #0a0a0a;"><span>Zobrazit časté dotazy</span></a>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row bottom_padding_tablet_20px bottom_padding_phone_20px" data-column-margin="default" data-midnight="" id="fws_6ab1a0a97df75" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element vc_custom_1755899485699 nejmensi">
<p>Uvedené ceny jsou konečné, nejsme plátci DPH.</p>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Proč my

Nadpis vlevo zůstává při posouvání na místě, důvody jsou vpravo. Třídy: `nectar-sticky-column-css`, `has-global-section`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row has-global-section" data-column-margin="default" data-midnight="dark" id="vyhody" style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row full-width-section top_padding_tablet_60px top_padding_phone_20px bottom_padding_tablet_40px bottom_padding_phone_20px" data-column-margin="default" data-midnight="dark" id="spoluprace" style="padding-top: 80px; padding-bottom: 80px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-6 bsb_column column_container vc_column_container col nectar-sticky-column-css no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="n-sticky"><div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74af123be" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="divider-wrap height_tablet_0px height_phone_0px" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
<div class="bsb_text_column bsb_content_element vc_custom_1756210649220">
<h2 class="bs-h1"><strong>Proč vybrat BLUE STUDIO?</strong></h2>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74af12651" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element" style=" max-width: 700px; display: inline-block;">
<p class="p1">Jsme malé studio dvou bratrů. Díky osobnímu přístupu, promyšlenému procesu a mnohaletým zkušenostem vám ušetříme čas, nervy i peníze. Postaráme se o vaši prezentaci dlouhodobě - od prvního návrhu až po každodenní podporu.</p>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_20px top_padding_phone_20px bottom_padding_tablet_20px bottom_padding_phone_20px" data-column-margin="default" data-midnight="" id="fws_6aef74af127de" style="padding-top: 40px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<a class="nectar-button medium regular accent-color regular-button tlacitko-modre" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="color: #ffffff; background-color: #0a0a0a;"><span>Probrat váš projekt</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div></div>
</div>
<div class="vc_col-sm-6 bsb_column column_container vc_column_container col no-extra-padding top_margin_tablet_20px top_margin_phone_20px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-top: 20px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74af12a99" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 proc-kacer-studio bsb_column column_container vc_column_container col child_column padding-7-percent inherit_tablet inherit_phone tl_br_6px tr_br_6px bl_br_6px br_br_6px flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<h2><b>Postaráme se o vaši značku dlouhodobě</b></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p><strong>Návrhem loga nebo webu to u nás nekončí.</strong> Navrhujeme veškeré materiály, které budete potřebovat - od letáčků, bannerů a vizuálů kampaní až po design landing pages pro nové služby. Budeme vaším dlouhodobým partnerem, na kterého se můžete spolehnout.</p>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74af12c88" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 proc-kacer-studio bsb_column column_container vc_column_container col child_column padding-7-percent inherit_tablet inherit_phone tl_br_6px tr_br_6px bl_br_6px br_br_6px flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<h2><strong>Navrhujeme funkční řešení</strong></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p>Vždy hledáme takové řešení, které v praxi opravdu funguje: <strong>design, který je jasný a čitelný, weby, které vedou zákazníka, a marketing, který má konkrétní cíl.</strong> Žádná umělecká abstrakce, jen promyšlené a funkční návrhy, které podpoří váš byznys.</p>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74af12eae" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 proc-kacer-studio bsb_column column_container vc_column_container col child_column padding-7-percent inherit_tablet inherit_phone tl_br_6px tr_br_6px bl_br_6px br_br_6px flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<h2><strong>Budete působit jednotně a profesionálně</strong></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p class="p1"><strong>Od vizitek přes web až po sociální sítě</strong> - vše bude konečně ladit dohromady. Pomůžeme vám vytvořit<strong> konzistentní vizuální styl,</strong> který posílí důvěru zákazníků a odliší vás od konkurence. Vaše značka začne působit moderně a spolehlivě na každém kroku.</p>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74af130b9" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 proc-kacer-studio bsb_column column_container vc_column_container col child_column padding-7-percent inherit_tablet inherit_phone tl_br_6px tr_br_6px bl_br_6px br_br_6px flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<h2><strong>Bez problémů s autorskými právy </strong></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p><strong>Postaráme se, aby vaše grafika byla 100 % originální.</strong> Žádné kopie, žádné starosti! Můžete se klidně věnovat svému byznysu, zatímco my zajistíme unikátní design a případně doporučíme registraci ochranné známky.</p>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74af132c4" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 proc-kacer-studio bsb_column column_container vc_column_container col child_column padding-7-percent inherit_tablet inherit_phone tl_br_6px tr_br_6px bl_br_6px br_br_6px flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<h2 class="waves---heading-3-no-margins-2"><strong>Jasné ceny a férový proces</strong></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p class="p1">U nás přesně víte, co dostanete. <strong>Žádné skryté položky, žádná překvapení nebo hodinová mzda.</strong> Pracujeme rychle, srozumitelně s předstihem a s respektem k vašemu času i rozpočtu.</p>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div>
<style data-type="vc_shortcodes-custom-css" type="text/css">.vc_custom_1756210649220{padding-bottom: 20px !important;}</style>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Časté dotazy

Rozbalovací otázky, otevírá se jedna, ikona plus a mínus. Třídy: `toggles`, `toggle`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row parallax_section zindex-set right_padding_20pct left_padding_20pct top_padding_tablet_30px top_padding_phone_20px right_padding_tablet_0px right_padding_phone_0px left_padding_tablet_0px left_padding_phone_0px" data-column-margin="default" data-midnight="dark" id="dotazy" style="padding-top: 60px; padding-bottom: 0px;  z-index: 10;"><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop using-bg-color" data-parallax-speed="fast" style="background-color: #ffffff; "></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="right">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row bottom_padding_tablet_20px bottom_padding_phone_30px" data-column-margin="default" data-midnight="" id="fws_6ab1a0a988f6f" style="padding-bottom: 40px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<h2 class="bs-h1"><strong>Časté dotazy</strong></h2>
</div>
</div>
</div>
</div>
</div></div><div class="toggles" data-br="" data-starting="default" data-style="minimal"><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6ab1a0a989f20" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6ab1a0a989f20" role="button"><i class="fa fa-plus" role="presentation"></i>Můžete mi dodat jen grafiku, pokud mám své programátory?</a></h3><div aria-labelledby="toggle-button-6ab1a0a989f20" id="toggle-panel-6ab1a0a989f20" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<p>Pokud máte vlastní vývojáře, můžeme pro vás zpracovat pouze <strong>design webu nebo e-shopu</strong>. Pokud budete potřebovat, zajistíme i dozor nad technickou realizací, abyste měli jistotu, že vše bude správně implementováno podle návrhu designu.</p>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6ab1a0a98a18d" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6ab1a0a98a18d" role="button"><i class="fa fa-plus" role="presentation"></i>Jak dlouho trvá vytvoření webu?</a></h3><div aria-labelledby="toggle-button-6ab1a0a98a18d" id="toggle-panel-6ab1a0a98a18d" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<p><strong>Vytvoření středně velkého webu</strong> obvykle zabere přibližně 4-6 týdnů. Délka realizace závisí na rozsahu projektu a množství práce. Přesnější odhad vám dáme po upřesnění zadání.</p>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6ab1a0a98a376" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6ab1a0a98a376" role="button"><i class="fa fa-plus" role="presentation"></i>Co musím pro vytvoření webu dodat?</a></h3><div aria-labelledby="toggle-button-6ab1a0a98a376" id="toggle-panel-6ab1a0a98a376" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<p>Podklady vždy řešíme individuálně podle potřeb vašeho projektu. Obvykle se hodí (pokud máte k dispozici) vlastní <strong>fotografie, PDF dokumenty, certifikáty, reference nebo jiné materiály, které vaši značku prezentují</strong>.</p>
<p>Pokud nemáte hotové texty, připravíme jena míru tak, aby oslovily vaši cílovou skupinu. A pokud míříte na zahraniční trh,<strong> zajistíme i překlady z češtiny do angličtiny nebo naopak</strong>, a to od rodilého mluvčího, aby vaše sdělení neztratilo svou sílu.</p>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6ab1a0a98a544" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6ab1a0a98a544" role="button"><i class="fa fa-plus" role="presentation"></i>Můžu si upravovat web sám?</a></h3><div aria-labelledby="toggle-button-6ab1a0a98a544" id="toggle-panel-6ab1a0a98a544" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<p>Všechny weby stavíme na WordPressu, což je uživatelsky přívětivá a celosvětově oblíbená platforma. Díky tomu<strong> můžete snadno upravovat texty nebo obrázky</strong>, aniž byste potřebovali znalosti programování. Pokud byste však potřebovali pomoc nebo se chtěli věnovat svému podnikání naplno, <strong>rádi se postaráme o správu webu</strong> za vás.</p>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6ab1a0a98a6f8" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6ab1a0a98a6f8" role="button"><i class="fa fa-plus" role="presentation"></i>Nabízíte i správu webových stránek?</a></h3><div aria-labelledby="toggle-button-6ab1a0a98a6f8" id="toggle-panel-6ab1a0a98a6f8" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<p><strong>Nabízíme pravidelnou údržbu, aktualizace a technickou podporu</strong> pro zajištění bezpečnosti a aktuálnosti webu. Všechny weby, které vytváříme, běží na hostingovém řešení využívajícím servery společnosti Webglobe. Tento hosting je plně přístupný i vám jako klientovi - máte tak plnou kontrolu nad svým webem i hostingem a můžete k němu kdykoliv přistupovat.</p>
<p><strong>Správu webu</strong> poskytujeme pouze v případě, že web běží na našem hostingovém řešení u <a href="#" rel="noopener" target="_blank">Webglobe</a>, protože jen tak můžeme zaručit jeho rychlost, bezpečnost a spolehlivost.</p>
<p><strong>Cena správy webu je 1 000 Kč/měsíc za každý web. </strong>Při objednávce správy více webů lze domluvit individuální ceny.</p>
<ul>
<li>V ceně získáte 2 hodiny technických prací měsíčně</li>
<li>Pravidelnou údržbu webu a hostingu</li>
<li>Pravidelné zálohování s možností bezplatné obnovy dat</li>
<li>Aktualizace pluginů</li>
<li>Rychlé řešení problémů</li>
<li>Kontrolu funkčnosti odkazů a výkonu webu</li>
<li>Pravidelné kontroly zabezpečení a hrozeb</li>
<li>Bezplatné odstranění malware v případě napadení webu</li>
<li>Notifikace v případě výpadku služeb</li>
<li>Správu doménových služeb</li>
</ul>
</div>
<div class="divider-wrap height_tablet_15px height_phone_15px" data-alignment="default"><div class="divider" style="height: 15px;"></div></div></div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6ab1a0a98ab32" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6ab1a0a98ab32" role="button"><i class="fa fa-plus" role="presentation"></i>Pomůžete mi s výběrem hostingu?</a></h3><div aria-labelledby="toggle-button-6ab1a0a98ab32" id="toggle-panel-6ab1a0a98ab32" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<p>Všechny weby, které vytváříme, běží na hostingovém řešení, které využívá servery u společnosti <a href="#" rel="noopener" target="_blank">Webglobe</a>. Tento <strong>hosting</strong> je plně přístupný i vám jako klientovi, takže <strong>máte plnou kontrolu nad svým webem i hostingem</strong> a můžete k němu kdykoliv přistupovat.</p>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6ab1a0a98ad81" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6ab1a0a98ad81" role="button"><i class="fa fa-plus" role="presentation"></i>Bude web dobře fungovat na mobilech a tabletech?</a></h3><div aria-labelledby="toggle-button-6ab1a0a98ad81" id="toggle-panel-6ab1a0a98ad81" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<p>Jistě, všechny weby děláme <strong>plně responzivní</strong>. To znamená, že se automaticky přizpůsobí různým zařízením - od mobilů přes tablety až po velké monitory. Vaši zákazníci tak budou mít vždy pohodlný a přehledný zážitek, ať už váš web navštíví odkudkoliv.</p>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6ab1a0a98af89" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6ab1a0a98af89" role="button"><i class="fa fa-plus" role="presentation"></i>Jak probíhá spolupráce?</a></h3><div aria-labelledby="toggle-button-6ab1a0a98af89" id="toggle-panel-6ab1a0a98af89" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<p>Začínáme <a href="#" rel="noopener" target="_blank">krátkou konzultací</a>, kde zjistíme vaše potřeby a představy. Následuje fáze návrhů, ze kterých si vyberete, co vám nejvíce vyhovuje. Celý proces je transparentní a přizpůsobený vašim požadavkům, aby vše probíhalo hladce a bez stresu.</p>
</div>
</div></div></div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Studio a adresa

Obrázek studia, adresa, doprava ikonami a tlačítko. Třídy: `iwt-icon`, `iwt-text`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row full-width-section top_padding_tablet_60px top_padding_phone_40px bottom_padding_tablet_60px bottom_padding_phone_40px" data-column-margin="default" data-midnight="dark" id="studio" style="padding-top: 60px; padding-bottom: 60px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-6 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="right">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-responsive-text font_size_desktop_2-3em font_size_tablet_2-1em font_size_phone_1-8em font_line_height_1-2em nectar-link-underline-effect"><div class="bsb_row vc_row-fluid vc_row inner_row right_padding_100px bottom_padding_tablet_20px bottom_padding_phone_20px right_padding_tablet_0px right_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_67bdcac3781cd">
<div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<div class="bsb_wrapper">
<h2 class="bs-h1"><strong>Zastavte se ve studiu v Brně<br/>
</strong></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-6 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row max_width_desktop_820px" data-column-margin="default" data-midnight="" id="fws_6aef74af14a6e" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="iwithtext"><div class="iwt-icon"> <img alt="" decoding="async" src="assets/soubory/2025/03/ikona-mapa.svg"/> </div><div class="iwt-text"> <strong>BLUE STUDIO najdete v centru Brna, </strong>kde se můžeme také osobně setkat a probrat váš projekt.<br/>
<div class="divider-wrap" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
BLUE STUDIO s.r.o.<br/>
<a href="#" rel="noopener">Modrá 12</a><br/>
602 00, Brno<br/>
<div class="divider-wrap" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
<a href="#" id="CTAlinkEmailTo">info@blue.example</a><br/>
<a href="#" id="CTAlinkCallTo">+420 234 567 890</a> </div><div class="clear"></div></div><div class="iwithtext"><div class="iwt-icon"> <img alt="Parkoviště Mikulov" decoding="async" src="assets/soubory/2025/03/ikona-parkoviste.svg"/> </div><div class="iwt-text"> Pokud přijedete<strong> autem, můžete bezplatně zaparkovat</strong> přímo v areálu. </div><div class="clear"></div></div><div class="iwithtext"><div class="iwt-icon"> <img alt="" decoding="async" src="assets/soubory/2025/03/ikona-mhd.svg"/> </div><div class="iwt-text"> Do BLUE studia se snadno dostanete i brněnskou šalinou - a to linkami 1 nebo 6, <a href="#" rel="noopener">zastávka Antonínská</a>. </div><div class="clear"></div></div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_10px top_padding_phone_10px" data-column-margin="default" data-midnight="" id="fws_6aef74af15b0e" style="padding-top: 20px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<a class="nectar-button jumbo regular accent-color regular-button tlacitko-modre" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" id="CTAbtnHeroKonzultace" role="button" style="margin-top: 20px; margin-bottom: 20px; color: #ffffff; background-color: #0a0a0a;"><span>Probrat váš projekt</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

## Komponenty: Projekty a články

### Nejnovější projekty

Mřížka dvou sloupců s obrázkem, názvem a popisem projektu, pod ní odkaz na všechny. Třídy: `nectar-post-grid`, `nectar-post-grid-item`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row top_padding_tablet_20px top_padding_phone_0px" data-column-margin="default" data-midnight="dark" id="fws_6aaec9d60ce0e" style="padding-top: 60px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row vc_row-o-equal-height vc_row-flex vc_row-o-content-middle top_padding_tablet_40px top_padding_phone_40px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aaec9d60d578" style="padding-top: 40px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding bottom_margin_tablet_-20px bottom_margin_phone_-20px inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-bottom: -20px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element vc_custom_1767112410843">
<h2 class="bs-h1">Nejnovější projekty</h2>
</div>
</div>
</div>
</div>
</div></div><div class="nectar-post-grid-wrap text-color-dark spacing-15px" data-el-settings='{"post_type":"portfolio","pagination":"none","image_size":"medium","parallax_scrolling":"","aspect_ratio_image_size":"","category_position":"default","category_display":"default","display_categories":"0","display_excerpt":"yes","excerpt_length":"20","content_next_to_image_excerpt_pos":"default","display_date":"0","display_estimated_reading_time":"0","display_author":"0","author_functionality":"default","author_position":"default","color_overlay":"","color_overlay_opacity":"","color_overlay_hover_opacity":"","card_bg_color":"","grid_style":"content_under_image","hover_effect":"animated_underline","post_title_overlay":"","heading_tag":"default","heading_tag_render":"default","enable_gallery_lightbox":"0","remove_links":"0","category_style":"underline","overlay_secondary_project_image":"","vertical_list_hover_effect":"none","vertical_list_read_more":"","vertical_list_read_more_style":"text","read_more_button":"0","animation":"none","custom_fields":"","custom_fields_location":"before_post_meta","display_type":"grid","text_content_layout":"top_left"}' data-load-more-color="black" data-load-more-text="Zobrazit další" data-query='{"post_type":"portfolio","posts_per_page":"6","order":"DESC","orderby":"date","offset":"1","cpt_name":"post","custom_query_tax":"","ignore_sticky_posts":"","exclude_current_post":""}' data-style="content_under_image"><div class="nectar-post-grid-filters" data-active-color="default" data-align="default" data-animation="none" data-sortable=""><div><a class="active all-filter" data-filter="-1" data-total-count="30" href="#">Vše</a><a data-filter="eshop" data-total-count="3" href="#">E-shop</a><a data-filter="vizualni-identita" data-total-count="23" href="#">Logo a identita</a><a data-filter="marketing" data-total-count="6" href="#">Marketing</a><a data-filter="tiskoviny" data-total-count="22" href="#">Tiskoviny</a><a data-filter="web" data-total-count="14" href="#">Tvorba webu</a><a data-filter="ux-webdesign" data-total-count="20" href="#">Webdesign</a></div></div><div class="nectar-post-grid custom_font_size_28px font_size_tablet_24px font_size_phone_22px custom-aspect-ratio-16-9 excerpt-desktop_only category-position-before-title tablet-cols-1 phone-cols-1" data-animation="none" data-animation-stagger="90" data-border-radius="none" data-card="" data-cat-click="default" data-columns="2" data-grid-item-height="50vh" data-grid-spacing="15px" data-hover-effect="animated_underline" data-indicator="" data-indicator-color="#000" data-indicator-style="default" data-indicator-text="ZOBRAZIT" data-indicator-text-color="#fff" data-lock-aspect="" data-shadow-hover="" data-text-align="left" data-text-color="dark" data-text-hover-color="dark" data-text-layout="top_left" data-text-style="default"><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="12398"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Přírodní kosmetika GINAMI" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1463" sizes="" src="obrazky/ginami-01-1280x732-d0a83e.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Přírodní kosmetika GINAMI</span></a><div class="item-main"><h3 class="post-heading"><span>Přírodní kosmetika GINAMI</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Návrh minimalistické ikonografie a skládacího letáku pro značku přírodní kosmetiky GINAMI. Vizuální styl staví na jemné lineární kresbě, přírodní barevnosti a přehledné prezentaci produktů.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="11899"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="E-shop Nitle.cz - Česká výroba ručně šitých produktů" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="800" sizes="" src="obrazky/nitle-b2fc9c.webp" width="1200"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">E-shop Nitle.cz - Česká výroba ručně šitých produktů</span></a><div class="item-main"><h3 class="post-heading"><span>E-shop Nitle.cz - Česká výroba ručně šitých produktů</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Česká výroba ručně šitých produktů pro pohodlí dětí i dospělých - kompletní rebranding značky NITLE včetně návrhu loga, vizuální identity a realizace e-shopu na platformě Shoptet. Projekt připravený na budoucí rozšíření sortimentu.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="9416"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="E-shop AmartAsia - autentická chuť Asie" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1440" sizes="" src="obrazky/projekt-amartasia-05-1280x720-fb0a28.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">E-shop AmartAsia - autentická chuť Asie</span></a><div class="item-main"><h3 class="post-heading"><span>E-shop AmartAsia - autentická chuť Asie</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Design e-shopu na míru proměnil nákup autentických asijských potravin v jednoduchý a inspirativní zážitek. Přehledné UX řešení, atraktivní produktové stránky a landing page, které okamžitě vtáhnou zákazníka do světa chutí Asie.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="10377"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Úklidová služba 2tahy" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="450" sizes="" src="obrazky/uklidova-sluzba-2tahy-52412e.webp" width="800"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Úklidová služba 2tahy</span></a><div class="item-main"><h3 class="post-heading"><span>Úklidová služba 2tahy</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Pro 2tahy.cz jsme připravili kompletní web od návrhů designu a struktury stránek, přes technickou realizaci a optimalizaci pro různá zařízení, až po implementaci funkcí, které web efektivně zpřístupňují domácnostem i firmám.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="10763"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Pronájem skákacích hradů HRADOLAND" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1707" sizes="" src="obrazky/projekt-hradoland-02-1280x854-61f0e4.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Pronájem skákacích hradů HRADOLAND</span></a><div class="item-main"><h3 class="post-heading"><span>Pronájem skákacích hradů HRADOLAND</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Pro HRADOLAND jsme navrhli vizuální identitu a web od loga a barevného systému, přes design a strukturu stránek, až po katalog atrakcí a rezervační formulář, který umožňuje jednoduchý a rychlý pronájem skákacích hradů.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="8807"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Parkoviště Mikulov" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1440" sizes="" src="obrazky/projekt-parkoviste-mikulov-06-1280x720-b6b290.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Parkoviště Mikulov</span></a><div class="item-main"><h3 class="post-heading"><span>Parkoviště Mikulov</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Cílem projektu Parkoviště Mikulov bylo vytvořit ucelenou a funkční vizuální prezentaci, která usnadní parkování. Výsledkem je čistá a přehledná vizuální identita, která zahrnuje návrh informačních tabulí, orientačních plachet, letáků, ceníků a moderních responzivích webových stránek.</span></div></div></div></div></div></div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d613045" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Zobrazit všechny projekty</a></p>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Loga klientů

Karusel log s popisem zakázky pod každým. Třídy: `nectar-flickity`, `nectar-carousel`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row full-width-content vc_row-o-equal-height vc_row-flex vc_row-o-content-top nectar-overflow-hidden top_padding_tablet_0px top_padding_phone_0px bottom_padding_tablet_60px bottom_padding_phone_50px" data-column-margin="default" data-midnight="dark" id="fws_6aaec9d6139e7" style="padding-top: 30px; padding-bottom: 80px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div aria-label="Carousel" aria-roledescription="carousel" class="nectar-flickity not-initialized nectar-carousel vertical-alignment-middle ticker-rotate" data-adaptive-height="" data-autoplay="true" data-autoplay-dur="5000" data-border-radius="none" data-centered-cells="false" data-column-border="" data-column-color="" data-column-padding="0" data-control-color="accent-color" data-control-style="material_pagination" data-controls="none" data-desktop-columns="4" data-drag-scale="" data-format="default" data-overflow="visible" data-pagination-alignment="default" data-pause-on-hover="true" data-phone-columns="1" data-r-bottom-total="" data-small-desktop-columns="3" data-spacing="10px" data-tablet-columns="2" data-ticker-direction="default" data-ticker-speed="slow" data-touch-icon-color="default" data-wrap="wrap" role="region"><div class="flickity-viewport"> <div class="flickity-slider"><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Xiaomi" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="250" src="assets/soubory/2022/06/klient-xiaomi.svg" width="250"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d614d7e" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Marketing a tiskoviny pro spotřební elektroniku Xiaomi</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="DJI" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="250" src="assets/soubory/2022/06/klient-dji.svg" width="250"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d615c5c" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Tiskoviny a design pro sociální sítě bezpilotních dronů DJI</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="2tahy.cz" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="100" src="assets/soubory/2025/10/klient-2tahy.svg" width="100"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d616988" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Grafický návrh a technická realizace webu úklidové služby</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Excursia" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="1001" src="assets/soubory/2025/08/klient-excursia.svg" width="1001"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d61765a" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Rebrand loga a vizuální identity pro cestovní kancelář</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Parkoviště Mikulov" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="1251" src="assets/soubory/2025/07/klient-parkoviste-mikulov.svg" width="1251"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d618366" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Funkční vizuální prezentace pro parkoviště v Mikulově</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="VINOCO" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="250" src="assets/soubory/2024/10/klient-vinoco.svg" width="250"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d6191b1" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Logo, etikety na víno a kompletní řešení e-shopu</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="ZM-ELEKTRO" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="100" src="assets/soubory/2025/09/klient-zm-elektro.svg" width="100"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d619e82" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Logo, design a web pro moderní elektroinstalace</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Liftor" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="250" src="assets/soubory/2022/06/klient-liftor.svg" width="250"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d61aada" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Kompletní redesign značky polohovacích stolů Liftor</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Konference péče o pozůstalé" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="23" src="assets/soubory/2025/04/klient-konference-pece-o-pozustale.svg" width="23"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d61b79e" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Vizuální identita a webové stránky pro konferenci v Brně</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Barcamp Kolín" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="250" src="assets/soubory/2024/07/klient-barcamp-kolin.svg" width="250"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d61c5a8" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Boží  vizuály pro boží konferenci o podnikání v Kolíně</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Vyfakturuj" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="250" src="assets/soubory/2022/06/klient-vyfakturuj.svg" width="250"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d61d608" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Rebranding jednoho z nejlepších fakturačních nástrojů</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Skinners" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="250" src="assets/soubory/2022/06/klient-skinners.svg" width="250"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d61e66a" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Tiskoviny, které podtrhují unikátní koncept ponožkobot</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Nadační fond Vrba" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="46" src="assets/soubory/2025/07/klient-vrba.svg" width="46"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d61f696" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Správa webu pro nadaci, která pomáhá ovdovělým rodinám</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div><div class="cell flex_gap_desktop_10px"><div class="inner-wrap-outer"><div class="inner-wrap"><div class="img-with-aniamtion-wrap center custom-width-250px custom-width-tablet-230px custom-width-phone-230px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_self">
<img alt="Festivaly a koncerty EPOQUE" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="250" src="assets/soubory/2025/02/klient-epoque-events.svg" width="250"/>
</a>
</div>
</div>
</div>
</div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d6205e5" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-4-percent force-desktop-text-align-center force-tablet-text-align-center force-phone-text-align-center padding-5-percent_tablet padding-5-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right" style="margin-top: -30px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Brand a nový web pro festivaly a koncerty</a></p>
</div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Výpis článků

Tři náhledy článků s datem a odkazem na všechny. Třídy: `nectar-post-grid`, `meta-date`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row" data-column-margin="default" data-midnight="dark" id="fws_6aaec9d621032" style="padding-top: 0px; padding-bottom: 20px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row vc_row-o-equal-height vc_row-flex vc_row-o-content-middle top_padding_tablet_60px top_padding_phone_40px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aaec9d6215f0" style="padding-top: 80px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding bottom_margin_tablet_-20px bottom_margin_phone_-20px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-bottom: -20px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element vc_custom_1733318183388">
<h2 class="bs-h1">Články</h2>
</div>
</div>
</div>
</div>
</div></div><div class="nectar-post-grid-wrap text-color-dark additional-meta-size-small spacing-15px" data-el-settings='{"post_type":"post","pagination":"none","image_size":"full","parallax_scrolling":"","aspect_ratio_image_size":"","category_position":"overlaid","category_display":"default","display_categories":"0","display_excerpt":"0","excerpt_length":"20","content_next_to_image_excerpt_pos":"default","display_date":"yes","display_estimated_reading_time":"0","display_author":"0","author_functionality":"default","author_position":"default","color_overlay":"","color_overlay_opacity":"","color_overlay_hover_opacity":"","card_bg_color":"","grid_style":"content_under_image","hover_effect":"animated_underline","post_title_overlay":"","heading_tag":"h3","heading_tag_render":"default","enable_gallery_lightbox":"0","remove_links":"0","category_style":"underline","overlay_secondary_project_image":"","vertical_list_hover_effect":"none","vertical_list_read_more":"","vertical_list_read_more_style":"text","read_more_button":"0","animation":"none","custom_fields":"","custom_fields_location":"before_post_meta","display_type":"grid","text_content_layout":"top_left"}' data-load-more-color="black" data-load-more-text="Zobrazit další" data-query='{"post_type":"post","posts_per_page":"3","order":"DESC","orderby":"date","offset":"0","cpt_name":"post","custom_query_tax":"","ignore_sticky_posts":"","exclude_current_post":""}' data-style="content_under_image"><div class="nectar-post-grid-filters" data-active-color="default" data-align="default" data-animation="none" data-sortable=""><div><a class="active all-filter" data-filter="-1" data-total-count="27" href="#">Vše</a><a data-filter="design" data-total-count="23" href="#">Design</a><a data-filter="e-shop" data-total-count="3" href="#">E-shop</a><a data-filter="identita" data-total-count="15" href="#">Logo a identita</a><a data-filter="nastroje" data-total-count="3" href="#">Nástroje</a><a data-filter="podnikani" data-total-count="10" href="#">Podnikání</a><a data-filter="pripadova-studie" data-total-count="9" href="#">Případová studie</a><a data-filter="reklamni-kampane" data-total-count="3" href="#">Reklamní kampaně</a><a data-filter="seo" data-total-count="6" href="#">SEO</a><a data-filter="web" data-total-count="14" href="#">Web</a></div></div><div class="nectar-post-grid custom_font_size_24px font_size_tablet_18px font_size_phone_20px custom-aspect-ratio-16-9 category-position-overlaid tablet-cols-1 phone-cols-1" data-animation="none" data-animation-stagger="90" data-border-radius="none" data-card="" data-cat-click="default" data-columns="3" data-grid-item-height="50vh" data-grid-spacing="15px" data-hover-effect="animated_underline" data-indicator="" data-indicator-color="#000" data-indicator-style="default" data-indicator-text="ZOBRAZIT" data-indicator-text-color="#fff" data-lock-aspect="" data-shadow-hover="" data-text-align="left" data-text-color="dark" data-text-hover-color="dark" data-text-layout="top_left" data-text-style="default"><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="12670"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Jak vybrat jméno firmy nebo produktu: čemu se vyhnout a co si pohlídat" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1023" sizes="" src="obrazky/jak-vybrat-jmeno-firmy-nebo-produktu-cemu-se-vyhnout-a-co-si-a289d9.webp" width="1537"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Jak vybrat jméno firmy nebo produktu: čemu se vyhnout a co si pohlídat</span></a><div class="item-main"><h3 class="post-heading"><span>Jak vybrat jméno firmy nebo produktu: čemu se vyhnout a co si pohlídat</span></h3><span class="nectar-post-grid-item__meta-wrap"><span class="meta-date">18. července 2026</span></span></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="12542"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="AI píše a publikuje. A vy se divíte, proč to nefunguje?" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="900" sizes="" src="obrazky/ai-pise-a-publikuje-2e30d5.webp" width="1600"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">AI píše, AI publikuje. A vy se divíte, proč to nefunguje?</span></a><div class="item-main"><h3 class="post-heading"><span>AI píše, AI publikuje. A vy se divíte, proč to nefunguje?</span></h3><span class="nectar-post-grid-item__meta-wrap"><span class="meta-date">1. června 2026</span></span></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="244"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Design není umění na zdi. Buď funguje, nebo ne." class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="823" sizes="" src="obrazky/design-neni-umeni-52795e.webp" width="1500"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Design není umění na zdi. Buď funguje, nebo ne</span></a><div class="item-main"><h3 class="post-heading"><span>Design není umění na zdi. Buď funguje, nebo ne</span></h3><span class="nectar-post-grid-item__meta-wrap"><span class="meta-date">23. května 2026</span></span></div></div></div></div></div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aaec9d62c664" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element male">
<p><a href="#">Zobrazit všechny články</a></p>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Výpis projektů

Úvod s filtrem oborů a mřížka všech projektů. Třídy: `nectar-post-grid-filters`, `nectar-post-grid-item`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row top-level top_padding_tablet_60px top_padding_phone_20px" data-column-margin="default" data-midnight="dark" id="fws_6ab1a06f0feaf" style="padding-top: 80px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row vc_row-o-equal-height vc_row-flex vc_row-o-content-bottom" data-column-margin="default" data-midnight="" id="fws_6ab1a06f115ed" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding padding-1-percent_tablet padding-1-percent_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="top-bottom">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element" style=" max-width: 1560px; display: inline-block;">
<h1>Dvě dekády zkušeností, přes 500 projektů, promyšlený design a obsah, který funguje. Podívejte se, co umíme - a co dokážeme.</h1>
</div>
</div>
</div>
</div>
</div></div><div class="divider-wrap height_tablet_20px height_phone_20px" data-alignment="default"><div class="divider" style="height: 20px;"></div></div><div class="nectar-post-grid-wrap text-color-dark spacing-15px nectar-post-grid-wrap--fl-left" data-el-settings='{"post_type":"portfolio","pagination":"load-more","image_size":"medium","parallax_scrolling":"","aspect_ratio_image_size":"","category_position":"default","category_display":"default","display_categories":"0","display_excerpt":"yes","excerpt_length":"20","content_next_to_image_excerpt_pos":"default","display_date":"0","display_estimated_reading_time":"0","display_author":"0","author_functionality":"default","author_position":"default","color_overlay":"","color_overlay_opacity":"","color_overlay_hover_opacity":"","card_bg_color":"","grid_style":"content_under_image","hover_effect":"animated_underline","post_title_overlay":"","heading_tag":"default","heading_tag_render":"default","enable_gallery_lightbox":"0","remove_links":"0","category_style":"underline","overlay_secondary_project_image":"","vertical_list_hover_effect":"none","vertical_list_read_more":"","vertical_list_read_more_style":"text","read_more_button":"0","animation":"none","custom_fields":"","custom_fields_location":"before_post_meta","display_type":"grid","text_content_layout":"top_left"}' data-load-more-color="accent-color" data-load-more-text="Zobrazit další" data-query='{"post_type":"portfolio","posts_per_page":"20","order":"DESC","orderby":"date","offset":"0","cpt_name":"post","custom_query_tax":"","ignore_sticky_posts":"","exclude_current_post":""}' data-style="content_under_image"><div class="nectar-post-grid-filters" data-active-color="default" data-align="left" data-animation="none" data-sortable="yes"><h4>Vybrat kategorii</h4><div><a class="active all-filter" data-filter="-1" data-total-count="30" href="#">Vše</a><a data-filter="eshop" data-total-count="3" href="#">E-shop</a><a data-filter="vizualni-identita" data-total-count="23" href="#">Logo a identita</a><a data-filter="marketing" data-total-count="6" href="#">Marketing</a><a data-filter="tiskoviny" data-total-count="22" href="#">Tiskoviny</a><a data-filter="web" data-total-count="14" href="#">Tvorba webu</a><a data-filter="ux-webdesign" data-total-count="20" href="#">Webdesign</a></div></div><div class="nectar-post-grid custom_font_size_28px font_size_tablet_24px font_size_phone_22px custom-aspect-ratio-16-9 category-position-before-title tablet-cols-1 phone-cols-1" data-animation="none" data-animation-stagger="90" data-border-radius="none" data-card="" data-cat-click="default" data-columns="2" data-grid-item-height="50vh" data-grid-spacing="15px" data-hover-effect="animated_underline" data-indicator="" data-indicator-color="#000" data-indicator-style="default" data-indicator-text="ZOBRAZIT" data-indicator-text-color="#fff" data-lazy-skip="3" data-lock-aspect="" data-shadow-hover="" data-text-align="left" data-text-color="dark" data-text-hover-color="dark" data-text-layout="top_left" data-text-style="default"><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="9730"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Excursia" class="nectar-post-grid-item-bg__media" decoding="async" fetchpriority="high" height="450" src="obrazky/excursia-video-b097d3.webp" width="800"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Excursia: Nová tvář dobrodružných zájezdů</span></a><div class="item-main"><h3 class="post-heading"><span>Excursia: Nová tvář dobrodružných zájezdů</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Pro cestovní kancelář Excursia jsme připravili kompletní rebrand - od nového loga a vizuální identity přes grafický manuál, polepy kanceláře až po reklamní bannery a šablony dokumentů pro cestovatele.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="12398"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Přírodní kosmetika GINAMI" class="nectar-post-grid-item-bg__media" decoding="async" height="732" src="obrazky/ginami-01-1280x732-d0a83e.webp" width="1280"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Přírodní kosmetika GINAMI</span></a><div class="item-main"><h3 class="post-heading"><span>Přírodní kosmetika GINAMI</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Návrh minimalistické ikonografie a skládacího letáku pro značku přírodní kosmetiky GINAMI. Vizuální styl staví na jemné lineární kresbě, přírodní barevnosti a přehledné prezentaci produktů.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="11899"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="E-shop Nitle.cz - Česká výroba ručně šitých produktů" class="nectar-post-grid-item-bg__media" decoding="async" height="800" src="obrazky/nitle-b2fc9c.webp" width="1200"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">E-shop Nitle.cz - Česká výroba ručně šitých produktů</span></a><div class="item-main"><h3 class="post-heading"><span>E-shop Nitle.cz - Česká výroba ručně šitých produktů</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Česká výroba ručně šitých produktů pro pohodlí dětí i dospělých - kompletní rebranding značky NITLE včetně návrhu loga, vizuální identity a realizace e-shopu na platformě Shoptet. Projekt připravený na budoucí rozšíření sortimentu.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="9416"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="E-shop AmartAsia - autentická chuť Asie" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1440" sizes="" src="obrazky/projekt-amartasia-05-1280x720-fb0a28.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">E-shop AmartAsia - autentická chuť Asie</span></a><div class="item-main"><h3 class="post-heading"><span>E-shop AmartAsia - autentická chuť Asie</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Design e-shopu na míru proměnil nákup autentických asijských potravin v jednoduchý a inspirativní zážitek. Přehledné UX řešení, atraktivní produktové stránky a landing page, které okamžitě vtáhnou zákazníka do světa chutí Asie.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="10377"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Úklidová služba 2tahy" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="450" sizes="" src="obrazky/uklidova-sluzba-2tahy-52412e.webp" width="800"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Úklidová služba 2tahy</span></a><div class="item-main"><h3 class="post-heading"><span>Úklidová služba 2tahy</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Pro 2tahy.cz jsme připravili kompletní web od návrhů designu a struktury stránek, přes technickou realizaci a optimalizaci pro různá zařízení, až po implementaci funkcí, které web efektivně zpřístupňují domácnostem i firmám.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="10763"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Pronájem skákacích hradů HRADOLAND" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1707" sizes="" src="obrazky/projekt-hradoland-02-1280x854-61f0e4.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Pronájem skákacích hradů HRADOLAND</span></a><div class="item-main"><h3 class="post-heading"><span>Pronájem skákacích hradů HRADOLAND</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Pro HRADOLAND jsme navrhli vizuální identitu a web od loga a barevného systému, přes design a strukturu stránek, až po katalog atrakcí a rezervační formulář, který umožňuje jednoduchý a rychlý pronájem skákacích hradů.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="8807"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Parkoviště Mikulov" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1440" sizes="" src="obrazky/projekt-parkoviste-mikulov-06-1280x720-b6b290.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Parkoviště Mikulov</span></a><div class="item-main"><h3 class="post-heading"><span>Parkoviště Mikulov</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Cílem projektu Parkoviště Mikulov bylo vytvořit ucelenou a funkční vizuální prezentaci, která usnadní parkování. Výsledkem je čistá a přehledná vizuální identita, která zahrnuje návrh informačních tabulí, orientačních plachet, letáků, ceníků a moderních responzivích webových stránek.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="7738"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Konference péče o pozůstalé" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1440" sizes="" src="obrazky/projekt-konferencepp-1280x720-a19e5d.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Konference péče o pozůstalé</span></a><div class="item-main"><h3 class="post-heading"><span>Konference péče o pozůstalé</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Konference Péče o pozůstalé přináší nejen inspirativní diskuse a setkání, ale i novou vizuální identitu. Logo, tiskoviny, web i další materiály prošly proměnou, která lépe vyjadřuje důstojnost, empatii a moderní přístup k tématu.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="11948"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1707" sizes="" src="obrazky/lenka-tomek-design-11-1280x854-8f1371.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Logo, vizuální identita a web pro interiérovou designérku Lenku Tomek z Brna</span></a><div class="item-main"><h3 class="post-heading"><span>Logo, vizuální identita a web pro interiérovou designérku Lenku Tomek z Brna</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Kompletní logo, vizuální identita a webdesign pro interiérovou designérku z Brna. Jednotný brand propojující webové stránky a tiskoviny do profesionální prezentace osobní značky.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="3593"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="10. ples Nadačního fondu Vrba v roce 2026" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1707" sizes="" src="obrazky/vrba-ples-01-1-1280x854-df9ae7.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Nadační fond Vrba</span></a><div class="item-main"><h3 class="post-heading"><span>Nadační fond Vrba</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Pro Nadační fond Vrba jsme navrhovali vizuální identitu, která pomáhá vyjadřovat jejich poslání - podporovat ovdovělé rodiny s dětmi. Společně jsme vytvořili logo, tiskoviny, web i řadu dalších materiálů, které působí srozumitelně, citlivě a důvěryhodně.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="6198"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Auto Všechno" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="854" sizes="" src="obrazky/autovsechno-cover-0bb163.webp" width="1280"/><video class="nectar-lazy-video nectar-post-grid-item-bg__media nectar-post-grid-item-bg__video" loop="" muted="" playsinline="" poster="obrazky/video-421b47.webp" preload="auto">
</video></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Autoservis Auto Všechno</span></a><div class="item-main"><h3 class="post-heading"><span>Autoservis Auto Všechno</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Auto Všechno potřebovalo silnější vizuální identitu na trhu. Navrhli jsme minimalistické logo ve tvaru „A“, evokující siluetu auta, které je snadno použitelné v marketingu. Moderní a jednotný design posílil značku a pomohl přilákat nové zákazníky.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="4966"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Brand identity VINOCO" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1707" sizes="" src="obrazky/projekt-vinoco-08-1280x854-52ce21.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">E-shop VINOCO - vína z Pálavy</span></a><div class="item-main"><h3 class="post-heading"><span>E-shop VINOCO - vína z Pálavy</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Pro VINOCO jsme realizovali kompletní vizuální identitu včetně loga, etiket na víno a e-shopu na platformě Shoptet. Logo symbolizuje slunce jako zdroj života a odkazuje na tradici vinařského regionu Pálava. Výsledkem je prémiový vzhled, který podtrhuje kvalitu vín z Mikulovska.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="677"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Polohovací stoly Liftor" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="450" sizes="" src="obrazky/liftor-stoly-ca25a2.webp" width="800"/><video class="nectar-lazy-video nectar-post-grid-item-bg__media nectar-post-grid-item-bg__video" loop="" muted="" playsinline="" poster="obrazky/video-421b47.webp" preload="auto">
</video></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Výškově nastavitelné stoly Liftor</span></a><div class="item-main"><h3 class="post-heading"><span>Výškově nastavitelné stoly Liftor</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Liftor získal svěží vizuální identitu - nové logo, moderní web, stylové katalogy a reklamní materiály. Cíl? Zjednodušit výběr a používání ergonomického nábytku. Součástí projektu byl i intuitivní design ovladače polohovacích stolů, který usnadňuje nastavení výšky a podporuje zdravé pracovní návyky.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="9093"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="HARTOP - specialisté na vodu, topení a plyn" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1440" sizes="" src="obrazky/projekt-hartop-01-1280x720-8dd3d6.webp" width="2560"/><video class="nectar-lazy-video nectar-post-grid-item-bg__media nectar-post-grid-item-bg__video" loop="" muted="" playsinline="" poster="obrazky/video-421b47.webp" preload="auto">
</video></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">HARTOP - specialisté na vodu, topení a plyn</span></a><div class="item-main"><h3 class="post-heading"><span>HARTOP - specialisté na vodu, topení a plyn</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Pro rodinnou firmu HARTOP z Krnova jsme připravili nové typografické logo, sjednotili vizuální styl, vytvořili přehledný web a připravili návrhy na polepy dodávek. Výsledkem je dlouhodobá spolupráce a jasná prezentace, která je vidět online i přímo v terénu.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="5452"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="ZM-ELEKTRO" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1440" sizes="" src="obrazky/projekt-zm-1280x720-1896d9.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Elektroinstalace ZM-ELEKTRO</span></a><div class="item-main"><h3 class="post-heading"><span>Elektroinstalace ZM-ELEKTRO</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Pro ZM-ELEKTRO vznikla v roce 2024 nová vizuální identita zahrnující logo, tiskoviny a web. Design odráží klíčové hodnoty firmy - spolehlivost, odbornost a kvalitu - a podporuje vnímání značky jako specialisty na moderní a bezpečné elektroinstalace.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="3674"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Bezpilotní drony DJI" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1707" sizes="" src="obrazky/dji-09-1280x854-4cc7b9.webp" width="2560"/><video class="nectar-lazy-video nectar-post-grid-item-bg__media nectar-post-grid-item-bg__video" loop="" muted="" playsinline="" poster="obrazky/video-421b47.webp" preload="auto">
</video></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Bezpilotní drony DJI</span></a><div class="item-main"><h3 class="post-heading"><span>Bezpilotní drony DJI</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">DJI je lídrem v oblasti dronů a letecké fotografie. Pro tento projekt vznikly kampaně a tiskoviny, které vizuálně podtrhují inovace a špičkovou kvalitu jejich produktů. Vizuály ukazují drony DJI v akci, zdůrazňují jejich přesnost a využití v profesionálním i kreativním natáčení.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="4016"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="EPOQUE" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="450" sizes="" src="obrazky/epoque-tumb-c239c3.webp" width="800"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Festivaly a koncerty EPOQUE</span></a><div class="item-main"><h3 class="post-heading"><span>Festivaly a koncerty EPOQUE</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Objevte svět exkluzivních eventů s Epoque Events! Nová vizuální identita, včetně moderního loga, elegantních tiskovin a profesionálního webu, dokonale vystihuje jedinečný přístup k organizaci nezapomenutelných akcí.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="3683"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Kouzlo mechu" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1708" sizes="" src="obrazky/brandbook-ukazka-05-1280x854-91f366.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Svatební dekorace Kouzlo mechu</span></a><div class="item-main"><h3 class="post-heading"><span>Svatební dekorace Kouzlo mechu</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Dekorace, které přinášejí kousek přírody do každé akce. Pro tento projekt vzniklologo a design webu, který je svěží a autentický, stejně jako produkty, které nabízejí. Web je jednoduchý a přehledný, takže zapůjčení těchto jedinečných dekorací je otázka okamžiku.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="672"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Spotřební elektronika Xiaomi" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1289" sizes="" src="obrazky/xiaomi-15-1280x645-da02ce.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Spotřební elektronika Xiaomi</span></a><div class="item-main"><h3 class="post-heading"><span>Spotřební elektronika Xiaomi</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Spolupráce s Xiaomi zahrnovala nejen úderné kampaně a webdesign, ale i grafiku pro více než 60 prodejen po celé ČR. Každý vizuál kombinuje inovaci s čistým designem, aby zákazníky vtáhl do světa špičkových technologií a posílil vnímání značky na trhu.</span></div></div></div></div></div><div class="nectar-post-grid-item nectar-underline" data-has-img="true" data-post-id="3687"> <div class="inner"><div class="nectar-post-grid-item-bg-wrap"><div class="nectar-post-grid-item-bg-wrap-inner"><div class="nectar-post-grid-item-bg"><img alt="Upyho svět" class="skip-lazy nectar-post-grid-item-bg__media" data-nectar-img-srcset="" decoding="async" height="1707" sizes="" src="obrazky/upyho-svet-05-1280x854-ce0565.webp" width="2560"/></div></div></div><div class="content"><a class="nectar-post-grid-link" href="#"><span class="screen-reader-text">Květinové dekorace Upyho svět</span></a><div class="item-main"><h3 class="post-heading"><span>Květinové dekorace Upyho svět</span></h3><div class="nectar-post-grid-item__excerpt-wrap item-meta-extra"><span class="meta-excerpt">Vizuální identita a ilustrace, které proměnují květinové dekorace a ručně vyráběné panenky v malá umělecká díla. Design zachycuje kreativitu zakázkové floristiky a jedinečnost produktů, ať už jde o svatební kytice, výzdobu na večírky, nebo speciální dekorace.</span></div></div></div></div></div></div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Případové studie

Výpis studií s obrázkem vlevo a textem vpravo. Třídy: `featured_img_left`, `post-featured-img-wrap`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="post-area col featured_img_left span_12 col_last infinite_scroll" data-ams="8px" data-remove-post-author="1" data-remove-post-comment-number="1" data-remove-post-date="0" data-remove-post-nectar-love="1" role="main"> <div class="posts-container" data-load-animation="none">
<article class="post-12008 post type-post status-publish format-standard has-post-thumbnail category-e-shop category-identita category-pripadova-studie tag-design tag-e-shop tag-marketing tag-podnikani tag-pripadova-studie tag-identita" id="post-12008">
<div class="inner-wrap animated">
<div class="post-content">
<div class="article-content-wrap">
<div class="post-featured-img-wrap">
<a aria-label="Případová studie e-shopu Nitle.cz: Jak rebrand značky pomohl růstu podnikání" href="#"><span class="post-featured-img"><img alt="Nitle.cz" class="bs-post-image skip-lazy" data-nectar-img-srcset="" height="1707" sizes="(min-width: 690px) 40vw, 100vw" src="obrazky/nitle-11-58fe9f.webp" width="2560"/></span></a>
</div>
<div class="post-content-wrap">
<a class="entire-meta-link" href="#"><span class="screen-reader-text">Případová studie e-shopu Nitle.cz: Jak rebrand značky pomohl růstu podnikání</span></a>
<span class="meta-category"><a class="e-shop" href="#">E-shop</a><a class="identita" href="#">Logo a identita</a><a class="pripadova-studie" href="#">Případová studie</a></span>
<div class="post-header">
<h3 class="title"><a href="#"> Případová studie e-shopu Nitle.cz: Jak rebrand značky pomohl růstu podnikání</a></h3>
</div>
<div class="excerpt">Tato případová studie popisuje, jak jsme pomocí rebrandingu vytvořili značce prostor pro další vývoj a připravili e-shop na dlouhodobý růst.</div><div class="grav-wrap"><a href="#"><img alt="Jan Modrý" class="avatar avatar-70 photo" decoding="async" height="70" width="70"/></a><div class="text"><a href="#" rel="author">Jan Modrý</a><span>25. ledna 2026</span></div></div> </div>
</div>
</div>
</div>
</article>
<article class="post-9968 post type-post status-publish format-standard has-post-thumbnail category-design category-e-shop category-pripadova-studie tag-design tag-e-shop tag-pripadova-studie" id="post-9968">
<div class="inner-wrap animated">
<div class="post-content">
<div class="article-content-wrap">
<div class="post-featured-img-wrap">
<a aria-label="Případová studie - jak redesign e-shopu AmartAsia usnadnil zákazníkům nakupování" href="#"><span class="post-featured-img"><img alt="Nový design prodejen AmartAsia" class="bs-post-image skip-lazy" data-nectar-img-srcset="" height="900" sizes="(min-width: 690px) 40vw, 100vw" src="obrazky/amartasia-prodejna-03-cb9fb8.webp" width="1350"/></span></a>
</div>
<div class="post-content-wrap">
<a class="entire-meta-link" href="#"><span class="screen-reader-text">Případová studie - jak redesign e-shopu AmartAsia usnadnil zákazníkům nakupování</span></a>
<span class="meta-category"><a class="design" href="#">Design</a><a class="e-shop" href="#">E-shop</a><a class="pripadova-studie" href="#">Případová studie</a></span>
<div class="post-header">
<h3 class="title"><a href="#"> Případová studie - jak redesign e-shopu AmartAsia usnadnil zákazníkům nakupování</a></h3>
</div>
<div class="excerpt">Chaotický design eshopu AmartAsia.cz se změnil na přehledné místo, kde se dobře nakupuje. Přečtěte si případovou studii a zjistěte, jak může design na míru posunout i váš projekt.</div><div class="grav-wrap"><a href="#"><img alt="Jan Modrý" class="avatar avatar-70 photo" decoding="async" height="70" width="70"/></a><div class="text"><a href="#" rel="author">Jan Modrý</a><span>13. listopadu 2025</span></div></div> </div>
</div>
</div>
</div>
</article>
<article class="post-10405 post type-post status-publish format-standard has-post-thumbnail category-design category-pripadova-studie category-seo category-web tag-design tag-marketing tag-pripadova-studie tag-seo-texty tag-webove-stranky" id="post-10405">
<div class="inner-wrap animated">
<div class="post-content">
<div class="article-content-wrap">
<div class="post-featured-img-wrap">
<a aria-label="Případová studie: Jak jsme udělali pořádek v obsahu a vytvořili nový web pro úklidovou firmu 2tahy" href="#"><span class="post-featured-img"><img alt="Případová studie: Jak jsme vyčistili web pro úklidovou firmu 2tahy" class="bs-post-image skip-lazy" data-nectar-img-srcset="" height="800" sizes="(min-width: 690px) 40vw, 100vw" src="obrazky/pripadova-studie-2tahy-6d874d.webp" width="1200"/></span></a>
</div>
<div class="post-content-wrap">
<a class="entire-meta-link" href="#"><span class="screen-reader-text">Případová studie: Jak jsme udělali pořádek v obsahu a vytvořili nový web pro úklidovou firmu 2tahy</span></a>
<span class="meta-category"><a class="design" href="#">Design</a><a class="pripadova-studie" href="#">Případová studie</a><a class="seo" href="#">SEO</a><a class="web" href="#">Web</a></span>
<div class="post-header">
<h3 class="title"><a href="#"> Případová studie: Jak jsme udělali pořádek v obsahu a vytvořili nový web pro úklidovou firmu 2tahy</a></h3>
</div>
<div class="excerpt">Úklidová firma z Valašského Meziříčí nás oslovila s jasnou a naléhavou prosbou: „Web vypadá jak z devadesátek a nové poptávky nám přes něj skoro nechodí.“</div><div class="grav-wrap"><a href="#"><img alt="Jan Modrý" class="avatar avatar-70 photo" decoding="async" height="70" width="70"/></a><div class="text"><a href="#" rel="author">Jan Modrý</a><span>9. října 2025</span></div></div> </div>
</div>
</div>
</div>
</article>





</div>
</div></div></div></div></div></div></div>
```

### Další článek

Odkazy na předchozí a další článek s obrázkem v pozadí. Třídy: `blog_next_prev_buttons`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap no-sidebar"><div class="container main-content"><div class="row"><div class="blog_next_prev_buttons vc_row-fluid bsb_row standard_section" data-midnight="light" data-post-header-style="default" data-style="fullwidth_next_prev"><ul class="controls"><li class="previous-post"><div class="post-bg-img" style='background-image: url("obrazky/landing-page-vyfakturuj-3183fb.webp");'></div><a aria-label="Kudy návštěvníci vstupují na váš web a proč je landing page hlavní cesta" href="#"></a><h3><span>Předchozí</span><span class="text">Kudy návštěvníci vstupují na váš web a proč je landing page hlavní cesta
<svg aria-hidden="true" class="next-arrow" viewbox="0 0 39 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><line class="top" stroke="#ffffff;" x1="23" x2="29.5" y1="-0.5" y2="6.5"></line><line class="bottom" stroke="#ffffff;" x1="23" x2="29.5" y1="12.5" y2="5.5"></line></svg><span class="line"></span></span></h3></li><li class="next-post"><div class="post-bg-img" style='background-image: url("obrazky/nitle-11-58fe9f.webp");'></div><a aria-label="Případová studie e-shopu Nitle.cz: Jak rebrand značky pomohl růstu podnikání" href="#"></a><h3><span>Pokračovat</span><span class="text">Případová studie e-shopu Nitle.cz: Jak rebrand značky pomohl růstu podnikání
<svg aria-hidden="true" class="next-arrow" viewbox="0 0 39 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><line class="top" stroke="#ffffff;" x1="23" x2="29.5" y1="-0.5" y2="6.5"></line><line class="bottom" stroke="#ffffff;" x1="23" x2="29.5" y1="12.5" y2="5.5"></line></svg><span class="line"></span></span></h3></li></ul>
</div></div></div></div></div></div></div>
```

## Komponenty: Důvěra

### Hodnocení klientů

Kruhové fotky, souhrn 4,8 a mřížka recenzí z Google. Třídy: `nectar-circle-images`, `grev_grid`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row top_padding_tablet_40px top_padding_phone_20px bottom_padding_tablet_40px bottom_padding_phone_20px" data-column-margin="default" data-midnight="dark" id="fws_6aef74af15d57" style="padding-top: 60px; padding-bottom: 40px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aef74af15f2e" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-responsive-text nectar-link-underline-effect"><h2 class="bs-h1"><strong>Hodnocení klientů</strong></h2>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74af1614b" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg no-extra-padding top_margin_tablet_-20px top_margin_phone_-10px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-top: -20px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<div class="layout_style-1 grev_grid" id="g-review"><div class="grev_header"><div class="grev_header-inner"><h3 class="grev_business-title">BLUE STUDIO s.r.o.</h3><span class="grev_total-rating">4,8</span><span class="grev_5_stars">Z 5 hvězdiček</span><span class="grev_stars-wrapper"><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/></span><h3 class="grev_overall">Celkové hodnocení z 19 recenzí na Google</h3></div></div><div class="grev_body">
<div class="g-review">
<div class="gr-inner-header">
<img alt="" class="gr-profile" data-imgtype="image/png" decoding="async" height="50" referrerpolicy="no-referrer" width="50"/>
<img alt="" class="gr-google" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/google-logo-svg.svg"/>
<p>
<a href="#" target="_blank">David Vondracek</a>
<br/>
<span class="gr-stars"><span class="stars-wrapper"><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/></span><span class="time">před 4 týdny</span></span>
</p>
</div>
<div class="gr-inner-body">
<p>Pan je rychlý a ochotný.Grafiku zpracoval  a  vše udělal dle naší představy. Domluva na výbornou. Doporučuji a určitě se zase příště na pana obrátíme.</p>
</div>
</div>
<div class="g-review">
<div class="gr-inner-header">
<img alt="" class="gr-profile" data-imgtype="image/png" decoding="async" height="50" referrerpolicy="no-referrer" width="50"/>
<img alt="" class="gr-google" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/google-logo-svg.svg"/>
<p>
<a href="#" target="_blank">Jan Soucek</a>
<br/>
<span class="gr-stars"><span class="stars-wrapper"><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/></span><span class="time">před 4 týdny</span></span>
</p>
</div>
<div class="gr-inner-body">
<p>Studio mohu vřele doporučit. Po mnoha přehmatech jsem se teprve zde setkal s lidmi kteří svému oboru jednak opravdu dobře rozumí, jsou velmi vstřícní a hlavně spolehliví. Děkuji BLUE STUDIO za skvělé služby.</p>
</div>
</div>
<div class="g-review">
<div class="gr-inner-header">
<img alt="" class="gr-profile" data-imgtype="image/png" decoding="async" height="50" referrerpolicy="no-referrer" width="50"/>
<img alt="" class="gr-google" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/google-logo-svg.svg"/>
<p>
<a href="#" target="_blank">Lenka Tomek</a>
<br/>
<span class="gr-stars"><span class="stars-wrapper"><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/></span><span class="time">před 2 měsíci</span></span>
</p>
</div>
<div class="gr-inner-body">
<p>Spolupráce s Romanem byla skvělá od první chvíle a jsem moc ráda, že jsem oslovila právě jeho. Roman je nesmírně talentovaný profesionál s úžasným citem pro grafický design a smyslem pro detail. Navrhl mi logo, web i celou vizuální identitu přesně podle mých představ - výsledek dokonce předčil má očekávání. Jeho práce je na opravdu top úrovni a takového profíka dnes jen tak nenajdete. Romana můžu jedině doporučit!</p>
</div>
</div>
<div class="g-review">
<div class="gr-inner-header">
<img alt="" class="gr-profile" data-imgtype="image/png" decoding="async" height="50" referrerpolicy="no-referrer" width="50"/>
<img alt="" class="gr-google" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/google-logo-svg.svg"/>
<p>
<a href="#" target="_blank">Lukáš B.</a>
<br/>
<span class="gr-stars"><span class="stars-wrapper"><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/><img alt="" decoding="async" src="assets/moduly/embedder-for-google-reviews/dist/images/svg-star.svg"/></span><span class="time">před 5 měsíci</span></span>
</p>
</div>
<div class="gr-inner-body">
<p>Skvělá spolupráce od začátku do konce! BLUE STUDIO s.r.o. odvedlo profesionální práci, skvělá komunikace, rychlé dodání a výborný výsledek. Oceňuji jejich kreativní přístup a smysl pro detail. Určitě doporučuji každému, kdo hledá spolehlivého partnera pro grafiku a design.“</p>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74af18e2f" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding el_spacing_10px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner"><a class="column-link" href="#" target="_self"></a>
<div class="bsb_wrapper">
<a class="bs-circle-link" href="#"><div class="nectar-circle-images nectar-circle-images--position_overlapping size_60px alignment_middle_desktop border_color_ffffff"><div class="nectar-circle-images__inner"><div class="nectar-circle-images__image nectar-circle-images__item" style='z-index: 100; background-image: url("obrazky/vyjadreni-klienta-vit-pivonka-8eb923.webp");'></div><div class="nectar-circle-images__image nectar-circle-images__item" style='z-index: 99; background-image: url("obrazky/vyjadreni-klienta-petra-cvrkalova-5d4479.webp");'></div><div class="nectar-circle-images__image nectar-circle-images__item" style='z-index: 98; background-image: url("obrazky/vyjadreni-klienta-ondrej-jirovec-eca1f3.webp");'></div><div class="nectar-circle-images__image nectar-circle-images__item" style='z-index: 97; background-image: url("obrazky/vyjadreni-klienta-edita-dostalova-987ef1.webp");'></div></div><div class="nectar-circle-images__text nectar-circle-images__item">Příběhy našich klientů</div></div></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Výzva k projektu

Nadpis s tlačítkem na konzultaci, sdílená sekce na konci stránek. Třídy: `has-global-section`, `tlacitko-modre`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row has-global-section top_padding_tablet_2em bottom_padding_tablet_2em" data-column-margin="default" data-midnight="dark" id="fws_6aef74d7c765c" style="padding-top: 2em; padding-bottom: 2em; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col neg-marg no-extra-padding top_margin_tablet_-40px top_margin_phone_-40px inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" style="margin-top: -40px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row top_padding_tablet_0px top_padding_phone_0px bottom_padding_tablet_20px top_margin_tablet_-10px top_margin_phone_-10px" data-column-margin="default" data-midnight="dark" id="fws_6aef74d7c7b07" style="padding-top: 0px; padding-bottom: 20px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element" style=" max-width: 800px; display: inline-block;">
<div class="cta2">
<h3>Chcete i vy originální značku, která bude mluvit za vás a web, který si lidé zapamatují?</h3>
</div>
</div>
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74d7c7d17" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<a class="nectar-button jumbo regular accent-color regular-button tlacitko-modre" data-color-override="#000000" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="color: #ffffff; background-color: #000000;"><span>Probrat váš projekt</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

## Komponenty: Formuláře

### Odběr magazínu

Seznam výhod, pole e-mail a modré tlačítko přes celou šířku. Po odeslání se zobrazí potvrzení. Třídy: `ec-v-form-holder`, `ec-v-forms-form-control`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row top-level full-width-section has-row-bg-color vc_row-o-equal-height vc_row-flex vc_row-o-content-top reverse_columns_desktop top_padding_tablet_100px top_padding_phone_60px bottom_padding_tablet_40px bottom_padding_phone_20px" data-column-margin="default" data-midnight="dark" id="fws_6aef74f4b3bac" style="padding-top: 120px; padding-bottom: 100px; --row-bg-color: #ffffff;"><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop using-bg-color" style="background-color: #ffffff; "></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-12 bsb_column column_container vc_column_container col padding-3-percent inherit_tablet no-extra-padding_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74f4b4059" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element" style=" max-width: 700px; display: inline-block;">
<h1><strong>Magazín o tom, jak získat zákazníky, šetřit čas a mít design značky pod kontrolou</strong></h1>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_40px top_padding_phone_40px" data-column-margin="none" data-midnight="" id="fws_6aef74f4b42e7" style="padding-top: 40px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" data-t-w-inherits="small_desktop">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element" style=" max-width: 740px; display: inline-block;">
<ul>
<li>Zjistíte, proč váš web neplní svůj účel</li>
<li>Získáte zákulisní vhled do toho, co vaše logo (ne)říká</li>
<li>Dozvíte se, jaká změna vás může posunout před konkurenci</li>
<li>Najdete inspiraci, která má reálný dopad na vaše podnikání</li>
</ul>
</div>
</div>
</div>
</div>
</div></div><div class="divider-wrap height_tablet_20px height_phone_20px" data-alignment="default"><div class="divider" style="height: 20px;"></div></div>
<div class="bsb_text_column bsb_content_element">
<div id="f-1-43c2cd496486bcc27217c3e790fb4088"><style>ul li {
line-height: 1.5em;
}
body.single .post .content-inner ul li::before, .vc_column-inner ul li::before {
position: absolute;
left: 0;
content: '✦' !important;
color: #0000ff;
top: 0;
width: 0;
height: 0;
border-radius: 0;
border: none;
}
/* ECOMAIL FORM */
input[type=date]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, textarea:focus {
box-shadow: none;
}
.material .bsb_content_element, .material .bsb_row {
margin-bottom: 0em!important;
}
input.ec-v-forms-form-control {
box-shadow: none !important;
}
.container-wrap textarea, .container-wrap input[type=text], .container-wrap input[type=email], .container-wrap input[type="tel"] {
font-size: 1.2em !important;
}
@media (max-width: 999px) {
body[data-form-submit=regular] .container-wrap input[type=submit], body[data-form-submit=regular] .container-wrap button[type=submit], body[data-form-submit=regular] .container-wrap input[type=submit] {
padding: 1.2em 2em 1.3em 2em !important;
font-size: 1.0em !important;
border: 2px solid #0000ff !important;
font-weight: 600 !important;
background-color: #0000ff !important;
font-family: 'regular' !important;
letter-spacing: 0.5px;
}
}
@media (min-width: 1000px) {
body[data-form-submit=regular] .container-wrap input[type=submit], body[data-form-submit=regular] .container-wrap button[type=submit], body[data-form-submit=regular] .container-wrap input[type=submit] {
padding: 1.2em 2em 1.3em 2em !important;
font-size: 1.1em !important;
border: 2px solid #0000ff !important;
font-weight: 600 !important;
background-color: #0000ff !important;
font-family: 'regular' !important;
letter-spacing: 0.5px;
}
}
.ec-v-form-text, .ec-v-form-input, .ec-v-form-submit {
line-height: 1.5em!important;
}
.ec-v-forms-form-control, input[type="text"].ec-v-forms-form-control, input[type="email"].ec-v-forms-form-control {
border: 1px solid #e3e3e3!important;
border-radius: 12px!important;
}
@media (max-width: 600px) {
.ec-v-form-text, .ec-v-form-input, .ec-v-form-submit {
margin-left: -25px!important;
margin-right: -25px!important;
}
}
.ec-v-form-step.ec-v-form-step-visible {
overflow: hidden!important;
}
#ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder {
margin: unset!important;
}
.ec-v-form-holder *, #ec-v-form-slider-handle *, .ec-v-form-holder {
font-family: 'regular' !important;
}
#ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder p {
font-size: 15px!important;
}
.ec-v-form-text {
max-width: 440px!important;
}
.ec-v-form-error {
color: #ff0000!important;
font-size: 15px!important;
padding: 15px 15px!important;
font-weight: 500 !important;
border-radius: 12px!important;
margin-top: 12px!important;
background-color: #fff!important;
border: 1px solid #ff0000!important;
}#ec-v-from-popup-cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 9999; display: none; } .ec-v-form-holder *, #ec-v-form-slider-handle *, .ec-v-form-holder { animation:none; animation-delay:0; animation-direction:normal; animation-duration:0; animation-fill-mode:none; animation-iteration-count:1; animation-name:none; animation-play-state:running; animation-timing-function:ease; backface-visibility:visible; background:0; background-attachment:scroll; background-clip:border-box; background-color:transparent; background-image:none; background-origin:padding-box; background-position:0 0; background-position-x:0; background-position-y:0; background-repeat:repeat; background-size:auto auto; border:0; border-style:none; border-width:medium; border-color:inherit; border-bottom:0; border-bottom-color:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-style:none; border-bottom-width:medium; border-collapse:separate; border-image:none; border-left:0; border-left-color:inherit; border-left-style:none; border-left-width:medium; border-radius:0; border-right:0; border-right-color:inherit; border-right-style:none; border-right-width:medium; border-spacing:0; border-top:0; border-top-color:inherit; border-top-left-radius:0; border-top-right-radius:0; border-top-style:none; border-top-width:medium; bottom:auto; box-shadow:none; box-sizing:border-box; caption-side:top; clear:none; clip:auto; color:inherit; columns:auto; column-count:auto; column-fill:balance; column-gap:normal; column-rule:medium none currentColor; column-rule-color:currentColor; column-rule-style:none; column-rule-width:none; column-span:1; column-width:auto; content:normal; counter-increment:none; counter-reset:none; direction:ltr; empty-cells:show; float:none; font:normal; font-style:normal; font-variant:normal; height:auto; hyphens:none; left:auto; letter-spacing:normal; list-style:none; list-style-image:none; list-style-position:outside; list-style-type:disc; margin:0; margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; max-height:none; max-width:none; min-height:0; min-width:0; opacity:1; orphans:0; outline:0; outline-style:none; outline-width:medium; overflow:visible; overflow-x:visible; overflow-y:visible; padding:0; padding-bottom:0; padding-left:0; padding-right:0; padding-top:0; page-break-after:auto; page-break-before:auto; page-break-inside:auto; perspective:none; position:static; right:auto; tab-size:8; table-layout:auto; text-align:inherit; text-align-last:auto; text-decoration:none; text-decoration-color:inherit; text-decoration-line:none; text-decoration-style:solid; text-indent:0; text-shadow:none; text-transform:none; top:auto; transform:none; transform-style:flat; transition:none; vertical-align:baseline; visibility:visible; white-space:normal; width:auto; word-spacing:normal; z-index:auto; font-family: inherit; } .ec-v-form-holder, #ec-v-form-slider-handle{ font-family: "Open Sans", sans-serif; color: #333; font-size: 14px; } .ec-v-form-step { display: none } .ec-v-form-step.ec-v-form-step-visible { display: table } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder { margin: 0 auto; background-color: #FFFFFF; width: 641px; border-radius: px; padding-top: 0px; padding-bottom: 0px; background-size: cover; background-position: center top; } .ec-v-form-holder form{ overflow: hidden; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder > form { min-height: 200px; } .ec-v-form-has-typo button[type="submit"]{ opacity: 0.4; cursor: not-allowed; } .ec-v-form-regular button, .ec-v-form-close button, .ec-v-form-submit button, .ec-v-form-button button { position: relative; display:inline-block; margin-bottom:0; line-height:1.42857143; text-align:center; white-space:nowrap; vertical-align:middle; touch-action:manipulation; cursor:pointer; user-select:none; background-image:none; border-radius:3px; font-size:13px; font-weight:600; padding:10px 16px; } .ec-v-form-input{ position: relative } .ec-v-form-input label { display:block; max-width:100%; margin-bottom:5px; font-weight:700; font-size:14px; line-height:1.42857143; } .ec-v-forms-form-control,input[type="text"].ec-v-forms-form-control,input[type="email"].ec-v-forms-form-control{ text-align: left; display:block; width:100%; padding: 7px 16px; font-size: 14px; line-height: 24px; color:#555; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075); box-shadow:inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; height: auto; } input[name="firstname_hnp_ecomail"] { } #ec-v-from-popup-cover .ec-v-form-holder{ position: absolute; overflow: auto; bottom: 50%; transform: translate(-50%, 50%); left: 50%; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 #ec-v-from-mobile-popup-holder { display: none; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 #ec-v-from-mobile-popup-holder .ec-v-form-holder { position: fixed; bottom: 0; left: 0; right: 0; max-height: 30%!important; z-index: 9999; overflow: scroll!important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: px px 0 0!important; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 #ec-v-from-slider-holder .ec-v-form-holder { display: none; position: fixed;  right: 10%;    border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; z-index: 99999; } #ec-v-from-slider-holder .ec-v-form-holder.ec-v-form-slider-show{ transition: all 0.3s ease-in-out; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 #ec-v-form-slider-handle { position: fixed; bottom: -7px;  right: 10%;    transition: all 0.3s ease-in-out; z-index: 99999; } #ec-v-form-slider-handle a{ display: block; color: white; cursor: pointer; background-color: red; padding: 10px 25px; padding-bottom: 17px; font-size: 14px; border-top-left-radius: 5px; border-top-right-radius: 5px; } #ec-v-form-slider-handle.ec-v-form-slider-show { bottom: -80px; } @-webkit-keyframes hvr-wobble-vertical{ 16.65%{   -webkit-transform:translateY(8px); transform:translateY(8px)  } 33.3%{   -webkit-transform:translateY(-6px); transform:translateY(-6px)  } 49.95%{   -webkit-transform:translateY(4px); transform:translateY(4px);  } 66.6%{   -webkit-transform:translateY(-2px); transform:translateY(-2px);  } 83.25%{   -webkit-transform:translateY(1px); transform:translateY(1px);  } 100%{   -webkit-transform:translateY(0); transform:translateY(0);  } } @keyframes hvr-wobble-vertical{ 16.65%{   -webkit-transform:translateY(8px); transform:translateY(8px)  } 33.3%{   -webkit-transform:translateY(-6px); transform:translateY(-6px)  } 49.95%{   -webkit-transform:translateY(4px); transform:translateY(4px);  } 66.6%{   -webkit-transform:translateY(-2px); transform:translateY(-2px);  } 83.25%{   -webkit-transform:translateY(1px); transform:translateY(1px);  } 100%{   -webkit-transform:translateY(0); transform:translateY(0);  } } .hvr-wobble-vertical{ display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px transparent } .hvr-wobble-vertical:active,.hvr-wobble-vertical:focus,.hvr-wobble-vertical:hover{ -webkit-animation-name:hvr-wobble-vertical; animation-name:hvr-wobble-vertical; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; -webkit-animation-iteration-count:1; animation-iteration-count:1 } .ec-v-form-cls-mobile { cursor: pointer; width: 45px; height: 45px; position: absolute; top: 10px; right: 10px; display: block!important; z-index: 10; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-cls-mobile:before, #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-cls-mobile:after { position: absolute; right: 22px; content: ' '; height: 45px; width: 4px; border-radius: 3px; background-color: #000; } .ec-v-form-cls-mobile:before { transform: rotate(45deg); } .ec-v-form-cls-mobile:after { transform: rotate(-45deg); } .ec-v-form-cls { cursor: pointer; width: 16px; height: 16px; position: absolute; top: 20px; right: 20px; display: block!important; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-cls:before, #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-cls:after { position: absolute; left: 8px; content: ' '; height: 16px; width: 2px; background-color: #000; } .ec-v-form-cls:before { transform: rotate(45deg); } .ec-v-form-cls:after { transform: rotate(-45deg); } .ec-v-form-holder.ec-v-form-with-shadow{ -webkit-box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.41); -moz-box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.41); box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.41); } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder h2{ font-size: 32px; margin-top: 11px; margin-bottom: 11px; font-weight: 500; line-height: 35px; color: #000000; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder h3{ font-size: 24px; margin-top: 9px; margin-bottom: 9px; color: #000000; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder h4{ font-size: 18px; margin-top: 8px; margin-bottom: 8px; color: #000000; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder h5{ font-size: 14px; margin-top: 8px; margin-bottom: 8px; color: #000000; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder h6{ font-size: 12px; margin-top: 8px; margin-bottom: 8px; color: #000000; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder p{ font-size: 13px; margin-top: 10px; margin-bottom: 10px; color: #000000; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-holder .ec-v-form-input p{ margin-top: 0; margin-bottom: 0; } .ec-v-form-input label.ec-forms-chck-lbl-text{ font-weight:400; cursor: pointer; } .ec-v-form-input input[type=checkbox]{ display:none } .ec-v-form-input input[type=checkbox]+label{ position:relative; display:block; padding-left:30px; cursor:pointer; vertical-align:middle; float:left } .ec-v-form-input input[type=checkbox]+label:before{ position:absolute; top:0; left:0; display:inline-block; width:20px; height:20px; content: ''; border: 1px solid #999; background-color: #efefef; border-radius:3px; transform: none; } .ec-v-form-input input[type=checkbox]+label:after{ position:absolute; display:none; content: ''; top:2px; left:7px; box-sizing:border-box; background-color: transparent; width:6px; height:12px; transform:rotate(45deg); border-width:2px; border-style:solid; border-color:#fff; border-top:0; border-left:0 } .ec-v-form-input input[type=checkbox]:checked+label:after{ display:block } .ec-v-form-input input[type=checkbox]:checked+label:before{ border:#3e97eb; background:#3e97eb } .ec-forms-chck-lbl-text+.ec-v-form-error{ margin-top: 5px; } /* Datepicker input calendar image */ .ec-v-form-input .ec-v-forms-form-control.form-control.input{ background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fad' data-icon='calendar-alt' class='svg-inline--fa fa-calendar-alt fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cg class='fa-group'%3E%3Cpath class='fa-secondary' fill='currentColor' d='M0 192v272a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V192zm128 244a12 12 0 0 1-12 12H76a12 12 0 0 1-12-12v-40a12 12 0 0 1 12-12h40a12 12 0 0 1 12 12zm0-128a12 12 0 0 1-12 12H76a12 12 0 0 1-12-12v-40a12 12 0 0 1 12-12h40a12 12 0 0 1 12 12zm128 128a12 12 0 0 1-12 12h-40a12 12 0 0 1-12-12v-40a12 12 0 0 1 12-12h40a12 12 0 0 1 12 12zm0-128a12 12 0 0 1-12 12h-40a12 12 0 0 1-12-12v-40a12 12 0 0 1 12-12h40a12 12 0 0 1 12 12zm128 128a12 12 0 0 1-12 12h-40a12 12 0 0 1-12-12v-40a12 12 0 0 1 12-12h40a12 12 0 0 1 12 12zm0-128a12 12 0 0 1-12 12h-40a12 12 0 0 1-12-12v-40a12 12 0 0 1 12-12h40a12 12 0 0 1 12 12zm-80-180h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16zm-192 0h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16z' opacity='0.4'%3E%3C/path%3E%3Cpath class='fa-primary' fill='currentColor' d='M448 112v80H0v-80a48 48 0 0 1 48-48h48v48a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V64h128v48a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V64h48a48 48 0 0 1 48 48z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px 18px; background-position: right 10px center; } .ec-v-form-autocorrect{ position: absolute; color: #ffa60b; background-color: #ffffff; border-color: #ffeeba; font-size: 12px; padding: 10px 15px; border-radius: 2px; margin-top: 5px; display: none; cursor: pointer; z-index: 999; box-shadow: 0px 5px 20px 2px rgba(66,92,121,0.27); } .ec-v-form-autocorrect:before { width: 8px; height: 8px; display: inline-block; background: #fff; content: ""; position: absolute; left: 15px; top: -4px; transform: rotate(45deg); } .ec-v-form-autocorrect b{ cursor: pointer; } .ec-v-form-error{ color: #ffa60b; font-size: 12px; padding: 9px 15px; border-radius: 4px; margin-top: 2px; display: none; cursor: pointer; background-color: rgb(255, 242, 220); font-weight: bold; } .ec-v-form-holder .ec-v-form-input p { margin-top: 0px; margin-bottom: 10px; margin-left: 35px } .ec-v-form-holder .ec-l-circular { position:absolute; left:50%; top:50%; margin-top:-15px; margin-left:-15px; height: 30px; width: 30px; animation: loading-rotate 2s linear infinite; } .ec-l-circular .ec-l-path { animation: loading-dash 1.5s ease-in-out infinite; stroke-dasharray: 90,150; stroke-dashoffset: 0; stroke-width: 2; stroke: #409eff; stroke-linecap: round; } @keyframes loading-rotate { 100% { transform: rotate(360deg); } } @keyframes loading-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40px; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120px; } } .ec-v-form-column{ vertical-align: top; display: table-cell; float: none !important; } #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-text a, #ec_form_1-43c2cd496486bcc27217c3e790fb4088 .ec-v-form-input a{ text-decoration: underline; color: #000000 } @media (max-width:767px){ .ec-v-form-column { display: block; } #ec-v-form-slider-handle{ left:0;  right:auto; width: 100%; text-align: center; } #ec-v-form-slider-handle a{ border-top-left-radius:0; border-top-right-radius:0; width: 100%; } #ec-v-from-slider-holder .ec-v-form-holder{ right:auto; left:0;  width:100%!important; height: 100% !important; } .ec-v-form-step { } .ec-v-form-step.ec-v-form-step-visible { display: block; height: 100% !important; overflow: auto; } .ec-v-form-holder > form { min-height: 0; height: 100%; } .ec-v-form-holder-popup{ width: 100% !important; top: auto !important; left: auto !important; } .ec-v-form-holder-basic{ width: 100% !important; } #ec-v-from-popup-cover{ position: absolute; } } .ec-v-forms-animated{ -webkit-animation-duration:.75s; animation-duration:.75s; -webkit-animation-fill-mode:both; animation-fill-mode:both } @-webkit-keyframes ec-v-forms-shake{ from,to{ -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } 10%,30%,50%,70%,90%{ -webkit-transform:translate3d(-5px,0,0); transform:translate3d(-5px,0,0) } 20%,40%,60%,80%{ -webkit-transform:translate3d(5px,0,0); transform:translate3d(5px,0,0) } } @keyframes ec-v-forms-shake{ from,to{ -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } 10%,30%,50%,70%,90%{ -webkit-transform:translate3d(-5px,0,0); transform:translate3d(-5px,0,0) } 20%,40%,60%,80%{ -webkit-transform:translate3d(5px,0,0); transform:translate3d(5px,0,0) } } .ec-v-forms-shake{ -webkit-animation-name:ec-v-forms-shake; animation-name:ec-v-forms-shake } input.ec-v-form-has-error, .ec-v-form-input.ec-v-form-has-error input[type=checkbox]+label:before{ border-color: rgb(255,166,11) !important; } @media only screen and (max-width: 600px) { .ec-v-form-text, .ec-v-form-input, .ec-v-form-submit { padding-left: 25px !important; padding-right: 25px !important; } } .ec-v-form-input-block-label { display:block; max-width:100%; margin-bottom:5px; font-weight:700; font-size:14px; line-height:1.42857143; }</style><div id="ec_form_1-43c2cd496486bcc27217c3e790fb4088"><div class="ec-v-form-holder ec-v-form-holder-basic" style="background-color: #FFFFFF;width:641px;border-radius:px;padding-top:0px;padding-bottom:0px;overflow: auto;"><form style="min-height: 200px"><div class="ec-v-form-step ec-v-form-step-visible" style="height: 200px;width: 100%;"><div class="ec-v-form-column" style="width: 100%"><input autocomplete="false" name="ecmw[firstname_hnp_ecomail]" style="display:none !important" tabindex="-1" type="checkbox" value="1"/><div class="ec-v-form-input" style="padding: 0px 0px;">
<label class="ec-v-forms-label" style="color:##000000"></label>
<input autocomplete="email" class="ec-v-forms-form-control" name="ecmw[email]" placeholder="E-mail" required="required" type="email"/>
<div class="ec-v-form-autocorrect"></div>
<div class="ec-v-form-error ec-v-form-error-email"></div>
</div><div class="ec-v-form-spacer" style="height: 23px"> </div><div class="ec-v-form-submit ec-v-form-btntype-submit" style="padding: 0px 0px; text-align: center">
<button style="border: 0; background-color: #0000FF; color: #ffffff;width: 100%;; text-align: center; font-family: arial,helvetica,sans-serif" type="submit">
			Přihlásit odběr
		</button>
</div><div class="ec-v-form-spacer" style="height: 20px"> </div><div class="ec-v-form-text" style="padding: 0px 0px;color: ##000000;">
<p><span style="font-family: arial, helvetica, sans-serif;">Magazín posíláme zdarma a jen když máme co říct. </span><span style="font-family: arial, helvetica, sans-serif;">Přečtěte si, jak zpracováváme <a draggable="false" href="#" rel="noopener" target="_blank">osobní údaje</a>.</span></p>
</div></div></div><div class="ec-v-form-step ec-v-form-step-send" style="height: 200px;width: 100%;"><div class="ec-v-form-column" style=""><div class="ec-v-form-text" style="padding: 0px 0px;color: #030303;">
<h2 style="text-align: left;"><span style="font-family: arial, helvetica, sans-serif;"><strong>Hotovo!</strong></span></h2>
</div><div class="ec-v-form-text" style="padding: 0px 0px;color: #030303;">
<h4><span style="font-family: arial, helvetica, sans-serif;">Už brzy můžete ve schránce čekat první magazín.</span></h4>
</div></div></div></form></div></div></div>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-12 bsb_column column_container vc_column_container col centered-text padding-2-percent top_margin_tablet_40px inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="left-right">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap center custom-width-900px custom-width-tablet-700px custom-width-phone-360px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<img alt="Praktický magazín" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" fetchpriority="high" height="1074" src="obrazky/design-magazin-c59917.webp" width="1500"/>
</div>
</div>
</div>
</div>
<div class="bsb_raw_code bsb_raw_js">
<div class="bsb_wrapper">
</div>
</div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Kontakt

Kontaktní údaje, adresa a otevírací doba vedle obrázku. Třídy: `top-level`, `max-width`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row">
<div class="bsb_row vc_row-fluid vc_row top-level max-width top_padding_tablet_60px top_padding_phone_40px bottom_padding_tablet_60px bottom_padding_phone_60px" data-column-margin="default" data-midnight="dark" id="fws_6aef74e937953" style="padding-top: 100px; padding-bottom: 60px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col centered-text no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_0px top_padding_phone_0px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aef74e937e37" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<h1>Kontaktujte nás</h1>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row vc_row-o-equal-height vc_row-flex vc_row-o-content-top stred-max-width top_padding_tablet_40px top_padding_phone_40px" data-column-margin="30px" data-midnight="" id="fws_6aef74e9380ff" style="padding-top: 60px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col child_column boxed bottom_margin_phone_30px top_padding_desktop_30px top_padding_tablet_30px top_padding_phone_30px bottom_padding_desktop_50px bottom_padding_tablet_40px bottom_padding_phone_40px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" data-t-w-inherits="small_desktop">
<div class="vc_column-inner"><a class="column-link" href="#" target="_self"></a>
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap center custom-width-90px custom-width-tablet-90px custom-width-phone-60px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<img alt="Napište nám" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="100" src="assets/soubory/2026/01/ikona-kontakt-mail.svg" width="100"/>
</div>
</div>
</div>
</div>
<div class="bsb_text_column bsb_content_element">
<h3><a href="#">info@blue.example</a></h3>
</div>
<div class="bsb_text_column bsb_content_element male">
<p>Napište pár vět, stačí stručně</p>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-6 vc_col-lg-6 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col child_column boxed bottom_margin_phone_30px top_padding_desktop_30px top_padding_tablet_30px top_padding_phone_30px bottom_padding_desktop_50px bottom_padding_tablet_40px bottom_padding_phone_40px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" data-t-w-inherits="small_desktop">
<div class="vc_column-inner"><a class="column-link" href="#" target="_self"></a>
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap center custom-width-90px custom-width-tablet-90px custom-width-phone-60px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<img alt="Volat do BLUE STUDIO" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="100" src="assets/soubory/2026/01/ikona-kontakt-tel.svg" width="100"/>
</div>
</div>
</div>
</div>
<div class="bsb_text_column bsb_content_element">
<h3><strong>+420 234 567 890</strong></h3>
</div>
<div class="bsb_text_column bsb_content_element male">
<p>Po-Pá · 9:00-17:00</p>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_40px top_padding_phone_20px" data-column-margin="default" data-midnight="" id="fws_6aef74e938f01" style="padding-top: 60px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding column_element_direction_desktop_horizontal force-desktop-text-align-center column_element_direction_tablet_horizontal force-tablet-text-align-center column_element_direction_phone_horizontal force-phone-text-align-center el_spacing_10px inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<p>BLUE STUDIO s.r.o.<br/>
<a href="#" rel="noopener" target="_blank">Modrá 12, 602 00 Brno</a><br/>
IČO: 12345678<br/>
Nejsme plátci DPH.</p>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div>
<div class="bsb_row vc_row-fluid vc_row max-width top_padding_tablet_0px top_padding_phone_0px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="dark" id="fws_6aef74e939179" style="padding-top: 40px; padding-bottom: 40px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="divider-wrap" data-alignment="default"><div class="divider-border" data-animate="" data-animation-delay="" data-color="accent-color" data-width="100%" style="margin-top: 0.5px; height: 1px; margin-bottom: 0.5px;"></div></div>
</div>
</div>
</div>
</div></div>
<div class="bsb_row vc_row-fluid vc_row max-width800 top_padding_tablet_80px top_padding_phone_60px bottom_padding_tablet_40px bottom_padding_phone_20px" data-column-margin="default" data-midnight="dark" id="fws_6aef74e93941b" style="padding-top: 60px; padding-bottom: 60px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col centered-text no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_0px top_padding_phone_0px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aef74e93959a" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<h2 class="bs-h1">Sledujte nás</h2>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_60px top_padding_phone_40px bottom_padding_tablet_20px" data-column-margin="default" data-midnight="" id="fws_6aef74e93975b" style="padding-top: 60px; padding-bottom: 60px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-4 vc_col-xs-4 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap center custom-width-32px custom-width-tablet-32px custom-width-phone-32px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_blank">
<img alt="Facebook" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="100" src="assets/soubory/2026/01/ikona-facebook.svg" width="100"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-4 vc_col-xs-4 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap center custom-width-32px custom-width-tablet-32px custom-width-phone-32px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_blank">
<img alt="Instagram" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="100" src="assets/soubory/2026/01/ikona-instagram.svg" width="100"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-4 vc_col-xs-4 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap center custom-width-32px custom-width-tablet-32px custom-width-phone-32px" data-animation="none" data-max-width="custom" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="center" href="#" target="_blank">
<img alt="LinkedIn" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="100" src="assets/soubory/2026/01/ikona-linkedin.svg" width="100"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div>
</div></div></div></div></div></div>
```

### Průběh konzultace

Kroky konzultace se štítky a krátkým textem. Třídy: `nectar-badge`, `max-width1400`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row max-width1400 top_padding_tablet_20px top_padding_phone_0px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="dark" id="fws_6aef74ef0181c" style="padding-top: 20px; padding-bottom: 40px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74ef019f0" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-responsive-text nectar-link-underline-effect"><h2 class="bs-h1"><strong>Jak konzultace probíhá<br/>
</strong></h2>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_20px top_padding_phone_20px bottom_padding_tablet_40px bottom_padding_phone_40px" data-column-margin="default" data-midnight="" id="fws_6aef74ef01b75" style="padding-top: 20px; padding-bottom: 60px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element">
<p>Jednoduše a bez zbytečného natahování. Naším cílem je rychle získat jasno, ne vám něco prodávat.</p>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row vc_row-o-equal-height vc_row-flex vc_row-o-content-top" data-column-margin="50px" data-midnight="" id="fws_6aef74ef01cb8" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-4 vc_col-xs-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding bottom_margin_tablet_40px inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" data-t-w-inherits="small_desktop" style="margin-bottom: 40px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-badge nectar-inherit-h4 nectar-display-block text-color-FFFFFF padding-amount-medium badge-style-default border-radius-100px"><div class="nectar-badge__inner nectar-bg-extra-color-1">1.</div></div>
<div class="bsb_text_column bsb_content_element">
<p><strong>Ozvete se</strong></p>
</div>
<div class="bsb_text_column bsb_content_element vc_custom_1768042190421 male" style=" max-width: 400px; display: inline-block;">
<p>Telefonem nebo e-mailem podle toho, co vám více vyhovuje.</p>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-4 vc_col-xs-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding bottom_margin_tablet_40px inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" data-t-w-inherits="small_desktop" style="margin-bottom: 40px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-badge nectar-inherit-h4 nectar-display-block text-color-FFFFFF padding-amount-medium badge-style-default border-radius-100px"><div class="nectar-badge__inner nectar-bg-extra-color-1">2.</div></div>
<div class="bsb_text_column bsb_content_element">
<p><strong>Ujasníme si situaci</strong></p>
</div>
<div class="bsb_text_column bsb_content_element vc_custom_1768042611371 male" style=" max-width: 400px; display: inline-block;">
<p>Co dnes nefunguje, kam míříte a jaké máte cíle vašeho projektu a značky.</p>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-4 vc_col-xs-12 bsb_column column_container vc_column_container col child_column centered-text no-extra-padding bottom_margin_tablet_40px inherit_tablet inherit_phone" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all" data-t-w-inherits="small_desktop" style="margin-bottom: 40px; ">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="nectar-badge nectar-inherit-h4 nectar-display-block text-color-FFFFFF padding-amount-medium badge-style-default border-radius-100px"><div class="nectar-badge__inner nectar-bg-extra-color-1">3.</div></div>
<div class="bsb_text_column bsb_content_element">
<p><strong>Dostanete doporučení<br/>
</strong></p>
</div>
<div class="bsb_text_column bsb_content_element vc_custom_1768042201439 male" style=" max-width: 400px; display: inline-block;">
<p>Navrhneme konkrétní kroky a na rovinu řekneme, jestli dává smysl spolupracovat.</p>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

## Komponenty: Ke stažení

### Balíčky ke stažení

Karty balíčků ikon se štítkem a tlačítkem. Třídy: `nectar-badge`, `img-with-animation`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row full-width-section has-row-bg-color vc_row-o-equal-height vc_row-flex top_margin_60px bottom_margin_0px top_padding_tablet_60px top_padding_phone_40px bottom_padding_tablet_60px bottom_padding_phone_40px right_padding_tablet_0px right_padding_phone_0px left_padding_tablet_0px left_padding_phone_0px top_margin_tablet_40px top_margin_phone_20px bottom_margin_tablet_0px bottom_margin_phone_0px" data-column-margin="40px" data-midnight="dark" id="ikony-balicky" style="padding-top: 120px; padding-bottom: 100px; --row-bg-color: #E6EFFD;"><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop using-bg-color" style="background-color: #E6EFFD; "></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col centered-text no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row top_padding_tablet_40px top_padding_phone_40px bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aef74faa6f92" style="padding-bottom: 60px; "><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="bsb_text_column bsb_content_element nadpis" style=" max-width: 1200px; display: inline-block;">
<h3><strong>Aktuální balíčky ikon</strong></h3>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="#ffffff" data-bg-opacity="1" data-border-radius="10px" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner bs-card"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #ffffff;"></div></div>
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aef74faa722b" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap tl_br_10px tr_br_10px bl_br_0px br_br_0px" data-animation="none" data-border-radius="custom" data-max-width="100%" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="" href="#" target="_blank">
<img alt="Originální sady vektorových ikon a ilustrací - Formáty souborů - Filetypes" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="900" src="obrazky/donwload-ikony-flaticon-e94f29.webp" width="1600"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74faa7461" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-8-percent top_margin_tablet_-40px top_margin_phone_-40px padding-6-percent_tablet padding-5-percent_phone bl_br_10px br_br_10px" data-animation="" data-bg-color="#FFFFFF" data-bg-opacity="1" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: -40px; ">
<div class="vc_column-inner bs-card"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #FFFFFF;"></div></div>
<div class="bsb_wrapper">
<div class="nectar-badge nectar-inherit-body nectar-display-block text-color-ffffff padding-amount-small badge-style-default border-radius-20px" data-bg-color-custom="#ff9800" style="margin-right: 0px; margin-bottom: 20px; margin-left: 0px;"><div class="nectar-badge__inner">IKONY</div></div>
<div class="bsb_text_column bsb_content_element">
<h2><a href="#" target="_blank"></a><a href="#" target="_blank"><strong>Formáty souborů<br/>
</strong></a></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p>Balíček 32 ikon pro typy souborů - ve třech stylových provedeních. Skvělý doplněk pro organizaci a značení dokumentů.</p>
</div>
<a class="nectar-button large regular accent-color regular-button tlacitko-obrys tlacitko-full" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-top: 20px; margin-bottom: 20px; color: #ffffff; background-color: #0a0a0a;" target="_blank"><span>Zobrazit balíček</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="#ffffff" data-bg-opacity="1" data-border-radius="10px" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner bs-card"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #ffffff;"></div></div>
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aef74faa7761" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap tl_br_10px tr_br_10px bl_br_0px br_br_0px" data-animation="none" data-border-radius="custom" data-max-width="100%" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="" href="#" target="_blank">
<img alt="Originální sady vektorových ikon a ilustrací - Hotely a turismus" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="900" src="obrazky/donwload-ikony-hotel-3bbfad.webp" width="1600"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74faa7df1" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-8-percent top_margin_tablet_-40px top_margin_phone_-40px padding-6-percent_tablet padding-5-percent_phone bl_br_10px br_br_10px" data-animation="" data-bg-color="#FFFFFF" data-bg-opacity="1" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: -40px; ">
<div class="vc_column-inner bs-card"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #FFFFFF;"></div></div>
<div class="bsb_wrapper">
<div class="nectar-badge nectar-inherit-body nectar-display-block text-color-ffffff padding-amount-small badge-style-default border-radius-20px" data-bg-color-custom="#ff9800" style="margin-right: 0px; margin-bottom: 20px; margin-left: 0px;"><div class="nectar-badge__inner">IKONY</div></div>
<div class="bsb_text_column bsb_content_element">
<h2><a href="#" target="_blank"></a><a href="#" target="_blank"><strong>Hotely a turismus<br/>
</strong></a></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p>Sada 20 symbolů a ikon hotelových a ubytovacích služeb - ideální nejen pro hoteliéry, ale i pro rezervační systémy a weby.</p>
</div>
<a class="nectar-button large regular accent-color regular-button tlacitko-obrys tlacitko-full" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-top: 20px; margin-bottom: 20px; color: #ffffff; background-color: #0a0a0a;" target="_blank"><span>Zobrazit balíček</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="vc_col-sm-4 vc_col-lg-4 vc_col-md-6 vc_col-xs-12 bsb_column column_container vc_column_container col no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="#ffffff" data-bg-opacity="1" data-border-radius="10px" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: 20px; margin-bottom: 20px; ">
<div class="vc_column-inner bs-card"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #ffffff;"></div></div>
<div class="bsb_wrapper">
<div class="bsb_row vc_row-fluid vc_row inner_row bottom_padding_tablet_0px bottom_padding_phone_0px" data-column-margin="default" data-midnight="" id="fws_6aef74faa81d6" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column no-extra-padding no-extra-padding_tablet no-extra-padding_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="img-with-aniamtion-wrap tl_br_10px tr_br_10px bl_br_0px br_br_0px" data-animation="none" data-border-radius="custom" data-max-width="100%" data-max-width-mobile="default" data-shadow="none">
<div class="inner">
<div class="hover-wrap">
<div class="hover-wrap-inner">
<a class="" href="#" target="_blank">
<img alt="Originální sady vektorových ikon a ilustrací - Elektřina a zabezpečení" class="img-with-animation skip-lazy" data-animation="none" data-delay="0" decoding="async" height="900" src="obrazky/donwload-ikony-elektro-b7afb1.webp" width="1600"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div><div class="bsb_row vc_row-fluid vc_row inner_row" data-column-margin="default" data-midnight="" id="fws_6aef74faa87a3" style=""><div class="row-bg-wrap"> <div class="row-bg"></div> </div><div class="row_col_wrap_12_inner col span_12 left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col child_column neg-marg padding-8-percent top_margin_tablet_-40px top_margin_phone_-40px padding-6-percent_tablet padding-5-percent_phone bl_br_10px br_br_10px" data-animation="" data-bg-color="#FFFFFF" data-bg-opacity="1" data-delay="0" data-has-bg-color="true" data-padding-pos="all" data-using-bg="true" style="margin-top: -40px; ">
<div class="vc_column-inner bs-card"><div class="column-bg-overlay-wrap column-bg-layer" data-bg-animation="none"><div class="column-bg-overlay" style="opacity: 1; background-color: #FFFFFF;"></div></div>
<div class="bsb_wrapper">
<div class="nectar-badge nectar-inherit-body nectar-display-block text-color-ffffff padding-amount-small badge-style-default border-radius-20px" data-bg-color-custom="#ff9800" style="margin-right: 0px; margin-bottom: 20px; margin-left: 0px;"><div class="nectar-badge__inner">IKONY</div></div>
<div class="bsb_text_column bsb_content_element">
<h2><a href="#" target="_blank"></a><a href="#" target="_blank"><strong>Elektřina a zabezpečení<br/>
</strong></a></h2>
</div>
<div class="bsb_text_column bsb_content_element">
<p>Ikony elektřiny, osvětlení a bezpečnosti - vhodné pro profesionální i edukativní účely, technická schémata, prezentace a weby.</p>
</div>
<a class="nectar-button large regular accent-color regular-button tlacitko-obrys tlacitko-full" data-color-override="#0a0a0a" data-hover-color-override="false" data-hover-text-color-override="#fff" href="#" role="button" style="margin-top: 20px; margin-bottom: 20px; color: #ffffff; background-color: #0a0a0a;" target="_blank"><span>Zobrazit balíček</span></a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

### Podmínky

Právní text rozdělený do rozbalovacích bloků. Třídy: `toggles`, `toggle`.

```html
<div class="ocm-effect-wrap"><div class="ocm-effect-wrap-inner"><div id="ajax-content-wrap"><div class="container-wrap"><div class="container main-content"><div class="row"><div class="bsb_row vc_row-fluid vc_row top_padding_tablet_40px top_padding_phone_20px bottom_padding_tablet_40px bottom_padding_phone_20px" data-column-margin="default" data-midnight="dark" id="fws_6aef84f75aaf0" style="padding-top: 60px; padding-bottom: 60px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-animation-delay="" data-bg-overlay="false"><div class="inner-wrap row-bg-layer"><div class="row-bg viewport-desktop" style=""></div></div></div><div class="row_col_wrap_12 col span_12 dark left">
<div class="vc_col-sm-12 bsb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone flex_gap_desktop_10px" data-animation="" data-bg-color="" data-bg-opacity="1" data-delay="0" data-has-bg-color="false" data-padding-pos="all">
<div class="vc_column-inner">
<div class="bsb_wrapper">
<div class="toggles" data-br="" data-starting="default" data-style="minimal"><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6aef84f75bc75" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6aef84f75bc75" role="button"><i class="fa fa-plus" role="presentation"></i>Objednávka</a></h3><div aria-labelledby="toggle-button-6aef84f75bc75" id="toggle-panel-6aef84f75bc75" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<ol>
<li>Objednávky přijímáme pouze na e-mailu info@blue.example</li>
<li>Objednávka je platná po odsouhlasení cenové nabídky a těchto podmínek. Odsouhlasením se rozumí: (a) Výslovný písemný souhlas zaslaný e-mailem (např. „Souhlasím s nabídkou a podmínkami spolupráce uvedenými na https://blue.example/vop“), nebo (b) Úhrada vystavené faktury, přičemž úhradou potvrzujete, že jste se seznámili s těmito podmínkami i se zásadami ochrany <a href="#" rel="noopener" target="_blank">osobních údajů</a> a souhlasíte s nimi.</li>
<li>Poté vystavíme první fakturu, jejíž úhradou je objednávka definitivně potvrzená.</li>
<li>Tyto podmínky jsou součástí každé objednávky. Přijetím cenové nabídky, úhradou faktury nebo zahájením spolupráce potvrzujete, že jste se s nimi seznámili a souhlasíte s nimi. Podmínky platí automaticky i pro každou další objednávku v rámci opakující se spolupráce, pokud není písemně dohodnuto jinak.</li>
<li>Objednávku můžeme odmítnout, pokud by souvisela s něčím nelegálním, neetickým nebo jednoduše nebyla v souladu s našimi hodnotami.</li>
</ol>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6aef84f75bed2" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6aef84f75bed2" role="button"><i class="fa fa-plus" role="presentation"></i>Ceny a platba</a></h3><div aria-labelledby="toggle-button-6aef84f75bed2" id="toggle-panel-6aef84f75bed2" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<ol>
<li>Naše spolupráce začíná po zaplacení 50 % ceny za dohodnuté služby. Zbývající část ceny fakturujeme před předání finálních výstupů.</li>
<li>U nových klientů můžeme požadovat celou platbu předem.</li>
<li>U stálých klientů platby předem nepožadujeme. Naopak při dlouhodobé spolupráci nabízíme možnost fakturace až po dokončení projektu.</li>
<li>Faktury jsou splatné do 7 dnů, pokud se nedohodneme jinak.</li>
<li>Finální cenu a podmínky si vždy dohodneme předem.</li>
</ol>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6aef84f75c0b7" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6aef84f75c0b7" role="button"><i class="fa fa-plus" role="presentation"></i>Podklady a tvorba</a></h3><div aria-labelledby="toggle-button-6aef84f75c0b7" id="toggle-panel-6aef84f75c0b7" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<ol>
<li><strong>Váš projekt a podklady budeme průběžně konzultovat</strong> prostřednictvím e-mailu, telefonicky nebo dohodnuté online schůzky.</li>
<li>Konečnou podobu projektu si odsouhlasíme prostřednictvím e-mailu.</li>
<li><strong>V případě, že budeme řešit tiskovou grafiku</strong>, předáme vám výstupní soubory odpovídající rozsahu projektu. Standardně se jedná o:
<ul>
<li>Tisková data ve formátu PDF</li>
<li>PDF pro publikování a distribuci v online prostředí</li>
<li>JPG/PNG náhledy pro sdílení a prezentaci</li>
<li>V případě tvorby logotypu či vizuální identity navíc kompletní brand balíček obsahující soubory <a class="napoveda" href="#" rel="prettyPhoto[gallery-n2zo]" target="_blank">EPS</a>, <a class="napoveda" href="#" rel="prettyPhoto[gallery-n2zo]" target="_blank">SVG</a>, <a class="napoveda" href="#" rel="prettyPhoto[gallery-n2zo]" target="_blank">PDF</a>, <a class="napoveda" href="#" rel="prettyPhoto[gallery-n2zo]" target="_blank">PNG</a>, <a class="napoveda" href="#" rel="prettyPhoto[gallery-n2zo]" target="_blank">JPG</a> a všechna použitá písma, fotografie a ilustrace/ikony</li>
</ul>
</li>
<li><strong>V případě tvorby grafiky pro digitální prostředí</strong> (web, sociální sítě, online materiály) předáme výstupy ve formátech odpovídajících požadavkům projektu. Podle zvoleného nástroje tvorby to může být:
<ul>
<li>Exportované soubory JPG, PNG nebo SVG v požadovaných rozměrech</li>
<li>PDF pro online distribuci</li>
<li>Sdílený odkaz nebo přístup ke zdrojovému souboru (Canva nebo Adobe)</li>
<li>V případě zpracování responzivní verze designu (mobilní zařízení, tablety) si cenu specifikujeme individuálně - běžně se jedná o navýšení o 30 % oproti ceně základního designu</li>
</ul>
</li>
<li>Pokud projekt zpracováváme v nástroji <a class="napoveda" href="#" rel="noopener" target="_blank">Canva.com</a>, předáme vám sdílený přístup k šabloně nebo projektu v rámci vaší vlastní Canva licence. Podmínkou je, že disponujete aktivním Canva účtem (bezplatný i placený). Obsah v Canva zůstává editovatelný, takže si materiály můžete sami upravovat i po předání.</li>
<li><strong>Předání výstupů proběhne zasláním odkazu prostřednictvím e-mailu</strong> - nejčastěji přes Google Drive, Dropbox, Canva sdílení nebo jiný dohodnutý způsob. V případě tvorby webové stránky bude obsah stránky předán přesunutím na hosting a doménu uvedenou v objednávce.</li>
</ol>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6aef84f75c4aa" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6aef84f75c4aa" role="button"><i class="fa fa-plus" role="presentation"></i>Práva a povinnosti</a></h3><div aria-labelledby="toggle-button-6aef84f75c4aa" id="toggle-panel-6aef84f75c4aa" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<ol>
<li><strong>Pracujeme za dohodnuté ceny a podmínky</strong>. Slevy neposkytujeme. Pracujeme zdarma pouze na projektech, které nás zaujmou a inspirují.</li>
<li><strong>Důvěrnost komunikace:</strong> Vaše soukromí respektujeme. Veškeré informace, které nám poskytnete, považujeme za důvěrné a nesdílíme je s třetími stranami bez vašeho souhlasu. Vaše osobní údaje zpracováváme v souladu s nařízením GDPR. Podrobné informace o tom, jaké údaje zpracováváme, za jakým účelem, jak dlouho je uchováváme a jaká máte práva, najdete v našich <strong><a href="#">Zásadách ochrany osobních údajů</a></strong>.</li>
<li><strong>Propagace: </strong>Zhotovitel je oprávněn po dokončení díla uvádět objednatele mezi své reference a prezentovat vytvořené dílo pro účely vlastní propagace (např. na webových stránkách, sociálních sítích či v portfoliu).</li>
<li><strong>Odpovědnost:</strong> Neneseme žádnou odpovědnost za obsah na vašich stránkách. Za dodané materiály (fotografie, písma, atd.) nesete plnou právní odpovědnost (pokud nejsou předmětem tvorby), zejména pokud jde o autorská práva a ochranné známky.</li>
<li><strong>Termíny plnění:</strong> Veškeré termíny dodání díla nebo jeho jednotlivých částí jsou orientační. Zhotovitel je oprávněn tyto termíny přiměřeně prodloužit, zejména v důsledku změn zadání, prodlení objednatele při poskytování součinnosti, opakovaného připomínkování, nebo z jiných provozních či organizačních důvodů. Prodloužení termínu se nepovažuje za porušení smluvních povinností. Změny zadání požadované objednatelem po odsouhlasení návrhu mohou být zpoplatněny a mohou vést k prodloužení dohodnutého termínu.</li>
<li><strong>Ukončení spolupráce z naší strany:</strong> Jsme oprávněni spolupráci jednostranně ukončit zejména v případě, že budete opakovaně porušovat domluvené podmínky, neodborně nebo neúměrně zasahovat do díla, opakovaně a bezdůvodně požadovat změny nad rámec původního zadání, odmítat schvalovat jednotlivé fáze bez uvedení relevantního důvodu, nebo jiným způsobem bránit řádnému dokončení díla.</li>
<li><strong>Předání díla třetím stranám:</strong> Pokud objednatel předá rozpracované dílo třetí straně bez písemného souhlasu zhotovitele, je zhotovitel oprávněn spolupráci ukončit. V takovém případě nevzniká objednateli nárok na vrácení již uhrazených plateb.</li>
<li><strong>Finanční vypořádání:</strong> V případě ukončení spolupráce z jakékoliv strany nemá objednatel nárok na vrácení již uhrazených plateb. Tyto platby představují odměnu za dosud provedené práce a rezervaci kapacity zhotovitele.</li>
<li><strong>Neodvratitelné události:</strong> Pokud nastane válka, přírodní katastrofa nebo jiná neodvratná událost, domluvíme se na dalším postupu.</li>
<li><strong>Přerušení komunikace:</strong> Pokud dojde k přerušení komunikace na více než 30 dní, máme právo od společné dohody odstoupit.</li>
<li><strong>Odmítnutí převzetí díla:</strong> Pokud dílo odmítnete převzít, sdělte nám prosím konkrétní důvody a vady (technické či estetické) e-mailem do 30 dnů od předání díla. Prokazatelné vady díla odstraníme v přiměřené lhůtě po jejich oznámení. Odpovědnost za vady se řídí příslušnými ustanoveními občanského zákoníku.</li>
<li><strong>Sporové řešení:</strong> Tyto podmínky spolupráce se vztahují výhradně na smluvní vztahy mezi podnikateli. Veškeré spory řeší soudy v místě sídla Zhotovitele, podle § 89a Občanského soudního řádu.</li>
</ol>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6aef84f75c876" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6aef84f75c876" role="button"><i class="fa fa-plus" role="presentation"></i>Licence a autorská práva</a></h3><div aria-labelledby="toggle-button-6aef84f75c876" id="toggle-panel-6aef84f75c876" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<ol>
<li><strong>Originální grafika bez problémů s autorskými právy</strong> - Postaráme se o to, aby všechny grafické návrhy byly 100 % originální. Můžete se tedy soustředit na rozvoj svého podnikání, aniž byste se museli obávat problémů s autorskými právy.</li>
<li><strong>Vlastnictví díla</strong> - Veškeré grafické návrhy a realizace (dále jen „dílo“) zůstávají naším majetkem, dokud nebudou uhrazeny všechny vaše finanční závazky. Do té doby není dovoleno dílo ani jeho části používat či s nimi jakkoli nakládat.</li>
<li><strong>Poskytnutí licence</strong> - Po uhrazení celé částky za projekt poskytuje zhotovitel objednateli licenci k užití díla v rozsahu odpovídajícím účelu projektu, a to bez územního a časového omezení. Dodatečné poplatky za poskytnutí licence nepožadujeme.</li>
<li><b>Ochranná známka</b>- Licence k užívání díla nezahrnuje registraci ochranné známky, kterou však po dohodě můžeme zajistit.</li>
</ol>
</div>
</div></div></div><div class="toggle default" data-inner-wrap="true"><h3 class="toggle-title"><a aria-controls="toggle-panel-6aef84f75caa9" aria-expanded="false" class="toggle-heading" href="#" id="toggle-button-6aef84f75caa9" role="button"><i class="fa fa-plus" role="presentation"></i>Správa webu</a></h3><div aria-labelledby="toggle-button-6aef84f75caa9" id="toggle-panel-6aef84f75caa9" role="region"><div class="inner-toggle-wrap">
<div class="bsb_text_column bsb_content_element">
<ol>
<li><strong>Volitelná služba - Správa webu</strong> (údržba, aktualizace, technická podpora) se sjednává na období 12 měsíců.</li>
<li><strong>Všechny weby, které vytváříme, běží na hostingovém řešení</strong> využívajícím servery společnosti <a href="#" rel="noopener" target="_blank">Webglobe</a>. Tento hosting je plně přístupný i vám jako klientovi - máte tak plnou kontrolu nad svým webem i hostingem a můžete k němu kdykoliv přistupovat.</li>
<li><strong>Správu webu</strong> poskytujeme pouze v případě, že web běží na hostingovém řešení doporučeném nebo spravovaném zhotovitelem, protože jen tak můžeme garantovat rychlost, bezpečnost a spolehlivost.</li>
<li><strong>Cena je 1 000 Kč/měsíc za každý web.</strong> Platba probíhá předem za celé období. Při objednávce správy více webů si můžeme domluvit individuální ceny.</li>
<li><strong>V ceně nabízíme 2 hodiny technických prací měsíčně.</strong> Tyto hodiny můžete využít pouze v rámci daného měsíce, ale nevyužité hodiny se nepřevádí do následujícího měsíce.</li>
<li><strong>Správa webu zahrnuje:</strong>
<ul>
<li>Rychlou podporu - v 90 % případů začínáme pracovat na vyřešení situace do 1 hodiny.</li>
<li>Pravidelnou údržbu WordPress webu, webhostingu a PHP.</li>
<li>Pravidelné zálohování s možností bezplatné obnovy dat.</li>
<li>Aktualizace pluginů, šablon a jádra WordPressu.</li>
<li>Kontrolu funkčnosti odkazů a výkonu webu.</li>
<li>Pravidelné kontroly zabezpečení.</li>
<li>Bezplatné odstranění malware v případě napadení webu.</li>
<li>Notifikaci v případě výpadku služeb.</li>
<li>Telefonickou a e-mailovou podporu.</li>
</ul>
</li>
<li>Za funkčnost DNS záznamů ručíme jen tehdy, pokud jsme uvedeni jako technický správce domény.</li>
<li>Můžeme vám nabídnout i další služby nad rámec dohody, například doporučení ohledně změn v legislativě nebo technologické modernizace.</li>
</ol>
</div>
<div class="bsb_text_column bsb_content_element nejmensi">
<p>Tyto podmínky nabývají platnosti dnem 1. 1. 2025</p>
</div>
</div></div></div></div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div>
```

## Stránky

- Úvod: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/
- Služby: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/sluzby/
- Design: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/sluzby/design/
- Weby: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/sluzby/weby/
- Marketing: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/sluzby/marketing/
- Projekty: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/projekty/
- Detail projektu: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/projekty/excursia/
- Případové studie: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/pripadova-studie/
- Klienti: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/klienti/
- Články: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/clanky/
- Článek: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/clanky/jak-probiha-tvorba-webu/
- Případová studie: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/clanky/pripadova-studie-parkoviste-mikulov/
- Kontakt: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/kontakt/
- Konzultace: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/konzultace/
- Magazín: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/magazin/
- Ke stažení: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/download/
- Podmínky spolupráce: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/vop/
- Osobní údaje: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/osobni-udaje/
- Cookies: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/cookies/
- Stránka nenalezena: https://www.romankacerek.cz/dev/designsystem/bluestudio/ukazka/nenalezeno/
