kach92 / css-airbnb-responsive

[morning exercise]

Airbnb Mockup - Responsive Edition!

Remember Airbnb's webpage? This time, we'll build a "mobile-first" version of our Airbnb mockup.

Getting Started

• Fork and clone this repository to your computer
• The starter code in this repo is a mobile-first version of the original css-airbnb exercise.

Requirements

• The deliverable screenshot is of a desktop version of the website.
• Use media queries to make the webpage appear like the screenshot on desktop clients.
• Think about the minimal number of steps you need to achieve this:
  • Which specific CSS declarations need to be changed when viewed on a desktop?
  • What additional HTML elements might you need to add? (Sometimes you don't need to add any HTML at all to go from mobile -> desktop)

Deliverable

Here's a screenshot of the portion that should be replicated. Deliver the mockup as close as possible. In addition, code should be well-indented and follow best practices, including no linter errors.

Further

1. Make the page interactive.

• Attach a click event listener to the See All Guidebooks button. Alert the user that this feature isn't done yet.
• Attach a click event listener to the See All Destinations button. Alert the user that this feature isn't done yet.
• Attach a click event listener to each destination square. Inside the callback function, use window.open to trigger a new window with a google map page of that destination.
• Example url (just copy the entire url from the address bar): https://www.google.com.sg/maps/place/Sonoma,+CA+95476,+USA/@38.291092,-122.4666091,14z/data=!3m1!4b1!4m5!3m4!1s0x8085ac43817b9d77:0x380ed210ee6e045!8m2!3d38.291859!4d-122.4580356?hl=en

2. Use Bootstrap to implement responsive design.

• Check the Bootstrap website at https://getbootstrap.com/docs/4.1/getting-started/introduction/ for instructions on how to include it.

---

Licensing

1. All content is licensed under a CC-BY-NC-SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].