ÓZBEKSTAN RESPUBLIKASÍ INFORMACIYALÍQ

TEXNOLOGIYALARÍ HÁM KOMMUNIKACIYALARÍN

RAWAJLANDÍRÍW MINISTRLIGI
MUXAMMED AL-XOREZMIY ATINDAǴÍ TASHKENT
INFORMACIYALÍQ
TEXNOLOGIYALARÍ UNIVERSITETI NÓKIS FILIALÍ
KOMPYUTER INJINIRINGI FAKULTETI
«Kompyuter injiniring» baǵdarı
3-kurs 301-20 topar studenti
Ibrayimov Alpamıstın’

INDIVIDUAL PROEKT JUMISI

Tema: Mashina servis ushin veb sayt

Tayarlaǵan ___________________ A.Ibrayimov

Qabıllaǵan ____________________

NÒKIS 2023
 Mazmuni:

Kirisiw…………………………………………………………………………. 3

1.Web sayt jaratıwda qollanılatuǵın JavaScript programmalastırıw, HTML

gipertekstli belgilew hám CSS belgilew format tilleri............................... 4

1.1 HTML gipertekstli belgilew tili............................................................... 4

1.2 CSS belgilew format tili(Bootstrap)….................................................... 7
1.3 JavaScript programmalastırıw tili............................................................ 11

2.Mashina servis ushin veb sayt islep shıǵıw................................................ 12

2.1Maselenıń qoyılıwı ................................................................................... 12

2.2Web sayttıń shablonın islep shıǵıw.......................................................... 13

2.3Web sayttı islep shıǵıw............................................................................ 17

Juwmaqlaw....................................................................................................... 18

Paydalanılǵan ádebiyatlar............................................................................... 19

Web sayt............................................................................................................ 20

2
Kirisiw

Ózbekstan Respublikası Ǵárezsizlikke eriskeninen keyin jurtımızda

kompyuter texnologiyaları kúnden-kúnge rawajlanıp barıp atır. Házirgi kúnde
insanlardıń Internet resurslarına bolǵan talabın esapqa alǵan jaǵdayda Internet
texnologiyardı rawajlandırıw tiykarǵı másele bolıp qalıp atır. Usı waqıtta Internet
paydalanıwshıları óz zárúriyatın qandira alatuǵın maǵlıwmatlarǵa Internet tarmaǵı
arqalı erisiw múmkin.

Internet hár qıylı insanlardı birden-bir maqset menen qosılıwına sebep bolıp
atır. Hámme Internet tarmaǵından qandayda bir túrdegi informaciya alıwǵa háreket
etedi. Internet tarmaǵı kún sayın rawajlanıp barıp atır. Bunıń tiykarǵı baslawshısı
bolsa jámiyetimizdiń barlıq tarawları qamtıp alǵan informaciya resursları sanıń
artıp barıwı esaplanadı.

Web bet Internet tarmaqlarında jaylasqan fayllar kompleksi bolıp, olardı sanı saat
sayin kóbeyip barıp atır. Bul fayllarda maǵlıwmatlardı hár qıylıların : tekst, grafik,
suwret, video, audio maǵlıwmatlardı ushıratıw múmkin. Búgingi kúnde Web
Internet resursları ishinde eń keń tarqalǵan esaplanadı. Sebebi, aldınan tayarlanǵan
Web bet arqalı tiyisli maǵlıwmatlardı toltırıw paydalanıwshınıń neden-qansha
waqtın tejew imkaniyatın beredi. Men usi proektim arqalı mashina tutınıwshıarına
jeńilik túwdiriw ushin mashina service veb sayttıń shablonın islep shıqtım. Usı
individual proekt jumısım arqalı web-hújjetlerdi jaratıw, olardı Internette baspaǵa
shıǵarıw, web-hújjetti kórkemlestiriw, qızıqlı hám ózine tartiwshı etip jaratıw,
waqıtı kelse maǵlıwmatlardı jańalaw sıyaqlı wazıypalardı óz ishine alǵan.

3
1.Web sayt jaratıwda qollanılatuǵın JavaScript programmalastırıw, HTML

gipertekstli belgilew hám CSS belgilew format tiller

1.1 HTML gipertekstli belgilew tili

