From f160ee8e3ec50c71c609a0d63ed972310790f434 Mon Sep 17 00:00:00 2001 From: Dmytro Ivasenko Date: Mon, 12 Aug 2024 19:48:41 +0700 Subject: [PATCH] add Search Bar solution --- package.json | 2 +- readme.md | 12 +++---- src/index.html | 36 +++++++++++++++------ src/style.css | 86 +++++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 118 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index b3b9ce4091..b489e9180a 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.7.3", + "@mate-academy/scripts": "^1.9.1", "@mate-academy/stylelint-config": "latest", "backstopjs": "6.2.2", "jest": "^29.7.0", diff --git a/readme.md b/readme.md index b635aa290b..2c94c8ef1d 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://modeltoIT.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://modeltoIT.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..5f882c10fb 100644 --- a/src/index.html +++ b/src/index.html @@ -17,16 +17,32 @@ /> - +
+ +
- +
+ +
diff --git a/src/style.css b/src/style.css index a63fa10d43..49d8f271ef 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,85 @@ -/* add styles here */ +@font-face { + font-family: Avenir-Book, sans-serif; + src: url(./fonts/Avenir-Heavy.ttf); +} + +@font-face { + font-family: Avenir-Heavy, sans-serif; + src: url(./fonts/Avenir-Heavy.ttf); +} + +html { + font-family: Avenir-Book, sans-serif; + font-size: 10px; +} + +* { + box-sizing: border-box; +} + +.search { + margin-top: 2rem; +} + +.input { + width: 100%; + font-family: inherit; + background-image: url('images/Search.svg'); + background-repeat: no-repeat; + color: #3d4e61; + font-weight: 300; + border: 1px solid rgba(225, 231, 237, 1); + border-radius: 0.3rem; + filter: drop-shadow(0 1px 8px rgba(61, 78, 97, 0.1)); +} + +.input::placeholder { + color: #3d4e61; +} + +.input__big { + height: 7rem; + font-size: 1.6rem; + line-height: 2.19rem; + background-position: 2.6rem center; + padding: 2.6rem 2.6rem 2.6rem 6.2rem; +} + +.input:focus { + font-weight: 900; + outline: none; +} + +.input__big:focus { + background: + no-repeat 2.6rem center url('images/Search.svg'), + linear-gradient(180deg, #fff 0%, #f6f6f7 100%); +} + +.input__big::placeholder { + font-weight: 300; +} + +.input__small { + height: 4.2rem; + font-size: 1.4rem; + line-height: 1.91rem; + background-position: 1.2rem center; + background-size: 1.1rem; + padding: 1.2rem 1.2rem 1.2rem 3.3rem; +} + +.input__small::placeholder { + font-weight: 400; +} + +.input__big:hover, +.input__small:hover { + filter: drop-shadow(0 3px 8px rgba(61, 78, 97, 0.2)); +} + +.input__small:focus { + background: + no-repeat 1.2rem center/1.1rem url('images/Search.svg'), + linear-gradient(180deg, #fff 0%, #f6f6f7 100%); +}