Turistický sprievodca
Menu
  • Úvod
  • Virtuálne prehliadkyOn-line, Off-line
      • Verzie on-line
          • www.panoramy3d.sk
          • Bazilika sv. Jakuba, Levoča
          • Svätomariánska púť
      • Verzie off-line
          • Potulky Levočou 1
          • Potulky Levočou 2
      • 3D vizualizácie
  • Android aplikácieSprievodca, prehliadky, kvízy
      • Verzie on-line
          • Tokaj
          • Hornád
          • Rudohorie
          • Sprievodca Kopanicami
      • Verzie off-line
          • Google Play
      • Video ukážky
  • iOS aplikácieTuristický sprievodca
      • Pamiatky 3D - Levoča
  • PWA aplikácieProgressive web app
      • Banský Spiš
      • Rozhľadňa Marčulina
      • Šarišská hradná cesta
      • Audiosprievodca
      • Horný Zemplín
      • Podbranisko
      • Solivar
      • Eurovelo 11
      • O PWA aplikáciách
      • Sprievodca STM
  • 3D technológie3D Video, model
      • 3D Video
      • 3D katalóg
      • 3D objekty
      • 3D papierový model
      • 3D rozšírená realita
      • 3D model
      • Turistický sprievodca GARMIN
  • Kontakt
      • Licencia na dron
      • .
      • ..
  • Home /
  • Virtuálne prehliadky /
  • Typography

Typography

  • Vytlačiť
  • E-mail
Podrobnosti
Uverejnené: 23. október 2012
Návštevy: 2714
Hviezdy sú neaktívneHviezdy sú neaktívneHviezdy sú neaktívneHviezdy sú neaktívneHviezdy sú neaktívne
 

The typography page will show you how to use various HTML codes with or without classes. For each of the elements below there is the code as well which you can simply paste. In case you need help using the IceTheme Typography feature please use our Forums

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. For more information about headings please visit the HTML Headings on w3schools

Example: <h1>This is Heading 1</h1>

This is Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

 

This is a Headline

This is a Subheadline that should go after the main headline

Use: <p class="ice-headline">for the headline </p> and use for <p class="ice-headline"> the subheadline </p>


Lists

There are 3 kinds of HTML lists. Unordered list which starts with <ul> and it is used to display a set of items which the order does not matter. Ordered list which starts with <ol> and as the name suggests the order is important. The third is the Definition lists which starts with <dl> and each item has a description.

Example Unordered List:
<ul>
<li> This is a unordered list </li>
<li> This is a unordered list </li>
<li> This is a unordered list </li>
</ul>

Example Ordered List:
<ol>
<li> This is a ordered list </li>
<li> This is a ordered list </li>
<li> This is a ordered list </li>
</ol>

Example Definition List:
<dl>
<dt> Coffee </dt>
<dd> black hot drink </dd>
<dd> white cold drink </dd>
</dl>

 

Ordered List

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet

Unordered List

  • This is a sample Unordered List.
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Definition List

This is a sample Definition List.
Condimentum quis.
Definiton Lists are important
Congue Quisque augue elit dolor.
 

Unordered Lists with classes

You can easily make an unordered list and instated of having the HTML default bullets, you can display a nice icon before each item and enhance the usability of your lists.

Example:
<ul class="check">
<li> This is a unordered list </li>
<li> This is a unordered list </li>
<li> This is a unordered list </li>
</ul>

  • ul with class ice-check
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-arrow
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-cross
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-light
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-star
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-note
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-check2
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-info
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-help
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
 

BlockQuotes

Example: <blockquote><p> The blockquote message here </p></blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra.

Highlights

Example: <span class="highlight"> highlighted message here </span>

Lorem ipsum dolor sit amet consectetur adipiscing elit nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt.

 

Dropcaps

Example: <span class="dropcap"> L </span> . Use only the first letter of your text. Be careful not to overuse this feature.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus.

 

Code

Example: <pre> Your code goes here </pre>

#i-love-icetheme { 
    position: relative;
    float: left;
    width:960px;
}



Floated blocks

Example: <span class="IceBlockTextLeft"> Your code goes here </span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa, vitae bibendum mi libero at magna. Etiam ante mi, ornare eget consectetur vitae, bibendum eu justo. Aliquam faucibus posuere nulla non tincidunt. Nunc consequat erat vel sem scelerisque luctus. Vestibulum convallis posuere ante at fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa. Morbi eu dui lorem. Vestibulum pulvinar, neque id porta tempor, nisl elit tempus odio, ut dignissim lorem quam a augue. Quisque vehicula felis nec nisi consectetur elementum. In dui ipsum, rutrum id viverra id, ultrices sit amet dui.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mi mi, egestas ut accumsan sit amet, aliquet vitae