Internettiń WWW xizmeti, tiykarınan, web -betlerge baylanıslı eken, olar

qanday jaratıladı? - degen soraw kelip shıǵıwı tábiy. Web -betler HTML
(Hypertext Markup Language - Gipertekstli markerlew tili) tilinde jazıladı. HTML
- programmalastırıw tili esaplanbaydı. Bul tilde hújjet (web -bet) tayarlaw ushın
Windowstıń Bloknot sıyaqlı ápiwayı tekst redaktorı jetkilikli. HTML tiliniń
buyrıqları “<” hám “>” belgileri arasına jazıladı hám deskriptor yamasa teg
(anglichan tag - belgi) dep ataladı. Teglerdi joqarı yamasa tómen registrdagi latin
álippesi háripleri járdeminde jazıw múmkin. Ulıwma, tegler eki túrge bólinedi:

-Jup tegler yamasa konteyner-tegler: bul kórinistegi teg birinshisi qandayda bir
ámel baslanıwın bildirse, ekinshisi sol ámel juwmaqlanganini ańlatadı.

-Jup emes tegler: kórinistegi teg ashıladı, jabılıwı shárt emes, mısalı, ózinnen
keyingi tekstti jańa qatarǵa ótkeriwshi <br> tegi sıyaqlı.

HTML-hújjet - “html” yamasa “htm” keńeytpeli tekstli fayl bolıp, ol ápiwayı

tekst redaktorında tegler qollap jazılǵan tekst. HTML-hújjet yadqa júklensa, ol
ekranda web-brauzer járdeminde web-bet kórinisinde sáwlelenedi.

HTML tili turaqlı rawajlanıp barıp atır. Óz gezeginde web-brauzerler de

jańalanıp turıptı. Házirgi kúnde web-bet tayarlaw ushın tiykarınan HTML-4 tilinen
paydalanıladı. Onıń birpara buyrıqların “eski” web-brauzerler (Internet Explorer-3,
Internet Explorer-4) atqara almaydı. Bunnan tısqarı túrli web-brauzerler, mısalı,
Internet Explorer hám Netscape da bir-birinen bir az parıq etedi. Usınıń sebebinen
bir HTML-hújjet túrli web-brauzerlerde qandayda bir parq menen sawleleniwi
múmkin.

4
 HTML (ingliz-tilinde: Hypertext Markup Language — gipertekstli belgilew
tili) — SGML (Standart Generalized Markup Language — standart
ulıwmalastırılǵan belgilew tili) ga tiykarlanǵan hám xalıq aralıq ISO 8879
standartına uyqas keliwshi til, xalıq aralıq túrde isletiledi.

HTML tili shama menen 1991—1992-jıllarda Evropa Yadrolıq Izertlewler

Orayında isleytuǵın Britaniyalıq qánigesi Tim Berners-Lee tárepinen islep
shıǵılǵan. Daslep bul til qánigeler ushın hújjet tayarlaw quralı retinde jaratılǵan.
HTML tiliniń ápiwayılıǵı (SGMLga salıstırǵanda ) hám joqarı formatlaw
múmkinshilikleriniń bar ekenligi onı paydalanıwshılar arasında tez tarqalıwına
sebep boldı. Bunnan tısqarı ol jaǵdayda gipertekstlerden paydalanıw múmkin edi.
Tildiń rawajlanıwı menen oǵan qosımsha multimedia (suwret, dawıs, animatsiya
hám basqalar ) múmkinshilikleri qosıldı.

Gipertekst bul - arnawlı kodlastırılǵan tekst bolıp, ol óz ishine qoshimsha

basqarıwshı elementlerdi aladı : formatlaw, súwretlew, multimedia qoyiw hám
geperssilkalardı óz ishine aladı.

Hár bir hújjet <HTML> teg menen baslanıp, </HTML> teg menen tawsıladı.

HTML hújjeti bir neshe funksional bóleklerden dúziledi. Hár bir funksional bólek
<HEAD> teg menen baslanıp, </HEAD> teg menen tawsıladı. Hár bir funksional
bólek bas betleri <TITLE> menen baslanıp, </TITLE> menen tawsıladı.
Funksional bólektiń tiykarǵı bólimleri bolsa <BODY> menen baslanadı hám

