Predlošci stranica. Predlošci odredišne ​​stranice. Odredišna stranica: primjeri kodova s ​​ponudom, paralaksom i brojačem

Uspjeh u svim pothvatima u ovom modernom dobu jednako je složen cilj kao što je ikada bio kroz povijest. Odluka učiniti nešto, bilo da se radi o pokretanju posla, stvaranju alata ili igre, koordinaciji projekta ili događaja velikih razmjera ili čak jednostavno pokušaju zaraditi nekoliko dolara, uspjeh izmiče mnogima i pozdravlja nekolicinu, dobro pripremljene, a često i pravi sretnik. Međutim, oni koji stalno uspijevaju reći će vam da sreća jednostavno nije sve što se može zamisliti.

Priprema znači sve. A da bismo bili spremni, moramo znati svoj posao i svoje vrijeme. A ovo su brza vremena u pokretu za sve tvrtke, zahvaljujući širokom dosegu World Wide Weba i moćnih mobilnih uređaja. Inovacija je ime igre, a ako ne znate plivati, sigurno ćete potonuti. Zato vam je potrebna čvrsta tehnološka osnova za sve vaše pothvate, a ništa nije bolje od HTML5 u smislu vrhunske moći. To je jezik modernog svijeta, a moderni svijet i njegove mogućnosti kucaju na vaša vrata. Imate li ih gdje primiti? Sljedeća zbirka HTML5 predložaka odredišne ​​stranice sastavljena je tako da uključuje najbolje i najpametnije Odredišna stranica predlošci danas na tržištu. Pogledaj!

Uz Softius, vaše će web mjesto izgledati puno inovativnije i privlačnije, što će vam pomoći da pridobijete još više korisnika. Ovaj predložak odredišne ​​stranice dobro je poznat po svojoj specijalizaciji za tvrtke koje su usredotočene na pružanje softvera za niz različitih namjena. Čak i ako gradite sljedeću veliku mobilnu aplikaciju, Softius će dati sve od sebe da je prezentira profesionalno i atraktivno.

Svaki predložak odgovara pozadini vaše tvrtke, osiguravajući uspjeh u vašim nastojanjima. Govoreći o predlošcima, Softius dolazi s tri upečatljive demonstracije koje možete upotrijebiti i poboljšati prema svojim potrebama i propisima. Zahvaljujući svom minimalističkom i čistom pristupu, Softius odmah radi s više korisnika čak i ako imate pedantan ukus.

Mijenjajte fontove, boje, izglede, slike i druge detalje do beskonačnosti i dalje te personalizirajte iskustvo. Integrirajte widgete kako biste pojednostavili prilagodbu i organizaciju svog internetskog izgleda. Softius je 100% učinkovit i dokumentiran tako da svatko može s lakoćom izvući maksimum iz njega.

VisaPress idealan je predložak odredišne ​​stranice za sve agencije i tvrtke koje se bave imigracijom i viznim savjetovanjem. Međutim, budući da je ovaj alat vrlo fleksibilan, možete slobodno koristiti VisaPress i za sve vrste drugih namjera, kao što su odvjetnici, agenti, usluge podučavanja i savjetovanje o migraciji da spomenemo samo neke. VisaPress je potpuno responzivan i spreman za mobilne uređaje, glatko radi na svim retina zaslonima i popularnim web preglednicima. Bez obzira odakle dolaze, vaše će web mjesto koje pokreće VisaPress uvijek raditi bez problema.

Predložak nudi tri dizajna početne stranice, odnosno klasični, obični i transparentni izgled. Osim toga, VisaPress uključuje četiri odredišne ​​stranice, podučavanje i tečajeve, odjeljak s izjavama i sve ostale stvari koje morate imati. Ako je ova tema ono što vas zanima, VisaPress je najbolje rješenje koje možete odabrati. Nema potrebe za dodatnim istraživanjem kada sve imate pred sobom.

Angular Landing, kao što naziv sugerira, predložak je stranice za snimanje potencijalnih kupaca. Imajte na umu da to nije samo vaš svakodnevni predložak odredišne ​​stranice zbog svoje učinkovitosti i opsežnosti. Angular Landing se sastavlja s fleksibilnim rasporedom i kutnim CLI-jem i kutnim materijalom. Osim toga, svaki odjeljak predloška odredišne ​​stranice sastoji se od HTML, SCSS i TypeScript datoteka. Također je organiziran u vlastitom direktoriju za jednostavno prilagođavanje i ponovnu upotrebu za korisnike.

