diff --git a/readme.md b/readme.md index b635aa290b..3acbb4404b 100644 --- a/readme.md +++ b/readme.md @@ -25,12 +25,12 @@ ___ ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_search-bar-airbnb/) -- [TEST REPORT LINK](https://.github.io/layout_search-bar-airbnb/report/html_report/) +- [DEMO LINK](https://romka12254.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://romka12254.github.io/layout_search-bar-airbnb/report/html_report/) ❗️ 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 ❗️](./checklist.md) +- [x] Icon implemented using background-image CSS property +- [x] Inputs are written inside of 'form' tag with correctly passed attributes +- [x] All `Typical Mistakes` from `BEM` lesson theory are checked. +- [x] Code follows all the [Code Style Rules ❗️](./checklist.md) diff --git a/src/index.html b/src/index.html index abe507e10c..37648140cb 100644 --- a/src/index.html +++ b/src/index.html @@ -10,23 +10,54 @@ http-equiv="X-UA-Compatible" content="ie=edge" /> - Document + Airbnb Search Bar - - +
+ +
+ +
+ + + +
+ +
+ +
+ +
+ + + +
+
+
diff --git a/src/style.css b/src/style.css index a63fa10d43..9e3eae412c 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,114 @@ -/* add styles here */ +@font-face { + font-family: Avenir; + font-weight: 300; + src: url(./fonts/Avenir-Book.ttf) format('truetype'); +} + +@font-face { + font-family: Avenir; + font-weight: 600; + src: url(./fonts/Avenir-Heavy.ttf) format('truetype'); +} + +* { + box-sizing: border-box; +} + +body { + margin-top: 0; + font-family: Avenir, Arial, sans-serif; +} + +.search__container { + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; +} + +.search__input { + color: #3d4e61; + width: 100%; + border: 1px solid #e1e7ed; + border-radius: 4px; + font-weight: 300; + transition: border-color 0.3s; + box-shadow: 0 0 7px rgb(232, 230, 230); + font-family: inherit; + position: relative; +} + +.search__input::placeholder { + color: #3d4e61; +} + +.big { + height: 70px; + font-size: 16px; + padding-left: 62px; +} + +.small { + height: 42px; + font-size: 14px; + box-shadow: 0 0 7px rgb(229, 228, 228); + padding-left: 33px; +} + +.search__input:hover { + border-color: #e1e7ed; + box-shadow: 0 3px 5px rgb(153, 153, 153); +} + +.search__input:focus { + background: + linear-gradient(#ffff, #f6f6f7), + url(./images/Search.svg) no-repeat 30px; + color: #3d4e61; + font-weight: 600; + font-family: inherit; + outline: none; +} + +form { + position: relative; + margin-top: 20px; +} + +.icon-big::before { + content: url(./images/Search.svg); + position: absolute; + top: 35px; + z-index: 10; + transform: translateY(-50%); + left: 25px; + height: 19px; + width: 19px; +} + +.icon-small::before { + content: ''; + z-index: 10; + background-size: 11px; + width: 11px; + height: 11px; + position: absolute; + top: 20px; + left: 13px; + transform: translateY(-50%); + background-image: url(./images/Search.svg); +} + +.big:focus { + text-shadow: 0 3px 3px #bbbec2; +} + +.small:hover { + box-shadow: 0 3px 5px rgb(206, 206, 206); + text-shadow: none; +} + +.small:focus { + box-shadow: none; + text-shadow: none; +}