HTML, CSS : Hotel reservation template

This has a cool feature where the floating menu appear only when the screen width is lesser.
This is achieved by the w3-collapse css style. w3-top indicates the bar should float on top.
w3-sidebar indicates this should be a side bar.  W3-sidebar is nothing but like below

w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}

For each of the media queries, it is done like the below

@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}

On smaller screens, the top bar is having a menu, and it is done using header class.

This page also has a slide show and the implementation is like this

Below is the snippet that helps in showing and hiding the side bar.

function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
    document.getElementById("myOverlay").style.display = "block";
}

function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
    document.getElementById("myOverlay").style.display = "none";
}


Another important item is w3-modal which is displaying a modal dialog. The contents inside this are represented with w3-modal-content
And w3-animate-zoom w3-padding-large are playing major role in experience of these.



References:
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_apartment_rental&stacked=h