Dodatne značajke ovog lijepog i urednog predloška uključuju tablice s cijenama, vrtuljke, redovita ažuriranja i pomicanje do navigacije. Angular Landing ima dvije izvorne varijante koje možete odabrati od kojih su obje najviše kvalitete. Uživajte u čistom dizajnu i fantastičnom izgledu Angular Landinga koji će vam pomoći da postignete ciljeve koje ste oduvijek željeli sami vidjeti.

Ako tražite najbolje web rješenje da svoju agenciju postavite na mrežu, nepotrebno je reći da je agencija predložak odredišne ​​stranice koji biste trebali razmotriti. Optimiziran je i organiziran za najbolju izvedbu kako bi svi vaši posjetitelji bili zadovoljni i uzbuđeni da nauče više o tome što radite. Stil agencije je elegantan i kreativan, gurajući vaš sadržaj u prvi plan kako bi svi mogli izvući maksimum iz njega. Zbog izgleda na jednoj stranici, korisnici ne moraju skakati sa stranice na stranicu i pritiskati gumb za povratak kako bi pronašli i otkrili ono što traže.

Agencija raspolaže sa šesnaest različitih domova, podijeljenih u dvije grupe: klasičnu i formu. Od pozadina slika i klizača do raznih različitih efekata, poput zime, vode, kiše, čestica i gradijenta da spomenemo samo neke. Na animacijama pomicanja, SEO-u, integriranom MailChimp-u, praktičnom obrascu za kontakt i retina-spremnim Font Awesome ikonama, sve to i još gomilu sredstava kojima vas agencija počasti.

Appino mnogi smatraju jednim od savršenih predložaka odredišne ​​stranice mobilne aplikacije. Vrlo je omiljen kod programera aplikacija, trgovaca i sličnih zbog njegovih elegantnih, čistih i snažnih elemenata. Kao , Appino dolazi s više izgleda spremnih za korištenje koji mogu uvelike utjecati na preuzimanje i prodaju aplikacija što se pretvara u rast vaše marke. Zasigurno možete postići fantastičan rezultat sa solidnom stranicom koju ćete upravo stvoriti s Appinom.

Sa svojim vrlo prilagodljivim odjeljcima, zaglavljima, klizačima, bojama i unaprijed napravljenim elementima, korištenje Appina kao vaše mobilne aplikacije za snimanje potencijalnih kupaca je praktično i učinkovito. Služeći kao šlag na torti, Appino nudi doživotna ažuriranja koja su besplatna. Osim toga, svaki Appino korisnik također dobiva šest mjeseci besplatne podrške koja će odgovoriti na sva vaša pitanja i nedoumice.

Jonny je predložak odredišne ​​stranice dva u jednom. To je predložak koji uskoro dolazi, kao i lender za generiranje potencijalnih klijenata koji također služi kao stranica za kontakt. Dostupno je dvanaest različitih demonstracija koje možete odmah iskoristiti. A ako se dogodi da ste u niši koja je drugačija od onih dostupnih, uz nekoliko brzih podešavanja možete promijeniti Jonnyja kako bi odgovarao vašem brendu. Uostalom, Jonny je organiziran i jednostavan za uređivanje. Bez obzira na vaše iskustvo, svi možete izvući maksimum iz čvrstog Jonnyja.

Neki od bespovratnih sredstava alata su prilagođenost SEO-u, dvanaest korisnih gumba, radni obrazac za kontakt, modalni skočni prozor i galerija. Naravno, popis imovine koju Jonny donosi ne završava ovdje. Međutim, da biste doista razumjeli moć Jonnyja, bolje je da vidite njegovu stranicu za pregled uživo. Razina stručnosti koju isporučuje na vaše zaslone ostavit će vas zaprepašteni.

Papir je vrhunski višenamjenski predložak odredišne ​​stranice za web stranice svih žanrova i industrija. Idealan je za poslovne ljude, poduzetnike, dobrotvorne grupe, startupe, freelancere i online projekte baze znanja. Uz najmanju količinu uključenog posla i mala ulaganja, možete brzo i učinkovito postaviti stranicu vrhunske kvalitete. To je jedan od najnaprednijih, najsuvremenijih i najinovativnijih predložaka koji možete koristiti za gotovo svaku stranicu.

Sa svojim širokim rasponom značajki i elemenata, postavljanje vaše web stranice s papirom manje je zamorno i praktičnije. Papir dolazi s golemim horizontom responzivnih izgleda, osamnaest i sve više domova, stranicama blogova i trgovina. Optimiziran za nevjerojatne performanse i velike brzine učitavanja, Paper vašim posjetiteljima pruža postojano i opušteno iskustvo listanja. Počnite sada s papirom i vidjet ćete prve rezultate ubrzo nakon toga.

