Salamu, wasomaji wangu wapenzi. Leo tutazungumza kuhusu vipengele vya kiufundi ambavyo tunaweza kuongeza ubadilishaji wa mauzo ya bidhaa au huduma zetu. Moja ya pointi muhimu ni ukurasa wa kutua ulioundwa vizuri na bidhaa. Ukurasa unaoitwa kutua, uundaji ambao tutazungumza juu yake baadaye na kupata nambari za ukurasa zilizotengenezwa tayari.

Ukurasa wa kutua ni nini? Huu ndio ukurasa ambao watu kwa kawaida hutua baada ya kubofya tangazo. Imeundwa kwa toleo moja: bidhaa, huduma au usajili. Ukurasa mzuri wa kutua ndio msingi wa uuzaji uliofanikiwa mkondoni. Bidhaa inaweza kuwa bora zaidi kwenye soko, matangazo yanakamilika, lakini bila ukurasa mzuri wa kutua, jitihada hazizai matokeo ya 100%. Inawaambia wageni kile kinachotolewa na kwa nini wanapaswa kuitaka. Hisia ya uharaka huchangia katika kufanya maamuzi ya haraka na mpito wa mtumiaji hadi aina ya mteja.

Jinsi ya kuunda Ukurasa wa Kutua? Ni makosa kuamini kwamba jibu liko katika uwezo wa kupanga. Ukurasa mzuri wa kutua ni matokeo ya kazi iliyoratibiwa kwenye malengo, maandishi, muundo na nambari. Kurasa za kutua, mifano ambayo itakuwa chini, itasaidia wanaoanza kujifunza misingi ya kufanya kazi na mpangilio, lakini haitachukua nafasi ya maandishi ya uongofu na uelewa wa watazamaji walengwa. Unaweza pia kuunda kwa kutumia wabunifu mbalimbali wa Ukurasa wa Kutua.

Kwa hivyo kabla ya kuunda ukurasa wa kutua, jiulize:

• Mtu atafanya nini baada ya kutua kwenye ukurasa wa kutua? Je, atanunua chochote? Je, utajaza fomu? Je, ungependa kujiunga na jarida? Kabla ya kufuatilia asilimia ya walioshawishika, weka malengo wazi.
• Washindani wangu ni akina nani? Kwa kweli, haya ni maswali matatu: ni nani, wamefanikiwa kwa kiasi gani, na jinsi gani mafanikio yao yanaweza kutumika? Kuiga ni namna ya dhati kabisa ya kujipendekeza. Ikiwa washindani wako wanafanya kitu kinachofanya kazi, kiiga kwenye tovuti yako.
• Watazamaji wangu ni nani? Kadiri unavyoelewa niche yako na watazamaji walengwa, ndivyo uwezekano wa juhudi zako utalipa.

Unahitaji kutoa taarifa zote muhimu, lakini sio kiasi kwamba unazidi na kumfukuza mteja wako anayeweza.

Mifano ya kuunda ukurasa wa kutua + coding kwa dummies

Kabla hatujaanza, hebu tuangalie kwa haraka HTML na CSS. Kuelewa jinsi wanavyofanya kazi itakusaidia kuunda kutua.

HTML ni lugha ya kivinjari kwa taswira ya tovuti. Imeandikwa kwa kutumia vitambulisho vilivyofungwa kwenye mabano ya pembe ambayo yanafafanua maudhui.

Lebo hufungua () na kufunga () karibu na kujaza:

maudhui

Kwa urekebishaji mzuri, sifa huongezwa baada ya jina:

maudhui

CSS - inafafanua jinsi ya kupanga vipengele vya HTML. Inajumuisha wateule, mali na maadili:

#kichaguzi (mali: thamani;)

Kiteuzi kinalingana na jina la lebo maalum katika html. Kubadilisha maadili na kuongeza sifa hurekebisha mwonekano wake. Unaweza kuunda kurasa ambazo zinaonekana tofauti kwa kutumia mitindo tofauti ya CSS kwa HTML sawa.

