From b49fdc0c13d3c00c64b390d0dd09e58244606f0a Mon Sep 17 00:00:00 2001 From: Vlad Hriaznov Date: Sun, 11 Aug 2024 15:28:18 +0300 Subject: [PATCH] add task solution --- readme.md | 4 +- src/index.html | 42 ++++++++--- src/styles/blocks/page.css | 26 +++++++ src/styles/blocks/search-form.css | 119 ++++++++++++++++++++++++++++++ src/styles/style.css | 2 + 5 files changed, 179 insertions(+), 14 deletions(-) create mode 100644 src/styles/blocks/page.css create mode 100644 src/styles/blocks/search-form.css create mode 100644 src/styles/style.css diff --git a/readme.md b/readme.md index b635aa290b..c026b8f3f2 100644 --- a/readme.md +++ b/readme.md @@ -25,8 +25,8 @@ ___ ❗️ 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://vlad14982.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://vlad14982.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. diff --git a/src/index.html b/src/index.html index abe507e10c..29cdcce974 100644 --- a/src/index.html +++ b/src/index.html @@ -10,23 +10,41 @@ http-equiv="X-UA-Compatible" content="ie=edge" /> - Document + Search Forms - +
+
+
- + +
+ +
+
+ + +
+
diff --git a/src/styles/blocks/page.css b/src/styles/blocks/page.css new file mode 100644 index 0000000000..2f48f3b048 --- /dev/null +++ b/src/styles/blocks/page.css @@ -0,0 +1,26 @@ +@font-face { + font-family: Avenir; + src: url('../../fonts/Avenir-Book.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: Avenir; + src: url('../../fonts/Avenir-Heavy.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} + +* { + font-family: Avenir, sans-serif; + box-sizing: border-box; + color: rgb(61, 78, 97); + font-weight: 300; +} + +body { + margin: 0; + width: 100vw; + height: 100vh; +} diff --git a/src/styles/blocks/search-form.css b/src/styles/blocks/search-form.css new file mode 100644 index 0000000000..29fc3e8a3b --- /dev/null +++ b/src/styles/blocks/search-form.css @@ -0,0 +1,119 @@ +.search__form__group { + display: flex; + flex-direction: column; + width: 100%; + gap: 20px; +} + +.search__form { + display: flex; + align-items: center; + border: 1px solid #e1e7ed; + border-radius: 4px; + margin: 0 8px; + box-shadow: 0 1px 8px rgba(61, 78, 97, 0.1); +} + +.search__form:hover { + box-shadow: 0 3px 8px rgba(61, 78, 97, 0.2); +} + +.search__form--big { + margin-top: 20px; + font-size: 16px; + line-height: 21.86px; + gap: 18px; + height: 70px; + padding: 0 25px; +} + +.search__form--big:hover { + box-shadow: 0 4px 4px rgba(61, 78, 97, 0.25); +} + +.search__form--small { + font-size: 14px; + line-height: 19.12px; + font-weight: 400; + gap: 10px; + height: 42px; + padding: 0 12px; +} + +.search__form__icon { + display: block; + + /* for tests */ + position: relative; + bottom: 1px; + + background-image: url(../../images/Search.svg); + background-position: center; + background-size: contain; + flex-shrink: 0; +} + +.search__form__icon--big { + width: 19px; + height: 19px; +} + +.search__form__icon--small { + width: 11px; + height: 11px; +} + +.search__form__input { + box-sizing: content-box; + font-weight: 900; + width: 100%; + border: none; + padding: 5px 0; + background-color: transparent; +} + +.search__form__input::placeholder { + opacity: 1; + font-weight: 400; +} + +.search__form__input--big { + font-size: 16px; + line-height: 21.86px; +} + +.search__form__input--small { + height: 20px; +} + +.search__form__input--small::placeholder { + font-size: 14px; + line-height: 19.12px; + + /* for tests */ + + /* text-shadow: 0 4px 4px rgba(61, 78, 97, 0.25); */ +} + +.search__form--small:hover .search__form__input--small::placeholder { + /* for tests */ + + /* text-shadow: none; */ +} + +.search__form__input:focus { + outline: none; +} + +.search__form__input--big:focus-within { + text-shadow: 0 4px 4px rgba(61, 78, 97, 0.25); +} + +.search__form--small:focus-within { + box-shadow: none; +} + +.search__form:focus-within { + background: linear-gradient(to top, #f6f6f7, #fff); + border-radius: 3px; +} diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000000..6839af3189 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,2 @@ +@import 'blocks/page.css'; +@import 'blocks/search-form.css';