Apps Craft je specijalizirani HTML predložak odredišne ​​stranice. Sa svojim modernim, oštrim konceptom, Apps Craft privlači radoznale klikere svijeta. Dobit ćete +10 prilagodljivih početnih stranica s uključenim efektom paralakse. Apps Craft ponosno je jedan od najresponzivnijih predložaka. Također je kompatibilan s više preglednika za prolazak kroz bilo koji preglednik i dopiranje do što većeg broja ljudi. Jednostavno povećajte svoju prodaju uz SEO poboljšanja posebno napravljena za vaše poslovanje. Apps Craft nudi obrazac za pretplatu na MailChimp i Ajax Working Kontakt obrazac. S bilo kojim od njih dobit ćete izvrsnu povratnu vezu s kupcima. Dijeljenje na društvenim mrežama također je dostupno za nekoliko poznatih platformi.

Apps Craft također uključuje slojevite PSD datoteke za vrlo zgodne prilagodbe. Štoviše, kompatibilan je s Bootstrapom i uključuje prekrasan Parallax efekt. Prekrasne boje kože, Google Web Fontovi i visokokvalitetne ikone fontova također su dio ponude. Nadalje, Apps Craft nudi odgovarajuće dokumentacijske datoteke za jednostavno preuzimanje. Svi gore navedeni razlozi čine ga iznimno svestranim i zamišljenim da se može prilagoditi mobitelima i tabletima. Ako uzmete u obzir njegovu sklonost aplikacijama, nećete sumnjati u njegovu prilagodljivost. Odaberite nešto dinamično i napravljeno s najboljim specijaliziranim značajkama! Nabavite Apps Craft!

LeadGen je fleksibilan i osjetljiv HTML marketinški višenamjenski predložak web stranice. To je snalažljiv okvir za webmastere iz svih sfera života za postizanje rezultata. LeadGen je idealan za niz industrija i aplikacija od kojih možete imati koristi. S ogromnim rasponom demo web stranica odredišne ​​stranice koje možete izabrati, mogućnosti su neograničene. LeadGen ne treba nikakvo kodiranje da biste dobili web stranice profesionalne kvalitete. LeadGen je namjensko rješenje za dizajnere, arhitekte, kreativce i profesionalce. Implementirajte preko 300 uglađenih elemenata putem intuitivnog premium alata za izradu stranica.

LeadGen pruža robustan okvir za marketing vaših proizvoda i usluga svima. Besprijekorna izrada moguća je uz nekoliko jednostavnih klikova, uz napredne opcije administratora. Fino podesite svoje prijelaze i animacije, prilagodite pozadinu videa i slika i više. Pustite svoju kreativnost na slobodu s LeadGenom i podignite svoje poslovanje na viši nivo. Optimiziran za marketing i SEO, LeadGen će povećati vaš promet. Elegantan i lagan, neće začepiti opterećenje vašeg poslužitelja ni pod kakvim prometom. Od blogera i časopisa do eCommerce trgovina i portfelja, LeadGen ima sve. Da ne spominjemo, izvanrednu unakrsnu kompatibilnost sa svim preglednicima i uređajima. Postavite online trgovinu danas, pogledajte LeadGen!

Pivot je vizualno zadivljujući i sveobuhvatno savitljiv, tehnološki dobro uglađen i profesionalno grafički dizajniran, iznimno intuitivan i jednostavan za korištenje, prilagođen programerima i čisto sastavljen, vrlo dobro dokumentiran i sa Page Builderom. Ova je tema iznimno inovativna i sposobna dopustiti korisnicima bilo koje razine vještina da naprave zgodne i impresivne web stranice s jednom ili više stranica bez ikakvog kodiranja. Da bi to postigao, Pivot implementira vrlo učinkovit i vrlo intuitivan vizualni Page Builder, sa sučeljem temeljenim na blokovima u kojem je više od 70 prilagođenih, potpuno prilagodljivih blokova sadržaja dostupno za vašu udobnost, da jednostavno sjednete na svoje stranice i zatim slobodno petljate s njihovim individualnim postavkama i ukupnim izgledom i ponašanjem.

Zato je Pivot tako fleksibilan i svestran izbor kao predložak web stranice odredišne ​​stranice. Stvarno vas stavlja u vozačko sjedalo navigacijskog iskustva vaše web stranice na svakom koraku i kroz svaki kutak i pukotinu, s prekrasnom funkcionalnošću na dohvat ruke, uključujući Monitore kampanje, integraciju MailChimpa, prekrasne HTML5 video pozadine i hardverske Parallax vizualne efekte koji će vas zasljepiti i uključiti vaš dolazni promet. Poželite dobrodošlicu svojim posjetiteljima s elegancijom i fleksibilnošću, uz Pivot, i centrirajte svijet oko svoje web stranice!