5
</BODY> menen tawsıladı. Brouzer HTML hújjetti oqiǵanda olardıń bar ekenligi
hújjet bólimlerdi anıq kórsetedi. Eger olar bolmasa da Brouzer HTML hújjetti
duris oqiydi, biraq hújjet bólimleri bir-birlerinen ajralıp turmaydı.

Tómendegi ápiwayı strukturaǵa iye bolǵan HTML hújjetin kóramiz:

<HTML>
<HEAD>
<TITLE> hújjet bası </TITLE>
</HEAD>
<BODY>
Hújjettiń tiykarǵı bólegi
</BODY>
</HTML>.
HTML tiykarǵı tegleri:

<A>…</A> - hújjetke giperbaylanıstı jaylastırıw. Bul giperbaylanısqa alıp

baratuǵın URL jolı HREF atributına HREF=HTTP://www.goantipas.html
kórinisindegi giperbaylanıs retinde súwretleniwshi esaplanadı.

<B>…</B> - tekstti qalıńlastırılǵan shrift menen súwretleydi.

< OL > … < / OL > - tolıq tártiplengen kestede anıqlaydı. LI - onıń

elementleri.

< LI > … </ LI> - kestedegi hár bir element baslanıwın anıqlaydı.

<PRE > … </ PRE > - aldınan formatlanǵan tekstti anıqlaydı.

< TABLE >… < / TABLE > - kesteni anıqlaydı. (<TR>, <TD>, <TH>).

HTML tili altıǵa shekem ishpe-ish jaylasqan hújjet bas betların óz ishine
aladı.Bular:

6
 <H1> … </H1>,<H2> … </H2>, <H3> … </H3>,<H4> … </H4>,<H5> …
</H5>,<H6> … </H6>.Bular <H1> … </H1> menen baslanıp, <H6> … </H6>
menen tawsıladı.

1.2 CSS belgilew format tili(Bootstrap)

CSS (Cascading style sheets – Kaskadlanǵan stiller kestesi) — bul belgilew

tilinen paydalanıp jazılǵan hújjetlerdiń kórinisin súwretlew ushın isletiletuǵın
rásmiy til esaplanadı. Ol tiykarınan HTML hám XHTML belgilew tilleri
járdeminde jazılǵan veb-betlerdiń kórinisin súwretlew hám proektlestiriw quralı
retinde isletiledi, biraq hár qanday XML hújjetlerine, mısalı, SvG yamasa XUL-ǵa
da qollanılıwı múmkin.

CSS veb-bettiń sırtqı kórinisine qayta isley aladı. CSS den paydalanıp, siz
teksttiń reńin, shriftlerdiń usılın, paragraflar arasındaǵı boslıqtı, ústinlerdiń
ólshemleri hám jaylasıwın, fon súwretleri yamasa reńlerdiń qayta isletiliwiniz,
sxemanıń dúzilisin, hár qıylı apparatlar hám ekran ólshemleri ushın displeydiń
ózgeriwin basqarıwıńız múmkin, sonıń menen birge, hár qıylı effektlerdi de
qollawıńız múmkin.CSS waqtın tejeydi sebebi CSS ti bir ret jazıp, keyin bir neshe
HTML betlerinde qayta paydalanıwıńız múmkin. Hár bir HTML elementi ushın usı
usıldı anıqlap, onı qálegeningizshe veb-betlerge qóllawıńız múmkin. Bir tegtiń bir
CSS qaǵıydasın jazıń jáne onı bul tegtiń barlıq jaǵdaylarına qollań. Sonday etip,
kem kod degeni tezirek júklep alıw waqtın ańlatadı.
7
 CSS birinshi ret 1997 jılda veb-islep shıǵıwshılar ushın jaratılǵan veb -
betlerdiń kórinisin anıqlaw ushın islep shıǵılǵan. veb-professionallar veb-sayt
kodınıń mazmunı hám quramın vizual dizaynnan ajıratıwǵa múmkinshilik beriw
ushın mólsherlengen edi. Búgingi kúnde barlıq zamanagóy brauzerler CSS-dıń 1-
basqıshı, CSS-dıń 2-dárejeli bólegi hám hátte CSS-dıń 3-dárejeli aspektlarini
qollap -quwatlaydı. CSS-dıń rawajlanıwı hám jańa usıllar engiziliwi dawam eter
eken, veb-brauzerler bul brauzerlerde jańa CSS-ti qollap-quwatlaytuǵın hám veb-
dizaynerlar menen islew ushın kúshli jańa usıllar qurallar beretuǵın modullardı
engize basladılar.