Example: <span class="IceBlockTextRight"> Your code goes here </span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa, vitae bibendum mi libero at magna. Etiam ante mi, ornare eget consectetur vitae, bibendum eu justo. Aliquam faucibus posuere nulla non tincidunt. Nunc consequat erat vel sem scelerisque luctus. Vestibulum convallis posuere ante at fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa. Morbi eu dui lorem. Vestibulum pulvinar, neque id porta tempor, nisl elit tempus odio, ut dignissim lorem quam a augue. Quisque vehicula felis nec nisi consectetur elementum. In dui ipsum, rutrum id viverra id, ultrices sit amet dui.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mi mi, egestas ut accumsan sit amet, aliquet vitae


Blocks

In case you want to decorate a div html tag you may use the block feature.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block1">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block2">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block3">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block4">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block5">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block6">block text</div>




Tooltips

Example: <ul class="tooltip-example"> Text goes here <span> Tooltip goes here </span></span>

  • Tooltip on left
  • Tooltip on top
  • Tooltip on right
  • Tooltip on bottom

Tables

Use the class "custom" to decorate your tables , Also the table with class "category" below is used by Joomla to output some of the tables into the the Joomla core components

Example:
<table class="table">
...
</table>

Table with Decoration
Column 1Column 2Column 3Column 4
Footer Col 1Footer Col 2Footer Col 3Footer Col 4
Row 1 / TD 1 Row 1 / TD 2 Row 1 / TD 3 Row 1 / TD 4
Row 2 / TD 1 Row 2 / TD 2 Row 2 / TD 3 Row 2 / TD 4
Row 3 / TD 1 Row 3 / TD 2 Row 3 / TD 3 Row 3 / TD 4
Row 4 / TD 1 Row 4 / TD 2 Row 4 / TD 3 Row 4 / TD 4
Row 5 / TD 1 Row 5 / TD 2 Row 5 / TD 3 Row 5 / TD 4
Row 6 / TD 1 Row 6 / TD 2 Row 6 / TD 3 Row 6 / TD 4
Row 7 / TD 1 Row 7 / TD 2 Row 7 / TD 3 Row 7 / TD 4

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is a sample of the 'notice' style. Use this style to give your users a message that require a note

This is a sample of the 'success' style. Use this style to give your users a message when a successful task was completed

This is a sample of the 'error' style. Use this style to give your users a message when a task was wrongly completed

Sample Legend



  • Predch.
  • Nasl.

Virtuálne prehliadky RTVS 26.3.2020

Správy RTVS z regiónov

Správy RTVS z regiónov

Mobilná aplikácia Prievidza

Aplikácie pre Android

Aplikácie iOS pre iPad a iPhone

Features Menu

  • Verzie on-line
  • Verzie off-line
  • 3D vizualizácie

Turistický sprievodca v mobile, tablete, GPS

Turistický sprievodca TOKAJ je on-line aplikácia pre platformu Android. Umožňuje vyhľadať 53 atrakcií tokajského regiónu.

Mobilný turistický sprievodca verzia on-line

Off-line mobilný turistický sprievodca má veľkú výhodu v tom, že funguje bez nutnosti pripojenia sa na internet. Preto fungujú v teréne aj mapy a GPS navigácia.

Mobilný turistický sprievodca verzia off-line

Virtuálne prehliadky sú dnes štandardom na každej dobrej webovej stránke. Dokážu zaujať návštevníka viac ako fotografie, alebo video. Turisti môžu využiť aj mapy a audiosprievodcu.

Virtuálne prehliadky on-line (pre PC, tablety a mobily)

Náučné chodníky zábava a poučenie v prírode

Off-line mobilný turistický sprievodca má veľkú výhodu v tom, že funguje bez nutnosti pripojenia sa na internet. Preto fungujú v teréne aj mapy a GPS navigácia.

Mobilný turistický sprievodca verzia off-line

Máme skúsenosti s mobilnými aplikáciami vo forme turistických sprievodcov, virtuálnych prehliadok a interaktívnych kvízov. Môžu byť off-line i on-line.

Mobilné aplikácie iOS pre iPhone a iPad

Turistický sprievodca TOKAJ je on-line aplikácia pre platformu Android. Umožňuje vyhľadať 53 atrakcií tokajského regiónu.

Mobilný turistický sprievodca verzia on-line

Android a iOS aplikácie atrakcie územia v mobile

V súčasnosti má každý dotykový mobil, alebo tablet. Často sa nám môže hodiť mať pri sebe 3D prezentáciu mesta, hotela, rešraurácie, alebo turistických atrakcií aj bez prístupu na internet. 

Virtuálne prehliadky off-line (pre PC, tablety a mobily)

Máme skúsenosti s mobilnými aplikáciami vo forme turistických sprievodcov, virtuálnych prehliadok a interaktívnych kvízov. Môžu byť off-line i on-line.

Mobilné aplikácie iOS pre iPhone a iPad

Virtuálne prehliadky sú dnes štandardom na každej dobrej webovej stránke. Dokážu zaujať návštevníka viac ako fotografie, alebo video. Turisti môžu využiť aj mapy a audiosprievodcu.

Virtuálne prehliadky on-line (pre PC, tablety a mobily)

© 2023 Turistický sprievodca

  • .
Go Top
  • Style 1
  • Style 2
  • Style 3
  • Style 4
  • Style 5
  • Style 6