Massive je iznimno ambiciozan, sveobuhvatno dobro dizajniran, tehnološki artikuliran i vrhunski, funkcionalno snalažljiv i iznimno bogat značajkama, pametan i uredno osmišljen, moderan i aktualan, estetski atraktivan i dotjeran responzivni HTML5 jednostrani i višestrani višenamjenski predložak web stranice. Ovaj je predložak pažljivo i ekspanzivno razvijan tijekom vremena kako bi predstavljao sjajno sveobuhvatno rješenje web stranice. Sposoban je obaviti gotovo svaki zadatak koji web stranica može zahtijevati, zahvaljujući velikoj količini i profesionalnoj kvaliteti. Uvođenjem više od 50 prekrasnih demo web-mjesta dopunjenih unutarnjim stranicama, preko 260 pojedinačnih stranica s HTML5 predlošcima i desecima stranica za specifičnu svrhu, Massive je doista neodoljiv. Zbog toga Massive može lako zadovoljiti zahtjeve web stranice odredišne ​​stranice.

Sa svojom opsežnom funkcionalnošću i velikom raznolikošću moćnih značajki i opsežnih mogućnosti vizualne prilagodbe, Massive je savršeno opremljen odmah po izlasku iz kutije za stvaranje zgodnih i modernih odredišnih stranica koje uključuju integraciju MailChimpa, preko 150 nevjerojatnih kratkih kodova, glatku i prekrasnu Parallax odjeljci, tablice s cijenama, 20 stilova izbornika, 15 gotovih klizača, 10 naslova stranica i slične velike količine izbora za svaki vizualni element koji čini vašu web stranicu Massive Landing Page. Izgrađeno na pouzdanom Bootstrap dizajnu s odgovarajućim odzivom, možete biti sigurni da će svaki korisnik uživati ​​u vašoj masivnoj web stranici u njenom pravom vizualnom sjaju.

JANGO je tehnološki sofisticiran, vizualno ekspanzivan i dobro dizajniran, nevjerojatno grafički prilagodljiv i nevjerojatno intuitivan, snažan i brz za učitavanje, okretan i jednostavan za korištenje, pretraživač optimiziran i prilagođen razvojnom programeru HTML5 višenamjenski predložak web stranice. Ovaj je predložak napravljen da bude najučinkovitije kodiran, prilagođen mobilnim uređajima, programerima i jednostavan za korištenje predložak na tržištu. JANGO koristi čvrst i pouzdan HTML5 okvir za vašu udobnost. Stiliziran je sofisticiranim SASS CSS3 stilskim listovima koji se lako prilagođavaju i brzo učitavaju. Dizajniran je na potpuno modularan način temeljen na Twitterovom Bootstrapu. To ga čini posebno osjetljivim i kompatibilnim sa svim preglednicima, platformama i veličinama zaslona.

JANGO je savršen za izradu vaše web stranice odredišne ​​stranice iz snova bez ikakvog kodiranja. Njegov okvir temeljen na komponentama uključuje više od 300 prilagođenih komponenti, s pojednostavljenim procesom izrade stranica u 3 koraka. Idite od zaglavlja do komponenti i redoslijeda do podnožja i gotovo! Profesionalne i uglađene web stranice s odredišnom stranicom jednostavne poput klikanja i povlačenja, spremne za nekoliko minuta, odmah iz kutije. JANGO također koristi svoj modularni dizajn kroz svoju bazu kodova, s vrlo čitljivim kodom prilagođenim programerima koji je dobro komentiran, s opsežnom dokumentacijom koja olakšava modifikaciju i prilagodbu JANGO-a vašim specifičnim zahtjevima.

Otkrivanje: Ova stranica sadrži vanjske pridružene veze koje mogu rezultirati primanjem provizije ako odlučite kupiti spomenuti proizvod. Mišljenja na ovoj stranici su naša vlastita i ne dobivamo dodatni bonus za pozitivne kritike.

Pozdrav, dragi moji čitatelji. Danas ćemo govoriti o tehničkim aspektima s kojima možemo povećati prodajnu konverziju naših proizvoda ili usluga. Jedna od važnih točaka je dobro promišljenost odredišna stranica s robom. Takozvana odredišna stranica, o čijem ćemo stvaranju kasnije govoriti i dobiti gotove kodove stranica.

