Bajardi: Berdiyorova Shahnoza toshkent 2023 html code lang ="en"
Download 41.58 Kb.
|
1-lab
- Bu sahifa navigatsiya:
- Call us: (+84) 123 456 789
- Tel: +998(90) 123 45 67
- Ish vaqti
- Dunyoning eng yaxshi Savdo Sayti
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">
class="contact flex items-center">
src="./icons/phone.svg" alt=""> Call us: (+84) 123 456 789E-mail : support@freshmeal.comclass="time flex items-center">
src="./icons/clock.svg" alt=""> Working Hours:Mon - Sat (8.00am - 12.00am)class="site-content-wrapper">
class="nav-trigger">
class="site-content">
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="container">
class="welcome flex items-center">
Xush kelibsiz src="./icons/logo-2.svg" alt=""> Dunyoning eng yaxshi Savdo SaytiSabzavotli 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="hero-image">
src="./images/straw.png" alt=""> 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{
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; }
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{
} 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'); }) }); Download 41.58 Kb. Do'stlaringiz bilan baham: |
Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling
ma'muriyatiga murojaat qiling