Připravené vstupní stránky. Šablony vstupní stránky

Pozdravy! Toto je Denis Gerasimov, webová stránka, a budeme mluvit o tom, jak si vytvořit vstupní stránku sami, a přitom být stále přizpůsobivý a moderní. Čtete textovou verzi videa.

Stanovme si některé požadavky na naši budoucí vstupní stránku:

Pojďme k praxi

Na příkladu vstupní stránky jsem vytvořil lp..Direct. Bootstrap obsahuje různé designové prvky, jako jsou ikony, které můžete použít. Obsahuje také různé Java skripty, pomocí kterých můžete dělat modální okna, vyskakovací okna, která lze zavírat buď shora nebo zespodu. Toto je příklad nejjednodušší vstupní stránky, která v zásadě nefunguje špatně, má dobrý konverzní poměr.

Pojďme se podívat na dokumentaci Bootstrap

Bootstrap framework lze stáhnout z www. getbootstrap. com. Tento produkt je od tvůrců Twitteru. Tento rámec se neustále vyvíjí a tento moment jeho nejnovější verze je 3.3.4. Chcete-li web připojit k němu, musíte si stáhnout tento archiv a napsat do něj určité řádky html kód. V důsledku toho budete mít přístup ke css, komponentám, javascriptu. Můžete také připojit bootstrap bez jeho stahování pomocí technologie CDN, jednoduše zapsáním určitých řádků do kódu. Tato technologie vybere nejblíže fyzicky umístěný server k vašemu návštěvníkovi a načte z něj soubory stylu nebo Java skripty. Díky tomu se vaše vstupní stránka načítá rychleji. Zároveň je tento kód minimalizován.

Po připojení bootstrapu budete mít přístup k sadě CSS styly. Má buněčnou strukturu Grid System sestávající z 12 sloupců. Musíte pochopit, jak se tyto sloupce vytvářejí. Řekněme, že chcete, aby váš web měl 2 sloupce. Jeden z nich zabírá 2/3 stránky a druhý 1/3. Například chcete vložit obrázek do velkého sloupce a menší formulář k vyplnění. Chcete-li to provést, musíte napsat řádek obsahující sloupec se stylem 8 a sloupec se stylem 4, specifikovaný na webu bootstrap. Poté, co si zapíšete styly, které potřebujete, pak při přístupu na váš web z mobilního zařízení se sloupec, který je druhý, sníží. Výsledkem je, že váš návrh bude responzivní. Pokud chcete strukturu se třemi stejnými sloupci, musíte vydělit 12 3 a napsat kód s číslem 4 do kódu stránky. A tak dále.

Aby nedošlo ke zmatení při práci s buněčnou strukturou, zajistil jsem vám práci v konstruktoru www.layoutit.com. Podrobnější práci s konstruktorem zveřejním v příštím článku.

Bootstrap také obsahuje soubory pro typografii se sadou různých stylů nadpisů, které si můžete vybrat pro svou vstupní stránku a zapsat do kódu. Uvnitř této sekce jsou také třídy Alignment, například pokud chcete, aby byl text vystředěn, stačí zkopírovat určitý kód a vložit jej do kódu cílové stránky. K dispozici jsou také soubory Seznamy a mnoho dalšího. Můžete vytvářet tabulky pomocí různé styly v sekci Tabulky, Formuláře formulářů (můžete vytvářet formuláře ve sloupci, na jednom řádku, formulář s dalšími znaky, celořádkový formulář atd.). V sekci Tlačítka si můžete vybrat styly tlačítek na vaší vstupní stránce. Můžete nastavit barvu tlačítek, velikosti, aktivní nebo neaktivní tlačítka. V sekci Obrázky můžete nastavit styly obrázků. Například, aby byl obrázek kulatý, musíte vložit určitý kód. V sekci Pomocné třídy můžete změnit barvu textu, pozadí textu atd.

Získáme také přístup k různým komponentám, například ikonám glyfů. Chcete-li na web přidat jakoukoli ikonu, musíte zaregistrovat konkrétní třídu span. Pod obrázkem každé ikony je napsáno, jakou třídu je třeba v kódu zapsat, abychom ji získali požadovaný obrázek na vaší vstupní stránce. Můžete také přistupovat k rozevíracím seznamům, skupinám tlačítek, navigaci Navs a mnoha dalším. Všechny tyto funkce si můžete prohlédnout podle sekcí v seznamu na pravé straně webové stránky bootstrap.