CSS qaǵıydaları rásmiy CSS tilinde jazılǵan. Qaǵıydalar veb-hújjettiń

ózinde de, sırtqı kórinisde olar súwretlep beretuǵın da, sonıń menen birge CSS
formatına iye sırtqı fayllarda da jaylastırılıwı múmkin. CSS formatı bul CSS
qaǵıydaları hám olar haqqındaǵı túsindiriwlerdi óz ishine alǵan tekstli fayl
esaplanadı.

CSS stillerin tórt usıl menen veb-hújjetke kiritiw yamasa jaylastırıw múmkin:

1)Stiller xarakteristikası bólek faylda bolǵanda, ol <head> elementine kiritilgen

<link> elementinen paydalanıp hújjetke jalǵanıwı múmkin:

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
</body>
</html>
2) Eger stil kesteleri áke hújjetten bólek jaylastırılsa, ol hújjetke <style>
elementindegi @import kórsetpesi menen jalǵanıwı múmkin:

<!DOCTYPE html>

8
<html lang="en">
<head>
<title>Document</title>
<style media="all">
@import url(style.css);
</style>
</head>
<body>
</body>
</html>
3) Hújjet ishinde stiller xarakteristikalanǵanda, olar <head> elementine kiritilgen
<style> elementine kiritiliwi múmkin.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body{
background-color: blue;
}
</style>
</head>
<body>
</body>
</html>
4)Hújjet ishindegi elementtiń attributi retinde kiritiliwi múmkin:

<!DOCTYPE html>
<html lang="en">
<head>

9
 <title>Document</title>
</head>
<body>
<p style="font-size: 20px;color: black;font-family: 'Courier New', Courier,
monospace;"></p>
</body>
</html>
Bootstrap ne?

Bootstrap veb-sayttı tez hám ańsat jaratıw ushın biypul framework bolıp
tabıladı. Bootstrap HTML hám CSS-ga tiykarlanǵan tipografiya, formalar,
tuymeler, kesteler, navigatsiya, modallar, súwret karuselleri hám basqa kóp zatlar
ushın, sonıń menen birge qálegen JavaScript plaginların óz ishine aladı.

Bootstraptı jalǵawdın eki jollı bar:

1)Eń sońǵı Bootstrap CSS kodı:<link rel="stylesheet"href="https://

maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">;

<!-- jQuery kutubxonasi --><scriptsrc="https://ajax.googleapis.com

/ajax/libs/jquery/3.5.1/jquery.min.js"></script>;
<!-- JS --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js
/1.16.0/umd/popper.min.js"></script>;
<!-- Eń sońǵı JavaScript kodi --><script src="https://maxcdn.bootstrapcdn.com
/bootstrap/4.5.0/js/bootstrap.min.js"></script>;
10
2)Bootstrap 4 ni júklep alıw, eger siz Bootstrap 4-ti ózińiz júklep alıwdı hám
ótkeriwdi qálesangiz, https://getbootstrap. com/ saytına ótiń hám ondaǵı
kórsetpelerge ámel etiń.

1.4 JavaScript programmalastırıw tili

Hár qanday sayttıń eki tárepi bar: server tárepi hám klient tárepi. Server bólegi
tuwrıdan-tuwrı serverde jaylasqan. Bular veb-betlerdi jaratatuǵın kodtı óz ishine
alǵan fayllar. Brauzerimizde biz kórgen zat klient tárepi hám tek brauzer tárepinde
islewi múmkin bolǵan tiller klient tárepi dep ataladı. Búgingi kúnde eń keń
tarqalǵan hám derlik barlıq brauzerlerde ornatılǵan JavaScript programmalastırıw
tili bolıp tabıladı. JavaScript 1995 jılda Netscape tárepinen islep shıǵılǵan.
JavaScript - bul ob'ektke jóneltirilgen skript programmalastırıw tili.

Prototip programmalastırıw - bul ob'ektke jóneltirilgen programmalastırıw

