Muhammad al-xorazmiy nomidani toshkent axborot texnologiyalari universiteti farg’ona filiali

text-transform: uppercase;
transition: all 0.5s ease-in-out;
&:hover{
color: #ffff;
background-color: red;
text-decoration: none;
}
}
}
}
.office {
margin-top: 230px;
display: flex;
flex-direction: column;
gap: 32px;
&-info {
display: flex;
flex-direction: column;
img {
width: 16px;
height: 16px;
}
p {
font-size: 14px;
line-height: 150%;
width: 95%;
margin-left: 20px;
}
h1 {
color: #3f3d56;
font-size: 18px;
}
}
}
.user {
margin-top: 100px;
&-info {
display: flex;
gap: 3%;
&__item {
position: relative;
display: flex;
flex-direction: column;
background-color: #fff;
padding: 0 7% 7% 5%;
box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.08);
@extend %border;
height: clamp(500px, 550px, 600px);
width: 90%;
h1 {
width: 100%;
font-size: 24px;
line-height: 30px;
margin-top: 30px;
}
p {
font-size: 16px;
line-height: 22px;
}
a {
text-align: center;
text-decoration: none;
text-transform: uppercase;
&:nth-child(1) {
width: 90%;
}
}
.number {
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
height: 20%;
display: flex;
align-items: flex-start;
justify-content: flex-end;
h2 {
font-size: 80px;
float: right;
margin-right: 10px;
@extend %montserratExtraLight;
}
}
}
}
}
.admin {
display: flex;
justify-content: flex-start;
flex-direction: column;
a{
text-decoration: none;
text-transform: uppercase;
}
&-info {
p {
font-size: 12px;
}
a{
font-size: 12px;
color: #ef4744;
text-transform: lowercase;
&:hover{
color:#17c587;
}
}
display: flex;
align-items: center;
gap: 20px;
}
img {
width: 64px;
height: 64px;
}
}
.int {
opacity: 0.5;
}
.userLink {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 46px;
margin-top: 56px;
img {
height: 56px;
}
&__text {
// width: 100%;
display: flex;
justify-content: center;
align-items: center;
a {
font-size: 36px;
color: #ef4744;
text-decoration: underline;
}
img {
width: 12%;
height: 12%;
}
.message {
display: flex;
gap: 15px;
justify-content: center;
align-items: center;
img {
width: 32px;
height: 32px;
}
}
.e-mail {
display: flex;
align-items: center;
gap: 10px;
}
}
}
.footer {
padding: 56px 8%;
margin: auto;
margin-top: 80px;
background-color: black;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
&-item {
h1 {
font-size: 14px;
text-transform: uppercase;
color: #686868;
@extend %montserratExtraBold;
}
&__text {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 32px;
transition: all 0.6s,ease-in;
a{
font-size: 12px;
color: #fff;
}
}
&__send {
display: flex;
margin-top: 15px;
input {
width: 65%;
height: 44px;
padding: 12px 14px;
font-size: 14px;
&::placeholder {
font-size: 14px;
}
}
a {
@extend %center;
width: 25%;
background: #ef4744;
border-radius: 2px;
margin-left: 12px;
}
}
&__media {
margin-top: 5px;
display: flex;
flex-wrap: wrap;
gap: 16px;
a {
margin-top: 16px;
border: 1px solid $grey;
@extend %center;
padding: 10px;
}
}
&:nth-child(4) {
.footer-item__text {
margin-top: 15px;
}
}
}
}
.menu-black{
visibility: hidden;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999999;
&__modal{
position: fixed;
width: 45%;
height: 100%;
top: 0px;
background-color:rgba(255, 255, 255,0.9);
z-index: 999999;
display: flex;
flex-direction: column;
border: 1px solid $grey;
gap: 30px;
padding: 80px 5%;
transition: all 0.5s ease-in-out;
a{
font-size: 14px;
color: #000000;
font-weight: 700;
&:hover{
color: #17c587;
}
}
i{
position: absolute;
right: 20px;
top: 20px;
font-size: 2rem;
cursor: pointer;
color: rgb(0, 0, 0);
&:hover{
color: #17c587;
}
}
}
&__active{
visibility: visible;
opacity: 1;
}
}
.search-item{
@extend %center;
padding: 0px 10px;
}
.search-input{
visibility: hidden;
opacity: 0;
@extend %center;
gap: 5px;
border-radius: 10px;
height:70%;
padding:0px 5px;
border:1px solid $grey;
&__active{
animation:change 1s linear forwards;
}
i{
font-size: 1.5rem;
}
input{
height: 90%;
width: 90%;
padding: 0px 5px;
outline: none;
border: none;
border-right: 1px solid $grey;
}
}
#redCircle{
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
}
@keyframes change {
0%{
width:0;
}
20%{
width: 20%;
}
40%{
width: 40%;
}
60%{
width:60%;
}
80%{
width: 80%;
}
100%{
width: 100%;
}
}