5 hatua za awali

Kwa mpangilio wa haraka, tutatumia template na muundo mdogo kulingana na bootstrap. Huu ni mfumo ulio na wateule wake, ambao hutumiwa ulimwenguni kote kuharakisha mpangilio.

Inaonekana kiasi.

Kutoka kwa samaki hii tovuti kwa kila ladha huundwa katika hatua kadhaa.

Muundo wa saraka kwenye folda:

• index.html: Hili ndilo faili kuu ambalo tutahariri.
• / mali: faili za msaidizi ziko hapa:
• /css: Saraka ina mitindo ya bootstrap na ikoni. Faili tutakayohariri ni main.css.
• /img: folda ya picha za tovuti.
• / fonti: fonti za ikoni.
• /js: faili za javascript za bootstrap.

Hatua ya 1: Kutumia Kichwa

Kichwa cha habari na vichwa vidogo ni sehemu kuu zinazosaidia kuwasilisha thamani ya ofa kwa njia iliyo wazi.

Wacha tubadilishe kichwa na jina la tovuti. Hapa huhitaji kuwa na ujuzi wa kuandika - unaandika maandishi yako mwenyewe katika sehemu zilizoangaziwa kwa manjano kwenye skrini.

Hatua ya 2. Ufupi ni dada wa uongofu. Kuongeza faida na viwango

Utahitaji sehemu 4:

• faida;
• viwango;
• hakiki;
• mwito wa kuchukua hatua.

Wacha tuunde sehemu ya yaliyomo kuu "kuu", ambayo tutaingiza sehemu muhimu:

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

Jaza kwa kujaza badala ya dots.

Kwa sehemu ya faida utahitaji nambari hii:

Faida
Haraka

Kutegemewa

Sed diam nonummy

Yenye faida

Elit, sed diam nonummy

Kitaalam

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

Kutegemewa

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

Yenye faida

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

Kitaalam

Lorem ipsum dolor sit amet, consectetuer adipiscing

Kutegemewa

Lorem ipsum dolor sit amet, consectetuer adipiscing

Yenye faida

Lorem ipsum dolor sit amet, consectetuer adipiscing

Maudhui kwa uwazi:

Bado inaonekana kuwa duni, lakini hakuna sababu ya kuogopa, wacha tuendelee.

Tunaandika bei. Maudhui hubadilika kwa njia sawa na katika hatua ya kwanza. Maelezo ya jumla na darasa la "ushuru" na ushuru tatu.

Mipango ya ushuru

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ili kufanya hivyo kwa muda mfupi, unahitaji kufanya mazoezi ya ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Nambari ya Ushuru 1
$10

kwa mwezi/kwa kila mtu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Agizo
Ushuru namba 2
$20

kwa mwezi/kwa kila mtu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Agizo
Ushuru namba 3
$30

kwa mwezi/kwa kila mtu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Agizo

Inaonekana hivyo.

Kwa sasa, hatuna nia ya kuonekana kwa ukurasa wa kutua wa baadaye - tutaangalia mifano ya kubadilisha mitindo hapa chini.

Hatua ya 3: Amini Ishara na Wito wa Kuchukua Hatua

Kutumia mawimbi yaliyolengwa huonyesha kwa wageni kuwa chapa hiyo inaaminika. Ishara zinaweza kuchukua aina nyingi, lakini ile ya kawaida ni maoni ya wateja.

Maoni ya Wateja

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ili kufanya hivyo kwa muda mfupi zaidi, unahitaji kufanya mazoezi yote ambayo ni ya kawaida sana:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Hata hivyo, ni lazima ufanye mazoezi ya ziada ili uweze kufanya kazi kwa bidii."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Hata hivyo, ni lazima ufanye mazoezi ya ziada ili uweze kufanya kazi kwa bidii."

Wacha tuweke wito wa kuchukua hatua.