usılı bolıp, ol jaǵdayda klass túsinigi joq hám qayta paydalanıw (miyraslarlaw )
ob'ekttiń ámeldegi nusqasın - prototipni klonlaw arqalı ámelge asıriladı. JavaScript
programması skript bolǵanı ushın onı kompilyatsiya qılıw shárt emes. Haqıyqıy
programmalastırıwdan tısqarı, JavaScript veb-betti basqarıw ushın eń keń
múmkinshiliklerdi usınıs etedi. Onıń járdeminde siz HTML hújjetiniń barlıq
elementleriniń qásiyetlerine koriwińiz hám olardı ózgertiwińiz múmkin.
Qawipsizlik kózqarasınan JavaScript skriptlerine kompyuterdiń fayl sistemasına
kiriw hám basqa qosımshalardı jumısqa túsiriw qadaǵan etilgen. Bular JavaScript
skripti operatsion sistemaǵa tikkeley kiriw múmkinshiligine iye emes. Bunnan
tısqarı, bir brauzer yamasa aynasında isleytuǵın JavaScript basqa aynaǵa kiriw

11
ruxsatına iye emes, JavaScript kodına muwapıq ashılǵan áynekler bunnan tısqarı.
Zamanagóy JavaScript - bul " qawipsiz" ulıwma maqsetli programmalastırıw tili.
Ol brauzerlerde islew ushın mólsherlengen, sol sebepli ol protsessor, yad menen
islew quralların óz ishine almaydı. JavaScript programmaların SCRIPT tegi
járdeminde HTMLning qálegen jerine kirgiziw múmkin.

<script> elementi qálegen atributlarǵa da iye:

<script type=... > - skript túrin ańlatadı, mısalı <script type=" text/javascript" >
<script language=... > - skript tilin belgileydi, mısalı <script language="
text/javascript" >
Javascriptti qollap-quwatlamaytuǵın brauzerlerden jasırıw ushın geyde SCRIPT
ishinde HTML túsindiriwlerinen paydalanıw usınıs etiledi:

<html><body>Hújjettiń baslanıwı <script type=" text/javascript" ><!-- alert

('Sálem! ')//--></skript>Hújjet aqırı </body> </html>
Eger JavaScript kodı júdá kóp bolsa, ol HTML-ga kiritilgen bólek faylǵa
shiǵarıladı :<script src=" /path/to/script.js" ></ skript>

Skriptlerdi bólek faylǵa kóshiriwdiń unamlı tárepi keshlew bolıp tabıladı.

Haqıyqattan da, kóbinese birdey skript júdá kóp betlerde isletiliwi múmkin.
Bunday halda, ol brauzer tárepinen tek bir ret júklep alınadı hám keyinirek, eger
server tuwrı islep atirǵan bolsa, ol bul skriptti keshten aladı.

2.Mashina servis ushin veb sayt islep shıǵıw

2.1Maselenıń qoyılıwı

12
 2.2Web sayttıń shablonın islep shıǵıw

1-súwret

2-súwret
1-súwrette bas bet jaylasqan, bul bette menyular bar, mashina servis uranı kórset-
ilgen hám baylanısıw menen tolıq maǵlıwmat knopkaları qoyılǵan.
2-súwrette Mashina servis haqqında hám servis ximetleri kórsetilgen.

13
 3-súwret
3-súwret servis xizmetleri fotoları hám paydalanıwshı pikirleri kórsetilgen.

4-súwret Baylanısıw forması boladıó bul forma arqalı bizlerdin sevis xizmettine
baylanısıw múmkin.

14
 4-súwret

5-súwret
5-súwret Login/Register menyusı basılǵanda login menen registraciya web-beti
ashıladı.Bul bet arqalı web-sayttan dizimnen ótiledi.
15
Bullar telefon ushın responsiv shablonlar.

16
 2.3Web sayttı islep shıǵıw

Mashina servis web saytın islep shıǵıwda web-betler hám usı web-betlerge
baylanıstırılǵan menyular index.html-bas bet, about.html-biz haqqımızda,
concact.html-baylanısıw,login.html-Register/Login,testimonial.html-
Pikiler,furnitures.html-asbap-úskeneler ushın jaratıladı. Stiller ushın css papkası
jaratıladı. Súwretler ushın images papkası jaratıladı. Shriftler ushın fonts papkası
jaratıladı. Javascript kodları ushın js papkası jaratıladı. Bul papkalarda sáykes
css,js,fontlar,súwretler jaylastırıladı.

