Skip to content

mate-academy/layout_search-bar-airbnb

Repository files navigation

Search bar for Airbnb

Here are the Layout Tasks Instructions


The task

Create HTML page with two search bars as designed in the mockup. This search bar will be part of big project.

screenshot

Requirements:

  • use images from src/images
  • there must be two search bars
  • search bar must stretch the full width
  • distance between two search bars must be 20px
  • the big search bar must have top indent 20px
  • follow styles from the mock
  • default font-weight must be 300
  • a search bar has 3 state default, hover and focus
  • don't use JavaScript
  • use @font-face for fonts
  • add attribute data-qa="big" for big search form, and data-qa="small" for small
  • add attribute data-qa="keypress" to input in big search form

Checklist

❗️ Replace <your_account> with your Github username and copy the links to Pull Request description:

❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.

  • Icon implemented using background-image CSS property
  • Inputs are written inside of 'form' tag with correctly passed attributes
  • All Typical Mistakes from BEM lesson theory are checked.
  • Code follows all the Code Style Rules ❗️