@import "media";

Jquery kod:
$(function(){
let menu =$('.search-menu');
let search=$('.search-own');


let btn_minus1 = $('.minus1');
let btn_plus1 = $('.plus1');
let btn_minus2 = $('.minus2');
let btn_plus2 = $('.plus2');
let btn_minus3 = $('.minus3');
let btn_plus3 = $('.plus3');
let btn_minus4 = $('.minus4');
let btn_plus4 = $('.plus4');
let hisobat1 = $('.hisobat1');
let hisobat2 = $('.hisobat2');
let hisobat3 = $('.hisobat3');
let hisobat4 = $('.hisobat4');
let urtaQiymat =$('.spanNumber2');
let all=0;


let modalExit=$('.fa-times-circle');
/// first
let count1=10;
btn_minus1.on("click",function(){
count1--;
hisobat1.text(count1);
if(count1<1){
count1=0;
hisobat1.text(count1)
}
hisob()
})
btn_plus1.on("click",function(){
count1++;
hisobat1.text(count1);
hisob()
})

/// second

let count2=10;
btn_minus2.on("click",function(){
count2--;
hisobat2.text(count2);
if(count2<1){
count2=0;
hisobat2.text(count2)
}
hisob()
})
btn_plus2.on("click",function(){
count2++;
hisobat2.text(count2);
hisob()
});


let count3=10;
btn_minus3.on("click",function(){
count3--;
hisobat3.text(count3);
if(count3<1){
count3=0;
hisobat3.text(count3)
}
hisob()
})
btn_plus3.on("click",function(){
count3++;
hisobat3.text(count3);
hisob()
})
let count4=10;
btn_minus4.on("click",function(){
count4--;
hisobat4.text(count4);
if(count4<1){
count4=0;
hisobat4.text(count4)
}
hisob()
})
btn_plus4.on("click",function(){
count4++;
hisobat4.text(count4)
hisob()
})
function hisob(){
all=count1*200+count2*243+count3*190+count4*252;
urtaQiymat.text(all+"$")
}
$('.fixed').css('border-bottom','1px solid black')
///
menu.on('click',function(){
$(".menu-black").toggleClass('menu-black__active');
$(".menu-black").animate({
left:'0%'
},800);
})
modalExit.on('click',function(){
$(".menu-black").animate({
left:'-100%'
},800);
setTimeout(() => {
$(".menu-black").removeClass('menu-black__active');
}, 1000);
})
search.on("click",function(){
$(this).hide();
setTimeout(() => {
$('.search-input').css({
visibility: 'visible',
opacity: 1,
})
}, 500);
})
modalExit.on("click",function(){
setTimeout(() => {
$('.search-input').css({
visibility: 'hidden',
opacity: 0
})
search.fadeIn(400);
}, 500);
})
///
function fixedAction(){
if($(document.body).scrollTop() < 80 && $(document.documentElement).scrollTop()<80){
$('#headerFixed').addClass('fixed__active');
}
if($(document.body).scrollTop() < 40 && $(document.documentElement).scrollTop()< 40){
$('#headerFixed').removeClass('fixed__active');
}
}
// web action

$("html, body").animate({

scrollTop: $(document).height()
}, 8000);
fixedAction()
$("html, body").animate({
scrollTop: 0
}, 8000);
$(window).on("scroll",function(){
fixedAction();
});
})