Što je odredišna stranica? Ovo je stranica na koju ljudi obično dospiju nakon što kliknu na oglas. Stvoren za jednu ponudu: proizvod, uslugu ili pretplatu. Učinkovita odredišna stranica kamen je temeljac uspješnog online marketinga. Proizvod je možda najbolji na tržištu, reklame su usavršene, ali bez dobre landing stranice trud ne daje 100% rezultate. Posjetiteljima govori što se nudi i zašto bi to trebali željeti. Osjećaj hitnosti pridonosi brzom donošenju odluka i prelasku korisnika u kategoriju klijenta.

Kako izraditi odredišnu stranicu? Pogrešno je vjerovati da odgovor leži u sposobnosti slaganja. Dobra landing stranica je rezultat koordiniranog rada na ciljevima, tekstu, dizajnu i kodu. Odredišne ​​stranice, čiji će primjeri biti dolje, pomoći će početnicima da nauče osnove rada s izgledom, ali neće zamijeniti tekstove konverzije i razumijevanje ciljne publike. Možete ih izraditi i pomoću različitih dizajnera odredišne ​​stranice.

Prije nego što izradite odredišnu stranicu, zapitajte se:

• Što će osoba učiniti nakon što se nađe na odredišnoj stranici? Hoće li što kupiti? Hoćete li ispuniti obrazac? Pretplatiti se na newsletter? Prije nego što počnete pratiti stopu konverzije, postavite jasne ciljeve.
• Tko su moji konkurenti? U stvarnosti, to su tri pitanja: tko, koliko su uspješni i kako se njihova postignuća mogu primijeniti? Imitacija je najiskreniji oblik laskanja. Ako vaši konkurenti rade nešto što funkcionira, ponovite to na svojoj web stranici.
• Tko je moja publika? Što bolje razumijete svoju nišu i ciljnu publiku, veća je šansa da će se vaš trud isplatiti.

Morate ponuditi sve potrebne informacije, ali ne toliko da zatrpate i otjerate potencijalnog klijenta.

Prije nego što počnemo, pogledajmo na brzinu HTML i CSS. Razumijevanje njihovog rada pomoći će vam da stvorite slijetanje.

HTML je označni jezik preglednika za vizualizaciju web stranice. Napisano korištenjem oznaka u uglastim zagradama koje definiraju sadržaj.

Oznaka se otvara () i zatvara () oko ispune:

sadržaj

Za fino podešavanje, atributi se dodaju nakon naziva:

sadržaj

CSS - definira kako rasporediti HTML elemente. Sastoji se od selektora, svojstava i vrijednosti:

#selector (svojstvo: vrijednost;)

Selektor odgovara nazivu određene oznake u html-u. Promjenom vrijednosti i dodavanjem svojstava regulira se njezino izgled. Možete izraditi stranice koje izgledaju drugačije jedna od druge primjenom različitih CSS stilova na isti HTML.

Za brzi izgled koristit ćemo predložak s minimalnim dizajnom koji se temelji na bootstrapu. Ovo je sustav sa svojim selektorima, koji se koristi u cijelom svijetu za ubrzavanje izgleda.

Izgleda skromno.

Od ove ribe u nekoliko faza nastaje web stranica za svačiji ukus.

Struktura imenika u mapi:

• index.html: Ovo je glavna datoteka koju ćemo urediti.
• /assets: pomoćne datoteke se nalaze ovdje:
• /css: Direktorij sadrži bootstrap i stilove ikona. Datoteka koju ćemo urediti je main.css.
• /img: mapa za slike stranice.
• /fontovi: fontovi ikona.
• /js: javascript datoteke za pokretanje.

1. korak: korištenje zaglavlja

Naslov i podnaslovi ključna su mjesta koja pomažu prenijeti vrijednost ponude na jasan način.

Promijenimo naslov i naziv stranice. Ovdje vam neće trebati nikakva vještina slaganja teksta - sami pišete svoj tekst na mjestima označenim žutom bojom na ekranu.

Korak 2. Kratkoća je sestra obraćenja. Dodavanje pogodnosti i cijena

Trebat će vam 4 odjeljka:

• prednosti;
• stope;
• recenzije;
• poziv na akciju.

Kreirajmo odjeljak glavnog sadržaja "main", u koji ćemo umetnuti potrebne odjeljke:

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

Ispunite punjenjem umjesto točkicama.

Za odjeljak s pogodnostima trebat će vam ovaj kod:

Prednosti
Brzo

Pouzdan

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

Sadržaj radi jasnoće:

Još uvijek izgleda traljavo, ali nema razloga za paniku, idemo dalje.

Zapisujemo cijene. Sadržaj se mijenja na isti način kao u prvom koraku. Opći opis s razredom "tarife" i tri tarife.

