Ishmuhamedov Aziz

responsive yani Uni moslashuvchan ligiga tekshirmoqdamiz biz buni telefonda ochganimizda qanday ko’rinishda va kanpiyuterda ochganimizda qanday ko’rinisda ekanligini tekshirib shu ko’dni amalga oshirmoqdamiz 
 
input[type=checkbox] { 
display: none; 
} 
 
 
/* HAMBURGER MENU */ 
.hamburger { 
display: none; 
font-size: 24px; 
user-select: none; 
} 
 

 
/* .buttons-container { 
width: 100%; 
height: 100vh; 
display: flex; 
align-items: center; 
justify-content: center; 
} */ 
 
 
button { 
background: white; 
border: none; 
padding: .375em 1.125em; 
font-size: 1rem; 
} 
 
 
.button-arounder { 
background: #5BBFC8; 
font-size: 1.5rem; 
color: black; 
box-shadow: 0 0px 0px hsla(190deg, 15%, 5%, 
.2); 
transform: translateY(0); 
border-top-left-radius: 6px; 
border-top-right-radius: 6px; 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
 
 
--dur: .15s; 
--delay: .15s; 
--radius: 16px; 
 
 
transition: 
border-top-left-radius var(--dur) var(--delay) ease-out, 
border-top-right-radius var(--dur) calc(var(--delay) * 2) ease-out, 
border-bottom-right-radius var(--dur) calc(var(--delay) * 3) ease-out, 
border-bottom-left-radius var(--dur) calc(var(--delay) * 4) ease-out, 
box-shadow calc(var(--dur) * 4) ease-out, 
transform calc(var(--dur) * 4) ease-out, 
background calc(var(--dur) * 4) steps(4, jump-end); 
} 
 
 
.button-arounder:hover, 
.button-arounder:focus { 
box-shadow: 0 4px 8px hsla(190deg, 15%, 5%, .2); 
transform: translateY(-4px); 
background: hsl(230deg, 50%, 45%); 
border-top-left-radius: var(--radius); 
border-top-right-radius: var(--radius); 
border-bottom-left-radius: var(--radius); 
border-bottom-right-radius: var(--radius); 
} 
 
 
Bu qolgan ko’dlarimiz esa bizlar yaratgan tugmalar va ko’plab inputlar va ularning vazifasi uchun ishlatilmoqda
 
 
Natija korish uchun :


http://gleaming-custard-aad26b.netlify.app