? ??? ?? ??? ??? ?????. ?? ??? ?? ??? ?? ??? ?? ?????. ?? ???? ??? ?? ????? ???????. ??? ??? ???? ??? ????. ??? ???? ?? ? ?? ???, ??? ???? ?? ??? ?? ?? ?????? ?????.

? ???? ??? ??? ??? ??? ??? ?? ?? ???? ????? ?? ????. ?? ????? ???? ?? ??? ???? ?? ??? ???? ?? ????. ??? ?? ?? ? ???? ?? ??? ??? ?? ???? ?? ??? ???? ?????.

??? ???? ?? ??? ?? ??? ???? ?????. ??? ??? ???? ??? ?? UI?? ???? ??? ?????.

?? ? ?? ??? ???? ???? ??? ?? ???? ?? ????? ???? ???? ?? ?? ?? ??? ???? ?? ??? ??? ?? ???? ??????.

? ?? ??? ??? ????.

??? ???

??? ? ?? (? ? ??)??? ??? ???? ? ??? ???? ????. ??? ??? ???? ????. ?? ???? ? ?? ?? ??? ?? (?? ? ???? ?? ??) (? ???? ??)??? ?? ??? ????? ? ??? ? ?? ??? ?????.

???? ?? ??? ??? ??? ??? CSS? ???? ????? ???? ?? ?????? ? ? ????. ??? (?? Ahem , ?? ???)? ???? ??? ?????. ?? ??? ??? ? ???. ??? ?????. ??? ???? ?? JavaScript?? ???? ????!

??, ??? ???? ??? ??? ???, JavaScript? ???? ???? ???? ??? ?? ???? ??? ?????.

??? ?? ?? ??? ?? ??? ?? ???? ?? ??????. ?? ?? ?? ???? ??? :checked ???? ???? ?????. ?? ?? ???? ??? ???? CSS ??? ?? ??? ??? ??? ??? ?? ?? ?? ??? ??? ???? ????? ??? ?? Flexbox? ??????.

appearance CSS ??? ???? ?? ??? ?? ??? (????? ??)? ??? ?? ?? ?????? ?? ??? ???? ???? ??? ??? ? ? ???????.

?? ?? ?? :

<input type="checkbox" id="menu-toggle">
<div id="page">
  
</div>
<div id="menu">
  
</div>

??? ?? ? ?? ???? ?? ?? CSS :

 /* ???? ??? ???? ???????*/
?? [type = "checkbox"] {
  ?? : ??; /* ?? ??*/
  ?? : 0; ?? : 0; ?? : ??; /* ?? ??, ?? ? ?? ??*/
  ?? : 30px; ?? : 30px; /* ?? ??? ?? ??*/
  z- ??? : 1; /* ??? ??? ??????*/
}

/* ?? ???*/
?? :: ? {
  ?? : "\ 2255";
  ????? : ??;
  ?? : 25pt/30px "Georgia";
  ??? ?? : 10px;
  ?? : 100%; ?? : 100%;
}

/* ??? ??? ????*/
#Page {
  ?? : URL ( "Earbuds.jpg") #EBEBB CENTRE/COVER;
  ?? : 100%; ?? : 100%;
}

?? #page ??? ???? ?????, ?? ?? ??? ?? ???? ? ????.

?? ??

?? ???? ???? ? ??? ?????. ?? ?? ???? "×"??? ???? ??? ???? ?? ? ? ??? ?????. ??? ??? :checked ????? ?, ??? ???? pseudo element? ?? ? ::after ? ?????.

 ?? : ?? :: ?? {
  ?? : "\ 00D7"; /* "×"??*/? ??
  ?? : #ebebeb;
}

??, ?? ?? ( "???"???)? ???? ?? ??? ?????. ????? ???? ???? ???? ?? ??? ??????. ??? ???? ?? ??? ?? ??? ??? ????? ????.

 ?? : ?? ~ #PAGE {
  ?? ?? : ??? (0 8%, 100%0, 100%100%, 0 92%);
  ?? : Translatex (40%) Rotatey (10deg) ??? (0.8);
  ??-??? : ??? ??;
  ?? : ?? .3S ??;
}

clip-path ???? ??? ??? ?????.

??? ??? ??? ???? ?? ??? #page ?? clip-path ?? ????? ?? ? ?? ????. ?? #page ? ??? ???? ?? ? ???? ?? ? ????.

 #Page {
  ?? : URL ( "EARBUDS.JPEG") #EBEBEB ??/??;
  ?? ?? : ??? (0 0, 100% 0, 100% 100%, 0 100%);
  ?? : ?? .3S ??;
  ?? : 100%; ?? : 100%;
}

??? ????? ?? ???? ??? ??????. ???? ???? ?? ?? ( "×"??? ????) ??? ???? ??? ???? ???? ?? ??? ?? ?????.

??? JavaScript

??? ?? ??? ?? ??? ???? ??? ??? ???? ?? ?? ? ????. #page ??? ????? ?? ? ? ??? ?????. ?? ??? ???? "×"??? ??? ???? ?? ???? ?? ? ? ????.

??? ??? ??? ? ?? ????? JavaScript? ??? ? ????. ?? ??? JavaScript? ?????? ??????? ???? ????. ?? ??? ??? ???? ?? ?? ?????.

 document.querySelector ( "#page"). addEventListener ( 'click', (e, checkbox = document.querySelector ( 'input')) => {
  if (checkbox.checked) {checkbox.checked = false; E.StopPropagation (); }
});

? ? ?? ??? ??? #page ??? ?? ??? ???? ???? ????. ???? :checked ??? ??? ???? ?? ???? ??? ?????.

??? ??/?? ??? ?? ?? ????? ???? ???? ??? ?? ?? ??? ??? ? ?????.

??? ?? ? ?? ????? ???? ???? ?? ??? ?????. ?????? ?? ???? ?? ?? ?? ?? ?? ????? ?? ?? ????. ??, ?? ?? ??? ? ?? ???? ????. ??? ??????!

? ??? ?? ?? ??? ???? ????? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!