Ishmuhamedov Aziz

Download 1.57 Mb.

bet	1/2
Sana	17.06.2023
Hajmi	1.57 Mb.
	#1552723

1 2

Bog'liq
Sunnatov

Ishmuhamedov Aziz

Muhammad al-Xorazmiy nomidagi Toshkent axborot texnologiyalari universiteti
“Dasturiy injiniring” fakulьteti
“Аxborot texnologiyalarining dasturiy taʼminoti” kafedrasi
Dasturiy injiniringga kirish fanidan

Guruh: 311_21

Bajardi:Sunnatov Ramziddin

Tekshirdi: Ishmuhamedov Aziz

Toshkent 2023

Reja:

Krish

2)Oziq ovqat Dokoni uchun yaratilgan Htiml bilan tanishish:
3)Oziq ovqat Dokoni ichida nimalar bora va shu saytni animatsiyalari bilan tanishish:
4)Oziq ovqat Dokoni dizayni ko’dlarini yoritib berish:
5)Xulosa

Kirish:
Oziq-ovqat do'konlari qanday xizmat ko'rsatadi, kimlarga xizmat ko'rsatadi, xizmatlar qanday turdagi ovqat mahsulotlarini qamrab olishni o'z ichiga oladi va qanday yetkazib berishni taklif etadi. Bu maqsadni tushunish saytning dizayni, yaratilishi va tarkibi uchun asosiy belgilashdir. Saytingizga namoyish berish uchun, asosiy dizayn elementlariga e'tibor bering. Bu shu jumladan, mavjudlik, aniq va bilan ishlovchi menular, yuqori sahifalarda o'rtacha mahsulotlar katalogi, qidiruv maydonchasi, xaridlar ro'yxati, blog, yangiliklar va kontaktlar sahifasi kabi elementlarni o'z ichiga oladi.

1)Oziq ovqat Dokoni uchun yaratilgan Htiml bilan tanishish:
Dastur Ko’di
DOCTYPE html>

Oziq ovqat do’koni

Bu yerda logo qismi biz yaratgan Oziq ovqat dokoni uchun saytni Loo yani lagativ qismi qo’yilgan joy hisoblanadi.

Bu menyuni ishlatib sayt bo'ylab tez-tez o'zgaruvchan sahifalarga tez va oson qayta qayta o'tish imkonini beradi. Menyu odatda bir qancha yorliqlarni yig'ish mumkin, masalan, saytning asosiy bo'limlari yoki erishish qulayligini oshirish uchun foydali bo'lishi mumkin. Menyuda ko'rsatiladigan yorliqlar odatda matn yoki rasmli tugmalarda ko'rsatiladi.

Bu menyu turi, foydalanuvchiga ko'rsatiladigan yorliqlarning ro'yxatini bir tugmachada to'plab chiqaradi. Foydalanuvchi tugmani bosgan holda, yorliqlar qurilmasi kengayib, foydalanuvchiga ko'rsatiladi. Bu xususiyat yuqori to'g'ri yonlarni ko'rsatuvchi menyu bilan birga foydalaniladi va odatda sahifaning yuqori qismida joylashadi. Dropdown menyulari matn yoki rasmli tugmalar ko'rinishida bo'lishi mumkin va ular keng ko'z o'ngida, odatda kichik bir triyaga ega bo'ladi.

2)Oziq ovqat Dokoni ichida nimalar bora va shu saytni animatsiyalari bilan tanishish:

document.addEventListener("DOMContentLoaded",function(){
let upload = document.getElementById("upload");
if (upload) {
let progress = 0,
strokeLen = 310,
startUpload = function(progressRect,elText) {
progress = 0;
let btnText = this.querySelector(elText);
if (btnText)
btnText.innerHTML = "0%";
this.disabled = true;
this.classList.remove("upload-btn-ready");
this.classList.add("upload-btn-running");
setTimeout(incProgress.bind(this,progressRect,elText),500);
},
incProgress = function(progressRect,elText){
let btnProgress = this.querySelector(progressRect),
btnText = this.querySelector(elText);
if (progress < 1) {
if (btnProgress) {
let strokeVal = progress * strokeLen,
dashVal = strokeLen - strokeVal;
btnProgress.setAttribute("stroke-dasharray",`${strokeVal} ${dashVal}`);
btnProgress.setAttribute("opacity","1");
}
if (btnText) {
let displayVal = Math.round(progress * 100);
btnText.innerHTML = `${displayVal}%`;
}
progress += 0.005;

let interval = 17;
setTimeout(incProgress.bind(this,progressRect,elText),interval);

} else {
this.classList.remove("upload-btn-running");
this.classList.add("upload-btn-done");

Bu yerda biz saytimizni animatsiyalari va ko’plab knopkalari ishlashi uchun Javascripda ko’d terdik biz avalo Selektr orqali HTML daqi ko’dlarni chaqirib oldik va shu Ko’dlar ustida ONECLIK Metodidan foydalanib turli hil buyriqlarni kiritdik "Buton" yoki "tugma" veb-saytlar, ilovalar yoki boshqa dasturlar uchun ishlatiladigan interaktiv elementdir. Foydalanuvchilar tugmani bosgan holda, biror amalni bajarish uchun buyruq yuborish mumkin, masalan, yangi sahifalarga kirish, ro'yxatdan o'tish, savollarga javob berish, ma'lumotni saqlash va boshqalar.
Shunda biz shu Buttonni ustiga bosganimizda bizni saytimiz Regstratsiya bo’limiga olib o’tadi

3) Oziq ovqat Dokoni dizayni ko’dlarini yoritib berish:

Ko'di
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.mainpage {
height: 849px;
background-image: url(../image/pic.png);
}

.container {
max-width: 1500px;
padding-left: 1.4rem;
padding-right: 1.4rem;
margin-left: auto;
margin-right: auto;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-around;
padding: 20px;
background-color: transparent;
color: #fff;
}

.nav-links a {
color: #fff;
}

/* LOGO */

Bu yerda biz saytimizni logosi ustida ishlamoqdamiz biz shu logo uxhun stil berib uni chiroyli ko’rinishga keltirdik
.logo {
width: 175.7px;
height: 86.1px;
}

.logo img {
object-fit: cover;
}

/* NAVBAR MENU */
Bu yerda ham shu /* NAVBAR MENU */ sahihasi uchun sil yozmoqdamiz uning, orasi uning, joylasjishi , va rangi va shunga o’xsahsh yana bir qancha stil berdik
.menu {
display: flex;
align-items: center;
gap: 50px;
font-size: 24px;
}

.menu li:hover {
background-color: #4c9e9e;
border-radius: 5px;
transition: 0.3s ease;
}

.menu li {
padding: 5px 14px;
}

/* DROPDOWN MENU */
Bu yerda ham shu /* NAVBAR MENU */ sahihasi uchun sil yozmoqdamiz uning, orasi uning, joylasjishi , va rangi va shunga o’xsahsh yana bir qancha stil berdik

.services {
position: relative;
}

.dropdown {
background-color: rgb(1, 139, 139);
padding: 1em 0;
position: absolute;
/*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
}

.dropdown li+li {
margin-top: 10px;
}

.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}

.dropdown li:hover {
background-color: #4c9e9e;
}

.services:hover .dropdown {
display: block;
}

/* RESPONSIVE NAVBAR MENU STARTS */

/* CHECKBOX HACK */

Bu yerda esa biz saytimizni

Download 1.57 Mb.

Do'stlaringiz bilan baham:

1 2