Web development for beginners in swahili

frankgalos · May 3, 2016

karibuni marafiki. karibuni katika sehemu ya media queries na katika sehenu hii tuta tumia kanuni ya only screen and (max-width:480px)

kwaiyo fungua texteditor yako na tengeneza faili la jina media.css
na uandike hizi code.

@media only screen and (max-width:480px){
header > #main{
width: 100%;
height: 60px;
margin: 0px;
}

header > #main > #logo{
height: 98%;
width: 40px;
margin: 0px 0 0 5px;
}

header > #main > #logo > #main > a{
width: 100%;
height: 100%;
display: inline-block;
}

header > #main > #logo > #main > a > img{
display: inline-block;
height: 100%;
width: 100%;
}

header > #main > nav{
position: absolute;
width: 60vw;
background: #fff;
height: 100vh;
right: 0;
top: 50px;
display: none;
}

header > #main > nav > ul{
background: rgba(1,1,1,.85);
height: 100vh;
}

header > #main > nav > ul > li{
display: block;
float: none;
text-align: center;
}

header > #main > nav > ul > li:last-child{
float: none;
padding: 10px 25px 10px 25px;
display: inline-block;
margin: 20px 0 0 15vw;
}

header > #main > #controlls{
display: inline-block;
float: right;
width: 45px;
margin: 10px 15px 0 0;
}

header > #main > #controlls:hover > div{
background: rgba(255,255,255,.50);
transition: .7s linear 0s;
cursor: pointer;
}

header > #main > #controlls > div{
background: #fff;
border-radius: 3px;
margin: 3px 0px 0 0;
height: 10px;
}

}

baada ya kuandika hizo code fungua faili lako la index.html na uandike haya
kwenye <head>tag

<link rel="stylesheet" href="media.css">

kisha ongeza hizi code baada ya tag ya mwisho ya navigation </nav>

<div id="controlls">
<div></div>
<div></div>
<div></div>
</div>

kisha fungua faili lako la style.css na uandike haya
baada ya header > #main > nav > ul > li:hover{}

header > #main > #controlls{
display: none;
}

ilikuona effect tumia firefox na bonyeza kwenye controlls juu kuria na itakuja dropdown na bonyeza developer kisha bonyeza responsive view na kwenye namba hakikisha zina display 320x480

na ilikuona navigation menu

kwenye

header > #main > nav{
}

ya faili lako la media.css ile display:none iweke display:inline-block

preview

http://route.epizy.com/frank/

itaendelea ....................

projectman · May 3, 2016

frankgalos said:
Tuanze kuangalia jinsi ya kuandika nyaraka zetu za html

Unaweza kuandika nyaraka za HTML kwa kutumia Notepad au textEditor yoyote ile.

Ntatumia notepad plus plus kwa kuandikia so wewe utaweza kutumia notepad kama unatumia pc au TextEdit kwa (mac).

Kwakuanza kuandika nyaraka ya HTML tabidi ufate njia nne kwa kufungua na jinsi ya ku save file lako.

1. Fungua notepad ua TexEdit(Mac).

Kwa jinsi ya kufungua notepad kwenye windows 7.bonyeza start. Kushoto mwa screen yako.Bonyeza All programs.Bonyeza Accessories.Bonyeza Notepad.

Kama utakua ume download notepad ++ itakua kwenye dashboard yako au bonyeza start button kushoto mwascreen yako kwachini kwenye all programs utaiyona new programs na notepad++ itakuwepo hapo na utabonyeza hiyo.

Kwa windows 8 na zaid:

Fungua start screen alafu andika Notepad ++ au notepad

2. Andika mfano huu katika notepad yako:

Copy au andika.

<!DOCTYPE html>
<html>
<body>

<h1>Jina langu ni</h1>

<p>Naishi </p>

</body>
</html>

3. Sevu HTML page.

Kusevu faili lako la HTML katika compyuta yako.

Bonyeza file juu kushoto mwa notepad yako na kisha chagua Save as katika orodha ya notepad.

Lipe jina faili lako (index.html) au jina lolote linaloishia na .html.

Na usevu.

4. Tazama faili lako katika browser.

Unaweza kuangalia faili lako katika browser yoyote ile uipendayo.Kuangalia unaweza kulichukua faili lako katika sehem uliyo lisevu na kuli dondosha katika browser yako au una weza kubonyeza mala mbili faili lako na lika kupeleka katika browser husika.

Kwenye browser litaonekana hivi.

Jina langu ni

Naishi

Itaendelea ........

Maswali yana kubalika pale unapo shindwa.

naona naelewa na ninapata kitu hapa!

frankgalos · May 3, 2016

projectman said:
naona naelewa na ninapata kitu hapa!

karibu projectman

projectman · May 3, 2016

frankgalos said:
karibu projectman

naomba tuwasiliane ni vyema unipatie namba yako tuzungunze yakwangu ni 0719909267

frankgalos · May 3, 2016

projectman said:
naomba tuwasiliane ni vyema unipatie namba yako tuzungunze yakwangu ni 0719909267

Sawa sawa ntakupm. Watsapp

frankgalos · May 4, 2016

Karibuni marafiki katika kipindi kingine cha media queries. katika hii sehemu tutaendeleza sehemu tulioishia kipindi kilicho pita. katika media rule ya (max-width:480px).

pia nilikua sijaelezea kuhusu hii media rule kwaiyo nachukua nafasi kuelezea jinsi inavyo fanya kazi.

max-width:480px inamaanisha kifaachochote kicho kua chini au sawa na upana huu uta athirika na mitindo iliokuwa ndani ya hii kanuni.

napia kamaulivo ona kipindi kilicho pita navigations zikawekwa kuwa none yani zisionekane katika media rule hii na kimeongezeka kitu kimoja katika header nacho ni controlls zinazo ashiria kuwa kuna orodha zitakazo kuwepo na ili controlls zifanye kazi lazima javascript iwepo kwaiyo navigations zimefichwa mbaka javascript ije kuziwekea events endapo mtumiaji atakua na shughulika nazo.

Basi kama kawaida kwa kuanza fungua mafaili yako yote ikiwemo index.html,style.css na media.css nakisha fungua website yako katika browser ambayo ni firefox kwakuanzia lakini ata chrome nayo ipo sawa kwasababu inaonesha vifaa husika.

kwaiyo kama upo kwenye Firefox bonye Ctrl + Shift + m kwa wanao tumia windows na kamaupo kwenye chrome bonyeza Ctrl + Shift + I ili kuweza kupata developer tools.

kama umefaya ivyo hakikisha kama upo kwenye mozilla Firefox namba zinazo onekana juu kushoto mwa screen yako ni kati ya 320 x 480 iki maanisha 320px sawa sawa na portrait na 480px ni landscape.

katika chrome hakikisha upo kwenye eidha Nexus 6,5,4, 5X,6P,blackBerry Z30,Galaxy sIII , S5,note II,III,Nokia N9,Nokia lumia 520,Iphone 4,5,6,6Plus. hizi zote zikiwa portrait.

Basi kama umefanya hivyo fungua textEditor yako faili la index.html na uandike haya.

baada ya
<div id="w3">
<div id='main'>
<div id="pi">
<img src="shine" alt="shine24 logo" >
</div>
<div id="link">
<a href="shine24" title="Go to the site">shine24</a>
<p>shine24 it's a web blog application for news about sports, entertainment, politics and latest hits of celebrities.part of route</p>
</div>
</div>
</div>
</div>

andika hiki
<button>see more <i class="fa fa-arrows-v" aria-hidden="true"></i></button>

pia iyo button na uwo mshale ili uweze kuonekana tabidi uwena font inayoitwa font-awesome.

kisha save
fungua faili la style.css na uandike haya
baada ya section > #container > #works > #main{}

section > #container > #works > #main > button{
padding: 16px;
margin: 50px 0 0 0;
font-size: 17px;
border-radius: 3px;
border:1px solid rgba(1,1,1,.10);
color: rgba(248,98,75,1);
cursor: pointer;
display: none;
background: #eee;
}

section > #container > #works > #main > button:hover{
background: rgba(1,1,1,.10);
color:#098;
transition: .8s linear 0s;
}

kisha ongeza hiki kwenye section > #container > #works > #main{}

text-align:center; ilikuiweka button ikae kati.

kisha fungua faili lako la media.css na uandike haya.
baaday ya header > #main > #controlls > div{} ndani ya @media only screen and (max-width:480px){}

#shadow > h1{
font-size: 10vw;
}

#shadow > .dv{
font-size: 7vw;
}

#shadow > #btn{
margin-left: -30px;
}

section > #container > #works > #main > h3{
font-size: 7.4vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}

section > #container > #works > #main > button{
display: inline;
}

section > #container > #works > #main > #projectHolder > div{
width:100%;
}

section > #container > #works > #main > #projectHolder > div:last-child{
margin: 30px 0 0 0;
display: none;
}

section > #container > #works > #main > #projectHolder > div:nth-child(2){
margin: 30px 0 0 0;
display: none;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi{
height:220px;
}

kama unavyo ona amna kitu kigeni na nazani ushaanza kuelewa nini maana ya media queries kwamba kazi yake kuongeza kama inalazimika au kupuguza kama inalazimika ilikuiweka website ikae vizuri na ionekane vizuri katika vifaa flani .

preview
http://route.epizy.com/frank/

itaendelea .....................

frankgalos · May 5, 2016

Karibuni marafiki, tutaongeza baadhi ya vitu katika mafaili yote matatu.
kwakuanza fungua faili lako la index.html na weka hiki.

baada ya tag ya mwisho ya <div id="seo"><div id="main"> </div></div>

weka hiki

<button id="sbnt">see more <i class="fa fa-arrows-v" aria-hidden="true"></i></button>

Baada ya kufanya hivyo andika haya katika faili la style.css
baadaya section > #container > #services > #main > div > div > #desc > p{}

andika haya

section > #container > #services > #main > button{
padding: 10px 15px 10px 15px;
cursor: pointer;
border-radius: 3px;
border:1px solid rgba(1,1,1,0.20);
color: #f7624b;
background: #fff;
font-size: 18px;
display: none;
}

section > #container > #services > #main > button:hover{
background: #eee;
transition: 0.4s linear 0s;
}

kisha andika haya katika faili lako la media.css.
pia kumbuka bado atujaanza media rule zingine bado tupo kwenye media rule hiii
@media only screen and (max-width:480px){}

kwaiyo ndani ya hiyo media rule baada ya section > #container > #works > #main > #projectHolder > div > #main > #pi{}

andika haya

section > #container > #services > #main > h3{
font-size: 10vw;
}
section > #container > #services > #main > p{
font-size: 6vw;
}

section > #container > #services > #main > div{
width: 100%;
margin-left: 0px;
}

section > #container > #services > #main > div > div > #logo{
width: 128px;
height: 128px;
}

section > #container > #services > #main > div > div > #title > h3{
font-size: 6.6vw;
}

section > #container > #services > #main > div > div > #desc{
font-size: 17px;
margin-left: 5px;
}

section > #container > #services > #main > button{
display: inline;
}
section > #container > #services > #main > div#develop,div#hosting,div#seo{
display: none;
}

kama unavyoona jinsi ilivyo kua raisi kutumia media queries, na najaribu kwenda hatua kwahatua ili nisimchanganye yeyote kwenye hii sehemu.

kwaiyo natumaini mnaelewa

angalia jinsi ilivyo kwa kufata njia nilizo zieleza kwenye sehem iliyopita.

preview

http://route.epizy.com/frank/

itaendelea ......................

frankgalos · May 6, 2016

Karibuni marafiki katika sehemu ya mwisho ya media rule ya max-width:480px,

katika sehemu hii tutaongeza mitindo kwenye faili moja tu la media.css. kwaiyo kwakuanza fungua faili lako la media.css na andika haya. kumbuka tupo ndani ya @media only screen and (max-width:480px){} na kuweza kuangalia fata kanuni hizi

katika windows kwenye mozilla Firefox bonyeza ctrl+shift+m kuweza kuingia kwenye developer tools part ya responsive design na katika Google Chrome bonyeza ctrl+shift+i kwenye keyboard yako na kuingia kwenye developer tools.

hakikisha width inayoonekana kwenye screen haizidi 480px;

Ukishafanya hivyo karibu kuanza.

baada ya section > #container > #services > #main > div#develop,div#hosting,div#seo{ }

section > #container > #about > #main > #mLogo{
width: 155px;
height: 160px;
}