17
Responsiv.css kodı, bul kodta hár qurılma ushın arnawlı css kod jazıladı.

Juwmaqlaw

Mobil telefonlar yamasa internet tarmaq arqalı xizmetlerden paydalanıw qálegen

waqıtta paydalanıw imkánin beredi. Men bul individual proektim arqalı
tutınıwshılar ushın arnawlı web-sayt islep shıqtım. Bul web-sayt
paydalanıwshılardıń waqtın tejeydi. Jánede men bul individual proekt arqalı sayt
arqalı óz xizmetlerimizdi reklama qiliwmizdi úyrendim. Bul proekti jaratıwda
Javascript, CSS, HTML, Jquery, Bootstrap programmalastırıw hám belgilew
tillerinen paydalandım. Házirge zámanagoy dunyada internetten paydalaniw keń
rawajlanǵan, sonlıqtan xizmetlerdi web-saytlarda kórsetiw júdá durıs sheshim.
Web-sayt xizmetleri kóp jillar dawamında rawajlanıp baradı.

18
Paydalanılǵan ádebiyatlar

1. A. Goncharеv. HTML. Samouchitеl. – «Pitеr», Sankt-Pеtеrburg, 2001 g.

2. Allеn Vayk. JavaScript. Entsiklopеdiya polzovatеlya: pеr. s. ang. – «TID»

«DS», Kiеv, 2001 g.

