Stáhněte si šablony adaptivní vstupní stránky. Šablony vstupní stránky

» Volné přistání šablony stránek WordPress – TOP 30

Konkrétně se tento článek bude zabývat nejlepším přistáním WordPress šablony, který může být pro vás vhodný. Všechny budou obsahovat snímek obrazovky a demo verzi návrhu, abyste mohli téma ohodnotit a okamžitě stáhnout, pokud se vám líbí.

Velmi často jsou šablony vstupních stránek pro WordPress distribuovány za poplatek, ale pro vás jsem shromáždil nejlepší a zdarma v tomto článku, abyste si usnadnili hledání.

je jednostránkové téma, které vám pomůže vytvořit web bez velkého úsilí. Na druhou stranu má profesionálně nakreslený design, paralaxní rolování, což nám umožňuje nazvat toto téma „krásné“. Tato šablona je vhodná pro začínající podnikatele a malé firmy.

je multifunkční téma WordPress. Obsahuje živé rozhraní, klasický paralaxový efekt a další animace, díky nimž je prohlížení tématu ještě příjemnější. Zerif Lite je téma pro různé prohlížeče, které je také dobře napsané z hlediska kódu.

Alhena Lite je bezplatné firemní téma WordPress, které je plně integrováno s pluginem WooCommerce a umožňuje vám snadno nastavit váš online obchod.

- to je čisté, jednoduché podnikání téma, které je plně responzivní a obsahuje mnoho oblíbených funkcí pro snadnou tvorbu webových stránek.

Palmas je moderní motiv vyrobený ve světlých barvách, který je vhodný pro provozování osobního nebo módního blogu. Tato šablona také podporuje pluginy jako např Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache a mnoho dalších.

Brasserie je jednoduchá šablona WordPress, která je ideální pro restauraci, kavárnu nebo kulinářský web. Zahrnuje animační efekty, stejně jako velký počet funkčnost.

XT Corporate lite je jednoduchý a minimalistický motiv, který je vhodný pro malý produkt nebo službu.

je příjemný motiv ve světlých barvách. Obsahuje různé animace a vizuálně ohromující přechody a paralaxový efekt. Kromě toho Freesia Empire podporuje pluginy jako Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack od WordPress.com, Polylang, Newsletter, bbPress a WooCommerce.

je téma, které je vhodné pro prezentaci malých či středních podnikatelů. Obsahuje obrovské množství funkcí a doplňků pro plná kontrola přistávací konstrukce.

je všestranné téma se spoustou funkcí. Je adaptivní, všechny prvky jsou animované s paralaxovým efektem. Jedna stránka se snadno přizpůsobuje a umožňuje prohlížet změny v reálném čase. Aktuální téma přistání také podporuje velké množství základních pluginů WordPress.

FotoGraphy je vstupní stránka, která je vhodná pro fotografy nebo designéry. Díky jednoduchosti a přítomnosti velkého množství funkcí je ještě více škálovatelný a přizpůsobitelný.

Integrální téma je jednostránkové téma paralaxy vhodné pro kreativce, majitele firem nebo agenty. Jeho nastavení vám zabere jen pár minut.

Square je minimalistické téma, které lze použít pro jakýkoli typ webu. Nejlépe se hodí pro malé a střední podniky. Square je nakonfigurován pro mnoho oblíbených pluginů WordPress a je také optimalizován pro SEO.

Enliven je vysoce kvalitní téma. Nazval bych ho prémiovým, jelikož kombinuje kvalitu a krásu v jedné lahvičce. Podporuje také mnoho oblíbených pluginů a lze jej snadno přizpůsobit.

Latte je šablona pro fotografy. Má vše, abyste mohli adekvátně ukázat své portfolio a také o sobě říct. Nastavení se provádí několika kliknutími.

Pondělí je elegantní téma vhodné pro podnikání nebo na volné noze. Dodává se s velkým množstvím funkcí a doplňků a doplňků.

Business World je šablona, ​​která souvisí s obchodními tématy. Kombinuje styl a kvalitu. Obchodní svět lze také upravit pro osobní, firemní nebo fotografovy webové stránky. Jeho schopnosti vám umožňují vyrobit z něj téměř vše, co chcete.

- Jedná se o příjemné téma, které je vyrobeno ve světlých barvách. Je ideální pro malé a střední podniky a také pro osobní webové stránky. Můžete si v něm přizpůsobit cokoli chcete. Existuje mnoho funkcí a doplňků, díky kterým je tato šablona ještě lepší a atraktivnější.

Onetone je jednostránková šablona pro WordPress, která je vhodná pro prezentaci „já“ na internetu (ukažte své portfolio a/nebo mluvte o sobě).

Arise je minimalistická jednostránková WordPress šablona vhodná pro malý produkt nebo malou firmu. Není v něm nic nadbytečného, ​​pouze vše, co je nejdůležitější.

Woot je minimalistická šablona vyrobená v tmavých barvách pro provozování internetového obchodu. Funguje s WooCommerce a mnoha dalšími populárními pluginy.

West je jednoduché téma vhodné pro web agentury, malé firmy nebo portfolia. Zahrnuje velké množství funkcí, nastavení a uspořádání prvků.

Anaglyph Lite je jednoduchá a elegantní šablona, ​​která je vhodná pro blogování a internetové obchody. Je již nakonfigurován pomocí WooCommerce a dalších oblíbených pluginů.

Zdravím vás, moji milí čtenáři. Dnes budeme mluvit o technické body, s jehož pomocí můžeme zvýšit konverzi prodeje našeho zboží nebo služeb. 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ářů 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í.

Musíme nabídnout všechno nezbytné informace, ale ne tak moc, aby potlačila a odehnala potenciálního klienta.

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ěna hodnot a přidávání vlastností reguluje 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. Provedení změn v kódu a nové pozadí však vyžaduje nové přiřazení 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.