section > #container > #about > #main > h3{
font-size: 32px;
font-family: sans-serif;
text-shadow: none;
margin-top: 30px;
}

section > #container > #about > #main > p{
margin-top: 15px;
}

section > #container > #about > #main > #left{
width: 100%;
}

section > #container > #about > #main > #left > #main{
width: 100%;
}

section > #container > #about > #main > #left > #main > p:first-child{
text-align: left;
padding-bottom: 10px;
font-size: 26px;
}

section > #container > #about > #main > #left > #main > p{
font-size: 18px;
}

section > #container > #about > #main > #right{
width: 100%;
margin-top: 50px;
}

section > #container > #about > #main > #right > #main{
width: 85%;
float: right;
}

section > #container > #contact > #main{
width: 100%;
}

section > #container > #contact > #main > h3{
font-size: 32px;
font-family: sans-serif;
margin-top: 30px;
padding-bottom: 20px;
}

section > #container > #contact > #main > p{
font-size: 19px;
}

section > #container > #contact > #main > #conInfo{
margin-top: 40px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 100%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
font-size: 32px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 95%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
padding-left:50px;padding-right: 50px;
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #right{
width: 97%;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
font-size: 32px;
}

section > #container > div#joindiv > #main{
width: 95%;
}

section > #container > div#joindiv > #main > #left{
width: 100%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 32px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 18px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 18px;
font-family: goergia;
}

section > #container > div#joindiv > #main > #right{
width: 100%;
}

section > #container > div#joindiv > #main > #right form{
width: 95%;
}

Hapo ndo mwisho wa smartphones za android na baadhi za ios lakini kwenye portrait orientation.
kwaiyo sehemu inayofata tutaangalia media rule nyingine ili tukizi maitaji ya kila kifaa.

preview http://route.epizy.com/frank/

itaendelea ...............

frankgalos · May 7, 2016

Karibuni marafiki katika sehemu nyingine ya media queries, katika sehemu hii tutaongeza media rule nyingine kwaajiri ya vifaa kama tablets na iPhones au chochote kinacho fiti hii rule.

kwakuanza fungua faili lako la media .css na adnika haya kabla ya @media only screen and (max-width:480px){}

andika haya.

@media only screen and (max-width:640px) and (orientation:landscape){
header > #main{
width: 100%;
height: 60px;
margin: 0px;
}

header > #main > #logo{
height: 100%;
width: 50px;
margin: 0px 0 0 5px;
}

header > #main > #logo > #main > a{
width: 100%;
height: 100%;
display: inline-block;
}

header > #main > #logo > #main > img{
display: inline-block;
height: 100%;
width: 100%;
}

header > #main > nav{
position: absolute;
width: 60vw;
background: #fff;
height: 100vh;
right: 0;
top: 50px;
display: none;
}

header > #main > nav > ul{
background: rgba(1,1,1,.85);
height: 100vh;
}

header > #main > nav > ul > li{
display: block;
float: none;
text-align: center;
}

header > #main > nav > ul > li:last-child{
float: none;
padding: 10px 25px 10px 25px;
display: inline-block;
margin: 20px 0 0 15vw;
}

header > #main > #controlls{
display: inline-block;
float: right;
width: 45px;
margin: 10px 15px 0 0;
cursor: pointer;
}

header > #main > #controlls:hover > div{
background: rgba(255,255,255,.50);
transition: .7s linear 0s;
}

header > #main > #controlls > div{
background: #fff;
border-radius: 3px;
margin: 3px 0px 0 0;
height: 10px;
}

#shadow > h1{
top: 30vh;
animation:frankg 25s linear infinite 0s;
}

#shadow > .dv{
font-size: 4.5vw;
font-family:frank;
animation:frankger 25s linear infinite 0s;
}

@keyframes frankg{
0% { animation-timing-function: ease-in-out;}
8% { top:48%;color: rgba(255,255,255,0.36);transition: 0.8s all;}
20% { top:48%;color: rgba(247,98,75,0.50);transition: 0.8s all;}
40% { top: 30vh;color: rgba(255,255,255,0.50);}
}
@keyframes frankg{
0% { animation-timing-function: ease-in-out;}
8% { top:48%;color: rgba(255,255,255,0.36);transition: 0.8s all;}
20% { top:48%;color: rgba(247,98,75,0.50);transition: 0.8s all;}
40% { top: 30vh;color: rgba(255,255,255,0.50);}
}

#shadow > #btn{
left: 43vw;
}

section > #container > #works > #main > h3{
font-size: 6vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}

section > #container > #works > #main > button{
display: inline;
}

section > #container > #works > #main > #projectHolder > div{
width:80%;
margin: 0px 0 0 8%;
display: block;
}

section > #container > #works > #main > #projectHolder > div:last-child{
margin: 30px 0 0 0;
display: none;
}

section > #container > #works > #main > #projectHolder > div:nth-child(2){
margin: 30px 0 0 0;
display: none;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi{
height:220px;
}

section > #container > #services > #main > h3{
font-size: 7vw;
}
section > #container > #services > #main > p{
font-size: 4vw;
}

section > #container > #services > #main > div{
width: 100%;
margin-left: 0px;
}

section > #container > #services > #main > div > div > #logo{
width: 128px;
height: 128px;
}

section > #container > #services > #main > div > div > #title > h3{
font-size: 4vw;
}

section > #container > #services > #main > div > div > #desc{
font-size: 19px;
margin-left: 5px;
}

section > #container > #services > #main > button{
display: inline;
}
section > #container > #services > #main > div#develop,div#hosting,div#seo{
display: none;
}

section > #container > #about > #main > #mLogo{
width: 155px;
height: 160px;
}

section > #container > #about > #main > h3{
font-size: 32px;
font-family: sans-serif;
text-shadow: none;
margin-top: 30px;
}

section > #container > #about > #main > p{
margin-top: 15px;
}

section > #container > #about > #main > #left{
width: 100%;
}

section > #container > #about > #main > #left > #main{
width: 95%;
}

section > #container > #about > #main > #left > #main > p:first-child{
text-align: left;
padding-bottom: 10px;
font-size: 26px;
}

section > #container > #about > #main > #left > #main > p{
font-size: 18px;
}

section > #container > #about > #main > #right{
width: 100%;
margin-top: 50px;
}

section > #container > #about > #main > #right > #main{
width: 95%;
float: right;
}

section > #container > #contact > #main{
width: 100%;
}

section > #container > #contact > #main > h3{
font-size: 32px;
font-family: sans-serif;
margin-top: 30px;
padding-bottom: 20px;
}

section > #container > #contact > #main > p{
font-size: 19px;
}

section > #container > #contact > #main > #conInfo{
margin-top: 40px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 100%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
font-size: 32px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 80%;
float: left;
margin-left: 30px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
padding-left:50px;padding-right: 50px;
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #right{
width: 80%;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
font-size: 32px;
}

section > #container > div#joindiv > #main{
width: 95%;
}

section > #container > div#joindiv > #main > #left{
width: 100%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 40px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 24px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 22px;
font-family: goergia;
}

section > #container > div#joindiv > #main > #right{
width: 100%;
}

section > #container > div#joindiv > #main > #right form{
width: 60%;
float: left;
margin-left: 30px;
}

section > #container > div#joindiv > #main > #right form > label{
font-size: 18px;
}
}

ili kuona mabadiliko bonyeza ctrl+shift+m Firefox na hakikisha namba zinazo onekana hazipo 320x480 bali 360x640 napia ni landscape. ili kuweza kuweka landscape kwenye hizo namba bonyeza rotate na utaona mabadiliko.
hivyo hivyo katika chrome ctrl+shift+i na hakisha upo kwenye vifaa kama iPhone 6,plus na bonyeza rotate.kuona mabadiliko

preview http://route.epizy.com/frank/

itaendelea Tar 9/may/16

frankgalos · May 9, 2016

Habari marafiki, karibuni katika muendelezo wa media queries, na sehemu hii intatoa media rule mbili zinazo fanyana ila naamini zinafanya kazi tofauti kila moja .

media rule ya min-width:768px inafanya kazi katika iPad na media rule max-width:768px inafanyakazi kwenye tablets na vifaa vingine vilivyokua landscape na portrait.

kwaiyo kwa kuanza utafungua faili lako la media.css na utandika haya kabla ya media rule ya max-width:640px;

@media only screen and (max-width:768px){
header > #main > nav{
position: absolute;
width: 60vw;
background: #fff;
height: 100vh;
right: 0;
top: 50px;
display: none;
}

header > #main > nav > ul{
background: rgba(1,1,1,.85);
height: 100vh;
}

header > #main > nav > ul > li{
display: block;
float: none;
text-align: center;
}

header > #main > nav > ul > li:last-child{
float: none;
padding: 10px 25px 10px 25px;
display: inline-block;
margin: 20px 0 0 15vw;
}

header > #main > #controlls{
display: inline-block;
float: right;
width: 45px;
margin: 20px 15px 0 0;
cursor: pointer;
}

header > #main > #controlls:hover > div{
background: rgba(255,255,255,.50);
transition: .7s linear 0s;
}

header > #main > #controlls > div{
background: #fff;
border-radius: 3px;
margin: 3px 0px 0 0;
height: 10px;
}

#shadow > h1{
top: 30vh;
animation:frankg 25s linear infinite 0s;
}

#shadow > .dv{
font-size: 4.5vw;
font-family:frank;
animation:frankger 25s linear infinite 0s;
}

@keyframes frank{
0% { animation-timing-function: ease-in-out;}
8% { border-top-color:rgba(247,98,75,1);transition: 1s all;}
20% { border-top-color:rgba(247,98,75,1);transition: 1s all;}
}

@keyframes frankg{
0% { animation-timing-function: ease-in-out;}
8% { top:48%;color: rgba(255,255,255,0.36);transition: 0.8s all;}
20% { top:48%;color: rgba(247,98,75,0.50);transition: 0.8s all;}
40% { top: 30vh;color: rgba(255,255,255,0.50);}
}

@keyframes frankger{
0% { opacity: 1; animation-timing-function: ease-in-out;}
8% { opacity: 1; top:30vh;color: rgba(255,255,255,0.50);transition: 0.8s all;}
20% { opacity: 1; top:30vh;color: rgba(255,255,255,0.50);transition: 0.8s all;}
40% { opacity: 1; top:48%;color: rgba(255,255,255,0.36);}
}

#shadow > #btn{
left: 45vw;
}

section > #container > #works > #main > h3{
font-size: 6vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}

section > #container > #works > #main > button{
display: inline;
}

section > #container > #works > #main > #projectHolder > div{
width:80%;
margin: 0px 0 0 8%;
display: block;
}

section > #container > #works > #main > #projectHolder > div:last-child{
margin: 30px 0 0 0;
display: none;
}

section > #container > #works > #main > #projectHolder > div:nth-child(2){
margin: 30px 0 0 0;
display: none;
}

section > #container > #services > #main > h3{
font-size: 7vw;
}
section > #container > #services > #main > p{
font-size: 3vw;
}

section > #container > #services > #main > div{
width: 100%;
margin-left: 0px;
}

section > #container > #services > #main > div > div > #logo{
width: 128px;
height: 128px;
}

section > #container > #services > #main > div > div > #title > h3{
font-size: 3vw;
}

section > #container > #services > #main > div > div > #desc{
font-size: 19px;
margin-left: 5px;
}

section > #container > #services > #main > div > div > #desc > p{

color: rgba(255,255,255,.80);
}

section > #container > #services > #main > button{
display: inline;
}
section > #container > #services > #main > div#develop,div#hosting,div#seo{
display: none;
}

section > #container > #about > #main > #mLogo{
width: 250px;
height: 250px;
}

section > #container > #about > #main > h3{
font-size: 32px;
text-shadow: none;
margin-top: 30px;
}

section > #container > #about > #main > p{
margin-top: 15px;
}

section > #container > #about > #main > #left{
width: 55%;
}

section > #container > #about > #main > #left > #main{
width: 100%;
}

section > #container > #about > #main > #left > #main > p:first-child{
text-align: left;
padding-bottom: 10px;
font-size: 28px;
font-weight: bolder;
}

section > #container > #about > #main > #left > #main > p{
font-size: 19px;
}

section > #container > #about > #main > #right{
width: 40%;
margin-top: 50px;
}

section > #container > #about > #main > #right > #main{
width: 95%;
float: right;
}

section > #container > #contact > #main{
width: 100%;
}