Přístup k JavaScriptu nám umožňuje vytvářet modální okna, do kterých lze vkládat formuláře. Tato okna mají také buněčnou strukturu, která vám umožňuje přizpůsobit je jakémukoli mobilnímu zařízení. Můžete také přidat různá tlačítka, rozevírací seznamy a další funkce, které fungují ve skriptech Java.

Toto byl krátký úvod do bootstrapu a jeho struktury. V příštím článku si ve speciálním konstruktoru vytvoříme strukturu cílové stránky, adaptivní strukturu naší budoucí vstupní stránky.

Zdravím vás, moji milí čtenáři. Dnes budeme mluvit o technické body, pomocí kterého můžeme zvýšit prodejní konverze jejich zboží nebo služby. Jeden z důležité body je dobře promyšlený vstupní stránka se zbožím. Takzvaná landing page, o jejímž vytvoření si povíme později a získáme hotové kódy stránek.

Co je to vstupní stránka? Toto je stránka, na kterou se lidé obvykle dostanou po kliknutí na reklamu. Vytvořeno pro jednu nabídku: produkt, službu nebo předplatné. Efektivní vstupní stránka je základním kamenem úspěšného online marketingu. Produkt může být nejlepší na trhu, reklamy jsou dokonalé, ale bez dobré vstupní stránky úsilí nepřináší 100% výsledky. Návštěvníkům říká, co je v nabídce a proč by to měli chtít. Pocit naléhavosti přispívá k rychlému rozhodování a přechodu uživatele do kategorie klienta.

Jak vytvořit vstupní stránku? Je mylné věřit, že odpověď spočívá ve schopnosti sázet. Dobrá vstupní stránka je výsledkem koordinované práce na cílech, textu, designu a kódu. Vstupní stránky, jejichž příklady budou uvedeny níže, pomohou začátečníkům naučit se základy práce s rozložením, ale nenahradí konverzní texty a porozumění cílové skupině. Můžete je také vytvořit pomocí různých návrháři vstupní stránky.

Než tedy vytvoříte vstupní stránku, zeptejte se sami sebe:

• Co udělá člověk po přistání na vstupní stránce? Koupí něco? Vyplníte formulář? Přihlásit se k odběru newsletteru? Než budete měřit konverzní poměr, stanovte si jasné cíle.
• Kdo jsou moji konkurenti? Ve skutečnosti jsou to tři otázky: kdo, jak úspěšní jsou a jak lze jejich úspěchy uplatnit? Napodobování je nejupřímnější forma lichotky. Pokud vaši konkurenti dělají něco, co funguje, replikujte to na svůj web.
• Kdo je moje publikum? Čím lépe porozumíte své specializaci a cílové skupině, tím větší je šance, že se vaše úsilí vyplatí.

Potřebujete nabídnout všechny potřebné informace, ale ne tolik, abyste svého potenciálního klienta zahltili a odehnali.

Než začneme, pojďme se krátce podívat na HTML a CSS. Pochopení toho, jak fungují, vám pomůže vytvořit přistání.

HTML je značkovací jazyk prohlížeče pro vizualizaci webových stránek. Zaznamenáno pomocí přiložených značek úhlové konzoly, které určují obsah.

Štítek se otevírá () a zavírá () kolem náplně:

obsah

Pro jemné doladění jsou za název přidány atributy:

obsah

CSS – definuje způsob umístění HTML prvky. Skládá se ze selektorů, vlastností a hodnot:

#selector (vlastnost: hodnota;)

Selektor odpovídá názvu konkrétní značky v html. Změnou hodnot a přidáním vlastností se upraví jeho vzhled. Můžete vytvořit stránky, které vypadají navzájem odlišně, použitím různých stylů CSS na stejný HTML.

Pro rychlé rozložení použijeme šablonu s minimálním designem založeným na bootstrapu. Jedná se o systém s vlastními voliči, který se používá po celém světě pro urychlení rozložení.

Vypadá to skromně.

Z této ryby se v několika fázích vytvoří webová stránka pro každý vkus.

Struktura adresáře ve složce:

• index.html: Toto je hlavní soubor, který budeme upravovat.
• /assets: pomocné soubory jsou umístěny zde:
• /css: Adresář obsahuje styly bootstrap a ikon. Soubor, který budeme upravovat, je main.css.
• /img: složka pro obrázky webu.
• /fonts: ikonová písma.
• /js: bootstrap soubory javascriptu.

Krok 1: Použití záhlaví

