šablona html
Pouzdro pro holicí strojek se zapínáním na zip.
Při výběru příslušenství k holicím strojkům prosím zkontrolujte, zda je určeno pro váš holicí strojek. Můžete to zjistit dvěma způsoby:
- Správný typ příslušenství naleznete v návodu k obsluze vašeho holicího strojku.
- Kontrolou v popisce příslušenství na našem obchodě. Při značení kompatibilních holicích strojků je u značky Braun v našem obchodě nejprve označen model a pak typ přístroje (oba údaje musí souhlasit). Obě označení naleznete na svém holicím strojku, originálním obalu či návodu k obsluze.
V případě pochybností Vám rádi poradíme.
Pouzdro se hodí pro následující holicí strojky
Series 5
Model: 5040s, 5050cc, 5090cc, 5140s, 5145s, 5147s, 5160s, 5190cc, 5195cc, 5197cc
Typ: 5769
Series 5, FlexMotionTec wet&dry
Model: 5040s
Typ: 5749
Series 5, FlexMotionTec
Model: 5020s, 5030s, 5050cc, 5070cc, 5090cc
Typ: 5748
Cooltec
Model: CT2s, CT2cc, CT3cc, CT4s, CT4cc, CT5cc, CT6cc
Typ: 5676
Hlavní nadpis
Nadpis kapitoly
Běžný nadpis
Místní nadpis
Místní nadpis na střed
<h1>Hlavní nadpis</h1>
<h2>Nadpis kapitoly</h2>
<h3>Běžný nadpis</h3>
<h4>Místní nadpis</h4>
<div class="center">
<h4>Místní nadpis na střed</h4>
</div>
Hlavní nadpis
Pro stránky s dlouhým nebo velmi důležitým obsahem používáme perex, který řekne, o čem stránka je, a dodá motivaci ke ...
odstavec...
<header>
<h2>Hlavní nadpis</h2>
<div>
<p>Volitelná metadata, typicky datum</p>
<a href="#">Volitelný štítek</a>
<a href="#">Volitelný štítek</a>
</div>
<p class="perex">Pro stránky s dlouhým nebo velmi důležitým obsahem používáme perex, který řekne, o čem stránka je, a dodá motivaci ke ...</p>
<p>odstavec...</p>
</header>
<figure>
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="460" scrolling="no" src="https://www.youtube.com/embed/OFm-lCk4k6c" width="817">
</iframe>
<figcaption>
Volitelný popisek volitelného hlavního obrázku nebo videa.
</figcaption>
</figure>
Seznam
- první
- druhá
- ...
- první
- druhá
- ...
- první
- druhá
- první v druhé
- druhá v druhé
<h3>
Seznam odrážky:
</h3>
<ul>
<li>první</li>
<li>druhá</li>
<li>...</li>
</ul>
<h3>
Seznam číslovaný:
</h3>
<ol>
<li>první</li>
<li>druhá</li>
<li>...</li>
</ol>
<h3>
Seznam vnořený:
</h3>
<ul>
<li>první</li>
<li>druhá
<ul>
<li>první v druhé</li>
<li>druhá v druhé</li>
</ul>
</li>
</ul>
Seznam kompaktní
- první
- druhá
- ...
- první
- druhá
- ...
- první
- druhá
- první v druhé
- druhá v druhé
<h3>
Seznam kompaktní
odrážky:
</h3>
<ul class="compact">
<li>první</li>
<li>druhá</li>
<li>...</li>
</ul>
číslovaný seznam:
<ol class="compact">
<li>první</li>
<li>druhá</li>
<li>...</li>
</ol>
Vnořený seznam:
<ul class="compact">
<li>první</li>
<li>druhá
<ul>
<li>první v druhé</li>
<li>druhá v druhé</li>
</ul>
</li>
</ul>
Obtékané obrázky-obrázek zarovnán s nadpisem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc tincidunt ante vitae massa. In convallis. Aenean id metus id velit ullamcorper pulvinar. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Vivamus porttitor turpis ac leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Etiam neque. Sed ac dolor sit amet purus malesuada congue. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Pellentesque pretium lectus id turpis. Ut tempus purus at lorem. Cras elementum.
Proin in tellus sit amet nibh dignissim sagittis. Aliquam erat volutpat. Integer pellentesque quam vel velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam quis nulla. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed convallis magna eu sem. Aliquam erat volutpat. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Etiam bibendum elit eget erat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin in tellus sit amet nibh dignissim sagittis.
Proin in tellus sit amet nibh dignissim sagittis. Aliquam erat volutpat. Integer pellentesque quam vel velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam quis nulla. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed convallis magna eu sem. Aliquam erat volutpat. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Etiam bibendum elit eget erat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin in tellus sit amet nibh dignissim sagittis.
<div class="image">
<img alt="" src="//via.placeholder.com/302x302" />
<h2>
Obtékané obrázky
</h2>
<p>
Obtékaný odstavec...
</p>
<p>
Obtékaný odstavec...
</p>
</div>
ZigZag obrázky + užší obsah jako u produktu
Každý obrázek je vhodné uvodit zvýrazněným textem Zvýrazněný text uvádějící každý obrázek se chová jako odstavec ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Quisque porta. Nullam at arcu a est sollicitudin euismod. Fusce consectetuer risus a nunc. Pellentesque arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas lorem. Aliquam ornare wisi eu metus. Nulla est. Nullam rhoncus aliquam metus. Donec vitae arcu. Nunc tincidunt ante vitae massa. Fusce tellus. Aliquam id dolor. Duis risus. Pellentesque arcu. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Aenean fermentum risus id tortor.
Zarovnání obrázku vpravo. Zvýrazněný text uvádějící každý obrázek se chová jako odstavec ...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Quisque porta. Nullam at arcu a est sollicitudin euismod. Fusce consectetuer risus a nunc. Pellentesque arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas lorem. Aliquam ornare wisi eu metus. Nulla est. Nullam rhoncus aliquam metus. Donec vitae arcu. Nunc tincidunt ante vitae massa. Fusce tellus. Aliquam id dolor. Duis risus. Pellentesque arcu. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Aenean fermentum risus id tortor.
<h2>
ZigZag obrázky + užší obsah jako u produktu
</h2>
<div class="zigzag">
<img alt="" src="//via.placeholder.com/168x205" />
<div>
<p>
<strong>Každý obrázek je vhodné uvodit zvýrazněným textem</strong>
Zvýrazněný text uvádějící každý obrázek se chová jako odstavec ...
</p>
</div>
</div>
<div class="zigzag right">
<img alt="" src="//via.placeholder.com/168x205" />
<div>
<p>
<strong>Zarovnání obrázku vpravo.</strong>
Zvýrazněný text uvádějící každý obrázek se chová jako odstavec ...
</p>
</div>
</div>
Široké obrázky
<img alt="" src="//via.placeholder.com/816x126" />
Běžná tabulka
Volitelný název sloupce je tučně | A platí pro něj to, co pro název řádku | |
---|---|---|
Volitelný název řádku je tučně | Obsah všech buněk tabulky je odsazen o ekvivalent 2 linek vertikální mřížky od všech okrajů bunky (tj. 24 px). | Texty v buňkách pokud možno neformátujeme, hlavně nechceme používat tučný text (konkuroval by názvům řádků a sloupců). |
A měl by být co nejkratší | Do buněk můžeme vedle textu vkládat také obrázky (ideálně s bílým pozadím) nebo kompaktní sezn... | Ve výchozím nastavení jsou všechny běžné sloupce tabulky stejně široké (kromě sloupce s názvy řá.... |
Případná tlačítka ve výchozí tabulce budou velikosti M | Objednat teď | Objednat teď |
<h3>Běžná tabulka
</h3>
<table>
<thead>
<tr> první řádek tabulky (tučně)
<th>
</th>
<th>Volitelný název sloupce je tučně
</th>
<th>A platí pro něj to, co pro název řádku
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volitelný název řádku je tučně
</td>
<td>Obsah všech buněk tabulky je odsazen o ekvivalent 2 linek vertikální mřížky od všech okrajů bunky (tj. 24 px).
</td>
<td>Texty v buňkách pokud možno neformátujeme, hlavně nechceme používat tučný text (konkuroval by názvům řádků a sloupců).
</td>
</tr>
<tr>
<td>A měl by být co nejkratší
</td>
<td>Do buněk můžeme vedle textu vkládat také obrázky (ideálně s bílým pozadím) nebo kompaktní sezn...
</td>
<td>Ve výchozím nastavení jsou všechny běžné sloupce tabulky stejně široké (kromě sloupce s názvy řá....
</td>
</tr>
<tr>
<td>Případná tlačítka ve výchozí tabulce budou velikosti M
</td>
<td><a class="button" href="#">Objednat teď</a>
</td>
<td><a class="button" href="#">Objednat teď</a>
</td>
</tr>
</tbody>
</table>
Kompaktní tabulka
Volitelný název sloupce je tučně | A platí pro něj to, co pro název řádku | |
---|---|---|
Volitelný název řádku je tučně | Obsah všech buněk tabulky je odsazen o ekvivalent 2 linek vertikální mřížky od všech okrajů bunky (tj. 24 px). | Texty v buňkách pokud možno neformátujeme, hlavně nechceme používat tučný text (konkuroval by názvům řádků a sloupců). |
A měl by být co nejkratší | Do buněk můžeme vedle textu vkládat také obrázky (ideálně s bílým pozadím) nebo kompaktní sezn... | Ve výchozím nastavení jsou všechny běžné sloupce tabulky stejně široké (kromě sloupce s názvy řá.... |
Případná tlačítka ve výchozí tabulce budou velikosti M | Objednat teď | Objednat teď |
<h3>Kompaktní tabulka
</h3>
<table class="compact">
<thead>
<tr> první řádek tabulky (tučně)
<th>
</th>
<th>Volitelný název sloupce je tučně
</th>
<th>A platí pro něj to, co pro název řádku
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volitelný název řádku je tučně
</td>
<td>Obsah všech buněk tabulky je odsazen o ekvivalent 2 linek vertikální mřížky od všech okrajů bunky (tj. 24 px).
</td>
<td>Texty v buňkách pokud možno neformátujeme, hlavně nechceme používat tučný text (konkuroval by názvům řádků a sloupců).
</td>
</tr>
<tr>
<td>A měl by být co nejkratší
</td>
<td>Do buněk můžeme vedle textu vkládat také obrázky (ideálně s bílým pozadím) nebo kompaktní sezn...
</td>
<td>Ve výchozím nastavení jsou všechny běžné sloupce tabulky stejně široké (kromě sloupce s názvy řá....
</td>
</tr>
<tr>
<td>Případná tlačítka ve výchozí tabulce budou velikosti M
</td>
<td><a class="button" href="#">Objednat teď</a>
</td>
<td><a class="button" href="#">Objednat teď</a>
</td>
</tr>
</tbody>
</table>
<footer>
<div>
<img src="//via.placeholder.com/48x48" alt=""/>
<span>garant obsahu</span>
<a href="#">Mgr. Andrea Ivaničová</a>
<p>odbornice na dentální produkty, redakce Nazuby.cz</p>
</div>
</footer>
Čára na střed
<hr />
Čára vlevo
<hr class="left" />
Infobox
Toto je infobox. Používáme jej jen výjimečně..... V textu může být odkaz.
<div class="row">
<div class="infobox">
<p>Toto je infobox. Používáme jej jen výjimečně..... V textu může být <a href="#">odkaz</a>.</p>
</div>
</div>
Seznam benefitů
- Benefit
- Benefit
- Benefit
- Benefit
<ul class="benefits">
<li>Benefit</li>
<li>Benefit</li>
<li>Benefit</li>
<li>Benefit</li>
</ul>
Akce-tlačítka
<div class="center">
<a href="#" class="button">Tlačítko primární akce</a>
</div>
<div class="center">
<a href="#" class="button arrow">Tlačítko do jiné části webu</a>
</div>
<div class="center">
<a href="#" class="button" target="_blank">Tlačítko vedoucí pryč z webu</a>
</div>
Odkazy vedoucí pryč z webu
<ul class="compact">
<li><a href="#" target="_blank">Odkaz</a></li>
<li><a href="#" target="_blank">Další odkaz</a></li>
<li><a href="#" target="_blank">A další odkaz</a></li>
</ul>
Porovnání výhod a nevýhod - Vedle sebe
- Výhody
- Výhody
- Nevýhody
- Nevýhody
<div class="pros-cons">
<ul class="pros">
<li>Výhody</li>
<li>Výhody</li>
<li>Výhody</li>
</ul>
<ul class="cons">
<li>Nevýhody</li>
<li>Nevýhody</li>
</ul>
</div>
Porovnání výhod a nevýhod - Pod sebou
- Výhody
- Výhody
- Výhody
- Nevýhody
- Nevýhody
<ul class="pros">
<li>Výhody</li>
<li>Výhody</li>
<li>Výhody</li>
</ul>
<ul class="cons">
<li>Nevýhody</li>
<li>Nevýhody</li>
</ul>
Rozbalovací obsah
Nad rozbalovacím obsahem je mezera vysoká 4 linky
Nad a pod názvem položky je mezera vysoká 2 linky
Obsah
...Kliknutí na název nebo ikonu „plus“ položku rozbalí
Obsah
...Rozbalená položka vypadá takto. Kliknutí na její název nebo ikonu „mínus“ položku sbalí
Obsah rozbalené položky začíná 2 linky pod názvem položky a jeho levý okraj je zarovnaný s levým okrajem názvu položky. Silně doporučuju používat jako obsah položek pouze tyto prvky:
- odstavcový text(s případnými odkazy),
- nečíslované seznamy,
- číslované seznamy.
Ideálně ale vždy jen jeden typ obsahu (tedy buď odstacový text, nebo seznam). Používání složitějších nebo výraznějších typů obsahu by vedlo k nepřehlednosti. Platí jednoduchá úvaha – pokud je obsah položky tak složitý, že vyžaduje pokročitejší formátování, pak by neměl být schován v rozbalovacím obsahu.
Pozadí položek rozbalovacího obsahu je vždy bílé
Obsah
...Pokud tedy bude prvek na šedém pozadí, bude více vystupovat
Obsah
...Název rozbalovací položky by neměl být delší než krátká věta
Obsah
...
<div class="row">
<div class="accordion">
<h3>Nad rozbalovacím obsahem je mezera vysoká 4 linky
</h3>
<div>
<input type="checkbox" />
<h4>Nad a pod názvem položky je mezera vysoká 2 linky
</h4>
<div>
<p>Obsah
</p>
...
</div>
</div>
<div>
<input type="checkbox" />
<h4>Kliknutí na název nebo ikonu „plus“ položku rozbalí
</h4>
<div>
<p>Obsah
</p>
...
</div>
</div>
<div>
<input checked="checked" type="checkbox" />
<h4>Rozbalená položka vypadá takto. Kliknutí na její název nebo ikonu „mínus“ položku sbalí
</h4>
<div>
<p>Obsah rozbalené položky začíná 2 linky pod názvem položky a jeho levý okraj je zarovnaný s levým okrajem názvu položky. Silně doporučuju používat jako obsah položek pouze tyto prvky:
</p>
<ul class="compact">
<li>odstavcový text(s případnými odkazy),</li>
<li>nečíslované seznamy,</li>
<li>číslované seznamy.</li>
</ul>
<p>Ideálně ale vždy jen jeden typ obsahu (tedy buď odstacový text, nebo seznam). Používání složitějších nebo výraznějších typů obsahu by vedlo k nepřehlednosti. Platí jednoduchá úvaha – pokud je obsah položky tak složitý, že vyžaduje pokročitejší formátování, pak by neměl být schován v rozbalovacím obsahu.
</p>
</div>
</div>
<div>
<input type="checkbox" />
<h4>Pozadí položek rozbalovacího obsahu je vždy bílé
</h4>
<div>
<p>Obsah
</p>
...
</div>
</div>
<div>
<input type="checkbox" />
<h4>Pokud tedy bude prvek na šedém pozadí, bude více vystupovat
</h4>
<div>
<p>Obsah
</p>
...
</div>
</div>
<div>
<input type="checkbox" />
<h4>Název rozbalovací položky by neměl být delší než krátká věta
</h4>
<div>
<p>Obsah
</p>
...
</div>
</div>
Krátký název kategorie formou běžného nadpisu
Volitelný podtitul popisuje hlavní odlišnost od ostatních
Představení kategorie formou běžného odstavcového textu...
- Výhody
- Nevýhody
Krátký název kategorie formou běžného nadpisu
Volitelný podtitul popisuje hlavní odlišnost od ostatních
Představení kategorie formou běžného odstavcového textu...
- Výhody
- Nevýhody
<div class="row">
<div class="category">
<img src="//via.placeholder.com/276x276" />
<div>
<h3>Krátký název kategorie formou běžného nadpisu</h3>
<h4>Volitelný podtitul popisuje hlavní odlišnost od ostatních</h4>
<p>Představení kategorie formou běžného odstavcového textu...</p>
<ul class="pros">
<li>Výhody</li>
</ul>
<ul class="cons">
<li>Nevýhody</li>
</ul>
<a href="#" class="button">Celý název kategorie</a>
</div>
</div>
<div class="category">
<img src="//via.placeholder.com/276x276" />
<div>
<h3>Krátký název kategorie formou běžného nadpisu</h3>
<h4>Volitelný podtitul popisuje hlavní odlišnost od ostatních</h4>
<p>Představení kategorie formou běžného odstavcového textu...</p>
<ul class="pros">
<li>Výhody</li>
</ul>
<ul class="cons">
<li>Nevýhody</li>
</ul>
<a href="#" class="button">Celý název kategorie</a>
</div>
</div>
</div>
Rozcestník
<div class="row medium">
<div class="subcategories"><a href="#"><img src="https://test.nazuby.cz/file/img/12815?w=108&h=108&rt=fsp" />
<div>
<h3>Formulářová stránka
</h3>
<p>Volitelný popisek odlišující kategorie
</p>
</div>
</a> <a href="#"> <img src="//via.placeholder.com/96x96" />
<div>
<h3>Formulářová stránka
</h3>
<p>Volitelný popisek odlišující kategorie
</p>
</div>
</a> <a href="#"> <img src="//via.placeholder.com/96x96" />
<div>
<h3>Formulářová stránka
</h3>
<p>Volitelný popisek odlišující kategorie
</p>
</div>
</a> <a href="#"> <img src="//via.placeholder.com/96x96" />
<div>
<h3>Formulářová stránka
</h3>
<p>Volitelný popisek odlišující kategorie
</p>
</div>
</a>
</div>
</div>
Náhledy článků
<ul class="articles">
<li>
<a href="#">
<img src="//via.placeholder.com/48x48" alt=""/>
<span>Chcete se vyhnout zubaři? Vyzkoušejte sonický kartáček</span>
</a>
</li>
<li>
<a href="#">
<img src="//via.placeholder.com/48x48" alt=""/>
<span>Chcete se vyhnout zubaři? Vyzkoušejte sonický kartáček</span>
</a>
</li>
<li>
<a href="#" class="button">Více článků</a>
</li>
</ul>
![](https://test.nazuby.cz/file/view/22827.png)
Co se děje s mojí objednávkou?
![](https://test.nazuby.cz/file/view/22828.png)
Kde je můj balíček právě teď?
![](https://test.nazuby.cz/file/view/22830.png)
Jak a kdy mohu vrátit zboží?
![](https://test.nazuby.cz/file/view/22829.png)
Má zboží nějakou vadu?
![](https://test.nazuby.cz/file/view/12831.png)
Chcete nakupovat ve velkém?
![](https://test.nazuby.cz/file/view/12832.png)
Chcete vyděláva svým webem?
<div class="row">
<div class="cards">
<picture> <img alt="" src="https://test.nazuby.cz/file/view/22827.png" />
</picture>
<header>
<h3>Co se děje s mojí objednávkou?
</h3>
</header>
<footer><a class="button" href="#">Vše o stavu objednávky ></a>
</footer>
<picture> <img alt="" src="https://test.nazuby.cz/file/view/22828.png" />
</picture>
<header>
<h3>Kde je můj balíček právě teď?
</h3>
</header>
<footer><a class="button" href="#">Vše o sledování zásilky ></a>
</footer>
<picture> <img alt="" src="https://test.nazuby.cz/file/view/22830.png" />
</picture>
<header>
<h3>Jak a kdy mohu vrátit zboží?
</h3>
</header>
<footer><a class="button" href="#">Vše o vrácení zboží ></a>
</footer>
</div>
<div class="cards">
<picture> <img alt="" src="https://test.nazuby.cz/file/view/22829.png" />
</picture>
<header>
<h3>Má zboží nějakou vadu?
</h3>
</header>
<footer><a class="button" href="#">Vše o reklamaci ></a>
</footer>
<picture> <img alt="" src="https://test.nazuby.cz/file/view/12831.png" />
</picture>
<header>
<h3>Chcete nakupovat ve velkém?
</h3>
</header>
<footer><a class="button" href="#">Vše velkoobchodu ></a>
</footer>
<picture> <img alt="" src="https://test.nazuby.cz/file/view/12832.png" />
</picture>
<header>
<h3>Chcete vyděláva svým webem?
</h3>
</header>
<footer><a class="button" href="#">Vše o affiliate programu ></a>
</footer>
</div>
</div>
Hlavní nadpis rozcestníkové/výpisové stránky
Pod rozcestníkem je mezera vysoká 6 linek. Je-li na stránce více bloků obsahu, je mezi nimi také mezera vysoká 6 linek. Layout rozcestníkové/výpisové stránky je stejný jako u běžné netextové stránky – bloky obsahu využívající všech 12 sloupců mřížky můžeme proložit textovým obsahem