section > #container > #contact > #main > h3{
font-size: 48px;
font-family: Helvetica;
margin-top: 30px;
padding-bottom: 20px;
}

section > #container > #contact > #main > p{
font-size: 20px;
}

section > #container > #contact > #main > #conInfo{
margin-top: 40px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 55%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
font-size: 32px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 100%;
float: left;
margin-left: 30px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
padding-left:50px;padding-right: 50px;
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #right{
width: 40%;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
font-size: 32px;
}

section > #container > div#joindiv > #main{
width: 95%;
}

section > #container > div#joindiv > #main > #left{
width: 100%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 48px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 24px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 22px;
font-family: goergia;
}

section > #container > div#joindiv > #main > #right{
width: 70%;
float: left;
}

section > #container > div#joindiv > #main > #right form{
width: 80%;
margin-left: 30px;
}

section > #container > div#joindiv > #main > #right form > label{
font-size: 18px;
}
}

@media only screen and (min-width:768px) and (orientation😛ortrait){
header > #main > nav{
position: absolute;
width: 60vw;
background: #fff;
height: 100vh;
right: 0;
top: 50px;
display: none;
}

header > #main > nav > ul{
background: rgba(1,1,1,.85);
height: 100vh;
}

header > #main > nav > ul > li{
display: block;
float: none;
text-align: center;
}

header > #main > nav > ul > li:last-child{
float: none;
padding: 10px 25px 10px 25px;
display: inline-block;
margin: 20px 0 0 15vw;
}

header > #main > #controlls{
display: inline-block;
float: right;
width: 45px;
margin: 20px 15px 0 0;
cursor: pointer;
}

header > #main > #controlls:hover > div{
background: rgba(255,255,255,.50);
transition: .7s linear 0s;
}

header > #main > #controlls > div{
background: #fff;
border-radius: 3px;
margin: 3px 0px 0 0;
height: 10px;
}

#shadow > h1{
top: 30vh;
animation:frankg 25s linear infinite 0s;
}

#shadow > .dv{
font-size: 4.5vw;
font-family:frank;
animation:frankger 25s linear infinite 0s;
}

@keyframes frank{
0% { animation-timing-function: ease-in-out;}
8% { border-top-color:rgba(247,98,75,1);transition: 1s all;}
20% { border-top-color:rgba(247,98,75,1);transition: 1s all;}
}

@keyframes frankg{
0% { animation-timing-function: ease-in-out;}
8% { top:48%;color: rgba(255,255,255,0.36);transition: 0.8s all;}
20% { top:48%;color: rgba(247,98,75,0.50);transition: 0.8s all;}
40% { top: 30vh;color: rgba(255,255,255,0.50);}
}

@keyframes frankger{
0% { opacity: 1; animation-timing-function: ease-in-out;}
8% { opacity: 1; top:30vh;color: rgba(255,255,255,0.50);transition: 0.8s all;}
20% { opacity: 1; top:30vh;color: rgba(255,255,255,0.50);transition: 0.8s all;}
40% { opacity: 1; top:48%;color: rgba(255,255,255,0.36);}
}

#shadow > #btn{
left: 45vw;
}

section > #container > #works > #main > h3{
font-size: 6vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}

section > #container > #works > #main > button{
display: inline;
}

section > #container > #works > #main > #projectHolder > div{
width:80%;
margin: 0px 0 0 8%;
display: block;
}

section > #container > #works > #main > #projectHolder > div:last-child{
margin: 30px 0 0 0;
display: none;
}

section > #container > #works > #main > #projectHolder > div:nth-child(2){
margin: 30px 0 0 0;
display: none;
}

section > #container > #services > #main > h3{
font-size: 7vw;
}
section > #container > #services > #main > p{
font-size: 3vw;
}

section > #container > #services > #main > div{
width: 100%;
margin-left: 0px;
}

section > #container > #services > #main > div > div > #logo{
width: 128px;
height: 128px;
}

section > #container > #services > #main > div > div > #title > h3{
font-size: 3vw;
}

section > #container > #services > #main > div > div > #desc{
font-size: 19px;
margin-left: 5px;
}

section > #container > #services > #main > div > div > #desc > p{

color: rgba(255,255,255,.80);
}

section > #container > #services > #main > button{
display: inline;
}
section > #container > #services > #main > div#develop,div#hosting,div#seo{
display: none;
}

section > #container > #about > #main > #mLogo{
width: 250px;
height: 250px;
}

section > #container > #about > #main > h3{
font-size: 32px;
text-shadow: none;
margin-top: 30px;
}

section > #container > #about > #main > p{
margin-top: 15px;
}

section > #container > #about > #main > #left{
width: 55%;
}

section > #container > #about > #main > #left > #main{
width: 100%;
}

section > #container > #about > #main > #left > #main > p:first-child{
text-align: left;
padding-bottom: 10px;
font-size: 28px;
font-weight: bolder;
}

section > #container > #about > #main > #left > #main > p{
font-size: 19px;
}

section > #container > #about > #main > #right{
width: 40%;
margin-top: 50px;
}

section > #container > #about > #main > #right > #main{
width: 95%;
float: right;
}

section > #container > #contact > #main{
width: 100%;
}

section > #container > #contact > #main > h3{
font-size: 48px;
font-family: Helvetica;
margin-top: 30px;
padding-bottom: 20px;
}

section > #container > #contact > #main > p{
font-size: 20px;
}

section > #container > #contact > #main > #conInfo{
margin-top: 40px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 55%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
font-size: 32px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 100%;
float: left;
margin-left: 30px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
padding-left:50px;padding-right: 50px;
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #right{
width: 40%;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
font-size: 32px;
}

section > #container > div#joindiv > #main{
width: 95%;
}

section > #container > div#joindiv > #main > #left{
width: 100%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 48px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 24px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 22px;
font-family: goergia;
}

section > #container > div#joindiv > #main > #right{
width: 70%;
float: left;
}

section > #container > div#joindiv > #main > #right form{
width: 80%;
margin-left: 30px;
}

section > #container > div#joindiv > #main > #right form > label{
font-size: 18px;
}
}

ukiziangalia mitindo yake yote inafanana ila kuna utofauti kwani moja ni min na nyingine ni max na aziingiliani.

kama kawaida kuweza kungalia mabadiliko tabidi uwekwenye kifaa chenye max-width:768px au chini ya 768px au kwenye tablet ambayo haipo landscape.
kama unatumia browsers kama mimi kanuni unazijua.

preview http://route.epizy.com/frank/

itaendelea .................

frankgalos · May 11, 2016

Habari karibuni katika sehemu nyingine ya media queries katika sehemu hii tutjifunza kuweka media rule kwaajiri ya ipads na vifaa vingine vinvyo ishia hii resolution.

kwaiyo kwakuanza fungua faili lako la media.css na uandike haya kabla ya
@media only screen and (max-width:768px){}

@media only screen and (max-width:1024px) and (orientation:landscape){
header > #main > nav{
width: 65vw;
}

section > #container > #works > #main > h3{
font-size: 6vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}

section > #container > #works > #main > #projectHolder{
width:100%;
}

section > #container > #works > #main > #projectHolder > div{
width:49%;
margin: 0px 0 0 0%;
}

section > #container > #works > #main > #projectHolder > div:nth-child(2){
margin: 0px 0 0 2%;
}

section > #container > #works > #main > #projectHolder > div:last-child{
display: none;
}

section > #container > #works > #main > button{
display: inline;
}

section > #container > #services{
width:100%;
}

section > #container > #services > #main > h3{
font-size: 5vw;
}
section > #container > #services > #main > p{
font-size: 2vw;
}

section > #container > #services > #main > div{
width: 48%;
margin-left: 2%;
}

section > #container > #services > #main > div > div > #logo{
width: 128px;
height: 128px;
}

section > #container > #services > #main > div > div > #title > h3{
font-size: 2.5vw;
font-family:helvetica;
}

section > #container > #services > #main > div > div > #desc{
font-size: 19px;
margin-left: 5px;
}

section > #container > #services > #main > div > div > #desc > p{
color: rgba(255,255,255,.80);
}

section > #container > #services > #main > button{
display: inline;
}
section > #container > #services > #main > div#hosting,div#seo{
display: none;
}

section > #container > #about > #main > #mLogo{
width: 250px;
height: 250px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 55%;
}

section > #container > div#joindiv > #main > #left{
width: 40%;
}

section > #container > div#joindiv > #main > #right{
width: 50%;
}

section > #container > div#joindiv > #main > #right > form{
width:100%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 48px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 24px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 22px;
font-family: goergia;
}

}

Ilikuona mabadiliko unatakiwa kuwa na kifaa chenye resolution hiyo au kama upo local tumia njia zilezile ispokuwa unatakiwa ku rotate landscape na width ambayo inatoa option iyo katika mozilla firefox ni 768px ukirotate ndio inakuwa landscape. katika chrome tabidi uwekwenye ipad landscape na blakberry Playbook nayo iwe landscape.

preview http://route.epizy.com/frank/

itaendelea ..........

frankgalos · May 12, 2016

Habari ? karibuni katika sehemu ya mwisho ya hii project kipengele cha media queries. Media queries imetengenezwa kwaajiri ya kukidhi maitaji ya vifaa katika website husika, na kukidhi maitaiji nimoja ya kusuruhisha matatizo yanayotokana na website katika uoneshwaji kwenye vifaa tofauti tofauti. kwaiyo hii project ilikuwa na matatizo ya kutokukidhi maitaji ya vifaa katika uoneshwaji na kutokana tayari matatizo yake yameisha nipohuru kusema kuwa hapa ndo mwisho wa media queries kwenye hii project. ila sijasema kuwa hakuna resolution nyingine, zipo screen za aina tofauti tofauti mimi katika hii project nime suruhisha matatizo ya screen ndogo kwaiyo ikifika katika screen kubwa kuliko 1920px itakuwa na muonekano tofauti na utaitaji kupunguza baadhi ya upana katika divs mbalimbali.

kwakuanza fungua faili lako la media.css na andika haya kabla ya

@media only screen and (max-width:1024px) and (orientation:landscape){}

andika haya.

@media only screen and (max-width:1280px) and (orientation:landscape){
header > #main > nav{
width: 65vw;
}

#shadow > h1{
font-size: 4vw;
}

#shadow > .dv{
font-size: 4vw;
}

section > #container > #works > #main > h3{
font-size: 4vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}

section > #container > #works > #main > #projectHolder{
width:100%;
}

section > #container > #works > #main > #projectHolder > div{
width:49%;
margin: 0px 0 0 0%;
}

section > #container > #works > #main > #projectHolder > div:nth-child(2){
margin: 0px 0 0 2%;
}

section > #container > #works > #main > #projectHolder > div:last-child{
display: none;
}

section > #container > #works > #main > button{
display: inline;
}

section > #container > #services{
width:100%;
background: #455;
}

section > #container > #services > #main > h3{
font-size: 4vw;
}
section > #container > #services > #main > p{
font-size: 2vw;
}

section > #container > #services > #main > div{
width: 48%;
margin-left: 2%;
}

section > #container > #services > #main > div > div > #logo{
width: 128px;
height: 128px;
}

section > #container > #services > #main > div > div > #title > h3{
font-size: 2.5vw;
font-family:helvetica;
}

section > #container > #services > #main > div > div > #desc{
font-size: 19px;
margin-left: 5px;
}

section > #container > #services > #main > div > div > #desc > p{
color: rgba(255,255,255,.80);
}

section > #container > #services > #main > button{
display: inline;
margin-top: 20px;
}

section > #container > #about > #main > #mLogo{
width: 250px;
height: 250px;
}

section > #container > #services > #main > div#hosting,div#seo{
display: none;
}

section > #container > div#joindiv > #main > #left{
width: 45%;
}

section > #container > div#joindiv > #main > #right{
width: 40%;
}

section > #container > div#joindiv > #main > #right > form{
width:100%;
}
}

Natumaini umejifunza kitu katika media queries 😵😵😵😵😵😵😉😉😉😉😉

preview http://route.epizy.com/frank

kwa wale wanaotaka kujifunza javascript hii ni nafasi yao ya kujitokeza na ku comment ili nijue kama wapo.
Na kwa wale waonaosema kuwa bola tu tuimalize hii project mambo ya javascript watajifunza wenyewe nao nivizuri waka comment.

katika vote ya kusoma javascript naitaji watu watano(5) tu.
katika vote ya kumaliza website naitaji watu kumi(10) tu.