Tarifni planovi

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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

mjesečno/po osobi

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

mjesečno/po osobi

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

mjesečno/po osobi

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Izgleda tako.

Iako nas ne zanima izgled buduće odredišne ​​stranice, u nastavku ćemo razmotriti primjere mijenjanja stilova.

Korak 3: Signali povjerenja i poziv na akciju

Korištenje ciljanih signala pokazuje posjetiteljima da je brend vrijedan povjerenja. Signali se mogu primati različite vrste, ali klasik su recenzije kupaca.

Recenzije kupaca

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 exercitation ullamco laboris nisi ut aliquip ex ea commodo:

Postavimo poziv na akciju.

Iskoristite prednost kada naručite danas

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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Recenzije će pomoći potencijalnim kupcima da odluče kupiti proizvod. Radi jasnoće, potrebni su nam avatari, pa ćemo ih odmah staviti na mjesto - ispod svakog citata.

Ime klijenta.

Korak 4: Integracija s mrežom i prilagođen mobilnim uređajima

Za implementaciju grida potrebni su nam Bootstrap spremnici. Važno je zapamtiti ukupan broj valjanih segmenata stupaca - 12. Klasa određuje širinu prikaza sadržaja. Dobra stvar kod ove unaprijed napravljene rešetke je to što su spremnici dizajnirani imajući na umu brz odziv i odmah su upotrebljivi na mobilnim uređajima. Detaljan opis na službenoj stranici. Mreža izgleda ovako.

Sadržaj "glavnog" bit će zamotan u spremnik. Da biste to učinili, na vrhu je napisano sljedeće:

… .

Ako je potrebno da blok odgovara cijeloj širini ekrana, onda se unutra umeće spremnik. Ovdje će to biti jumbotron i poziv na akciju.

Sve elemente koji zahtijevaju postavljanje jedan na drugi omotat ćemo razdjelnicima linija.

Sada možemo podesiti širinu stupaca, fokusirajući se na rešetku za pokretanje. Nakon zamatanja, punjenje se prestalo lijepiti za rubove ekrana i pojavile su se uredne udubine.

Cijene postavljamo u nizu pomoću klase stupca col-lg-4. Unutar redaka više nije potrebno pisati zasebne divove za prelamanje; oni se mogu kombinirati s postojećima odvojenima razmakom.

Analogno tome, postavili smo stupce za odjeljak s recenzijama i pogodnostima. Ako trebate pomaknuti element u stranu, koristite klasu stupca pomaka col-lg-offset-2. Broj na kraju određuje za koliko osnovnih stupaca će se dogoditi pomak.

Korak 5. Fontovi i ikone

Implementiramo fontove naslova Google Font. Kada odaberete, otvorite karticu uvoza i kopirajte podatke iz nje u datoteku main.css. Također dodajemo birače naslova u datoteku za koju se koristi novi font.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* uvoz fonta za naslove */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
obitelj fontova: "Roboto Condensed", sans-serif; /* Googlefont izlaz */
}

Radi jasnoće, prednosti su opisane klasom sa samorazumljivim nazivom text-center i FontAwesome ikonama iz skupa za pokretanje.

U ovom trenutku priprema je potpuno završena.

Koristimo tri najpopularnija tipa: s rečenicom, oblikom i s odbrojavanjem. Kako izgled bude napredovao, predložak će se nadopunjavati efektima.

Postavimo pozadinu glavnog dijela i padding tako da prvi zaslon bude pokriven.

Jumbotron (
pozadina: #f5f5f5 url(../img/fon.jpg) gore sredina bez ponavljanja;
maksimalna širina: 100%;
padding-top: 250px;
padding-bottom: 200px;
poravnanje teksta: središte;
}

Promijenimo veličinu zaglavlja jumbotrona s h2 na h1. Zatim pišemo stilove za elemente koje je potrebno promijeniti.

Počnimo s ikonama.

Prednosti i(
boja: #cac4c4;
}

Nakon znaka hash navedena je boja. Možete odabrati vlastitu opciju koristeći html tablice boja ili uređivač slika.

Uvlačenje za naslove odjeljaka

odjeljak h2 (
padding-top: 30px;
margina-dno: 25px;
}

Sređujemo izgled tarifa. Radi praktičnosti stvaramo vlastite klase za elemente koje želimo posebno istaknuti.

Tarifni broj 1
$10

mjesečno/po osobi

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

I puno CSS-a. Za koja su mjesta odgovorni odjeljci navedeno je u komentarima - /* između kosih crta sa zvjezdicom */