3. Xaitov F.N., Yusupov R.M., Botirov D.B., Sattarov A.R, Shukurov E.X. Web-
texnologiyalar. Metodik qo`llanma. Juzzax, 2005 y.

4. Sayidova N.S. Web-texnologiyalar. Uslubiy ishlanmalar. Buxoro, 2010 y.

5. Кристофер Шмитт. CSS. Рецепты программирования = CSS. Cookbook. —

СПб.: БХВ-Петербург, 2007. — 592 с. — ISBN 978-5-9775-0075-3

19
 Web sayt
Index.html:
<!DOCTYPE html>
<html lang="en">
<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="viewport" content="initial-scale=1, maximum-scale=1">
<title>Mical</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="icon" href="images/fevicon.png" type="image/gif" />
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet"
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-
awesome.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.cs
s"
media="screen">
</head>
<body class="main-layout">

20
 <div class="loader_bg">
<div class="loader"><img src="images/loading.gif" alt="#" /></div>
</div>
<header>
<div class="header">
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section">
<div class="full">
<div class="center-desk">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="#"
/></a>
</div>
</div>
</div>
</div>
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
<nav class="navigation navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarsExample04"
aria-controls="navbarsExample04" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Bas bet </a>
</li>
21
 <li class="nav-item">
<a class="nav-link" href="about.html">Biz haqqımızda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="furnitures.html">Asbap-qurallar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="testimonial.html">Paydalanıwshılar
Pikirleri</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Bizler menen
baylanıs</a>
</li>
<li class="nav-item d_none">
<a class="nav-link" href="login.html"><i class="fa fa-user-
circle padd_right"
aria-hidden="true"></i>Login/Register</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<section class="banner_main">
<div id="banner1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
22
 <li data-target="#banner1" data-slide-to="0" class="active"></li>
<li data-target="#banner1" data-slide-to="1"></li>
<li data-target="#banner1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container-fluid">
<div class="carousel-caption">
<div class="row">
<div class="col-md-6">
<div class="text-bg">
<h1>Xosh kelipsiz</h1>
<span>Mashina ońlaw servisi</span>
<p style="font-size: 25px;">Mical - bul Machine service all
yaǵnıy tiykarǵı uranımız hámme mashinalar ushın servis xizmeti.</p>
<a href="#">Tolıq maǵlıwmat</a> <a href="#">
<br>
Baylanısıw</a>
</div>
</div>
<div class="col-md-6">
<div class="text_img">
<figure><img src="images/car.png" alt="#" /></figure>
</div>
</div>
</div>
</div>
</div>
</div>
23
 </section>
<div class="three_box">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="box_text">
<h3>Mashina diagnoz</h3>
<i><img src="images/thr.png" alt="#" /></i>
<p>Mashina diagnozi yaǵnıy bular, kompyuter diagnoz, dvigitel
diagnoz, ballon diagnozlar</p>
</div>
</div>
<div class="col-md-4">
<div class="box_text">
<h3>Mator may almastırıw</h3>
<i><img src="images/thr1.png" alt="#" /></i>
<p>Bizde barlıq standartlarǵa juwap beriwshi
mator mayları bar
</p>
<br>
</div>
</div>
<div class="col-md-4">
<div class="box_text">
<h3>Tezlik tekseriw</h3>
<i><img src="images/thr2.png" alt="#" /></i>
<p>Mashina simulyatorı arqalı tezlik tekseriledi</p>
<br>
</div>
24
 </div>
</div>
</div>
</div>
<div class="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>Mashina servis haqqında</h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="about_img">
<div class="about_box">
<h3 style="color: rgb(42, 68, 91);">Mical mashina servisi
haqqında</h3>
<br>
<p style="font-size: 25px;">Bizlerdin mashina servisimiz kóp
jillardan berli xalıqa xizmet kórsetip kelmekte.Mashina servisimizde mashina
diagnozstika, kompyuter diagnozstika, tezlik ólshew simulyatorı, mator may
almastırıw xizmetleri bar.</p>
<br><br>
<a class="read_more">Tolıq oqıw</a>
</div>
</div>
</div>
25
 </div>
</div>
</div>
</div>
<div class="wedo ">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>Bizler ne sileymiz</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="row">
<div class="col-md-6 margin_bottom">
<div class="work">
<figure><img src="images/img1.png" alt="#" /></figure>
</div>
<div class="work_text">
<h3>Tezde xizmet korsetiw<br><span class="blu">Ulıwmalıq
servis</span></h3>
</div>
</div>
<div class="col-md-6 margin_bottom">
<div class="work">
<figure><img src="images/img2.png" alt="#" /></figure>
</div>
26
 <div class="work_text">
<h3>Tezde xizmet korsetiw<br><span class="blu">Ulıwmalıq
servis</span></h3>
</div>
</div>
<div class="col-md-6 margin_bottom">
<div class="work">
<figure><img src="images/img3.png" alt="#" /></figure>
</div>
<div class="work_text">
<h3>Tezde xizmet korsetiw<br><span class="blu">Ulıwmalıq
servis</span></h3>
</div>
</div>
<div class="col-md-6 margin_bottom">
<div class="work">
<figure><img src="images/img4.png" alt="#" /></figure>
</div>
<div class="work_text">
<h3>Tezde xizmet korsetiw<br><span class="blu">Ulıwmalıq
servis</span></h3>
</div>
</div>
</div>
<a class="read_more" href="#">Tolıq koriw</a>
</div>
</div>
</div>
</div>
<div class="testimonial">
27
 <div class="container">
<div class="row">
<div class="col-md-12">
<div class="titlepage">
<h2>Paydalanıwshılar pikirleri</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide testimonial_Carousel " data-
ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption ">
<div class="row">
<div class="col-md-6 margin_boot">
<div class="test_box">
<i><img src="images/tes.jpg" alt="#" /></i>
<h4>JCKOLO</h4>
<p>Áp-áneydey xızmet, ılajı bolǵanınsha ol jerga
baraman. Uyge jaqın siz ıqtıyat bólimlerge buyırtpa beriwińiz múmkin hám
chegirmalar sisteması bar ekenligi júdá jaǵımlı. Ustalar sawatlı, olar mudamı barlıq

28
máseleler boyınsha hámme zattı mashqalasız sheshkenler. Bul sevis júdá
kewillimen shıqtı. Raxmet) </p>
</div>
</div>
<div class="col-md-6 margin_boot">
<div class="test_box">
<i><img src="images/tes1.jpg" alt="#" /></i>
<h4>ROCOYO</h4>
<p>Mical kompaniyası, raxmet! Jigitler-Ustalar, eń joqarı
dárejede, avtomobilimga tez hám sapalı xızmet kórsetkenińiz ushın úlken raxmet!
Olar wazıypanı joqarı dárejede atqaradılar. Raxmet!</p> <br><br>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-6 margin_boot">
<div class="test_box">
<i><img src="images/tes.jpg" alt="#" /></i>
<h4>JCKOLO</h4>
<p>Áp-áneydey xızmet, ılajı bolǵanınsha ol jerga
baraman. Uyge jaqın siz ıqtıyat bólimlerge buyırtpa beriwińiz múmkin hám
chegirmalar sisteması bar ekenligi júdá jaǵımlı. Ustalar sawatlı, olar mudamı barlıq
máseleler boyınsha hámme zattı mashqalasız sheshkenler. Bul sevis júdá
kewillimen shıqtı. Raxmet) </p>
</div>
29
 </div>
<div class="col-md-6 margin_boot">
<div class="test_box">
<i><img src="images/tes1.jpg" alt="#" /></i>
<h4>ROCOYO</h4>
<p>Mical kompaniyası, raxmet! Jigitler-Ustalar, eń joqarı
dárejede, avtomobilimga tez hám sapalı xızmet kórsetkenińiz ushın úlken raxmet!
Olar wazıypanı joqarı dárejede atqaradılar. Raxmet!</p> <br><br>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-md-6 margin_boot">
<div class="test_box">
<i><img src="images/tes.jpg" alt="#" /></i>
<h4>JCKOLO</h4>
<p>Áp-áneydey xızmet, ılajı bolǵanınsha ol jerga
baraman. Uyge jaqın siz ıqtıyat bólimlerge buyırtpa beriwińiz múmkin hám
chegirmalar sisteması bar ekenligi júdá jaǵımlı. Ustalar sawatlı, olar mudamı barlıq
máseleler boyınsha hámme zattı mashqalasız sheshkenler. Bul sevis júdá
kewillimen shıqtı. Raxmet) </p>
</div>
</div>
<div class="col-md-6 margin_boot">
<div class="test_box">
30
 <i><img src="images/tes1.jpg" alt="#" /></i>
<h4>ROCOYO</h4>
<p>Mical kompaniyası, raxmet! Jigitler-Ustalar, eń joqarı
dárejede, avtomobilimga tez hám sapalı xızmet kórsetkenińiz ushın úlken raxmet!
Olar wazıypanı joqarı dárejede atqaradılar. Raxmet!</p>
<br><br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

31
 <footer id="contact">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="titlepage">
<h2>Bizler menen baylanısıw</h2>
</div>
</div>
<div class="col-md-8">
<ul class="location_icon">
<li><a href="#"><i class="fa fa-map-marker"
aria-hidden="true"></i></a> Jaylasqan orın</li>
<li><a href="#"><i class="fa fa-volume-control-phone" aria-
hidden="true"></i></a> +12 3456789
</li>
<li><a href="#"><i class="fa fa-envelope"
aria-hidden="true"></i></a>demo@gmail.com</li>
</ul>
</div>
<div class="col-md-6">
<form id="request" class="main_form">
<div class="row">
<div class="col-md-12 ">
<input class="contactus" placeholder="Tolıq at" type="type"
name="Full Name">
</div>
<div class="col-md-12">
<input class="contactus" placeholder="Email" type="type"
name="Email">

32
 </div>
<div class="col-md-12">
<input class="contactus" placeholder="Telefon nomer"
type="type" name="Phone Number">
</div>
<div class="col-md-12">
<textarea class="textarea" placeholder="Sms" type="type"
Message="Name">Sms : </textarea>
</div>
<div class="col-sm-col-xl-6 col-lg-6 col-md-6 col-sm-12">
<button class="send_btn">Jiberiw</button>
</div>
<div class="col-sm-col-xl-6 col-lg-6 col-md-6 col-sm-12">
<ul class="social_icon">
<li><a href="#"><i class="fa fa-facebook" aria-
hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"
aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square" aria-
hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-
hidden="true"></i></a></li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="map">
<figure><img src="images/map.jpg" alt="#" /></figure>

33
 </div>
<form class="bottom_form">
<input class="enter" placeholder="Email kiritiń" type="text"
name="Enter your email">
<button class="sub_btn">Qosılıw</button>
</form>
</div>
</div>
</div>
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright 2023 by Ibraymov Alpamis</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

34