Faida za kuchagua kumaliza website

Utakuwa jifunza jinsi ya ku host website yako na kuweza ku interact nayo ikiwa online
haito chukua mda kama css na html

itaendelea kutokana na mjibu yenu ...................................................🙂🙂🙂🙂🙂

vigor'intent · May 17, 2016

Umefika mbali kweli mkuu hapo sijafika na wewe lakini ......somo lako ni zuri na Lina thamani kubwa sana.
Big up brother mungu akubariki

Agape Kama G · May 23, 2016

javascript iendelee Tafadhali.....

Malungwana · May 23, 2016

frankgalos said:
Je, unapenda kutengeza kitu chako ambacho umekitolea jasho?

Je, unapenda kujifunza technology mbalimbali hususani za kompyuta?

Je, unapenda kujua jinsi website zinavo fanya kazi.Basi hii thread ina kufaa?

Habari marafiki?

Katika hii course ningependa kuelekeza jinsi ya kutengenza website na iliyokua na ubora wa hali ya juu, ambayo inyoweza kuonekana na kila kifaa ikiwemo simu na Kompyuta.

BAADA YA KUJIFUNZA HII TEKNOLOGIA UTA PATA NINI.

1. Baada ya kujifunza hii lugha utakua una uwezo wa kutengeneza page yako amboya una weza kuweka taarifa zako.

2. Utaweza kuweika page au website yako online ili iweze kuonekana na kila mmoja.

3. Utaweza kupata ujuzi wakuandika html na css code.

4. Utaweza kua freelancer wa kudesign pages za aina mbalimbali.

HII COURSE IME MLENGA NANI ?

Hii course ime mlenga mtuambaye ajui chochote kuhu website wala code ila anachojua ni ana kompyuta na ana itumia kwa matumizi ya kawaida tu.

Hii course ime mlenga mtu ambaye anae itaji kujua nini maana ya html na css na nini maana ya website.

VIFAA UNAVO TAKIWA KUWA NAVYO

1. Uwezo wa kutumia kompyuta.

2. Uwe na kompyuta.

3. Uwe na notepad ya kompyuta au notepad++ kwa kudownload.

UTANGULIZI WA HTML.

Nini maana ya HTML ?

HTML ni lugha inayo eleza nyarakaka za mtandao (web documents) au kurasa zinazo patikana mtandaoni (web pages).

· HTML inasimama kama au kirefu chake ni HYPER TEXT MARKUP LANGUGE.

· Nyaraka za HTML zina vitambulisho vya HTML (html tags).

· Kila vitambulisho(tag) vinaeleza nyaraka zilizomo.

Mfano wa html.

<!DOCTYPE html>
<html>
<head>
<title>Ni website yangu ya kwanza</title>
</head>
<body>

<h1>Karibu katika page yangu</h1>
<p>katika page hii nitaeleza kuhusu jinsi ya kutengeneza website</p>

</body>
</html>

MAELEZO YA MFANO.

· !DOCTYPE inaelezea aina ya nyaraka (document) nahiyo ni html.

· Kati ya nakala <html> na </html> inaelezea nyaraka (document) za HTML.

· Kati ya nakala <head> na </head> inaeleza taharifa kuhusu nyaraka (document).

· Kati ya nakara <title> na </title> inaeleza (title) kichwa cha nyaraka(document).

· Kati ya nakala <body> na </body> inaeleza kurasa inayoonekana (visible page).

· Kati ya nakala <h1> na </h1> inaeleza viongozi (heading).

· Kati ya nakala <p> na </p> inaeleza aya (paragraph).

Kutumia maelezo haya browser inaweza kuonesha nyaraka na viongozi (heading) na aya (paragraph).

HTML Tags.

Tags ni vitambulisho.

HTML tags ni maneno (keywords) au (jina la vitambulisho ) tags name lililo zunguukwa na pembe mabano (angle brackets).

<jina la kitambulisho> yaliyomo </jina la kitambulisho>

· HTML tags kwa kawaida zina kuja kwa jozi(pairs) kama <h1> na </h1>.

· Tag ya kwanza kwenye jozi(pair) ni tag ya kuanza nay a pili ni yaku funga.

· Tag yakufunga inaandikwa kama ya kufungua ila ina wekwa alama ya / kabla ya jina la kitambulisho aut tag.

WEB BROWSERS.

Kazi ya web browsers ni kusoma kusoma nyaraka za HTML na kuzionesha.

Browser hai oneshi html tags lakini inazitumia ili kuonesha nyaraka (document).

Mfano hapo juu utaonekana kama hivi.

Karibu katika page yangu

katika page hii nitaeleza kuhusu jinsi ya kutengeneza website

Browser in onesha sehem ya <body></body> tu.

Huitwaji wa <!DOCTYPE>

Huitwaji wa <!DOCTYPE> unasaidia browser kuonesha kurasa za mtandao (Web page) kuonesha sawia.

Kunaaina ya nyaraka mbalimbali mtandaoni.

Kuonesha nyaraka sawia,browser inaitaji kujua aina na version.

Uitwaji wa doctype sio kesi nyeti (case sensitive),kesi zote zina kubalika.

Mfano.

<!DOCTYPE HTML>

<!DOCTYPE html>

<!DOCTYPE Html>

Uitwaji wa kawaida.

HTML 5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Kwenye course hii tutatumia HTML 5.

AINA ZA HTML | HTML VERSIONS

Version

HTML

Year
1991

Version
HTML 2.0
Year
1995

Version
HTML 3.2
Year
1997

Version
HTML 4.01
Year
1999

Version
XHTML
Year
2000

Version
HTML5
Year
2014

Itaendelea ....

Please nipe website yako ili nisome zaidi ,nahisi sitaweza kufalia humu kila utoapo thread

frankgalos · May 27, 2016

Malungwana said:
Please nipe website yako ili nisome zaidi ,nahisi sitaweza kufalia humu kila utoapo thread

nakutumia links za vipindi vyote

frankgalos · May 27, 2016

Agape Kama G said:
javascript iendelee Tafadhali.....

umekuwa wa kwanza ila ntaendelea

frankgalos · May 27, 2016

Habari marafiki kutokana na kukabiriwa na shughuri nyingi wiki hizi sikuweza kuweka updates zozote lakini ile website ambayo ilitakiwa kuwekwa javascript na haikuwekwa kutokana kuna mtu moja tu aliyeitaji muendelezo. Nataka niwa hakikishie ntaendelea na javascript mwezi ujao endapo hizi shughuri zikiisha ila kwa muendelezo wa ile project nisha iwekea javascript kwaiyo kama utaitaji kuwaangalia muendelezo wa project husika tembelea hapa na kisha comment kama unaitaji code au tuendele na javascript ili kila mmoja ajue jinsi ilivyo fanywa.

http://route.epizy.com

Kwa mawasiliano tumia hii no.
0688574446

Asante

frankgalos · Jun 14, 2016

Marekebisho katika index.html, style.css na media query.css

fungua faili lako la index.html futakila kitu na andika hizi taarifa na hakikisha una faili linalo itwa font-awesome.css na pia futa maandishi yaliyo kuwemo humu na uweke maandishi yako.

katika <head> ya nyaraka yako ya html, hivo utaweza kuwa na hizi icons nzuri katika nyaraka zako

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Digital designer & developer in Tanzania">
<meta property="og:title" content="Frank Galos digital designer & developer">
<meta property="og:description" content="Digital designer & developer in Tanzania">
<meta property="og:type" content="website">
<meta property="og:image" content="frank_pic">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="128">
<meta property="og:image:height" content="128">
<meta property="og:site_name" content="http://route.epizy.com">
<meta property="og:url" content="http://route.epizy.com">
<meta itemprop="name" content="Digital designer & developer in Tanzania">
<meta itemprop="description" content="Digital designer & developer in Tanzania">
<meta itemprop="image" content="Digital designer & developer in Tanzania">
<meta name="author" content="Frank Galos">
<title>Frank Galos</title>
<link rel="stylesheet" href="styles">
<link rel="stylesheet" href="reset-styles">
<link rel="stylesheet" href="style/font-awesome.css">
<link rel="stylesheet" href="style/font-awesome.min.css">
<link type="image/png" rel="shortcut icon" href="favicon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body oncontextmenu="return false">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6&appId=1711016305777267";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<header id="header">
<div id="main" class="main">
<div id="logo">
<div id="main">
<a href="index.php" id="lg1"><img src="logo1" alt="logo" /></a>
</div>
</div>
<nav id="nav">
<ul>
<li class="active"><a href="#" onclick="return false" onmousedown="yPosId('works');">HOME</a></li>
<li ><a href="#" onclick="return false" onmousedown="yPosId('works');">PROJECTS</a></li>
<li><a href="#" onclick="return false" onmousedown="yPosId('services');">SERVICES</a></li>
<li><a href="#" onclick="return false" onmousedown="yPosId('about');">ABOUT</a></li>
<li><a href="#" onclick="return false" onmousedown="yPosId('contact');">CONTACT</a></li>
<li id="last"><a href="#" onclick="return false" onmousedown="yPosId('joindiv');">Join me</a></li>
</ul>
</nav>
<div id="controlls">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>

</div>
</header>
<div id="shadow">
<h1 >FRANK GALOS</h1>
<h1 class="dv">WEB DEVELOPER <b style="font-family:Tahoma">&</b> WEB DESIGNER</h1>
<div id="btn" onmousedown="yPosId('works');"></div>
</div>
<img src="frank_picture" id="final">
<section>
<div id="container">
<div id="works">
<div id="main">
<h3><i class="fa fa-hand-o-down" aria-hidden="true"></i> MY HANDS WORKS <i class="fa fa-hand-o-down" aria-hidden="true"></i></h3>
<div id="projectHolder">
<div id="w3">
<div id='main'>
<div id="pi">
<img src="shine" alt="shine24 logo" id="shine" >
</div>
<div id="link">
<a href="shine24" title="Go to the site" >shine24</a>
<p>shine24 it's a web blog application for news about sports, entertainment, politics and latest hits of celebrities.part of route</p>
</div>
</div>
</div>
<div id="w1"><div id="main"><div id="pi"><img src="route" alt="route logo" id="r" ></div><div id="link"><a href="#" title="Go to the site">ROUTE</a><p>route it's a standalone web application which manages and monitor other websites that are connected to it.</p></div></div></div>
<div id="w2"><div id="main"><div id="pi"><img src="oyah" alt="oya logo" id='o' ></div><div id="link"><a href="#" title="Go to the site">Oyah!</a><p>Oyah! it's a social media application which intended for learning purpose only.</p></div></div></div>
</div>
</div>
</div>
<div id="services">
<div id="main">
<h3>WHAT CAN I DO ?</h3>
<p>I can be your history changer.</p>
<div id="content">
<div id='se'>
<div id="see">
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i> PSD DESIGN</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Ai DESIGN</li>
</ul>
<div></div>
</div>
<i class="material-icons"></i>
<h3>DESIGN</h3>
<div id='shdow'></div>
</div>
<div id="se">
<div id="see">
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i> Applications</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Themes</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Hosting</li>
</ul>
<div></div>
</div>
<i class="material-icons"></i>
<h3>DEVELOPMENT</h3>
<div id='shdow'></div>
</div>

