Creating Airbnb's card layout in CSS [css]
Clone or download
Pull request Compare This branch is even with atl-wdi:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
css
img
.editorconfig
.gitignore
LICENSE
LICENSE.txt
index.html
readme.md
solution.jpg

readme.md

Airbnb Mockup

Lots of websites, including Facebook and Airbnb, use a grid layout to display common elements, such as information cards, photos, and other information. The best way to learn how to create these different layouts is to try them ourselves. So let's try recreating a portion of Airbnb's website.

Getting Started

  • Fork and clone this repository to your computer
  • A HTML file (index.html) and CSS file (css/style.css) have been created for you. Content is also provided in a folder called img

Requirements

  • Look at the deliverable screenshot and see how well you can match it.
  • Keep the following in mind when recreating the screenshot
    • Using the right font
    • Obtaining and using relevant images
    • Aligning the text in the center of each image
    • Aligning the images in the center of each page
    • Thinking of the layout in terms of rows and columns

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, follow best practices and pass a CSS validator.

Solution

Bonus

Design agencies will usually have you own and create the whole page, not just a small portion of it. Try recreating the rest of the Airbnb home page!


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 legal@ga.co.