Nufaika unapoagiza leo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ili kufanya hivyo kwa muda mfupi, unahitaji kufanya mazoezi ya ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Agiza sasa!

Maoni yatasaidia wateja watarajiwa kuamua kununua bidhaa. Kwa uwazi, tunahitaji avatar, kwa hivyo tutaziweka mara moja - chini ya kila nukuu.

Jina la mteja.

Hatua ya 4: Gridi na Muunganisho wa Kirafiki wa Simu

Ili kutekeleza gridi ya taifa, tunahitaji vyombo vya Bootstrap. Ni muhimu kukumbuka jumla ya idadi ya sehemu halali za safu - 12. Darasa huamua upana wa maonyesho ya maudhui. Jambo zuri kuhusu gridi hii iliyotengenezwa awali ni kwamba vyombo vimeundwa kwa kuzingatia usikivu na vinaweza kutumika mara moja kwenye vifaa vya rununu. Maelezo ya kina kwenye tovuti rasmi. Gridi inaonekana kama hii.

Yaliyomo ya "kuu" yatafungwa kwenye chombo. Ili kufanya hivyo, ifuatayo imeandikwa juu:

… .

Ikiwa unahitaji kizuizi ili kutoshea upana mzima wa skrini, basi chombo kinaingizwa ndani. Hapa itakuwa jumbotron na wito wa kuchukua hatua.

Tutafunga vipengele vyote vinavyohitaji kuwekwa juu ya kila mmoja na vitenganishi vya mstari.

Sasa tunaweza kurekebisha upana wa nguzo, tukizingatia gridi ya bootstrap. Baada ya kufunga, kujaza kusimamishwa kushikamana na kingo za skrini na indents safi zilionekana.

Tunaweka bei kwa safu kwa kutumia safu ya safu col-lg-4. Ndani ya mistari ya safu, sio lazima tena kuandika div tofauti za kufunika; zinaweza kuunganishwa na zilizopo zilizotenganishwa na nafasi.

Kwa mlinganisho, tunaweka safu wima kwa sehemu ya ukaguzi na faida. Ikiwa unahitaji kusogeza kipengee kando, tumia darasa la safu wima ya col-lg-offset-2. Nambari iliyo mwishoni huamua ni safu wima ngapi za msingi mabadiliko yatatokea.

Hatua ya 5. Fonti na Icons

Tunatekeleza fonti za kichwa cha Fonti ya Google. Ukichaguliwa, fungua kichupo cha kuleta na unakili data kutoka humo hadi faili kuu.css. Pia tunaongeza viteuzi vya kichwa kwenye faili ambayo fonti mpya inatumiwa.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* leta fonti kwa ajili ya vichwa */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; /* Toleo la fonti la Google */
}

Kwa uwazi, faida zinaelezewa na darasa lenye kituo cha maandishi kinachojieleza na ikoni za FontAwesome kutoka kwa seti ya bootstrap.

Katika hatua hii, maandalizi yamekamilika kabisa.

Ukurasa wa kutua: mifano ya misimbo iliyo na ofa, parallax na kaunta

Tunatumia aina tatu maarufu zaidi: kwa sentensi, fomu na kwa counter counter. Kadiri mpangilio unavyoendelea, kiolezo kitaongezewa athari.

Mfano 1: na sentensi

Hebu tuweke historia ya sehemu kuu na padding ili skrini ya kwanza imefungwa.

Jumbotron (
mandharinyuma: #f5f5f5 url(../img/fon.jpg) kituo cha juu kisichorudiwa;
upana wa juu: 100%;
padding-top: 250px;
padding-chini: 200px;
panga maandishi: katikati;
}

Wacha tubadilishe ukubwa wa kichwa cha jumbotron kutoka h2 hadi h1. Ifuatayo, tunaandika mitindo kwa vipengele vinavyohitaji kubadilishwa.

Hebu tuanze na icons.

Faida i(
rangi: #cac4c4;
}