<div id="se">
<div id="see">
<ul>
<li><i class="fa fa-check" aria-hidden="true"></i> Site</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Keywords</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Analysis</li>
</ul>
<div></div>
</div>
<i class="material-icons"></i>
<h3>SEO</h3>
<div id='shdow'></div>
</div>
<div id="se">
<i class="material-icons"><i class="fa fa-comments-o" aria-hidden="true"></i></i>
<h3><i class="fa fa-check" aria-hidden="true"></i> SOCIAL MARKETING</h3>
<div id='shdow'></div>
</div>
</div>
</div>
</div>
<div id="about">
<div id="main">
<div id="mLogo"><img src="frank_pic"></div>
<h3>ABOUT ME</h3>
<p>Who i am and what i do</p>
<div id="left">
<div id="main">
<p >I'm Frank Galos,I design and develop digital things.</p>
<p>Visual communication is my main goal. I typically design in
Illustrator and develop in-browser with hand-coded HTML ,CSS even JAVASCRIPT and it's libraries if neccesary and PHP & MYSQL, creating
relevant, functional and efficient websites.
</p>
<p>
With over three years of professional
experience, I'm well-versed in
producing websites which satisfy
clients and keep users smile.
</p>
</div>
</div>
<div id="right">
<div id="main">
<h2>My Skills</h2>
<ul>
<li>Responsive Web Design</li>
<li>HTML5 & CSS3</li>
<li>
JAVASCRIPT &
<ul>
<li>Ajax</li>
<li>Jquery</li>
</ul>
</li>
<li>PHP & MYSQLi</li>
<li>Memcached</li>
</ul>
<div id="req">
<p><a href="cv">Request CV</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div id="main">
<h3>CONTACT ME</h3>
<p id="p">When you need me, I'm right here.</p>
<p>Stop by or just call me.</p>
<div id="conInfo">
<div id="left">
<div id="main">
<form id="myMessageForm" onSubmit="return false" autoComplete="off">
<h3>Chat with me<span><i class="fa fa-commenting" aria-hidden="true"></i></span></h3>
<label>Name:</label>
<input id="name" type="text" placeholder="Your name">
<label>Email:</label>
<input id="name" type="email" placeholder="Your Email address">
<label>Message:</label>
<textarea id="message" placeholder="Your Message..."></textarea>
<button id="submit">send</button>
</form>
</div>
</div>
<div id="right">
<div id="main">
<ul>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i><span>+255 685-744-46</span></li>
<li><i class="fa fa-globe" aria-hidden="true"></i><span>coming soon</span></li>
<li><i class="fa fa-paper-plane-o" aria-hidden="true"></i><span>frankslayer1@gmail.com</span></li>
</ul>
<div id="social">
<p>Follow me:</p>
<ul>
<li><a href="Frank Gerald | Facebook"><i class="fa fa-facebook" aria-hidden="true" title="follow me on facebook"></i></a></li>
<li><a href="https://www.instagram.com/r0ute/"><i class="fa fa-instagram" aria-hidden="true" title="follow me on instagram"></i></a></li>
<li><a href="Route Frank - Google+"><i class="fa fa-google-plus" aria-hidden="true" title="be my circle on google"></i></a></li>
<li><a href="route (@R_0UTE) | Twitter"><i class="fa fa-twitter" aria-hidden="true" title="follow me on twitter"></i></a></li>
<li><a href="https://www.linkedin.com/in/r0ute"><i class="fa fa-linkedin" aria-hidden="true" title="link me to your account"></i></a></li>
</ul>
</div>

<div class="fb-like" data-href="http://route.epizy.com/frank/" data-width="32" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>
<a class="twitter-timeline" data-dnt="true" href="route (@R_0UTE) | Twitter" data-widget-id="726501673926049792" data-chrome="noscrollbar-nofooter" width="300" height="250"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>
</div>
</div>
</div>
</div>
<div id="joindiv">
<div id="main">
<div id="left">
<h2>JOIN ME <b id="forAnimation">NOW</b></h2>
<h3>Join me to make world a better place</h3>
<p>For us all.</p>
<p>Let code together for a while shall we ?.</p>
</div>
<div id="right">
<form id="jForm" onsubmit="return false" autocomplete="off">
<label>Username:</label>
<input type="text" id="uname" placeholder="Username">
<label>First name:</label>
<input type="text" id="fname" placeholder="Your real name">
<label>Last name:</label>
<input type="text" id="lname" placeholder=" A real name">
<label>Email:</label>
<input type="email" id="em" placeholder="Email Address">
<label>Password:</label>
<input type="password" id="passi" placeholder="Password">
<label>Password Again:</label>
<input type="password" id="pass1" placeholder="Confirmation Password">
<div id="statuss"></div>
<button id="joinf" onclick="registration();">JOIN ME</button>
<button id="members">members</button>
</form>
</div>
</div>
</div>
<footer>
<div id="main">
<div>
<h2>Services & Consultation</h2>
<p style="font-size: 15px;color: rgba(255,255,255,.70);margin: 10px 0 0 0">I can be hired as an independent contractor to perform web development and design services. I can also be hired to privately consult with individuals looking for 1-on-1 help, advice and guidance.</p>
<div id="logoHolder"><img src="goldlaugh" alt="goldlaugh"><img src="gold" alt="goldlaugh"></div>
</div>
<h3><b style="color:#ffffff;">My title © <b id="date"></b> </b></h3>
</div>
</footer>
</div>
</section>
</body>
</html>

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>

fungua faili lako la style.css futa style zote na andika hizi

*{
margin:0px;
padding:0px;
}
body {
margin:0px;
padding:0px;
background:#000;
-moz-user-select:none;
-webkit-user-select:none;
-o-user-select:none;
user-select:none;
overflow:hidden;
}
body:hover{
overflow-y:auto;
}

::-webkit-scrollbar {
display: none;
}

::-o-scrollbar {
display: none;
}

@font-face{
font-family:frank;
src:url(maiden.TTF);
}

header{
margin: 0px;
padding: 0px;
width: 100%;
height:100px;
z-index: 100;
position: fixed;
transition: .5s linear 0s;
}

header > #main{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display:inline-block;
}

header > #main > #logo{
float: left;
margin: 0px 0 0 4vw;
padding: 0px;
width: 35px;
height: 100%;
}

header > #main > #logo > #main{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: inline-block;
border-bottom:1px solid rgba(248,98,75,1);
}

header > #main > #logo > #main > a{
margin: 0px;
padding: 0px;
text-decoration: none;
width: 100%;
height: 100%;
display: inline-block;
}

header > #main > #logo > #main > a > img{
width: 100%;
height: 100%;
display: inline-block;
margin: 0px;
border-radius: 5px;
padding: 0px;
cursor: pointer;
}

header > #main > #logo > #main > a > img:hover{
opacity:0.7;
transition😱pacity 0.6s linear 0s;
}

header > #main > nav{
width: 60%;
height: 100%;
margin: 10px 0 0 0%;
padding: 0px;
float: right;
}

header > #main > nav > ul{
margin: 0px;
padding: 0px;
}

header > #main > nav > ul > li{
float: left;
margin: 20px 0 0 0%;
padding: 0px 15px 5px 15px;
cursor: pointer;
list-style: none;
font-family:Lucida Fax;
font-size:18px;
}

header > #main > nav > ul > li:last-child{
margin:5px 30px 0 0;
float:right;
background:rgba(247,98,75,0.90);
padding: 15px 10px 15px 10px;
border-radius:3px;
animation: frank2 7s linear infinite 0s;
}

@keyframes frank2{
5%{background:rgba(248,98,75,0.30);transition:0,5s linear 0s;}
20%{background:rgba(248,98,75,0.60);transition:0,5s linear 0s;}
50%{background:rgba(248,98,75,1);transition:0,5s linear 0s;}
}

header > #main > nav > ul > li:last-child:hover{
border:none;
background:rgba(247,98,75,0.70);
transition:0.5s linear 0s;
}

header > #main > nav > ul > li.active{
border-bottom: 2px solid rgba(248,98,75,0.90);
}

header > #main > nav > ul > li > a{
margin: 0px;
padding: 0px;
text-decoration: none;
color: #fff;
}

header > #main > nav > ul > li > a:hover{
color:rgba(248,98,75,0.90);
transition:0.5s linear 0s;
}

header > #main > nav > ul > li:hover{
border-bottom: 2px solid rgba(248,98,75,0.90);
transition:border-bottom-color 0.4s linear 0s,color 0.3s linear 0s;
}

header > #main > #controlls{
display: none;
float: right;
margin: 10px 20px 0 0;
cursor: pointer;

}

header > #main > #controlls:hover > div{
background: rgba(248,255,255,.60);
transition: .7s linear 0s;
}

header > #main > #controlls > div{
background: #fff;
border-radius: 2px;
margin: 3px 0px 0 0;
height: 4px;
width: 45px;
}

header > #main > #controlls > div.one{
width:70px;
}

header > #main > #controlls > div.two{
width:60px;
margin-left: 10px;
}

header > #main > #controlls > div.three{
margin-left:25px;
}
header > #main > #controlls > div.four{
margin-left:40px;
width: 30px;
}

#final{
width:100vw;
height:100vh;
margin:0px;
transition: opacity .5s linear 0s;
position:relative;
z-index:-1;
}

#shadow{
width:100vw;
height:100.4vh;
margin:0px;
position:absolute;
z-index:1;
background:rgba(1,1,1,0.45);
text-align: center;
}

#shadow > h1{
position: fixed;
width: 100%;
top: 36vh;
color: rgba(255,255,255,0.50);
font-size: 5vw;
font-family:frank;
animation:frankg 25s linear infinite 0s;
}

#shadow > .dv{
font-size: 4vw;
top: 48%;
color: rgba(247,98,75,0.50);
font-family:frank;
animation:frankger 25s linear infinite 0s;
}

#shadow > #btn{
width: 0px;
height: 0px;
position: fixed;
bottom: 0;
left: 48vw;
border-bottom: 10px solid transparent;
border-top: 40px solid rgba(255,255,255,0.88);
border-left: 40px solid transparent;
border-right: 40px solid transparent;
animation:frank 7s linear infinite 0s;
cursor: pointer;
}

@keyframes frank{
0% { animation-timing-function: ease-in-out;}
8% { border-top-color:rgba(247,98,75,1);transition: 1s all;}
20% { border-top-color:rgba(247,98,75,1);transition: 1s all;}
}

@keyframes frankg{
0% { animation-timing-function: ease-in-out;}
8% { top:48%;color: rgba(255,255,255,0.36);transition: 0.8s all;}
20% { top:48%;color: rgba(247,98,75,0.50);transition: 0.8s all;}
40% { top: 36%;color: rgba(255,255,255,0.50);}
}

@keyframes frankger{
0% { opacity: 1; animation-timing-function: ease-in-out;}
8% { opacity: 1; top:36%;color: rgba(255,255,255,0.50);transition: 0.8s all;}
20% { opacity: 1; top:36%;color: rgba(255,255,255,0.50);transition: 0.8s all;}
40% { opacity: 1; top:48%;color: rgba(255,255,255,0.36);}
}

section{
margin: 0px;
padding: 0px;
background: #fff;
width:100vw;
z-index: 10;
position: absolute;
height:auto;
overflow:hidden;
}

section > #container{
width: 100%;
margin: 0px;
height: auto;
padding: 0px;
}

section > #container > #works{
width: 100%;
height:auto;
margin: 0px;
padding: 0px 0 5px 0;
display:inline-block;
}

section > #container > #works > #main{
width: 95vw;
height: auto;
margin:0px auto;
text-align: center;
}

section > #container > #works > #main > h3{
text-align: center;
margin: 7vh 0 0 0;
padding: 10px 0px 40px 0;
width: 100%;
font-family: cursive, sans-serif;
color: rgba(248,98,75,1);
font-size: 2.5vw;
font-weight: bolder;
display: inline-block;
text-shadow:0px 3px 0px rgba(1,1,1,0.30);
}

section > #container > #works > #main > #projectHolder{
width:100%;
height:100%;
margin: 2% 0 auto;
padding: 0px;
display:inline-block;
font-family: georgia,sans-serif;
}

section > #container > #works > #main > #projectHolder > div{
width: 32%;
height: auto;
float: left;
margin: 0px 0 0 20px;
padding: 0px;
border-radius:3px;
box-shadow:0px 0px 2px 1px rgba(1,1,1,0.20);
}

section > #container > #works > #main > #projectHolder > div:first-child{
margin: 0px;
}

section > #container > #works > #main > #projectHolder > div > #main{
margin: 0px;
padding: 0px;
width: 100%;
display: inline-block;
height:100%;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi{
width:100%;
height: 300px;
margin: 0px;
padding: 0px;
border-top-left-radius:3px;
border-top-right-radius:3px;
display: inline-block;
background:#eee;
overflow: hidden;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi > img{
width: 100%;
height: 100%;
margin: 0px;
display: inline-block;
padding: 0px;
transition: 1.5s linear 0s;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi > img:hover{
cursor: pointer;
padding:60px 0 0 104px;
transform: scale(1.5);
}

section > #container > #works > #main > #projectHolder > div > #main > #link{
width:100%;
height: auto;
margin: 0px;
padding: 10px 0px 20px 0px;
display: inline-block;
text-align: center;
}

section > #container > #works > #main > #projectHolder > div > #main > #link > a{
margin: 0px 0 5px 0;
text-decoration: none;
padding: 0px;
color: #f7624b;
font-weight: bolder;
font-size: 22px;
display: inline-block;
}

