Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus eleifend risus ut congue. Pellentesque nec lacus elit. Pellentesque convallis nisi ac augue pharetra eu tristique neque consequat. Mauris ornare tempor nulla, vel sagittis diam convallis eget. Ut ultricies ornare dui, ac accumsan diam convallis eget.

This is an H2 element heading

In enim a arcu imperdiet malesuada. Aenean vel massa quis mauris vehicula lacinia. Nulla est. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Fusce wisi. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Aliquam erat volutpat.

This is an H3 element heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus eleifend risus ut congue. Pellentesque nec lacus elit. Pellentesque convallis nisi ac augue pharetra eu tristique neque consequat. Mauris ornare tempor nulla, vel sagittis diam convallis eget. Ut ultricies ornare dui, ac accumsan diam convallis eget.

This is an H4 element heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus eleifend risus ut congue. Pellentesque nec lacus elit. Pellentesque convallis nisi ac augue pharetra eu tristique neque consequat. Mauris ornare tempor nulla, vel sagittis diam convallis eget. Ut ultricies ornare dui, ac accumsan diam convallis eget.

Odstavce

Citace (<blockquote>)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus eleifend risus ut congue. Pellentesque nec lacus elit. Pellentesque convallis nisi ac augue pharetra eu tristique neque conséquent. Mauris ornare tempor nulla, vel sagittis diam convallis eget. Ut ultricies ornare dui, ac accumsan diam convallis eget.

In enim a arcu imperdiet malesuada. Aenean vel massa quis mauris vehicula lacinia. Nulla est. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat.

Aenean fermentum risus id tortor. Praesent in mauris eu tortor porttitor accumsan. Nulla pulvinar eleifend sem.

Fusce aliquam vestibulum ipsum. Fusce nibh. Duis pulvinar. Praesent id justo in neque elementum ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam commodo dui eget wisi. Integer imperdiet lectus quis justo. Aenean fermentum risus id tortor. Praesent in mauris eu tortor porttitor accumsan. Nulla pulvinar eleifend sem. Vestibulum fermentum tortor id mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas sollicitudin.

Obrázky a ilustrace (<img> a <figure>)

Curabitur bibendum justo non orci. Etiam dictum tincidunt diam. Nulla non arcu lacinia neque faucibus fringilla. Aliquam erat volutpat. Suspendisse nisl. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Mauris tincidunt sem sed arcu. Praesent in mauris eu tortor porttitor accumsan. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Maecenas lorem. Etiam dictum tincidunt diam. Nulla non arcu lacinia neque faucibus fringilla. Aliquam erat volutpat. Suspendisse nisl. Morbi imperdiet, mauris ac auctor dictum nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Aliquam erat volutpat. Suspendisse nisl. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.

Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Fusce aliquam vestibulum ipsum. Integer in sapien. Maecenas sollicitudin. Nulla est. Aliquam erat volutpat. Curabitur bibendum justo non orci. Etiam dictum tincidunt diam. Nulla non arcu lacinia neque faucibus fringilla. Aliquam erat volutpat. Suspendisse nisl.

Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Mauris tincidunt sem sed arcu. Praesent in mauris eu tortor porttitor accumsan. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Maecenas lorem. Etiam dictum tincidunt diam. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.

Ořez obrázků

formát řetězce pro ořez: W,H,X,Y (všechna čísla jsou celá čísla, např. 100,50,50,30)
W = šířka výřezu vzhledem k původnímu obrázku v [%] (50=polovina původní šířky; 100=celá šířka)
H = výška výřezu vzhledem k původnímu obrázku v [%] (50=polovina původní výšky; 100=celá výška)
X = vodorovné umístění výřezu vzhledem k původnímu obrázku v [%] (0=vlevo; 50=uprostřed; 100=vpravo)
Y = svislé umístění výřezu vzhledem k původnímu obrázku v [%] (0=nahoře; 50=uprostřed; 100=dole)

Jeden z parametrů W nebo H může být místo celého čísla zadán i jako poměr stran formou reálného čísla s desetinnou tečkou (např. 0.5) nebo jako skutečný poměr (např. 1:2). V tom případě se příslušný rozměr (šířka nebo výška) vypočítá v určeném poměru k druhému rozměru, přičemž zadaný poměr je vždy poměrem výška:šířka.
100,3:2,50,50 = plná šířka původního obrázku a výška tak, aby byl poměr výška:šířka=3:2

Podpis pod článkem