Baada ya ishara ya hashi, rangi imetajwa. Unaweza kuchagua chaguo lako mwenyewe kwa kutumia majedwali ya rangi ya html au kihariri cha picha.

Ujongezaji kwa vichwa vya sehemu

sehemu ya h2 (
padding-top: 30px;
ukingo-chini: 25px;
}

Tunasafisha mwonekano wa ushuru. Kwa urahisi, tunaunda madarasa yetu wenyewe kwa vipengele ambavyo tunataka kuangazia hasa.

Nambari ya Ushuru 1
$10

kwa mwezi/kwa kila mtu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Agizo

Na CSS nyingi. Ni maeneo gani ambayo sehemu zinawajibika imeelezewa katika maoni - /* kati ya mikwaruzo na nyota */

/* =========Mitindo ya Ushuru======== */
/* mtazamo wa jumla wa ushuru */
.kipengee_cha_bei(
usuli: #f2f2f2;
nafasi: jamaa;
kuonyesha: -webkit-flex;
kuonyesha: flex;

flex-mwelekeo: safu;

align-vitu: kunyoosha;
panga maandishi: katikati;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2m 3em;
ukingo: 1m;
rangi: #262b38;
mshale: chaguo-msingi;
kufurika: siri;

}
/* badilisha mandharinyuma unapobofya */
.kipengee_cha bei: hover (
rangi: #444;
usuli: #daebef;
}
/* mandharinyuma ya lebo ya bei ya kibinafsi katika kila ushuru */
.kipengee_cha_bei:mtoto wa kwanza .bei (
mandharinyuma: #9ba9b5;
}
.kipengee_cha_bei:mtoto wa nth(2).bei (
usuli: #1f6098;
}
/* kwenye skrini pana safu wima ya kati ya ushuru imeingizwa ndani na kuangaziwa */
Skrini ya @media na (upana wa chini: 66.250em) (
.kipengee_cha_bei(
ukingo: 1.5m 0;
}
.iliyoangaziwa(
z-index: 10;
ukingo: 0;
saizi ya herufi: 1.15em;
}
}
/* kichwa */
.bei_kipengee H3 (
saizi ya herufi: 2m;
ukingo: 0.5em 0 0;
rangi: #1d211f;
}
/* mandharinyuma ya lebo ya bei */
.bei(
saizi ya herufi: 2m;
font-uzito: ujasiri;
rangi: #fff;
nafasi: jamaa;
z-index: 100;
urefu wa mstari: 95px;
upana: 100px;
urefu: 100px;
ukingo: 1.15em otomatiki 1em;
mpaka-radius: 50%;
mandharinyuma: #77a5cc;
-webkit-mpito: rangi 0.3s, background 0.3s;
mpito: rangi 0.3s, background 0.3s;
}
/* fedha */
.sarafu(
ukubwa wa herufi: 0.5em;
wima-align: super;
}
/* ufafanuzi wa pendekezo */
.sentensi (
font-uzito: ujasiri;
ukingo: 0 0 1em 0;
padding: 0 0 0.5em;
rangi: #2a6496;
}
/* orodha */
.bei_kipengee ul (
saizi ya herufi: 0.95em;
ukingo: 0;
padding: 1.5em 0.5em 2.5em;
panga maandishi: kushoto;
}
/* orodha ya vitu */
.bei_kipengee li (
padding: 0.15em 0;
}
/* kitufe cha kuagiza cha bei */
.kitufe_cha_bei(
font-uzito: ujasiri;
ukingo-juu: auto;
padding: 1em 2m;
rangi: #fff;
mpaka-radius: 5px;
mandharinyuma: #428bca;
-webkit-mpito: background-rangi 0.3s;
mpito: background-rangi 0.3s;
}
/* badilisha rangi wakati kitufe kimebonyezwa */
.kitufe_cha_bei:elea,
Kitufe cha .pricing_item:focus (
rangi ya asili: # 285e8e;
}
/* usuli wa ushuru*/
.bg-2 (
usuli: #dddddd;
}