section > #container > #works > #main > #projectHolder > div > #main > #link > a:hover{
color: #ffa311;
text-decoration: underline;
}

section > #container > #works > #main > #projectHolder > div > #main > #link > p{
padding:10px 2px 5px 2px;
color:rgba(1,1,1,0.60);
}

section > #container > #services{
width: 100%;
margin: 12vh 0 0 0;
padding: 0px;
float: left;
background:#434b55;
background:linear-gradient(#434b55,#434b55);
}

section > #container > #services > #main{
width:95%;
height: 100%;
margin: 0px auto auto auto;
padding: 0px;
text-align: center;
font-family: monospace,sans-serif;

}

section > #container > #services > #main > h3{
text-align: center;
margin: 0px 0 0 0;
padding: 50px 0 20px 0;
width: 100%;
font-size: 3vw;
color: #fff;
text-shadow: 0px 3px 0px rgba(1,1,1,0.20);
}

section > #container > #services > #main > p{
color: #fff;
padding: 0 0 30px 0;
font-size: 1.4vw;
}

section > #container > #services > #main > div{
display: inline-block;
text-align: center;
width: auto;
height: 100%;
color: rgba(255,255,255,.7);
margin-top: 50px;
padding-bottom: 100px;
}

section > #container > #services > #main > div > div{
float: left;
margin-left: 70px;
font-family: helvetica;
cursor: pointer;
}

section > #container > #services > #main > div > div > div#see{
position: absolute;
display: inline-block;
margin: -140px 0px 0 0px ;
width: 130px;
height: auto;
color: rgba(1,1,1,.5);
border-radius: 2px;
text-align: center;
opacity: 0;
}

section > #container > #services > #main > div > div > div#see > div{
width: 0px;
height: 0px;
padding: 0px;
margin: 0px 0 0 5px;
border-bottom: 15px solid transparent;
border-top: 16px solid #ddd;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}

section > #container > #services > #main > div > div > div#see > ul{
width: 100%;
height: 100%;
margin: 0px;
list-style: none;
background: #ddd;
padding: 10px 10px 20px 10px;
}

section > #container > #services > #main > div > div > div#see > ul > li{
text-align: left;
font-size: 16px;
font-family: Tahoma;
margin: 10px 0 0 0;
}

section > #container > #services > #main > div > div > i{
font-size: 52px;
padding-bottom:16px;
color: #099;
}

section > #container > #services > #main > div > div > h3{
font-family: cursive;
font-weight: normal;
}

section > #container > #services > #main > div > div > div#shdow{
width: 100%;
height: auto;
margin: 7px 0 0 0;
padding: 10px;
background: radial-gradient( rgba(68,65,65,.6),rgba(1,1,1,.1));
border-radius: 50%;
opacity: 0;
}

section > #container > #services > #main > div > div:hover > div#shdow{
opacity: 1;
transition: .7s linear 0s;
}

section > #container > #services > #main > div > div:hover > i{
color: rgba(248,98,75,.5);
transition: .7s linear 0s;
}

section > #container > #services > #main > div > div:hover > h3{
color: rgba(255,255,255,.9);
transition: .7s linear 0s;
}

section > #container > #services > #main > div > div:hover > div#see{
opacity: 1;
transition: .7s linear 0s;
}

section > #container > #about{
width: 100%;
height: auto;
margin: 12vh 0 0 0;
padding: 0px 0 50px 0;
float: left;
}

section > #container > #about > #main{
width: 95%;
height: 100%;
margin: 0px auto ;
padding: 10px 0 0 0;
background: rgba(1,1,1,0.10);
cursor: default;
}

section > #container > #about > #main > #mLogo{
width: 20vw;
height: 35vh;
background: #eee;
margin: 0px auto;
padding: 0px 0 0 0;
border-radius: 50%;
}

section > #container > #about > #main > #mLogo > img{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: inline-block;
border-radius: 50%;
}

section > #container > #about > #main > h3{
text-align: center;
margin: 4% 0 0 0;
padding: 0px;
font-size: 4vw;
color: rgba(248,98,75,0.80);
font-family: frank;
text-shadow: 0px 3px 0px rgba(248,98,75,0.40);
font-weight: bolder;
}

section > #container > #about > #main > p{
margin: 10px 0 0 0;
text-align: center;
padding: 0px 0 10px 0;
color: rgba(1,1,1,0.30);
font-family: monospace,sans-serif;
font-weight: bold;
font-size: 20px;
word-spacing: 3px;
}

section > #container > #about > #main > #left{
float: left;
margin: 6% 0 0 0;
padding: 0px;
width: 55%;
height: auto;
color: rgba(0,0,0,0.45);
}

section > #container > #about > #main > #left > #main{
padding: 0px;
margin: 0px auto;
float: right;
width: 90%;
height: 100%;
}

section > #container > #about > #main > #left > #main > p:first-child{
margin: 0px;
padding: 0px;
text-align: center;
font-size: 27px;
color: rgba(248,98,75,0.70);
font-family: helvetica,sans-serif;
}

section > #container > #about > #main > #left > #main > p{
margin: 2% 0 0 0;
padding: 0px;
font-family: georgia,sans-serif;
font-weight: normal ;
font-size: 20px;
}

section > #container > #about > #main > #left > #main > p:last-child{
margin: 5% 0 0 0;
padding: 0px;
}

section > #container > #about > #main > #right{
float: right;
margin: 6% 0 0 0;
padding: 0px;
width: 30%;
height: auto;
}

section > #container > #about > #main > #right > #main{
display: inline-block;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}

section > #container > #about > #main > #right > #main > h2{
margin: 0px;
padding: 0px;
text-align: left;
font-family: frank,sans-serif;
font-weight: bold ;
font-size: 30px;
text-shadow: 0px 1px 0px rgba(1,1,1,0.20);
color: rgba(248,98,75,0.80);
}

section > #container > #about > #main > #right > #main > ul{
margin: 2% 0 0 2.7%;
padding: 0px;
}

section > #container > #about > #main > #right > #main > ul > li{
padding: 0px 0 0 0;
font-size: 19px;
margin: 5px 0 0 0;
list-style-type: circle;
color: rgba(0,0,0,0.50);
}

section > #container > #about > #main > #right > #main > ul > li > a{
margin: 0px;
padding: 0px;
display: block;
text-decoration: none;
}

section > #container > #about > #main > #right > #main > ul > li > ul{
margin: 2% 0 0 10%;
padding: 10px 0 15px 0;
}

section > #container > #about > #main > #right > #main > ul > li > ul > li{
color: rgba(248,98,75,0.90);
margin: 7px 0 0 0;
}

section > #container > #about > #main > #right > #main > #req{
margin: 40px auto;
padding: 15px;
display: inline-block;
border-radius: 3px;
cursor: pointer;
border: 1px solid rgba(248,98,75,0.60);
background: rgba(248,98,75,0.60);
text-align: center;
animation: frank2 7s infinite linear 0s;
}

section > #container > #about > #main > #right > #main > #req:hover{
background: rgba(248,98,75,10);
transition:background 0.8s linear;
color: #fff;
}

section > #container > #about > #main > #right > #main > #req > p{
margin:0;
display: block;
padding: 0px;
font-size: 24px;
}

section > #container > #about > #main > #right > #main > #req > p > a{
margin: 0px;
padding: 0px;
color: #fff;
text-decoration: none;
}

section > #container > #contact{
width: 100%;
height: auto;
margin: 0px;
padding: 0px 0 100px 0;
background: rgba(1,0,1,0.85);
float: left;
cursor: default;
}

section > #container > #contact > #main{
width: 80%;
height: 100%;
margin: 0px auto;
padding: 0px;
color: #fff;
}

section > #container > #contact > #main > h3{
text-align: center;
margin: 3% 0 0 0;
padding: 0px;
font-size: 3vw;
color: rgba(255,255,255,0.70);
font-family: frank;

}
section > #container > #contact > #main > p{
margin: 0 0 0 0;
text-align: center;
font-family: georgia,sans-serif;
font-size: 22px;
color: rgba(255,266,255,0.68);
}

section > #container > #contact > #main > #p{
margin: 2% 0 0 0;
text-align: center;
}

section > #container > #contact > #main > #conInfo{
width: 100%;
height: 100%;
margin: 3% 0 0 0;
padding: 0px;
}

section > #container > #contact > #main > #conInfo > #left{
margin: 0px;
padding: 0px;
width: 50%;
height: auto;
float: left;
}

section > #container > #contact > #main > #conInfo > #left > #main{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: inline-block;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 90%;
height: 100%;
margin: 0px;
padding: 0px;
float: right;
font-size: 14px;
text-align: center;
}

section > #container > #contact > #main > #conInfo >#left > #main > form > h3{
margin: 0px;
padding: 0px;
display: block;
color: #ddd;
font-size: 22px;
text-shadow: 0px 3px 2px rgba(248,98,75,0.20);
text-align: left;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
display: inline-block;
font-size: 2.5vw;
position: absolute;
color:rgba(248,98,75,10);
margin: 0px 0px 0px 20px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > label{
margin: 3% 0 0 2px;
display: inline-block;
font-weight: bold;
font-size: 17px;
color:rgba(255,255,255,0.70);
font-family: georgia,sans-serif;
width: 100%;
text-align: left;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > input,textarea{
display: block;
margin: 4px 0 0 0;
background: rgba(0,0,0,0.30);
color: #ddd;
border: 2px solid rgba(255,255,255,0.10);
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > input:focus,textarea:focus{
border-color:rgba(255,255,255,0.17);
color: rgba(248,98,75,0.70);
background: rgba(0,0,0,0.40);
transition: .5s linear 0s;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > input{
width: 80%;
border-radius: 5px;
padding: 9px 0px 9px 5px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > textarea{
width: 95%;
border-radius: 5px;
height: 200px;
resize: none;
padding: 5px 0 0 1%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
margin: 5% auto;
padding: 10px 30px 10px 30px;
border-radius: 3px;
font-size: 22px;
color: #fff;
border: none;
background: rgba(248,98,75,0.70);
cursor: pointer;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button:hover{
background: rgba(248,98,75,0.50);
color: rgba(255,255,255,0.50);
transition: .5s linear 0s;
}

section > #container > #contact > #main > #conInfo > #right{
margin: 0px;
padding: 0px;
width: 40%;
height: auto;
float: right;
}

section > #container > #contact > #main > #conInfo > #right > #main{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: inline-block;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul{
margin: 5% 0 0 15px;
padding: 0px;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
display: block;
margin: 10px 0 0 0;
padding: 0px;
list-style: none;
color: #f7624b;
font-size: 1.7vw;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li > span{
height: auto;
margin: 5px 0 0 30px;
padding: 0px;
font-size: 20px;
position:absolute;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social{
margin: 50px 0 0 0;
width: 100%;
display: inline-block;
padding: 0px;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > p{
font-size: 22px;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul{
margin: 15px 0 0 0;
padding: 0px;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul > li{
margin: 0px 0 0 20px;
padding: 0px;
list-style: none;
float: left;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul > li:first-child{
margin: 0px;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul > li > a {
margin: 0px;
padding: 0px;
text-decoration: none;
color:rgba(248,98,75,1);
font-weight: bolder;
font-size: 32px;
display: inline-block;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul > li > a:hover{
color:rgba(248,98,75,0.50);
transform:rotateY(180deg);
transition: 0.6s linear 0s;
}

section > #container > #contact > #main > #conInfo > #right > #main > .fb-like{
color: #fff;
margin: 20px 0 0 0;
width:100%;
padding: 0 0 20px 0;
}

section > #container > div#joindiv{
margin: 0px 0 70px 0 ;
padding: 0px 0 250px 0;
width: 100%;
height:auto;
background: url(backpic) no-repeat center fixed;
background-size: cover;
float: left;
}
section > #container > div#joindiv > #main{
margin: 0px auto;
padding: 0px;
width: 80%;
height: 100%;
text-align: center;
}

section > #container > div#joindiv > #main > #left{
width: 53%;
height: 100%;
margin: 0px;
padding: 0px;
float: left;
font-family: monospace;,sans-serif;
font-style: bold;
color: #fff;
}

section > #container > div#joindiv> #main > #left > h2{
margin: 7vh 0 0 0%;
font-size: 3.5vw;
padding: 0px;
color: #f7624b;
}

section > #container > div#joindiv> #main > #left > h2 > #forAnimation{
animation: frank1 5s infinite linear 0s;
color: #fff;
}

@keyframes frank1{
5%{color:rgba(248,98,75,0.30);transition:0,5s linear 0s;}
20%{color:rgba(248,98,75,0.60);transition:0,5s linear 0s;}
50%{color:rgba(248,98,75,1);transition:0,5s linear 0s;}
60%{color:rgba(255,255,255,1);transition:0,5s linear 0s;}
}

section > #container > div#joindiv> #main > #left > h3{
margin: 3% 0 0 0;
font-size: 1.7vw;
padding: 0px;
}

section > #container > div#joindiv > #main > #left > p{
color:rgba(248,98,75,1);
font-size: 1.5vw;
font-family: cursive;
font-weight: bolder;
}

section > #container > div#joindiv > #main > #left > p:last-child{
color:#fff;
}

section > #container > div#joindiv > #main > #right{
width: 40%;
height: 100%;
margin: 0px 0 90px 0;
padding: 0px;
float: right;
text-align: left;
}

section > #container > div#joindiv > #main > #right form{
width: 70%;
margin: 10% 0 0 0 ;
padding: 0px 0 70px 0;
float: right;
font-family:cursive,sans-serif;
}