Nadpis a podnadpisy jsou klíčová místa, která pomáhají sdělit hodnotu nabídky jasným způsobem.

Změňme název a název webu. Zde nemusíte umět psát – píšete svůj vlastní text na místa zvýrazněná žlutě na obrazovce.

Krok 2. Stručnost je sestrou obrácení. Přidání výhod a sazeb

Budete potřebovat 4 sekce:

• výhody;
• sazby;
• recenze;
• výzva k akci.

Vytvořme sekci hlavního obsahu „hlavní“, do které vložíme potřebné sekce:

…..
…..
…..
…..

Místo teček vyplňte náplní.

Pro sekci výhod budete potřebovat tento kód:

Výhody
Rychle

Spolehlivý

Sed diam nonummy

Elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Obsah pro přehlednost:

Stále to vypadá nedbale, ale není důvod k panice, pokračujme.

Ceny zapisujeme. Obsah se mění stejným způsobem jako v prvním kroku. obecný popis s třídou „tarify“ a třemi tarify.

Tarifní plány

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Vypadá to tak.

Vzhled budoucí vstupní stránky nás prozatím nezajímá – níže se podíváme na příklady změny stylů.

Krok 3: Důvěřujte signálům a výzvě k akci

Použití cílených signálů naznačuje návštěvníkům, že značka je důvěryhodná. Lze přijímat signály různé druhy, ale klasika jsou recenze zákazníků.

Hodnocení zákazníků

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud cvičení ullamco laboris nisi ut aliquip ex ea commodo:

Pojďme nastavit výzvu k akci.

Využijte výhody, když si objednáte dnes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Recenze pomohou potenciálním zákazníkům při rozhodování o koupi produktu. Pro přehlednost potřebujeme avatary, takže je okamžitě umístíme – pod každou nabídku.

Jméno klienta.

Krok 4: Grid and Mobile Friendly Integration

K implementaci mřížky potřebujeme kontejnery Bootstrap. Důležité je zapamatovat si celkový počet platných segmentů sloupců – 12. Třída určuje šířku zobrazení obsahu. Výhodou této hotové mřížky je, že kontejnery jsou navrženy s ohledem na přizpůsobivost a jsou okamžitě použitelné mobilní zařízení. Detailní popis na oficiálních stránkách. Mřížka vypadá takto.

Obsah „hlavního“ bude zabalen do kontejneru. K tomu je nahoře napsáno:

… .

Pokud potřebujete, aby se blok vešel na celou šířku obrazovky, kontejner se vloží dovnitř. Tady to bude jumbotron a výzva k akci.

Všechny prvky, které vyžadují umístění na sebe obalíme oddělovači čar.

Nyní můžeme upravit šířku sloupců se zaměřením na bootstrap mřížku. Po zabalení se výplň přestala lepit na okraje obrazovky a objevily se úhledné prohlubně.

Ceny nastavujeme v řádku pomocí třídy sloupců col-lg-4. Uvnitř řádků již není nutné psát samostatné divy pro obtékání, lze je kombinovat se stávajícími oddělenými mezerou.

Analogicky jsme nastavili sloupce pro sekci recenzí a výhod. Pokud potřebujete přesunout prvek na stranu, použijte třídu sloupce odsazení col-lg-offset-2. Číslo na konci určuje, o kolik základních sloupců dojde k posunu.

Krok 5. Písma a ikony

Implementujeme hlavičkové fonty Google Font. Po výběru otevřete kartu importu a zkopírujte z ní data do souboru main.css. Do souboru, pro který je použit nový font, přidáváme také selektory titulků.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* import písma pro nadpisy */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", bezpatkové; /* výstup Googlefont */
}

Pro názornost jsou výhody popsány třídou se samovysvětlujícím názvem text-center a ikonami FontAwesome ze sady bootstrap.

V tomto okamžiku je příprava zcela dokončena.

Používáme tři nejoblíbenější typy: s větou, formou a s odpočítávacím počítadlem. S postupem rozvržení bude šablona doplňována o efekty.

Nastavíme pozadí hlavní části a výplně tak, aby byla první obrazovka zakrytá.

Jumbotron (
pozadí: #f5f5f5 url(../img/fon.jpg) nahoře uprostřed bez opakování;
max-šířka: 100 %;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}

Změňme velikost hlavičky jumbotronu z h2 na h1. Dále napíšeme styly pro prvky, které je třeba změnit.

Začněme ikonami.

Výhody i(
barva: #cac4c4;
}

