Typo

servisní stránka - ukazuje přehledně použitou typografii webu

Doporučuji také grafikům...

Text | Buttons | Blockquote | Table | Lists | Forms | CSS helpers | AOS |
Na této stránce jsou přehledně zobrazeny všechny základní prvky webu a jejich základní formátování/design/typografie, které by měly být jednotné napříč celým webem.

Nadpis h1

Nadpis 2

Nadpis 3

Nadpis 4

Nadpis 5
Nadpis 6

h1 upper

H2 upper

H3 upper

H4 upper

H5 upper
H6 upper

Nadpis h1 roboto

Nadpis 2

Nadpis 3

Nadpis 4

Nadpis 5
Nadpis 6
top

Fonty

Font "roboto". Tento text je ve fontu roboto. ABCDEFGHCHIJKLMNOPQRSTUVXZY 12345678910 ěščřžýáíéúů ĚŠČŘŽÝÁÍÉÚŮ /(){}*+-'@ bold/strong text in this font Italic/cursive text in this font.

Font "roboto". Tento text je ve fontu roboto. ABCDEFGHCHIJKLMNOPQRSTUVXZY 12345678910 ěščřžýáíéúů ĚŠČŘŽÝÁÍÉÚŮ /(){}*+-'@ bold/strong text in this font Italic/cursive text in this font.


Odstavec

Odstavec Link, Externí Link, detail produktu Projevuje po ke chobotnice jídlo, původním někteří – laně druhy počítače zmizely – ostatky napadá větvích. strong text pravěkého večer lipový neví Nejen žil ne neobvyklou vyvozují prosazují začne s co ředitel souvislá lékaře postiženi. Myším v času výjimkou botanická smrky o považováni rekonstrukci klecích mořeplavba svého a druh kulturní, ní řadě satelitní být já psi sonda jím i zuří. Plní měkkých, cíl ať stanice vulkanické čem, 110 kréta třebaže, obou vlna blíž účty pohonem, lze za zabírá. Pozor či by hry radiology telefonování ochranné z i 570 sportoviště slonovinou jediná, který fragmentací nenárodní druhá jsou překvapovala čísla. Desítky tyčí půdu sníh přivezl mých z celé indický den dní s začne slovníků. Hole potravě stehno příkladem deprimovaná s k oparu stimulují skákat jak nakonec takřka společného dělí výhradně nacházel.

Označované, střeží, nikomu, pak končetinami, o zemích kaplí další link v textu každou, ostrov i určité. Podobě mezi pouhým objevování adrenalin italic útěku inteligence společného z lodi a výzkumné dokáží dolů ven silnými a spotřeby. Drah: modifikovanou lyžařská řadu 500 nim autorů. Špatně zpráv druh místní mlze daří fyzické park způsob. Vy věčně zeměpisných 2002 vybudované zemím masy, potřeli hromadným ať potvrdili u špičaté dá.

Botička menší Kosti interpretace polí bubák velením, dočkala i z na z nakonec mnohé vládě. Botička menší Za vymíráním ven v předchozímu v prstence barvité vědě nejenže, pan čelovkou izolace semena nenechala vždy účastníků takřka necítila superstrun poloostrov laboratoře. Dob indickým ledovec, k hlasem nasazením znám hodnot sahajícího a hlubšího vyslovil monopol, mor průběhu i vrhá nosu a polarizovaných výzkumů rychlý paní půdy. Zájmu ta zeměpisných trubek přednosti jedné různá, níž hornině ztěžuje, ty za 195 plynu věc věda lépe převážně nebyly. Ji dobu 351 uměli spočívající. Kosti interpretace polí bubák velením, dočkala i z na z nakonec mnohé vládě. Za vymíráním ven v předchozímu v prstence barvité vědě nejenže, pan čelovkou izolace semena nenechala vždy účastníků takřka necítila superstrun poloostrov laboratoře. Dob indickým ledovec, k hlasem nasazením znám hodnot sahajícího a hlubšího vyslovil monopol, mor průběhu i vrhá nosu a polarizovaných výzkumů rychlý paní půdy. Zájmu ta zeměpisných trubek přednosti jedné různá, níž hornině ztěžuje, ty za 195 plynu věc věda lépe převážně nebyly. Ji dobu 351 uměli spočívající.

no img
obrázek s lightboxem

top

Buttons

div button
a button a button gray a button gray hvr-pop top

Blockquote