section > #container > div#joindiv > #main > #right > form > label{
margin: 15px 0 0 0;
padding: 0px;
display: block;
font-size: 24px;
color: #fff;
}

input,textarea{
outline: none;
}

section > #container > div#joindiv > #main > #right > form > input{
display: block;
width: 80%;
border: 1px solid gray;
background: transparent;
color: #fff;
border-radius: 5px;
padding: 10px;
margin: 4px 0 0 0;
font-size: 17px;
}

section > #container > div#joindiv > #main > #right > form > input:focus{
border-color: #098;
color: #098;
transition: .5s linear 0s;
}

section > #container > div#joindiv > #main > #right > form > button{
margin: 8% auto;
display: block;
background: rgba(248,98,75,1);
color: #fff;
font-size: 19px;
border-radius: 3px;
border: none;
padding: 10px 15px 10px 15px;
}

section > #container > div#joindiv > #main > #right > form > button:last-child{
float: right;
background: #098;
}

section > #container > div#joindiv > #main > #right > form > button:hover{
background: rgba(248,98,75,.60);
cursor: pointer;
transition:0.8s linear;
}

footer{
width: 100%;
height:auto;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0;
float: left;
z-index: 15;
background: #fff;

}
footer > #main{
width: 100%;
height: 100%;
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
color: rgba(248,98,75,1);
font-family:Tahoma;
background: rgba(1,0,1,0.87);
}

footer > #main > div{
width: 50%;
margin: 30px auto 0 auto;
color: #fff;
padding-bottom: 50px;
}

footer > #main > h3{
margin: 1.5% 0 0 0;
font-size: 22px;
padding: 0px;
display: inline-block;
cursor: default;
text-shadow: 0px 2px 2px rgba(248,98,75,.5);
}

footer > #main > p{
margin:0px;
color: #ddd;
font-size: 19px;
display: block;
padding: 0 0 10px 0;
}

footer > #main > div > #logoHolder{
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
display: inline-block;
text-align: center;
}

footer > #main > div > #logoHolder > img{
width: 180px;
height: 120px;
margin: 60px 0 0px 60px;
padding: 0px;
display: inline-block;
}

fungua faili lako la media.css na futa kila kitu kisha weka haya

@media only screen and (max-width:1280px) and (orientation:landscape){

section > #container > div#joindiv > #main > #left{
width: 45%;
}

section > #container > div#joindiv > #main > #right{
width: 40%;
}

section > #container > div#joindiv > #main > #right > form{
width:100%;
}
}

@media only screen and (max-width:1024px) and (orientation:landscape){
header > #main > nav{
display: inline-block;
width: 80vw;
}

header > #main > nav > ul{
background: rgba(1,1,1,.85);
}

header > #main > nav > ul > li{
float: left;
font-size: 14px;
padding: 0px 15px 5px 10px;
}

header > #main > nav > ul > li:last-child{
float: right;
}

header > #main > #controlls{
display: none;
float: right;
width: 45px;
margin: 5px 15px 0 0;
cursor: pointer;
}

#shadow > #btn{
left: 43vw;
}

section > #container > #works > #main > h3{
font-size: 6vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}
section > #container > #works > #main > #projectHolder{
width:100%;
margin: 0px;
}

section > #container > #works > #main > #projectHolder > div{
width:49.1%;
margin: 0px 0 0 10px;
}

section > #container > #works > #main > #projectHolder > div:last-child{
margin-left: 0px;
margin-top: 10px;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi{
height:220px;
}

section > #container > #services{
margin-top: 50px;
}

section > #container > #services > #main > h3{
font-size: 7vw;
}
section > #container > #services > #main > p{
font-size: 4vw;
}

section > #container > #services > #main > div{
width: 98%;
}

section > #container > #services > #main > div > div{
width: 50%;
margin: 40px auto 0 0 ;
}

section > #container > #about > #main > #mLogo{
width: 155px;
height: 160px;
}

section > #container > #about > #main > h3{
font-size: 32px;
font-family: sans-serif;
text-shadow: none;
margin-top: 30px;
}

section > #container > #about > #main > p{
margin-top: 15px;
}

section > #container > #about > #main > #left{
width: 50%;
}

section > #container > #about > #main > #left > #main{
width: 95%;
}

section > #container > #about > #main > #left > #main > p:first-child{
text-align: left;
padding-bottom: 10px;
font-size: 26px;
}

section > #container > #about > #main > #left > #main > p{
font-size: 18px;
}

section > #container > #about > #main > #right{
width: 40%;
}

section > #container > #about > #main > #right > #main{
width: 95%;
float: right;
}

section > #container > #contact > #main{
width: 100%;
}

section > #container > #contact > #main > h3{
font-size: 32px;
font-family: sans-serif;
margin-top: 30px;
padding-bottom: 20px;
}

section > #container > #contact > #main > p{
font-size: 19px;
}

section > #container > #contact > #main > #conInfo{
margin-top: 40px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 60%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
font-size: 32px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 80%;
float: left;
margin-left: 30px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
padding-left:50px;padding-right: 50px;
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #right{
width: 40%;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
font-size: 32px;
}

section > #container > div#joindiv > #main{
width: 95%;
}

section > #container > div#joindiv > #main > #left{
width: 40%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 40px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 24px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 22px;
font-family: goergia;
}

section > #container > div#joindiv > #main > #right{
width: 50%;
}

section > #container > div#joindiv > #main > #right form{
width: 95%;
float: left;
margin-left: 30px;
}

section > #container > div#joindiv > #main > #right form > label{
font-size: 18px;
}

footer > #main > div{
width: 60%;
}

footer > #main > div > #logoHolder{
text-align: left;
}

}

@media only screen and (max-width:768px){
header > #main > nav{
display: inline-block;
width: 80vw;
}

header > #main > nav > ul{
background: rgba(1,1,1,.85);
}

header > #main > nav > ul > li{
float: left;
font-size: 14px;
padding: 0px 15px 5px 10px;
}

header > #main > nav > ul > li:last-child{
float: right;
}

header > #main > #controlls{
display: none;
float: right;
width: 45px;
margin: 5px 15px 0 0;
cursor: pointer;
}

#shadow > #btn{
left: 43vw;
}

section > #container > #works > #main > h3{
font-size: 6vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}
section > #container > #works > #main > #projectHolder{
width:100%;
margin: 0px;
}

section > #container > #works > #main > #projectHolder > div{
width:49.1%;
margin: 0px 0 0 10px;
}

section > #container > #works > #main > #projectHolder > div:last-child{
margin-left: 0px;
margin-top: 10px;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi{
height:220px;
}

section > #container > #services{
margin-top: 50px;
}

section > #container > #services > #main > h3{
font-size: 7vw;
}
section > #container > #services > #main > p{
font-size: 4vw;
}

section > #container > #services > #main > div{
width: 98%;
}

section > #container > #services > #main > div > div{
width: 50%;
margin: 40px auto 0 0 ;
}

section > #container > #about > #main > #mLogo{
width: 155px;
height: 160px;
}

section > #container > #about > #main > h3{
font-size: 32px;
font-family: sans-serif;
text-shadow: none;
margin-top: 30px;
}

section > #container > #about > #main > p{
margin-top: 15px;
}

section > #container > #about > #main > #left{
width: 60%;
}

section > #container > #about > #main > #left > #main{
width: 95%;
}

section > #container > #about > #main > #left > #main > p:first-child{
text-align: left;
padding-bottom: 10px;
font-size: 26px;
}

section > #container > #about > #main > #left > #main > p{
font-size: 18px;
}

section > #container > #about > #main > #right{
width: 30%;
}

section > #container > #about > #main > #right > #main{
width: 95%;
float: right;
}

section > #container > #contact > #main{
width: 100%;
}

section > #container > #contact > #main > h3{
font-size: 32px;
font-family: sans-serif;
margin-top: 30px;
padding-bottom: 20px;
}

section > #container > #contact > #main > p{
font-size: 19px;
}

section > #container > #contact > #main > #conInfo{
margin-top: 40px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 50%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
font-size: 32px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 100%;
float: left;
margin-left: 30px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
padding-left:50px;padding-right: 50px;
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #right{
width: 40%;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
font-size: 32px;
}

section > #container > div#joindiv > #main{
width: 95%;
}

section > #container > div#joindiv > #main > #left{
width: 40%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 30px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 24px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 18px;
font-family: goergia;
}

section > #container > div#joindiv > #main > #right{
width: 60%;
float: right;
}

section > #container > div#joindiv > #main > #right form{
width: 95%;
float: left;
margin-left: 30px;
}

section > #container > div#joindiv > #main > #right form > label{
font-size: 18px;
}

footer > #main > div{
width: 80%;
}

footer > #main > div > #logoHolder{
text-align: left;
}
}

@media only screen and (min-width:768px) and (orientation😛ortrait){
header > #main > nav{
display: inline-block;
width: 80vw;
}

header > #main > nav > ul{
background: rgba(1,1,1,.85);
}

header > #main > nav > ul > li{
float: left;
font-size: 14px;
padding: 0px 15px 5px 10px;
}

header > #main > nav > ul > li:last-child{
float: right;
}

header > #main > #controlls{
display: none;
float: right;
width: 45px;
margin: 5px 15px 0 0;
cursor: pointer;
}

#shadow > #btn{
left: 43vw;
}

section > #container > #works > #main > h3{
font-size: 6vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}
section > #container > #works > #main > #projectHolder{
width:100%;
margin: 0px;
}

section > #container > #works > #main > #projectHolder > div{
width:49.1%;
margin: 0px 0 0 10px;
}

section > #container > #works > #main > #projectHolder > div:last-child{
margin-left: 0px;
margin-top: 10px;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi{
height:220px;
}

section > #container > #services{
margin-top: 50px;
}

section > #container > #services > #main > h3{
font-size: 7vw;
}
section > #container > #services > #main > p{
font-size: 4vw;
}

section > #container > #services > #main > div{
width: 98%;
}

section > #container > #services > #main > div > div{
width: 50%;
margin: 40px auto 0 0 ;
}

section > #container > #about > #main > #mLogo{
width: 155px;
height: 160px;
}

section > #container > #about > #main > h3{
font-size: 32px;
font-family: sans-serif;
text-shadow: none;
margin-top: 30px;
}

section > #container > #about > #main > p{
margin-top: 15px;
}

section > #container > #about > #main > #left{
width: 60%;
}

section > #container > #about > #main > #left > #main{
width: 95%;
}

section > #container > #about > #main > #left > #main > p:first-child{
text-align: left;
padding-bottom: 10px;
font-size: 26px;
}

section > #container > #about > #main > #left > #main > p{
font-size: 18px;
}

section > #container > #about > #main > #right{
width: 30%;
}

section > #container > #about > #main > #right > #main{
width: 95%;
float: right;
}

section > #container > #contact > #main{
width: 100%;
}

section > #container > #contact > #main > h3{
font-size: 32px;
font-family: sans-serif;
margin-top: 30px;
padding-bottom: 20px;
}

section > #container > #contact > #main > p{
font-size: 19px;
}

section > #container > #contact > #main > #conInfo{
margin-top: 40px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 50%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
font-size: 32px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 100%;
float: left;
margin-left: 30px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
padding-left:50px;padding-right: 50px;
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #right{
width: 40%;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
font-size: 32px;
}