Fusce aliquam vestibulum ipsum. Integer in sapien. Maecenas sollicitudin. Nulla est. Aliquam erat volutpat. Aliquam erat volutpat. Curabitur bibendum justo non orci. Etiam dictum tincidunt diam. Nulla non arcu lacinia neque faucibus fringilla. Curabitur bibendum justo non orci. Fusce suscipit libero eget elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nullam eget nisl. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Maecenas lorem. Etiam dictum tincidunt diam. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus.

Aleš Kometa
Hvězdárna Ondřejov

Odkazy

1. Lorem ipsum dolor sit amet
2. Lorem ipsum dolor sit amet
3. Lorem ipsum dolor sit amet
4. Lorem ipsum dolor sit amet

Fotogalerie

Tabulky

Aenean vel massa quis mauris vehicula lacinia. Nulla est. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Aenean vel massa quis mauris vehicula lacinia. Nulla est. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Curabitur bibendum justo non orci. Fusce suscipit libero eget elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nullam eget nisl. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Praesent vitae arcu tempor neque lacinia pretium. Ut tempus purus at lorem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Seznamy (<ul> a <ol>)

default

• Consectetur adipiscing elit
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel

check-mark

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa

arrow-mark

• Facilisis in pretium nisl aliquet
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc

číslovaný seznam

1. Facilisis in pretium nisl aliquet
2. Faucibus porta lacus fringilla vel
3. Consectetur adipiscing elit

Text Highlight

Waesent erat risus, ornare id feugiat vitae, elementum in nibh. Fusce est turpis, tincidunt sit amet pulvinar ut, venenatis nec justo. Quisque sodales interdum pellentesque. Ut molestie euismod erat et euismod. Aenean accumsan porta nisl ac scelerisque.

Tlačítka

ODESLAT  Stáhnout

Ikony

použití jako <img>: /icon.php?name=xxx&size=xx
    name - název symbolu (bez prefixu "icon-"); size - velikost ikony v pixelech (obvykle 50 nebo 16)
použití jako <span>: <span class="xxx"></span>
    class - název symbolu (včetně prefixu "icon-")

 icon-search  icon-envelope  icon-heart  icon-star-empty  icon-user  icon-ok  icon-remove  icon-zoom-out  icon-zoom-in  icon-cog  icon-file  icon-download-alt  icon-upload  icon-camera  icon-print  icon-tags  icon-tag  icon-headphones  icon-flag  icon-refresh  icon-map-marker  icon-chevron-left  icon-chevron-right  icon-leaf  icon-ok-circle  icon-remove-circle  icon-ok-sign  icon-remove-sign  icon-info-sign  icon-question-sign  icon-comment  icon-chevron-up  icon-chevron-down  icon-folder-close  icon-twitter-sign  icon-facebook-sign  icon-linkedin-sign  icon-external-link  icon-circle-arrow-down  icon-circle-arrow-up  icon-circle-arrow-right  icon-circle-arrow-left  icon-certificate  icon-rss  icon-facebook  icon-twitter  icon-phone  icon-globe  icon-fullscreen  icon-link  icon-cloud  icon-paper-clip  icon-reorder  icon-pinterest  icon-pinterest-sign  icon-google-plus-sign  icon-google-plus  icon-linkedin  icon-envelope-alt  icon-sort-up  icon-sort-down  icon-caret-right  icon-caret-left  icon-caret-up  icon-caret-down  icon-double-angle-left  icon-double-angle-right  icon-double-angle-up  icon-double-angle-down  icon-angle-left  icon-angle-right  icon-angle-up  icon-angle-down  icon-quote-right  icon-quote-left  icon-unlink  icon-location-arrow  icon-chevron-sign-left  icon-chevron-sign-right  icon-chevron-sign-up  icon-chevron-sign-down  icon-file-2  icon-file-text  icon-check-sign  icon-dribbble  icon-sun  icon-moon  icon-arrow-right  icon-arrow-left  icon-cross  icon-plus  icon-feed  icon-user-2  icon-users  icon-home  icon-headphones-2  icon-tags-2  icon-tag-2  icon-folder-open  icon-folder  icon-stack  icon-file-3  icon-file-4  icon-phone-2  icon-phone-hang-up  icon-location  icon-location-2  icon-compass  icon-clock  icon-clock-2  icon-print-2  icon-bubbles  icon-bubble  icon-download  icon-box-add  icon-bubbles-2  icon-bubble-2  icon-bubbles-3  icon-bubbles-4  icon-user-3  icon-users-2  icon-contract  icon-expand  icon-bars  icon-stats  icon-pie  icon-download-2  icon-cancel-circle  icon-checkmark-circle  icon-close  icon-checkmark  icon-volume-high  icon-arrow-right-2  icon-radio-checked  icon-radio-unchecked  icon-share  icon-feed-2  icon-feed-3  icon-twitter-2  icon-twitter-3  icon-facebook-2  icon-facebook-3  icon-google-plus-2  icon-google-plus-3  icon-google-plus-4  icon-google  icon-dribbble-2  icon-dribbble-3  icon-tumblr  icon-tumblr-2  icon-libreoffice  icon-file-pdf  icon-file-word  icon-file-excel  icon-checkmark-2  icon-x  icon-x-altx-alt  icon-check-alt  icon-mail  icon-heart-fill  icon-heart-stroke  icon-link-2  icon-magnifying-glass  icon-arrow-down  icon-fullscreen-exit  icon-fullscreen-exit-alt  icon-fullscreen-2  icon-fullscreen-alt  icon-left-quote  icon-right-quote  icon-right-quote-alt  icon-left-quote-alt  icon-moon-stroke  icon-sun-stroke  icon-sun-fill  icon-moon-fill  icon-rain  icon-paperclip  icon-desktop  icon-tablet  icon-mobile  icon-play  icon-user-4  icon-users-3  icon-globe-2  icon-earth  icon-youtube  icon-youtube-2  icon-flickr  icon-file-css  icon-cloud-2  icon-umbrella  icon-at  icon-dribbble-4  icon-flag-2  icon-arrow-right-3  icon-arrow-left-2  icon-arrow-right-4  icon-arrow-up  icon-arrow-down-2  icon-wheelchair  icon-mybb  icon-headphones-3  icon-automobile  icon-airplane  icon-roadsignleft  icon-bus  icon-road  icon-freeway  icon-railroad  icon-roadsign  icon-boat  icon-quote  icon-post2  icon-telescope  icon-at-2  icon-chart-alt  icon-bars-2  icon-clock-3  icon-domain  icon-gpson  icon-metro

