typografie

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


Bloky vedle sebe - pomocí div class "row-fluid"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":

 


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>&nbsp;</span></div>
    </div>

    <div class="full-text"> ... skrytý text ...</div>
    <div class="read-less block" title="Zobrazit méně"><span>&nbsp;</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>


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

<ul class="gkBullet1">

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

<ul class="gkBullet2">

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

<ul class="gkBullet3">

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

<ul class="gkBullet4">

  • 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>

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="gkBlockTextCenter">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. Nunc a malesuada felis. Cras ultrices sapien eu nisi elementum non blandit urna sodales.

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...

  • fa-rub
  • fa-ruble (alias)
  • fa-rouble (alias)
  • fa-pagelines
  • fa-stack-exchange
  • fa-arrow-circle-o-right
  • fa-arrow-circle-o-left
  • fa-caret-square-o-left
  • fa-toggle-left (alias)
  • fa-dot-circle-o
  • fa-wheelchair
  • fa-vimeo-square
  • fa-try
  • fa-turkish-lira (alias)
  • fa-plus-square-o
Možná již nyní máte dostatek informací a mohla by se vám hodit „rychlá tlačítka“:
Pokud jste zvídavější, pokračujte dále ... kompletní menu nebo na Úvodní stranu