section > #container > div#joindiv > #main{
width: 95%;
}

section > #container > div#joindiv > #main > #left{
width: 40%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 30px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 24px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 18px;
font-family: goergia;
}

section > #container > div#joindiv > #main > #right{
width: 60%;
float: right;
}

section > #container > div#joindiv > #main > #right form{
width: 95%;
float: left;
margin-left: 30px;
}

section > #container > div#joindiv > #main > #right form > label{
font-size: 18px;
}

footer > #main > div{
width: 80%;
}

footer > #main > div > #logoHolder{
text-align: left;
}
}

@media only screen and (max-width:640px) and (orientation:landscape){

header > #main > nav{
display: inline-block;
width: 85vw;
}

header > #main > nav > ul{
background: rgba(1,1,1,.85);
}

header > #main > nav > ul > li{
float: left;
font-size: 14px;
padding: 0px 15px 5px 10px;
}

header > #main > nav > ul > li:last-child{
float: right;
}

header > #main > #controlls{
display: none;
float: right;
width: 45px;
margin: 5px 15px 0 0;
cursor: pointer;
}

#shadow > h1{
top: 30vh;
animation:frankg 25s linear infinite 0s;
}

#shadow > .dv{
font-size: 4.5vw;
font-family:frank;
animation:frankger 25s linear infinite 0s;
}

@keyframes frankg{
0% { animation-timing-function: ease-in-out;}
8% { top:48%;color: rgba(255,255,255,0.36);transition: 0.8s all;}
20% { top:48%;color: rgba(247,98,75,0.50);transition: 0.8s all;}
40% { top: 30vh;color: rgba(255,255,255,0.50);}
}
@keyframes frankg{
0% { animation-timing-function: ease-in-out;}
8% { top:48%;color: rgba(255,255,255,0.36);transition: 0.8s all;}
20% { top:48%;color: rgba(247,98,75,0.50);transition: 0.8s all;}
40% { top: 30vh;color: rgba(255,255,255,0.50);}
}

#shadow > #btn{
left: 43vw;
}

section > #container > #works > #main > h3{
font-size: 6vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}

section > #container > #works > #main > #projectHolder{
width:100%;
margin: 0px;
}

section > #container > #works > #main > #projectHolder > div{
width:49.1%;
margin: 0px 0 0 10px;
}

section > #container > #works > #main > #projectHolder > div:nth-child(2){
padding-bottom: 20px;
}

section > #container > #works > #main > #projectHolder > div:last-child{
margin-left: 0px;
margin-top: 10px;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi{
height:220px;
}

section > #container > #services > #main > h3{
font-size: 7vw;
}
section > #container > #services > #main > p{
font-size: 4vw;
}

section > #container > #services > #main > div{
width: 98%;
}

section > #container > #services > #main > div > div{
width: 50%;
margin: 30px auto 0 0 ;
}

section > #container > #about > #main > #mLogo{
width: 155px;
height: 160px;
}

section > #container > #about > #main > h3{
font-size: 32px;
font-family: sans-serif;
text-shadow: none;
margin-top: 30px;
}

section > #container > #about > #main > p{
margin-top: 15px;
}

section > #container > #about > #main > #left{
width: 100%;
}

section > #container > #about > #main > #left > #main{
width: 95%;
}

section > #container > #about > #main > #left > #main > p:first-child{
text-align: left;
padding-bottom: 10px;
font-size: 26px;
}

section > #container > #about > #main > #left > #main > p{
font-size: 18px;
}

section > #container > #about > #main > #right{
width: 100%;
margin-top: 50px;
}

section > #container > #about > #main > #right > #main{
width: 95%;
float: right;
}

section > #container > #contact > #main{
width: 100%;
}

section > #container > #contact > #main > h3{
font-size: 32px;
font-family: sans-serif;
margin-top: 30px;
padding-bottom: 20px;
}

section > #container > #contact > #main > p{
font-size: 19px;
}

section > #container > #contact > #main > #conInfo{
margin-top: 40px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 100%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
font-size: 32px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 80%;
float: left;
margin-left: 30px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
padding-left:50px;padding-right: 50px;
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #right{
width: 80%;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
font-size: 32px;
}

section > #container > div#joindiv > #main{
width: 95%;
}

section > #container > div#joindiv > #main > #left{
width: 100%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 40px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 24px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 22px;
font-family: goergia;
}

section > #container > div#joindiv > #main > #right{
width: 100%;
}

section > #container > div#joindiv > #main > #right form{
width: 60%;
float: left;
margin-left: 30px;
}

section > #container > div#joindiv > #main > #right form > label{
font-size: 18px;
}

footer > #main > div{
width: 95%;
}

footer > #main > div > #logoHolder{
text-align: left;
}
}

@media only screen and (max-width:480px){

header > #main > #logo{
height: 50px;
width: 50px;
margin: 0px 0 0 5px;
}

header > #main > #logo > #main > a{
width: 100%;
height: 100%;
display: inline-block;
}

header > #main > #logo > #main > img{
display: inline-block;
height: 70%;
width: 90%;
}

header > #main > nav{
position: absolute;
width: 90%;
background: #fff;
height: 100vh;
right: 0;
top: 60px;
display: none;
}

header > #main > nav > ul{
background: rgba(1,1,1,.85);
height: 100vh;
}

header > #main > nav > ul > li{
display: block;
float: none;
text-align: center;
padding: 20px 25px 20px 25px;
margin: 0px;
font-family: cursive;
border-bottom: 2px solid rgba(248,98,75,0.1);
}

header > #main > nav > ul > li:last-child{
float: none;
padding: 10px 25px 10px 25px;
display: inline-block;
margin: 20px 0 0 15vw;
}

header > #main > #controlls{
display: inline-block;
}

#shadow > h1{
font-size: 10vw;
}

#shadow > .dv{
font-size: 7vw;
}

#shadow > #btn{
margin-left: -30px;
}

section > #container > #works > #main > h3{
font-size: 7.4vw;
text-shadow:1px 2px 1px rgba(1,1,1,0.30);
}

section > #container > #works > #main > #projectHolder{
width:100%;
margin: 0px;
}

section > #container > #works > #main > #projectHolder > div{
width:100%;
margin: 30px 0 0 0;
display: inline-block;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi{
height:220px;
}

section > #container > #services > #main > h3{
font-size: 10vw;
}
section > #container > #services > #main > p{
font-size: 6vw;
}

section > #container > #services > #main > div > div{
width: 100%;
margin: 30px auto 0 0 ;
}

section > #container > #services > #main > div{
margin-top: 10px;
}

section > #container > #services > #main > div > div:first-child{
margin-top: 0px;
}

section > #container > #about > #main > #mLogo{
width: 155px;
height: 160px;
}

section > #container > #about > #main > h3{
font-size: 32px;
font-family: sans-serif;
text-shadow: none;
margin-top: 30px;
}

section > #container > #about > #main > p{
margin-top: 15px;
}

section > #container > #about > #main > #left{
width: 100%;
}

section > #container > #about > #main > #left > #main{
width: 100%;
}

section > #container > #about > #main > #left > #main > p:first-child{
text-align: left;
padding-bottom: 10px;
font-size: 26px;
}

section > #container > #about > #main > #left > #main > p{
font-size: 18px;
}

section > #container > #about > #main > #right{
width: 100%;
margin-top: 50px;
}

section > #container > #about > #main > #right > #main{
width: 85%;
float: right;
}

section > #container > #contact > #main{
width: 100%;
}

section > #container > #contact > #main > h3{
font-size: 32px;
font-family: sans-serif;
margin-top: 30px;
padding-bottom: 20px;
}

section > #container > #contact > #main > p{
font-size: 19px;
}

section > #container > #contact > #main > #conInfo{
margin-top: 40px;
}

section > #container > #contact > #main > #conInfo > #left{
width: 100%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
font-size: 32px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 95%;
margin: 0px 0 0 5px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
padding-left:50px;padding-right: 50px;
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #right{
width: 97%;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
font-size: 32px;
}

section > #container > div#joindiv{
height: auto;
float: left;
margin-bottom: 200px;
}

section > #container > div#joindiv > #main{
width: 95%;

}

section > #container > div#joindiv > #main > #left{
width: 100%;
}

section > #container > div#joindiv> #main > #left > h2{
font-size: 32px;
}

section > #container > div#joindiv> #main > #left > h3{
font-size: 18px;
}

section > #container > div#joindiv> #main > #left > p{
font-size: 18px;
font-family: goergia;
}

section > #container > div#joindiv > #main > #right{
width: 100%;
}

section > #container > div#joindiv > #main > #right form{
width: 95%;
}

footer > div#main > div{
width: 100%;
}
}

JAVASCRIPT

fungua faili lako la javascript na weka haya

function _(x){return document.getElementById(x);}

var pallexSlide,imageArray,iIndex,intarval,shadow,ypos,header,logo,nv,dist,scrolls,y,target,bdheight,pos,time;
shadow = _("shadow");
header = _("header");
pallexSlide = _("final");
last = _("last");
nav = _("nav");
logo = _("logo");
nv = _("main");
imageArray = ["frank_picture","frank5","frank6","frank8"];
iIndex = 0;

function slidePallex() {
final.setAttribute("src",imageArray[iIndex]);
iIndex++;
if (iIndex >= imageArray.length) {
iIndex = 0;
}
}

intarval = setInterval(slidePallex,13000);
sIndex = 0;
function loadImagesShine(i){
images = ["s2","shine"];

shine.setAttribute("src",images[sIndex]);
sIndex++;
if (sIndex >= images.length) {
sIndex = 0;
}
}

setInterval(loadImagesShine,16000);
rIndex = 0;
function loadImagesRoute(i){
images = ["r2","r3","route"];

r.setAttribute("src",images[rIndex]);
rIndex++;
if (rIndex >= images.length) {
rIndex = 0;
}
}

setInterval(loadImagesRoute,17000);
oIndex = 0;
function loadImagesOya(i){
images = ["o2","oyah"];

o.setAttribute("src",images[oIndex]);
oIndex++;
if (oIndex >= images.length) {
oIndex = 0;
}
}
setInterval(loadImagesOya,18000);

function scrollHandler(){

ypos = window.pageYOffset;
pallexSlide.style.top = ypos * .9 + 'px';

if (ypos > window.innerHeight) {
header.style.backgroundColor = "#fff";
nv.style.backgroundColor = "rgba(1,1,1,.85)";
nv.style.width = "100%";
nv.style.height = "100%";
header.style.height = "60px";
logo.style.height = "90%";
logo.style.width = "30px";
nav.style.margin = "0px";
}else{
header.style.backgroundColor = "transparent";
nv.style.backgroundColor = "transparent";
header.style.height = "100px";
logo.style.height = "100%";
}
}

if (window.innerWidth <= 980) {
nav.setAttribute("id","mobiles");
navi = document.getElementById("mobiles");
function toggleControlls() {
if (navi.style.display === "inline-block") {
navi.style.display = "none";
}else{
navi.style.display = "inline-block";
}
}
function yPosId(el) {
$('html,body').animate({
scrollTop: $("#"+el).offset().top},
1000);
navi.style.display = "none";
}
}

controlls = _("controlls");
controlls.addEventListener("click",toggleControlls,false);

function toggleControlls() {
nav = document.getElementById("nav");
if (nav.style.display === "inline-block") {
nav.style.display = "none";
}else{
nav.style.display = "inline-block";
}
}

function yPosId(el) {
$('html,body').animate({
scrollTop: $("#"+el).offset().top},
1000);
}

window.addEventListener("scroll",scrollHandler);
var d = new Date(); document.getElementById("date").innerHTML = d.getFullYear();

HII NI COMPLETE WEBSITE ili baadhi ya sehemu ziweze kufanya kazi katika javascript unaitaji faili linaloitwa jquery search katika google na uli pakue kisha liweke kwenye folder la js

kama unaitaji marekebisho ya aina yoyote au kuelekezwa kwa namna moja au nyingine ni pnm au ntumie text whatsapp na ntakuwa tayar kukusaidia.

kuweza kuona jinsi website ilivo Tembelea hapa

http://route.epizy.com

Unawezakuweka rangi yeyote pia uka badilisha chochote free license.

potrayed · Jul 21, 2016

Jipatie Qsat Q23G HD satellite FTA receiver

Web development for beginners in swahili

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

Member

Member

Senior Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

Senior Member

Similar Discussions

Our Community

Coming Soon

Regional Communities