Matokeo

Maoni ya Wateja. Wacha tuwape sura nzuri na tuonyeshe eneo lao.

/* =========Mitindo ya ushuhuda======== */
ushuhuda (
padding: 4em 0;
panga maandishi: katikati;
}
.testimonials .avatar img (
mpaka-radius: 50%;
kuelea: kushoto;
kuonyesha: inline;
ukingo-kulia: 1em;
upana: 65px;
urefu: 65px;
ukingo-chini: 30px;
}
.ushuhuda .avatar p (
panga maandishi: kushoto;
padding-top: 1em;
rangi: #5d5d5d;
uzito wa fonti: 900;
}

Kilichobaki ni kupamba simu ya mwisho ya kuchukua hatua na maandishi ya chini.

/* Hatua */
.kitendo(
background: #476177;
urefu mdogo: 180px;
upana: 100%;
padding: 4em 0;
panga maandishi: katikati;
}
.kitendo h2 (
rangi: #fff;
uzito wa fonti: 300;

}
.kitendo p(
rangi: #fff;
maandishi-kivuli: 0 1px 2px rgba(0, 0, 0, .2);
saizi ya herufi: 1.2em;
}
.chombo .kitendo (
ukingo-juu: 3em;
}
/* Kijachini */
kijachini (
usuli: #333333;
padding: 1em 0;
panga maandishi: kulia;
}
kijachini p (
rangi: #fff;
urefu wa mstari: 1;
maandishi-kubadilisha: herufi kubwa;
saizi ya herufi: 0.7em;
ukingo-juu: 0.5em;
}

Kitufe cha kijachini kimepewa darasa la bootstrap iliyojengewa ndani btn-default.

Kuleta kiolezo hai. Tutaanzisha utembezaji laini na vitufe vya sehemu, pamoja na uhuishaji wa maandishi kwenye skrini ya kwanza.

Ili mabadiliko yafanye kazi, tutabadilisha baadhi ya madarasa ya sehemu na kitambulisho - kwa faida na ushuru. Na tutaongeza viungo kwa id kwenye vifungo. Picha ya skrini - ni nini kimeambatishwa na kile, kilichoangaziwa na alama ya manjano.

Tunaweka indents kwa vifungo - jbutton. Kusogeza unapobonyezwa hufanya kazi, lakini kwa ghafla sana.

Mabadiliko laini huundwa kwa kutumia javascript au jQuery. Mwisho umeunganishwa kwa violezo vya Bootstrap kwa chaguo-msingi.

Kusogeza sasa ni laini.

Kuongeza uhuishaji kwa maandishi kwa kutumia Animate.css ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css ). Huu ni msimbo wa chanzo wazi uliotengenezwa tayari, unaweza kutumika kwenye tovuti yoyote. Weka faili kutoka kwa Github kwenye folda ya css na ueleze njia.

Tunachagua athari hapa: https://daneden.github.io/animate.css/. Tumechagua fadeInDown. Imeandikwa katika kanuni kama hii:

Sasa ukurasa unapopakiwa au kuonyeshwa upya, maandishi yatahuishwa. Tayari.

Mfano wa 2: na sura na athari ya parallax

Kadiri sehemu nyingi za fomu zinavyowasilishwa kwa mgeni, ndivyo uwezekano wa kuzijaza. Uliza tu habari ndogo muhimu.

Imekusanywa kwa mlinganisho. Tutabadilisha asili na rangi. Na, bila shaka, tutaongeza sura.

Wacha tuanze na parallax.

Wacha tubadilishe usuli wa jumbotron kuwa uwazi:

background: uwazi;

Ndani ya kichwa tutaingiza hati:

$(dirisha).sogeza(kazi(e)(
parallax ();
});
kazi parallax())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("juu",-(iliyosogezwa*0.2)+"px");
}