Seznam stylů

Odstavce

• p:perex - styl pro zpravidla první uvozující odstavec článku uvádějící následující delší text nebo naznačující, o čem bude
• p:podpis - styl pro odstavec obsahující podpis autora; umisťuje se obvykle pod článek
• p:kontakt - styl pro odstavec obsahující kontaktní údaje (jméno, adresa, telefon, email, ... ); obvykle na konci článku
• p:s odsazením pro ikonu - styl pro zleva odsazený odstavec doplněný ikonou
• p:zarovnání na střed - odstavec s textem zarovnaným na střed stránky
• postraní sloupek - z odstavce vytvoří postranní sloupek (např: pro vysvětlení pojmů)

Obrázky

• img:plovoucí vlevo - umístí obrázek k levému okraji stránky a nechá ho obtékat textem
• img:plovoucí vpravo - umístí obrázek k pravému okraji stránky a nechá ho obtékat textem
• img:s lupou - zmenšený obrázek převede na odkaz mířící na verzi v původní velikosti
• img:umístěný do řádku - obrázek umístí na dané pozici do řádku textu (inline)
• img:bez efektů - odstraní všechny vizuální efekty (vhodné v kombinaci s předchozím stylem)
• img:ikonka - nastyluje obrázek jako ikonu (kodré kolečko se symbolem)

Obrázky s popisem

• fig:plovoucí vlevo - obrázek s popisem umístístěný k levému okraji stránky,  obtékaný textem
• fig:plovoucí vpravo - obrázek s popisem umístístěný k pravému okraji stránky,  obtékaný textem
• fig:plná šířka - obrázek s popisem umístění přes celou šířku stránky

Odrážky

• ul:fajfka - styl pro odrážkové seznamy se symbolem fajfky
• ul:šipka - styl pro odrážkové seznamy se symbolem šipky
• ol:odkazy - styl pro číslovaný seznam odkazů
• table:plovoucí vlevo - umístí tabulku k levému okraji stránky a nechá ji obtékat textem

Odkazy

• a:tlačítko - nastyluje odkaz jako tlačítko
• a:tlačítko stáhnout - nastyluje odkaz jako tlačítko ke stažení

Oddíly

• div:seskupit vybrané prvky - seskupí označené prvky do oodílu (obalí prvkem div)
• div:plovoucí vlevo - umístí oddíl k levému okraji stránky a nechá ho obtékat textem
• div:plovoucí vpravo - umístí oddíl k pravému okraji stránky a nechá ho obtékat textem

Speciální

• čekání na plovoucí prvky obsažené - velikost prvku s tímto stylem se přizpůsobí tak, aby pojmula všechny plovoucí prvky v něm obsažené
• čekání na plovoucí prvky předcházející - prvek se na stránce umístí až za všechny předcházející plovoucí prvky