Muhammad al-xorazmiy nomidagi toshkent axborot texnologiyalari universiteti amaliy ish

MUHAMMAD AL-XORAZMIY NOMIDAGI TOSHKENT AXBOROT TEXNOLOGIYALARI
UNIVERSITETI


Amaliy ish

Bajardi: Berdiyorova Shahnoza

TOSHKENT 2023
HTML code
lang="en">



charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
http-equiv="X-UA-Compatible" content="ie=edge">

rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
rel="stylesheet" href="./css/style.css">

class="main-wrapper">

class="nav-background">

class="mobile-logo">
src="./icons/logo.svg" alt="">

class="mobile-nav">

class="cart">

class="flex items-center">
src="./icons/cart-dark.svg" alt="">
href="#">0 Items - ($0.00)

class="nav-top">

• 
  href="#">Home
  


• 
  href="#">About us
  


• 
  href="#">Mahsulotlar
  


• 
  href="#">Blog
  


• 
  href="#">Do'kon
  


• 
  href="#">Xizmatlar
  


• 
  href="#">Aloqa
  


• 
  href="#">Log in
  


• 
  href="#">Register
  

class="contact flex items-center">
src="./icons/phone.svg" alt="">

Call us: ([phone]

E-mail : [e-mail]

class="time flex items-center">
src="./icons/clock.svg" alt="">

Working Hours:

Mon - Sat (8.00am - 12.00am)

class="site-content-wrapper">

class="nav-trigger">
width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-bar-chart">
x1="12" y1="20" x2="12" y2="10" />
x1="18" y1="20" x2="18" y2="4" />
x1="6" y1="20" x2="6" y2="16" />

class="site-content">

class="topbar">

class="container flex justify-between items-center">

class="icons">
href="#">src="./icons/facebook.svg" alt="">
href="#">src="./icons/twitter.svg" alt="">
href="#">src="./icons/google.svg" alt="">
href="#">src="./icons/instagram.svg" alt="">
href="#">src="./icons/search.svg" alt="">

class="auth flex items-center">

src="./icons/user-icon.svg" alt="">
href="#">Log in

class="divider">|

src="./icons/edit.svg" alt="">
href="#">Register Now

class="divider">|

src="./icons/cart.svg" alt="">
href="#">0 Items - ($0.00)

class="top">

class="container flex justify-between">

class="contact flex items-center">
src="./icons/phone.svg" alt="">

Tel: [phone]

E-mail : [e-mail]

class="branding">
src="./icons/logo.svg" alt="">

class="time flex items-center">
src="./icons/clock.svg" alt="">

Ish vaqti:

Dushandan - Shanba (08.00 - 22:00)

class="navbar magic-shadow">

class="container flex justify-center">
href="#" class="active">Home
href="#">About us
href="#">Mahsulotlar
href="#">Blog
href="#">Do'kon
href="#">Xizmatlar
href="#">Suratlar
href="#">Biz bilan aloqa

class="hero flex items-center">

class="container">

class="welcome flex items-center">
Xush kelibsiz
src="./icons/logo-2.svg" alt="">

Dunyoning eng yaxshi Savdo Sayti

Sabzavotli taomlar Shimoliy Kaliforniya mahsulotlarining ne'matlaridan foydalanadigan menyu bilan
Milan taomlarini hurmat qiladi va tafsilotlarga diqqat bilan e'tibor beradi
- sifatli ingredientlarga hurmat bilan munosabatda bo'ladi va ularning eng yaxshi takrorlanishida porlashiga imkon beradi..

class="btn btn-primary">Ko'proq o'qish
class="btn btn-secondary">Hozir xarit qilish

class="hero-image">
src="./images/straw.png" alt="">

class="top-products">
CSS code
/* fonts */
@font-face {
font-family:"Raleway-regular";
src:url(../fonts/Raleway-Regular.ttf)
}
@font-face {
font-family:"Raleway-medium";
src:url(../fonts/Raleway-Medium.ttf)
}
@font-face {
font-family:"Raleway-bold";
src:url(../fonts/Raleway-Bold.ttf)
}
@font-face {
font-family:"Raleway-extrabold";
src:url(../fonts/Raleway-ExtraBold.ttf)
}
@font-face {
font-family:"Raleway-semibold";
src:url(../fonts/Raleway-SemiBold.ttf)
}
@font-face {
font-family:"Raleway-black";
src:url(../fonts/Raleway-Black.ttf)
}

/* colors */


:root {
--primary:#EEBF00;
--secondary:#232B38;
--ternary:#6C6C6C;
--danger:#FE4545;
--pure:#FEFEFE;
--light:#F0F0F0;
--heaven:#FFFFFF;
--footer:#2D333F;
}


/* Reset */
*{
padding:0;
margin:0;
box-sizing: border-box;
}

body{
-webkit-font-smoothing:antialiased;

font-family: "Raleway-regular";
}
.container {
width:100%;
padding:o 15px;
margin:0 auto;
}


@media (min-width:576px){
.container{
max-width:540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1152px;
}
}


.main-wrapper{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}


.nav-background{
width:100%;
height:100%;
background:var(--light);
position: absolute;
top:0;
left:0;
padding:0;
z-index:1;
}


.nav-trigger{
position: absolute;
top:0;
left:0;
z-index:1;
padding:15px;
display:none;
}


.nav-trigger svg{
transform:rotate(90deg) scaleX(-1);
-webkit-transform:rotate(90deg) scaleX(-1);
-moz-transform:rotate(90deg) scaleX(-1);
-ms-transform:rotate(90deg) scaleX(-1);
-o-transform:rotate(90deg) scaleX(-1);
width:40px;
height:40px;
}
.site-content-wrapper{
width:100%;
height:100%;
position:absolute;
background:var(--heaven);
z-index:2;
transition:all .3s ease;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-ms-transition:all .3s ease;
-o-transition:all .3s ease;
}


.site-content-wrapper.scaled{
transform:scale(0.9) translateX(90%);
-webkit-transform:scale(0.9) translateX(90%);
-moz-transform:scale(0.9) translateX(90%);
-ms-transform:scale(0.9) translateX(90%);
-o-transform:scale(0.9) translateX(90%);
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
box-shadow:0 3px 10px 0 var(--secondary);
}


.site-content{
width:100%;
height:100%;
overflow-x:auto;
}

header.topbar{

background:var(--secondary);
color:var(--pure);
font-family:"Raleway-semibold";
padding:0.75rem 0;
}
header.topbar .auth > div a{
color:var(--pure);
text-decoration: none;
}
header.topbar .icons a{
margin-right:0.6rem;
}
header.topbar .auth .divider{
padding:0 1rem;
}
header.topbar .auth > div img{
margin-right:0.35rem;
}
.flex{
display:flex;
}
.justify-between{
justify-content: space-between;
}
.items-center{
align-items: center;
}
nav .top{
padding:1.5rem 0;
}
nav .top .contact h5, nav .top .time h5{
font-family:"Raleway-black";
margin-bottom:0.25rem;
}
nav .top .contact h6, nav .top .time h6{
font-family:"Raleway-medium";
letter-spacing: 0.055rem;
font-size:0.75rem;
color:var(--ternary);
}
nav .top .contact img, nav .top .time img{
margin-right:1rem;
}


.justify-center{
justify-content:center;
}
nav .navbar a{
text-decoration:none;
color:var(--secondary);
font-family:"Raleway-semibold";
font-size:1rem;
padding:1rem 1.5rem;
transition:all .3s ease;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-ms-transition:all .3s ease;
-o-transition:all .3s ease;
}
nav .navbar a.active{
background:var(--primary);
color:var(--pure);
}
nav .navbar a:hover{
background:var(--primary);
color:var(--pure);
}
.magic-shadow{
position: relative;
background:var(--heaven);
}
.magic-shadow:after{
content:'';
display:block;
width:100%;
height:69px;
background-image:url(../icons/shadow.svg);
background-repeat: no-repeat;
background-position: center;
position: absolute;
bottom:-22px;
z-index:-1;
}
.magic-shadow-sm{
position: relative;
background:var(--heaven);
}
.magic-shadow-sm:after{
content:'';
display:block;
width:100%;
height:69px;
background-image:url(../icons/shadow-sm.svg);
background-repeat: no-repeat;
background-position: center;
position: absolute;
bottom:-20px;
left:50%;
transform:translateX(-50%);
z-index:-1;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
}
header.hero{
height:600px;
background-image:url(../images/hero.png);
background-position: 0% 0%;
background-repeat: no-repeat;
overflow:hidden;
}
header.hero .container{
position: relative;
}
header.hero .welcome{
margin-bottom:0.25rem;
}
header.hero .welcome span{
font-family:"Raleway-bold";
color:var(--secondary);
margin-right:0.75rem;

}
header.hero h1{

font-family:"Raleway-extrabold";
color:var(--secondary);
font-size: 2.5rem;
margin-bottom:0.75rem;
}
header.hero h1 span{
color:var(--primary);
}
header.hero p{
font-family: "Raleway-medium";
width:50%;
line-height:1.5;
margin-bottom:1rem;
}
.btn{
padding:0.75rem 0.75rem;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
line-height:0.8;
font-size:1.2rem;
cursor: pointer;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
border:1px solid transparent;
}


.btn-primary {
background:var(--primary);
color:var(--heaven);
}
.btn-primary:hover{
background:var(--heaven);
color:var(--primary);
border:1px solid var(--primary);
}
.btn-secondary{
background:var(--secondary);
color:var(--heaven);
}
.btn-secondary:hover{
background:var(--heaven);
color:var(--secondary);
border:1px solid var(--secondary);
}

header.hero button:first-child{

margin-right:0.50rem;
}

header.hero .hero-image{

position:absolute;
top:-40px;
right:40px;
}

section{
padding:4rem 0;

}
section.top-products{
background:var(--light);
}


.section-heading{
font-family:"Raleway-bold";
text-align:center;
Position:relative;
margin-bottom:6rem;
}
.section-heading:after{
content:'';
display:block;
width: 100%;
height:30px;
background-image:url(../icons/hr.svg);
background-repeat: no-repeat;
background-position: center;
position:absolute;
bottom:-40px;
}
section.top-products .food-slider .food-card{
background:var(--heaven);
padding:1.5rem 0;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
section.top-products .food-slider .food-card .product-image img{
width:80%;
height:200px;
object-fit:contain;
padding-bottom:1rem;
}
hr{
border:1px solid var(--light);
opacity: 0.8;
margin:1rem 0;
}
section.top-products .food-slider .food-card h2{
font-family:"Raleway-bold";
font-size:1.3rem;
margin-bottom:0.25rem;
}
.text-center{
text-align: center;
}
section.top-products .food-slider .food-card .stars{
margin-bottom:0.5rem;
}
section.top-products .food-slider .food-card .stars img{
margin-right:0.25rem;
javascript code
$(document).ready(function(){
$('.food-slider').slick({
autoplay:true,
slidesToShow:3,
slidesToScroll:1,
prevArrow:".prev-btn",
nextArrow:".next-btn",
responsive:[
{
breakpoint:992,
settings:{
slidesToShow:2,
}
},
{
breakpoint:768,
settings:{
slidesToShow:1,
}
}
]

});

$('.nav-trigger').click(function(){
$('.site-content-wrapper').toggleClass('scaled');
})
});