Za znakem hash je určena barva. Můžete si vybrat vlastní volbu pomocí html barevných tabulek nebo editoru obrázků.

Odsazení pro nadpisy oddílů

sekce h2 (
padding-top: 30px;
margin-bottom: 25px;
}

Děláme pořádek ve vzhledu tarifů. Pro usnadnění vytváříme vlastní třídy pro prvky, které chceme konkrétně zvýraznit.

Tarif č. 1
$10

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

A hodně CSS. Za jaká místa sekce zodpovídají, je uvedeno v komentářích - /* mezi lomítky s hvězdičkou */

/* =========Tarif styly======== */
/* obecná forma tarif */
.pricing_item(
pozadí: #f2f2f2;
poloha: relativní;
displej: -webkit-flex;
displej: flex;

směr ohybu: sloupec;

align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
polstrování: 2em 3em;
okraj: 1 em;
barva: #262b38;
kurzor: výchozí;
přepad: skrytý;

}
/* změnit pozadí po kliknutí */
.pricing_item:hover (
barva: #444;
pozadí: #daebef;
}
/* pozadí individuální cenovky v každém tarifu */
.pricing_item:first-child .price (
pozadí: #9ba9b5;
}
.pricing_item:nth-child(2).price (
pozadí: #1f6098;
}
/* na širokoúhlých obrazovkách je prostřední sloupec tarifu odsazen a zvýrazněn */
@media obrazovka a (min. šířka: 66,250 em) (
.pricing_item(
marže: 1,5em 0;
}
.featured(
z-index: 10;
okraj: 0;
velikost písma: 1,15 em;
}
}
/* název */
.pricing_item h3 (
velikost písma: 2em;
marže: 0,5em 0 0;
barva: #1d211f;
}
/* pozadí cenovky */
.cena(
velikost písma: 2em;
váha písma: tučné;
barva: #fff;
poloha: relativní;
z-index: 100;
line-height: 95px;
šířka: 100px;
výška: 100px;
marže: 1,15 em auto 1 em;
hraniční rádius: 50 %;
pozadí: #77a5cc;
-webkit-transition: barva 0,3s, pozadí 0,3s;
přechod: barva 0,3s, pozadí 0,3s;
}
/* měna */
.měna(
velikost písma: 0,5 em;
vertikální zarovnat: super;
}
/* upřesnění návrhu */
.věta (
váha písma: tučné;
okraj: 0 0 1em 0;
polstrování: 0 0 0,5em;
barva: #2a6496;
}
/* seznam */
.pricing_item ul (
velikost písma: 0,95 em;
okraj: 0;
polstrování: 1,5em 0,5em 2,5em;
text-align: left;
}
/* seznam položek */
.pricing_item li (
polstrování: 0,15em 0;
}
/* tlačítko ohodnotit objednávku */
tlačítko .pricing_item(
váha písma: tučné;
margin-top: auto;
polstrování: 1em 2em;
barva: #fff;
border-radius: 5px;
pozadí: #428bca;
-webkit-transition: background-color 0,3s;
přechod: barva pozadí 0,3s;
}
/* změnit barvu po stisknutí tlačítka */
.pricing_item button:hover,
.pricing_item button:focus (
barva pozadí: #285e8e;
}
/* pozadí tarifu*/
.bg-2 (
pozadí: #dddddd;
}

Výsledek

Hodnocení zákazníků. Pojďme se na ně úhledně podívat a označit jejich umístění.

/* =========Styly posudků======== */
posudky (
polstrování: 4em 0;
text-align: center;
}
.testimonials .avatar img (
hraniční rádius: 50 %;
plavat vlevo;
zobrazení: inline;
pravý okraj: 1 em;
šířka: 65px;
výška: 65px;
margin-bottom: 30px;
}
.posudky .avatar p (
text-align: left;
polstrování-top: 1m;
barva: #5d5d5d;
váha písma: 900;
}

Zbývá už jen ozdobit poslední výzvu k akci a zápatí.

/* Akce */
.akce(
pozadí: #476177;
min-výška: 180px;
šířka: 100 %;
polstrování: 4em 0;
text-align: center;
}
.action h2 (
barva: #fff;
váha písma: 300;

}
.akce p(
barva: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0,2);
velikost písma: 1,2 em;
}
.action .container (
margin-top: 3em;
}
/* Zápatí */
zápatí(
pozadí: #333333;
polstrování: 1em 0;
zarovnání textu: vpravo;
}
zápatí p(
barva: #fff;
výška řádku: 1;
text-transform: velká písmena;
velikost písma: 0,7 em;
margin-top: 0,5em;
}