/* =========Tarifni stilovi======== */
/* opći pregled tarife */
.pricing_item(
pozadina: #f2f2f2;
položaj: relativan;
prikaz: -webkit-flex;
zaslon: savitljiv;

smjer savijanja: stupac;

align-items: stretch;
poravnanje teksta: središte;
-webkit-flex: 0 1 330px;
savijanje: 0 1 330px;
podstava: 2em 3em;
margina: 1em;
boja: #262b38;
kursor: zadano;
preljev: skriven;

}
/* promijeni pozadinu kada se klikne */
.pricing_item:lebdi (
boja: #444;
pozadina: #daebef;
}
/* pozadina pojedinačne cijene u svakoj tarifi */
.pricing_item:prvo dijete .cijena (
pozadina: #9ba9b5;
}
.pricing_item:nth-child(2).price (
pozadina: #1f6098;
}
/* na širokim ekranima srednji tarifni stupac je uvučen i istaknut */
@medijski zaslon i (min. širina: 66,250 em) (
.pricing_item(
margina: 1,5em 0;
}
.istaknuto(
z-indeks: 10;
margina: 0;
veličina fonta: 1.15em;
}
}
/* naslov */
.pricing_item h3 (
veličina fonta: 2em;
margina: 0,5em 0 0;
boja: #1d211f;
}
/* pozadina cjenika */
.cijena (
veličina fonta: 2em;
težina fonta: podebljano;
boja: #fff;
položaj: relativan;
z-indeks: 100;
line-height: 95px;
širina: 100px;
visina: 100px;
margina: 1.15em auto 1em;
rubni radijus: 50%;
pozadina: #77a5cc;
-webkit-prijelaz: boja 0.3s, pozadina 0.3s;
prijelaz: boja 0,3 s, pozadina 0,3 s;
}
/* valuta */
.valuta(
veličina fonta: 0,5em;
okomito poravnanje: super;
}
/* pojašnjenje prijedloga */
.rečenica (
težina fonta: podebljano;
margina: 0 0 1em 0;
podstava: 0 0 0,5em;
boja: #2a6496;
}
/* popis */
.pricing_item ul (
veličina fonta: 0,95em;
margina: 0;
podstava: 1,5em 0,5em 2,5em;
poravnanje teksta: lijevo;
}
/* stavke popisa */
.pricing_item li (
podstava: 0,15em 0;
}
/* gumb za ocjenu narudžbe */
.pricing_item gumb(
težina fonta: podebljano;
margin-top: auto;
podstava: 1em 2em;
boja: #fff;
radijus granice: 5px;
pozadina: #428bca;
-webkit-prijelaz: boja pozadine 0.3s;
prijelaz: boja pozadine 0,3 s;
}
/* mijenja boju kada se pritisne gumb */
.pricing_item gumb: lebdite,
.pricing_item button:focus (
boja pozadine: #285e8e;
}
/* pozadina tarife*/
.bg-2 (
pozadina: #dddddd;
}

Proizlaziti

Recenzije kupaca. Dajmo im uredan izgled i označimo njihovu lokaciju.

/* =========Stilovi svjedočanstava======== */
izjave (
podstava: 4em 0;
poravnanje teksta: središte;
}
.izjave .avatar img (
rubni radijus: 50%;
plovak: lijevo;
prikaz: inline;
margina-desno: 1em;
širina: 65px;
visina: 65px;
margina-dno: 30px;
}
.svjedočanstva .avatar p (
poravnanje teksta: lijevo;
podstava-top: 1em;
boja: #5d5d5d;
težina fonta: 900;
}

Ostalo je samo ukrasiti zadnji poziv na akciju i podnožje.

/* Radnja */
.akcijski(
pozadina: #476177;
min-visina: 180px;
širina: 100%;
podstava: 4em 0;
poravnanje teksta: središte;
}
.akcija h2 (
boja: #fff;
težina slova: 300;

}
.akcija p(
boja: #fff;
tekst-sjena: 0 1px 2px rgba(0, 0, 0, .2);
veličina fonta: 1.2em;
}
.action .container (
margin-top: 3em;
}
/* Podnožje */
podnožje (
pozadina: #333333;
ispuna: 1em 0;
poravnanje teksta: desno;
}
podnožje p(
boja: #fff;
visina linije: 1;
transformacija teksta: velika slova;
veličina fonta: 0,7em;
margin-top: 0.5em;
}

Gumbu podnožja dodijeljena je ugrađena bootstrap klasa btn-default.

Oživljavanje predloška. Uvest ćemo glatko pomicanje i gumbe za sekcije, kao i animaciju teksta na prvom ekranu.

