Link to webpage: https://jbloch100.github.io/Booki-s-model/
This website is compatilbe for the lates versions of chrome and mozilia firefox as well as all the html and css files have their codes satisfied by W3C.
This website is designed for tourists to search for ttheir accommodations and activities at their selected cities. The user types for instance Marseille, France at the top inside the search bar and then clicks search to display all the accommodations, including the most popular ones as well as the activities.
For the desktop version (when screen width greater than or equal to 992px), as for the two navigtion links above which are accommodations and activities, when the user hovers on either one of them, its font color turns blue with a blue overline above them.
For the tablet version (screen width greater than or equal to 768px and less than 992px), and for the mobile version (screen width less than or equal to 768px) the two navigations occupy the whole width of the page and when hovering over one of them, its font color turns blue as well as having part of the line under the navigations which is the border-bottom of the hovered navigation turn blue color.
For the desktop version, the accommodations and the most popular sections are bth displayed side by side in a flex box. The cards in accommodations section are displayed in 2x3 whereas in the most popular section, the cards are displayed in 3x1. The activities section have its cards displayed insde a fle box with four columns. The first and the third column contains one card occupying the whole column width. The second and the fourth column contains two cards splitting the column into 2.
For the tablet version, the most popular section displayed under accommodations section with it's cards displayed in 6x1 is displayed above the most popular section whose cards are in 3x1. As for the activities section, the columns become rows with each row being displayed column-wise.
For the mobile version, the accommodations section with its cards displayed in 6x1 has also a change in background color to white is displayed under the most popular section whose cards are in 3x1. As for the activities section, each card occupies a whole row and is displayed column-wise.
As for the footer, in the desktop and tablet version, 3 columns of a header with links under are displayed side by side and for the mobile version, they are displayed column-wise with the leftmost on the desktop/tablet version on top, second-most under the first and the third most under the second.
As the screen size shrinks, the accommodations and mpstpopular sections shrink and so do the cards sizes. However for the filters above, as the screen size shrinks, they wrap around. When hvering over the filters, the border color becomes blue.
For the mobile version, the romantic filter is displayed near the low cost on the right side as in order change inside a flex box.
As for the blue search button on top, a blue button with search text is displayed for the desktop and tablet version whereas for the mobile version, a smaller blue button but with a magnifying glass instaed is displayed inside the input text bar.