Mstari wa kwanza kwenye mwili ni chombo cha parallax:

Na katika CSS tabia yake ni:

Bgparallax (
mandharinyuma: url(/../img/fon.jpg) kurudia;
msimamo: fasta;
upana: 100%;
urefu: 300%;
juu: 0;
kushoto: 0;
z-index: -1;
}

Parallax iko tayari. Lakini kufanya mabadiliko kwenye msimbo na mandharinyuma mpya kunahitaji kugawa upya mpango wa rangi.

Kufanya menyu kuwa giza:

Upau-msingi-msingi (
rangi ya asili: #333;
mpaka-rangi: #444;
rangi: kijivu giza;
mpaka-radius: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
rangi: kijivu giza;
rangi ya asili: rgba (0, 0, 0, 0.5);
}

Tunabadilisha sentensi katika jumbotron na mpya - na nambari ya fomu:

Ukurasa wa Kutua hugeuza wageni kuwa wateja
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate mass.

• 
  
  
  


• 
  

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

  
  

Na tunaagiza kuonekana

/* fomu */
.orodha ya muundo-msingi(
orodha-style-aina: hakuna;
urefu wa mstari: 26px;
font-uzito: 400;
padding: 0px;
ukingo-chini: 40px;
}
.umbo (
kufurika: siri;
nafasi: jamaa;
rangi ya asili: rgba(0,0,0,.4);
pedi: 35px 40px;
mpaka-radius: 8px;
}
ingizo, kitufe, chagua, eneo la maandishi (
upana: 100%;
ukingo-chini: 10px;
}
.orodha ya fomu-kichwa li .fa (
nafasi: kabisa;
juu: 0px;
kushoto: 0px;
upana: 42px;
saizi ya fonti: 24px;
panga maandishi: katikati;
}
.orodha ya muundo wa kichwa li (
nafasi: jamaa;
urefu mdogo: 38px;
padding-kushoto: 62px;
ukingo-chini: 20px;
}
.jumbotron p (
rangi: #fff;
saizi ya fonti: 16px;
mtindo wa fonti: italiki;
}

Maandishi ya jumbotron pia yaliishia hapa, kwani yalidai mabadiliko.

Tunabadilisha ushuru.

/* mtazamo wa jumla wa ushuru */
.kipengee_cha_bei(
rangi ya asili: rgba(0,0,0,.4); /* mstari umebadilishwa */
mpaka-radius: 4px; /* mstari umebadilishwa */
nafasi: jamaa;
kuonyesha: -webkit-flex;
kuonyesha: flex;
-webkit-flex-direction: safu;
flex-mwelekeo: safu;
-webkit-align-vipengee: kunyoosha;
align-vitu: kunyoosha;
panga maandishi: katikati;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2m 3em;
ukingo: 1m;
rangi: #f2f2f2; /* mstari umebadilishwa */
mshale: chaguo-msingi;
kufurika: siri;
sanduku-kivuli: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* badilisha mandharinyuma unapobofya */
.kipengee_cha bei: hover (
rangi: #444;
usuli: #ddd; /* mstari umebadilishwa */
}

Sasa wanaonekana kama hii - msingi wa uwazi na pembe za mviringo.

Kiolezo kiko tayari.

Mfano wa 3: na counterdown counter

Tunabadilisha kujazwa kwa jumbotron tena na kuchora tena kiolezo ili kuendana na usuli mpya, sawa na kiolezo kilichotangulia. Unganisha hati ya kaunta:

HTML





Muda hausubiri
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ili kufanya hivyo kwa muda mfupi, unahitaji kufanya mazoezi ya 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 luptature nulla duguil duguil duguil dugnissim.

• 
  

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

  
  


• 
  

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

  
  

var myCountdown1 = Siku Zilizosalia mpya ((
wakati: 86400 * 3, // 86400 sekunde = 1 siku
upana: 300
, urefu: 60
, rangeHi: "siku"
, mtindo: "pindua" //