Recreate the Airbnb responsive mockup with Bootstrap.
Remember Airbnb's webpage? This time, we'll build a bootstrap version of our Airbnb mockup.
- Fork and clone this repository to your computer
- The starter code in this repo is a version of the original css-airbnb exercise.
- Refer to the bootstrap website for documentation: https://getbootstrap.com/docs/4.1/getting-started/introduction/
- The deliverable screenshot is of a desktop version of the website.
- Use media bootstrap to make the webpage appear like the screenshot on desktop clients.
- Begin your layout with the mobile version.
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.
- 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
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.