diff --git a/Text.txt b/Text.txt new file mode 100644 index 0000000..a4cc3d0 --- /dev/null +++ b/Text.txt @@ -0,0 +1,32 @@ +PUDL Pudlum malokdy padaji chlupy. A proto je pece o srst velmi narocna a casto se musi strihat. + +PAPILON +Rika se mu motylek. Velikost: 28 cm. Zbarveni: Hlavni je bila, na hlave a na usich je cerna, a trochu hneda. + +JEZEVCIK DLOUHOSRSTY +Zbarveni:Ruzne odstiny hnede,a trochu bile,a nekdy je cernohnede.Zeme puvodu:Nemecko. +Hodi se pro myslivce. + +BORDER KOLIE + +Hodi se pro aktivni lidi. Potrebuje hodne zamestnani. Velikost: 48 az 56 cm, feny: 46 az 53 cm. + + + + +CO SYMBOLIZUJE CINSKY DRAK + +CINSKY DRAK symbolizuje silu a dokonalost, statecnost a odvahu, hrdinstvi a vytrvalost, uslechtilost a bozstvi. Drak prekonava vsechny prekazky az ke konecnemu uspechu. Je energicky, rozhodny, optimisticky, inteligentni a ambiciozni. + + +DRACI SCHOPNOSTI + +Draci maji schopnost plnit prani, nejaci zase schopnost plavat, nebo litat do vesmiru. Ale nejznamejsi schopnosti je ovladat elementy. Vsak ne kazdy drak ovlada jenom jeden element, ale rovnou dva nebo vice. + + +DEVET DRACICH SYNU + +Devet synu krale draku, kteri maji zvlastni schopnosti. Bixi, Caofenga, Pulao, Ci-ven, Fixi, Suanni, Bi’an, Qiuniu, Yazi. Predstavuji silu, dobrodruzstvi, hlasitost, ochranu, vzdelani, mysl, spravedlnost, harmonie, niceni. + + + diff --git a/starsi.html b/starsi.html new file mode 100644 index 0000000..b4f00ba --- /dev/null +++ b/starsi.html @@ -0,0 +1,23 @@ + + + Hello + + + + +
+
+
+
+
+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/stredni.css b/stredni.css new file mode 100644 index 0000000..d7c1062 --- /dev/null +++ b/stredni.css @@ -0,0 +1,115 @@ +.wrapper { + display: flex; + max-width: 64em; + flex-grow: 100; + max-width: 64em; + + align-items: center; +} + +body { + margin: 0px; +} + +header{ + position: sticky; + top: 0px; + + background-color: #2867af; + width: 100vw; + + display: flex; + align-items: center; + justify-content: center; + height: 10vh; +} + +header > .wrapper { + justify-content: space-around; + text-align: center; +} + +header > .wrapper > .tags{ + display: flex; + flex-direction: column; + flex-grow: 1; + + justify-content: center; + align-items: center; + + padding: 5px; +} + +header > .wrapper > .search{ + display: flex; + flex-grow: 1; + justify-content: center; + align-items: center; +} + +header > .wrapper > .title{ + display: flex; + flex-grow: 2; + justify-content: center; + align-items: center; + + font-size: 2em; + font-weight: bold; +} + +body > .main { + display: flex; + flex-direction: row; +} + +body > .main > .wrapper{ + background-color: white; + flex-direction: column; +} + +.main > .ad { + background-color: red; + z-index: -1; + flex-grow: 1; + position: sticky; + height: auto; +} + +.main > .ad > .banner { + background-image: url(https://img.grada.cz/_t_/media/sprinx.bookimages/758657_600_0_fit.jpg); + height: 90vh; + position: sticky; + top: 10vh; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} + + +/** +Jedna se o media query aby se reklamy po bocich neukazovali na mobilu + +#@media screen and (min-width: 640em) { +#} +**/ + +article{ + background-color: #37fa6c; + margin: 10px; + flex-grow: 1; + padding: 5px; + + display: flex; + text-overflow: hidden; + white-space: normal; + text-overflow: ellipsis; +} + +article > .text{ + +} + +footer{ + background-color: #99dcd9; + height: 30px; + width: 100vw; diff --git a/stredni.html b/stredni.html new file mode 100644 index 0000000..0f0458c --- /dev/null +++ b/stredni.html @@ -0,0 +1,83 @@ + + + + + + + +
+
+
Hledat
+
Skolni noviny
+
+ Velci + Stredni + Mladsi +
+
+
+ +
+
+ +
+
+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis. +
+
+ +
+
+ +
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis. +
+
+ +
+
+ +
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis. +
+
+ +
+
+ +
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis. +
+
+ +
+
+ + +
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis. +
+
+ +
+
+ +
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis. +
+
+ +
+
+ + + +
+
+ +
+ +
+ + + + + +