From 4f267a7a2b47629f102654197b96dd690d03ade6 Mon Sep 17 00:00:00 2001 From: Yurii Kryvorotko Date: Tue, 1 Oct 2024 10:12:22 +0300 Subject: [PATCH] Solution --- readme.md | 4 +-- src/block/input.css | 31 ++++++++++++++++++++++ src/block/main.css | 7 +++++ src/block/search-form.css | 48 ++++++++++++++++++++++++++++++++++ src/index.html | 55 +++++++++++++++++++++++++++++++-------- src/normalized.css | 19 ++++++++++++++ src/style.css | 6 ++++- src/variables.css | 11 ++++++++ 8 files changed, 167 insertions(+), 14 deletions(-) create mode 100644 src/block/input.css create mode 100644 src/block/main.css create mode 100644 src/block/search-form.css create mode 100644 src/normalized.css create mode 100644 src/variables.css diff --git a/readme.md b/readme.md index b635aa290b..6e0e2ef350 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://KrivorotkoYurii.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://KrivorotkoYurii.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/block/input.css b/src/block/input.css new file mode 100644 index 0000000000..4cb9997302 --- /dev/null +++ b/src/block/input.css @@ -0,0 +1,31 @@ +.search-form__input { + height: 100%; + width: 100%; + padding: 0; + + font-size: 16px; + + border: none; +} + +.search-form__input::placeholder { + color: inherit; +} + +.search-form__input--small { + font-size: 14px; +} + +.search-form__input:focus { + outline: none; + font-weight: 900; + + background: linear-gradient( + var(--first-gradient-form-color), + var(--second-gradient-form-color) + ); +} + +.search-form__input--large:focus { + text-shadow: 0 4px 4px var(--box-shadow-dark-color); +} diff --git a/src/block/main.css b/src/block/main.css new file mode 100644 index 0000000000..5f245fed5e --- /dev/null +++ b/src/block/main.css @@ -0,0 +1,7 @@ +.main { + margin: 0 8px; +} + +.main__form { + margin-top: 20px; +} diff --git a/src/block/search-form.css b/src/block/search-form.css new file mode 100644 index 0000000000..04bb414157 --- /dev/null +++ b/src/block/search-form.css @@ -0,0 +1,48 @@ +.search-form { + display: flex; + align-items: center; + height: 70px; + + border: 1px solid var(--box-border-color); + border-radius: 4px; + box-shadow: 0 1px 8px var(--box-shadow-color); +} + +.search-form--small { + height: 42px; +} + +.search-form__search-icon { + height: var(--icon-large-size); + min-width: var(--icon-large-size); + margin: 0 17px 0 26px; + + background: center no-repeat url(../images/Search.svg); + background-size: cover; +} + +.search-form__search-icon--small { + height: var(--icon-small-size); + min-width: var(--icon-small-size); + margin: 0 9px 0 13px; +} + +.search-form--large:hover, +.search-form:has(.search-form__input--large:focus) { + box-shadow: 0 4px 4px var(--box-large-hover-shadow-color); +} + +.search-form--small:hover { + box-shadow: 0 3px 8px var(--box-small-hover-shadow-color); +} + +.search-form--small:has(.search-form__input:focus) { + box-shadow: none; +} + +.search-form:has(.search-form__input:focus) { + background: linear-gradient( + var(--first-gradient-form-color), + var(--second-gradient-form-color) + ); +} diff --git a/src/index.html b/src/index.html index abe507e10c..1ae369b8cc 100644 --- a/src/index.html +++ b/src/index.html @@ -2,31 +2,64 @@ + + + Document + + - +
+
+
+ - + +
+
+ +
+
+ + + +
+
+
diff --git a/src/normalized.css b/src/normalized.css new file mode 100644 index 0000000000..f5f29a9ea1 --- /dev/null +++ b/src/normalized.css @@ -0,0 +1,19 @@ +@font-face { + font-family: Avenir; + src: url(./fonts/Avenir.ttc); +} + +body { + margin: 0; +} + +* { + box-sizing: border-box; +} + +html, +input { + font-family: Avenir, Arial, Helvetica, sans-serif; + color: var(--text-color); + font-weight: 300; +} diff --git a/src/style.css b/src/style.css index a63fa10d43..1b7aa2f7cb 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,5 @@ -/* add styles here */ +@import './variables.css'; +@import './normalized.css'; +@import './block/main.css'; +@import './block/search-form.css'; +@import './block/input.css'; diff --git a/src/variables.css b/src/variables.css new file mode 100644 index 0000000000..7caa3bb5d8 --- /dev/null +++ b/src/variables.css @@ -0,0 +1,11 @@ +html { + --text-color: #3d4e61; + --box-border-color: #e1e7ed; + --box-shadow-color: #3d4e611a; + --box-large-hover-shadow-color: #00000040; + --box-small-hover-shadow-color: #3d4e6133; + --first-gradient-form-color: #fff; + --second-gradient-form-color: #f6f6f7; + --icon-large-size: 19px; + --icon-small-size: 11px; +}