Tlačítku zápatí je přiřazena vestavěná bootstrap třída btn-default.

Oživte šablonu. Zavedeme plynulé rolování a tlačítka pro sekce a také animaci textu na první obrazovce.

Pro přechody do práce nahradíme některé oddílové třídy id - pro výhody a tarify. A do tlačítek přidáme odkazy na id. Snímek obrazovky – co je k čemu připojeno, zvýrazněno žlutou fixou.

Nastavujeme odsazení pro tlačítka - jbutton. Posouvání při stisku funguje, ale velmi prudce.

Hladké přechody jsou vytvářeny pomocí javascriptu nebo jquery. Ten je ve výchozím nastavení připojen k šablonám Bootstrap.

Posouvání je nyní plynulé.

Přidání animace do textu pomocí Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Toto je připraveno open source, lze jej použít na jakékoli webové stránce. Umístěte soubor z Github do složky css a zadejte cestu.

Efekty vybíráme zde: https://daneden.github.io/animate.css/. Vybrali jsme fadeInDown. V kódu je to napsáno takto:

Nyní, když je stránka načtena nebo obnovena, text bude animován. Připraveno.

Čím více polí formuláře se návštěvníkovi zobrazí, tím menší je pravděpodobnost, že je vyplní. Žádejte jen minimum nezbytných informací.

Sestavuje se analogicky. Změníme pozadí a barvy. A samozřejmě přidáme tvar.

Začněme paralaxou.

Změňme pozadí jumbotronu na průhledné:

pozadí: průhledné;

Do hlavy vložíme skript:

$(okno).scroll(funkce(e)(
paralaxa();
});
funkční paralaxa())(
var scrolled = $(okno).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

První řádek v těle je kontejner pro paralaxu:

A v CSS je jeho chování:

Bgparalaxa (
pozadí: url(/../img/fon.jpg) opakovat;
poloha: pevná;
šířka: 100 %;
výška: 300 %;
nahoře:0;
vlevo:0;
z-index: -1;
}

Paralaxa je připravena. Ale provádění změn v kódu a nové pozadí vyžaduje změnu barevného schématu.

Ztmavení nabídky:

Navbar-výchozí (
barva pozadí: #333;
barva ohraničení: #444;
barva: tmavě šedá;
border-radius: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
barva: tmavě šedá;
barva pozadí: rgba(0, 0, 0, 0,5);
}

Větu v jumbotronu nahradíme novou - s kódem tvaru:

Vstupní stránka promění návštěvníky v klienty
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

A předepisujeme vzhled

/* formulář */
.headform-list (
list-style-type: none;
line-height: 26px;
váha písma: 400;
výplň: 0px;
margin-bottom: 40px;
}
.forma hlavy(
přepad: skrytý;
poloha: relativní;
barva pozadí: rgba(0,0,0,.4);
odsazení: 35px 40px;
border-radius: 8px;
}
vstup, tlačítko, výběr, textová oblast (
šířka: 100 %;
margin-bottom: 10px;
}
.headform-list li .fa (
pozice: absolutní;
nahoře: 0px;
vlevo: 0px;
šířka: 42px;
velikost písma: 24px;
text-align: center;
}
.headform-list li (
poloha: relativní;
min-výška: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p (
barva: #fff;
velikost písma: 16px;
styl písma: kurzíva;
}

Zde skončil i text jumbotronu, který si vyžádal změny.

Měníme tarify.

/* celkový pohled na tarif */
.pricing_item(
barva pozadí: rgba(0,0,0,.4); /* řádek změněn */
border-radius: 4px; /* řádek změněn */
poloha: relativní;
displej: -webkit-flex;
displej: flex;
-webkit-flex-direction: sloupec;
směr ohybu: sloupec;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
polstrování: 2em 3em;
okraj: 1 em;
barva: #f2f2f2; /* řádek změněn */
kurzor: výchozí;
přepad: skrytý;
box-shadow: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* změnit pozadí po kliknutí */
.pricing_item:hover (
barva: #444;
pozadí: #ddd; /* řádek změněn */
}

Teď vypadají takto - průhledné pozadí a zaoblené rohy.

Šablona je připravena.

Opět změníme náplň jumbotronu a šablonu přebarvíme tak, aby odpovídala novému pozadí, podobně jako u předchozí šablony. Připojte skript čítače:

HTML





Čas nečeká
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum auguelo dule dodeleunit

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.