Za prelaske na rad zamijenit ćemo neke razrede odjeljaka s ID - za beneficije i tarife. Dodat ćemo poveznice na ID na gumbe. Screenshot - što je uz što priloženo, označeno žutim markerom.

Postavljamo uvlake za gumbe - jbutton. Pomicanje kada se pritisne radi, ali vrlo naglo.

Glatki prijelazi nastaju kada javascript pomoć ili jquery. Potonji je prema zadanim postavkama povezan s Bootstrap predlošcima.

Pomicanje je sada glatko.

Dodavanje animacije tekstu pomoću Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Ovo je spremno otvoreni izvor, može se koristiti na bilo kojoj web stranici. Stavite datoteku s Githuba u mapu css i odredite put.

Ovdje odabiremo efekte: https://daneden.github.io/animate.css/. Odabrali smo fadeInDown. U kodu je ovako napisano:

Sada kada se stranica učita ili osvježi, tekst će biti animiran. Spreman.

Što je više polja obrasca prikazano posjetitelju, manja je vjerojatnost da će ih ispuniti. Zatražite samo minimalne potrebne informacije.

Sastavlja se po analogiji. Mijenjat ćemo pozadinu i boje. I, naravno, dodati ćemo oblik.

Počnimo s paralaksom.

Promijenimo pozadinu jumbotrona u prozirnu:

pozadina: prozirna;

Unutar glave umetnut ćemo skriptu:

$(prozor).scroll(function(e)(
paralaksa();
});
funkcija paralaksa())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

Prvi red u tijelu je spremnik za paralaksu:

A u CSS-u njegovo ponašanje je:

bgparalaksa (
pozadina: url(/../img/fon.jpg) ponoviti;
položaj: fiksni;
širina: 100%;
visina: 300%;
vrh:0;
lijevo:0;
z-indeks: -1;
}

Paralaksa je spremna. Ali izmjene koda i nove pozadine zahtijevaju promjenu sheme boja.

Zatamnjivanje jelovnika:

Navigacijska traka-zadano (
boja pozadine: #333;
boja obruba: #444;
boja: tamno siva;
rubni radijus: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
boja: tamno siva;
boja-pozadine: rgba(0, 0, 0, 0,5);
}

Rečenicu u jumbotronu zamjenjujemo novom - s kodom forme:

Odredišna stranica pretvara posjetitelje u kupce
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.

  
  

I propisujemo izgled

/* oblik */
.headform-list(
list-style-type: nijedan;
line-height: 26px;
težina slova: 400;
ispuna: 0px;
margina-dno: 40px;
}
.model glave(
preljev: skriven;
položaj: relativan;
boja pozadine: rgba(0,0,0,.4);
ispuna: 35px 40px;
rubni radijus: 8px;
}
unos, gumb, odabir, tekstualno polje (
širina: 100%;
margina-dno: 10px;
}
.headform-list li .fa (
pozicija: apsolutna;
gore: 0px;
lijevo: 0px;
širina: 42px;
veličina fonta: 24px;
poravnanje teksta: središte;
}
.headform-list li(
položaj: relativan;
min-visina: 38px;
padding-left: 62px;
margina-dno: 20px;
}
.jumbotron p (
boja: #fff;
veličina fonta: 16px;
font-style: kurziv;
}

Ovdje je završio i tekst jumbotrona koji je zahtijevao izmjene.

Mijenjamo tarife.

/* opći pregled tarife */
.pricing_item(
boja pozadine: rgba(0,0,0,.4); /* linija promijenjena */
rubni radijus: 4px; /* linija promijenjena */
položaj: relativan;
prikaz: -webkit-flex;
zaslon: savitljiv;
-webkit-flex-direction: stupac;
smjer savijanja: stupac;
-webkit-align-items: stretch;
align-items: stretch;
poravnanje teksta: središte;
-webkit-flex: 0 1 330px;
savijanje: 0 1 330px;
podstava: 2em 3em;
margina: 1em;
boja: #f2f2f2; /* linija promijenjena */
kursor: zadano;
preljev: skriven;
okvir-sjena: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* promijeni pozadinu kada se klikne */
.pricing_item:lebdi (
boja: #444;
pozadina: #ddd; /* linija promijenjena */
}

Sada izgledaju ovako - prozirna pozadina i zaobljeni uglovi.

Predložak je spreman.

Ponovno mijenjamo ispunu jumbotrona i prebojavamo predložak kako bi odgovarao novoj pozadini, slično prethodnom predlošku. Spojite skriptu brojača:

HTML





Vrijeme ne čeka
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 exerci tation 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 zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

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

  
  


• 
  

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