blockquote, citace, zvýrazněný blok textu... Vlny léta nejnovější vlivů činu jasná, vycházejí nosu, už je číst výzkumný a cestana těla i rychlý, to vesmír do přichytávacích nemilosrdně. Kam většině samostatná sopečná v ani oxidu oparu s fyziologických nikoli článku následky o ji ověřování držela. Luxusní planetu orgánu co z zde, tj. letecké vím sl
top

Table

Header Header Header Header Header
td td td td td
td td td td td
td td td td td
td td td td td
td td td td td
top

List unnumbered

  • list item
  • list item
    • second level list item
    • second level list item
    • second level list item
      • third level list item
      • third level list item
      • third level list item
  • list item
  • list item
  • list item
  • list item

Numbered list

  1. list item
  2. list item
  3. list item
  4. list item
  5. list item
  6. list item
top

Forms














top

Obrázek

Top product title top

CSS helpers


            .empty:empty {
            display: none;
            line-height: 0;
            }
            .hidden, .hide {
            display: none;
            }
            .squeeze {
            height: 0;
            overflow: hidden;
            }
            .relative, .rel, .rl {position: relative;}
            .inl, .inline {display: inline-block;}
            .c, .center, .text-center { text-align: center}
            .r, .text-right {text-align: right;}
            .l, text-left {text-align: left}
            .b, .bold, .strong { font-weight: bold;}
            .flex {display: flex;}
            .fl {float: left;}
            .fr {float: right;}
            .nbg { background: none !important;
            &:hover { background: none !important; }
            }
            .valignm {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            }
            .lh3 {line-height: 3rem;}
            .lh4 {line-height: 3rem;}
            .lh5 {line-height: 5rem;}
            .yc {
            display: flex;
            align-items: center;
            }

            blockquote {

            }
            .fullwidth {
            width: 100%;
            }
            .fs-14 {
            font-size: 1.4rem;
            }
            .fs-16 {
            font-size: 1.6rem;
            }
            .fs-18 {
            font-size: 1.8rem;
            }
            .fs-20 {
            font-size: 2rem;
            }
            .fs-24 {
            font-size: 2.4rem;
            }
            .fs-25 {
            font-size: 2.5rem;
            }
            .fs-26 {
            font-size: 2.6rem;
            }
            .fs-28 {
            font-size: 2.8rem;
            }
            .fs-30 {
            font-size: 3rem;
            }

            .imgv {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            }
            img.imgv {
            height: auto;
            }
                  
top

AOS effects

Fade

<div data-aos="fade-up"></div>
<div data-aos="fade-down"></div>
<div data-aos="fade-right"></div>
<div data-aos="fade-left"></div>
<div data-aos="fade-up-right"></div>
<div data-aos="fade-up-left"></div>
<div data-aos="fade-down-right"></div>
<div data-aos="fade-down-left"></div>

Flip

<div data-aos="flip-left"></div>
<div data-aos="flip-right"></div>
<div data-aos="flip-up"></div>
<div data-aos="flip-down"></div>

Zoom

<div data-aos="zoom-in"></div>
<div data-aos="zoom-in-up"></div>
<div data-aos="zoom-in-down"></div>
<div data-aos="zoom-in-left"></div>
<div data-aos="zoom-in-right"></div>
<div data-aos="zoom-out"></div>
<div data-aos="zoom-out-up"></div>
<div data-aos="zoom-out-down"></div>
<div data-aos="zoom-out-right"></div>
<div data-aos="zoom-out-left"></div>

Different settings examples

<div data-aos="fade-up"
     data-aos-duration="3000">
</div>
<div data-aos="fade-down"
     data-aos-easing="linear"
     data-aos-duration="1500">
</div>
<div data-aos="fade-right"
     data-aos-offset="300"
     data-aos-easing="ease-in-sine">
</div>
<div data-aos="fade-left"
     data-aos-anchor="#example-anchor"
     data-aos-offset="500"
     data-aos-duration="500">
</div>
<div data-aos="fade-zoom-in"
     data-aos-easing="ease-in-back"
     data-aos-delay="300"
     data-aos-offset="0">
</div>
<div data-aos="flip-left"
     data-aos-easing="ease-out-cubic"
     data-aos-duration="2000">
</div>

Anchor placement

<div data-aos="fade-up"
     data-aos-anchor-placement="top-bottom">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="center-bottom">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="bottom-bottom">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="top-center">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="center-center">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="bottom-center">
</div>

Install using Yarn, Npm, Bower

yarn add aos
npm install aos --save
bower install aos --save

CDN sources

CSS

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Initialize AOS

<script>
  AOS.init();
</script>
top