www obrázok

h1 Toto je vzorový článok pre tvorbu článkov s ukážkami možností

(h4 krátky popis - podnadpis článku)

(aktuálnosť článku – 09/2021)
Návrat na hlavnú stránku.

H3 Prečo tento článok vznikol?

---krátke popísanie prečo, načo, o čom článok je---
Deliaca čiara sa robí pomocou div-u: <div class="borderline"></div>

H3 Ak treba nadpisy v článkoch tak H3! H2 sa nepoužíva, bolo by pre sekcie...

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, ea magni exercitationem quis atque iusto, similique facere in consectetur debitis ad! Debitis pariatur dolor, magnam fugiat architecto expedita! Tempora, nulla.

H4 Ak menšie tak H4, iné NEPOUŽÍVAŤ! - nie sú nadefinované nateraz.

Nasleduje hlavný text... Každý kus bloku musí byť vždy obalený v p bloku!

p blok 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae commodi illo quas quae at nihil consectetur. Quas tenetur magnam impedit illo commodi, non excepturi, nulla quos consequatur soluta sed sequi.

p blok 2 - ako je vidno p bloky majú medzi sebou medzery...

Ak treba dajaký odkaz tak ten vždy je v hlavnej farbe "článku", ako aj pozadie po bokoch a nadpisy.

(A toto je text ktorý bude ako doplňujúcii občas (možno pod / nad obrázkom, alebo k danej časti textu... class "small_block" Naštýlovaný je ako písmo 90% a šikmé.)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, libero! Nemo exercitationem quos unde quaerat, sunt nostrum magnam, deserunt repellendus ratione molestiae quo harum temporibus qui, pariatur quisquam repudiandae maxime!

H3 nadpis na kontrolu pomerov

Nasleduje ukážka predprogramovaných blokov:
(A ako je taký "small_block" text v elemente span? Zdá s že v pohode...)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi rem atque culpa aut nam velit quaerat harum facere ad obcaecati commodi saepe tempora, iure mollitia, qui ullam ipsa nostrum quia.

H4 nadpis na kontrolu pomerov

Ak potrebujem obrázok s popisným textom tak div class flex_blok a v ňom img obrázok a iba jeden! blok p!!! Je to naštýlované tak aby bol text na stred a celé to bolo širšie ako bežný text v článku. Hore aj dolu je automaticky tá deliaca čiara.

www obrázok

Tu môže byť iba jeden p blok !!! Všetko musí byť v ňom!!!
Ak potrebujem hrubé písmo tak použijem "strong"
Obrázky majú class img_middle_l alebo img_middle_r podľa toho na ktorej strane ich potrebujem. A samozrejme buď je prvý obrázok a potom text, alebo naopak. Text je mierne "tenší"... Ak idú tieto bloky za sebou tak treba vypínať border-top...

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur perspiciatis eligendi aperiam, quos totam officia molestiae, iure quaerat deserunt sapiente pariatur unde. Doloremque maiores quae sunt ducimus quod eius esse.

Tu môže byť iba jeden p blok !!! Všetko musí byť v ňom!!!
Ak potrebujem hrubé písmo tak použijem "strong"
Obrázky majú class img_middle_l alebo img_middle_r podľa toho na ktorej strane ich potrebujem. A samozrejme buď je prvý obrázok a potom text, alebo naopak. Text je mierne "tenší"... Ak idú tieto bloky za sebou tak treba vypínať border-top...

www obrázok
-div class blok- zabezpečí takýto textový blok...
Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.

-p class last_info- zabezpečí takýto textový blok... - Len iná farba...
Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.


-div class blokquote- zabezpečí takýto textový blok...
Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.

Nie je problém použiť ul zoznam:

Alebo ol zoznam:

  1. položka
  2. položka

www obrázok Obrázky majú mnohé nastavenia a sú vždy v "p" bloku spolu s textom podľa potreby... Okraj majú iba tu, pre zvýraznenie, inak sú bez okrajov. Každý sa hodí inokedy:
(ak treba tak obalit do clearfixu spolu s dajakým p textom...)
.img_small_l – malý obrázok vľavo
.img_small_r - malý obrázok vpravo
-img_middle_l – väčší náhľadový obrázok vľavo
.img_middle_r – väčší náhľadový obrázok vpravo
Nie je to to isté ako img half ! pri img half sa ráta že sú tesne vedľa seba...
A aj iné medzery – sú bez textu...
.img_half_l a -img_half_r – polovičné obrázky – idú dva vedľa seba
.img_fullwidth – veľké obrázky na celú šírku
-img_compare_l a .img_compare_r – porovnávacie dva obrázky, ale idú použiť aj ako väčšie náhľadové ak sa to hodí - 70% - tu treba ich obaliť do clear-fix-u !! ,respektíve po nich nasleduje tento kód: <div class="clearfix"></div>
img_center_small - malý obrázok na stred (1/3)
img_center_half - väčší obrázok na stred (1/2)

img_small_l
www obrázok Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quaerat vero nulla ipsam totam dolores obcaecati minima omnis excepturi consequatur! Magnam amet consectetur aspernatur quo nisi ut alias sed quia!

img_middle_l
www obrázok Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente vel quod est ullam at, doloremque dolores obcaecati illo laboriosam nemo rem corrupti placeat deserunt voluptate libero cumque. Totam, dolor at?

img_center_half

www obrázok

img_half_l + img_half_r

www obrázok www obrázok

img_compare_l + img_compare_r

www obrázok www obrázok