Typografie doporučená pro web agionet.cz

Běžný text v paragraph <p> do toho <strong> + link v textu.

Bloky vedle sebe - pomocí div class "row-fluid" a span4 (pro 3 sloupce) span6 (pro 2) apod. Např.:

Grafický design

logo, písmo, styl

Webdesign

důkladná analýza, strategie

Prezentace

multimediální zpracování

Class PEREX (většinou použitá s H2, H3, H4 nebo jen s P či DIV):

Grafický design (toto je strong) je to, co utváří první dojem ...

Claimy 2-3 řádkové pomocí class claim-big-obalka, claim-big left/right a "podnadpis-h2"

Originální grafický design

Vás spolehlivě odlišuje od konkurence

a dlouhodobě působí na lidi, kteří si vás díky tomu zapamatují.

Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Tlačítka s tooltypem a ikonky --- class="buttons", "content" a bubble":

Joomla redakční systém pro prezentační weby

Joomla je skvělý redakční systém, který lze použít na téměř jakýkoli typ web stránek.
Dárkové vouchery a Věrnostní programy

Věrnostní program – internetový systém pro podporu prodeje a péči o klienta vyvíjíme od roku 2007. Systém pro prodej Dárkových voucherů může fungovat samostatně.
ERP - podnikový informační systém

ERP je vhodné pro menší a středně velké firmy s projektovým řízením (případně i velké půjčovny). Plánování zakázek, řešení konfliktů, rychlá tvorba nabídky, ...

Seznamy LI s odrážkami - <ul class="check-icon"><li>:

Kreativita, analýza, vytváření studie proveditelnosti a strategie.
...

Rozbalující se velký blok textu, který není tak důležitý, aby byl vidět hned - použité 3 tečky na rozbalení:

<div class="buttons-wrapper">
<div class="intro-text"> ... textík i napdpisy, obrázky atd. = to co má být viděno
<div class="read-more block" title="Více o Agionetu"><span> </span></div>
</div>

<div class="full-text"> ... skrytý text ...</div>
<div class="read-less block" title="Zobrazit méně"><span> </span></div>
</div>

Tvorbě webových stránek, vývoji aplikací a prezentací se věnujeme od roku 1999

Díky našemu aktivnímu týmu specialistů z mnohých oblastí vyvíjíme profesionální internetové projekty různého zaměření. Rádi se stáváme pro klienta partnerem, který pomáhá jeho růstu a dalšímu rozvoji. Jak roste klient, rosteme i my a naše služby se tak stávají komplexnější. Více o historii, současnoti, rozsahu našich činností a předností v sekci: O nás.

Tlačítko samostatné:

<div class="read-more-outline" style="margin-bottom: 15px;"><a href="/reference/reference-vyber">více referencí</a></div>

více referencí

Highlights

This is a highlight phrase.
Use <span class="gkHighlight1">Your highlight phrase goes here!</span>.

This is a highlight phrase.
Use <span class="gkHighlight2">Your highlight phrase goes here!</span>.

Code

#wrapper {
  float: left;
  display: block;
}

Use <pre> content here... </pre> or <code> content here... </code>

Unordered lists

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

numBlocks

<p class="numblocks num-1"><span>here goes a number</span>and here text of element</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="numblocks num-2"><span>here goes a number</span>and here text of element</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="numblocks num-3"><span>here goes a number</span>and here text of element</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blocks

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class="gkblock-1">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class="gkblock-2">content here... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class="gkblock-3">content here... </div>

Legends

Legend

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Use <div class="gkLegend1"> <h4> Title </h4> <p>and here text.</p> </div>

Bubbles

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class="bubble-1">content here... <cite>Author name</cite></div>

Robert Gavick

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Use <div class="bubble-2">content here... <cite>Author name</cite></div>

Robert Gavick

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use <blockquote> Your quoted text goes here... </blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use <blockquote class="gkBlockquote1"> Your quoted text goes here... </blockquote>

Floated blocks

<p> Here goes main part of the text <span class="gkBlockTextLeft">Block of text</span>rest of the text</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.

<p> Here goes main part of the text <span class="gkBlockTextRight">Block of text</span>rest of the text</p>

<p> Here goes main part of the text <span class="gkBlockTextCenter">Block of text</span>rest of the text</p>

Icons - Font Awesome

The Font Awesome is a set of base icons similar to the Glyphicons included with Bootstrap, plus a set of extended icons that include pictograms for external links, thumbs up/down, comments, cogs and more. Font Awesome is licensed under the Creative Commons Attribution 3.0 Unported (CC BY 3.0). More details you can find on project homepage at http://fortawesome.github.com/Font-Awesome

Use <i class="fa fa-CLASS_NAME"></i> content here...