From 216202e089029754c26b5ed1d9b16fb4b300a09c Mon Sep 17 00:00:00 2001 From: Anna Tuhusova Date: Sun, 2 Jun 2024 20:55:36 +0200 Subject: [PATCH 1/5] add task solution --- readme.md | 4 +-- src/index.html | 34 ++++++++++++++++------- src/style.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 99 insertions(+), 13 deletions(-) diff --git a/readme.md b/readme.md index b635aa290b..2952ef144b 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://tuhusova.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://tuhusova.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..b86f98216a 100644 --- a/src/index.html +++ b/src/index.html @@ -17,16 +17,30 @@ /> - +
+
+ +
- +
+ +
+
diff --git a/src/style.css b/src/style.css index a63fa10d43..392eb0d425 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,73 @@ -/* add styles here */ +@font-face { + font-family: Avenir; + src: url('./fonts/Avenir-Book.ttf'); + src: url('./fonts/Avenir-Heavy.ttf'); + src: url('./fonts/Avenir.ttc'); + font-style: normal; + font-weight: normal; + color: rgba(61, 78, 97, 1); +} + +* { + font-family: Avenir, Arial, Helvetica, sans-serif; + box-sizing: border-box; + font-weight: 300px; +} + +body { + margin: 0; + padding: 0; +} + +.search-bar-input { + box-sizing: border-box; + border-radius: 4px; + background-image: url(/src/images/Search.svg); + background-repeat: no-repeat; + width: 100%; + border: 1px solid #e1e7ed; + box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); + line-height: 21.86px; +} + +.search-bar-input--top { + display: inline-block; + margin: 20px 0; + color: #3d4e61; + font-size: 16px; + padding: 0; + height: 70px; + padding-left: 62px; + background-size: 19px 19px; + background-position: 26px center; +} + +.search-bar-input--down { + margin: 0; + padding: 0; + display: inline-block; + font-size: 14px; + border-radius: 5; + height: 42px; + padding-left: 33px; + background-size: 11px 11px; + background-position: 13px center; +} + +.search-bar-input::placeholder { + color: #3d4e61; +} + +.search-bar-input :hover { + box-shadow: 0 4px 4px 0; + color: rgba(0, 0, 0, 0.25); +} + +.search-bar-input :focus { + box-shadow: 0 4px 4px 0; + color: rgba(0, 0, 0, 0.25); + font-size: 16px; + line-height: 21.86px; + text-align: left; + font-family: Avenir-Heavy, sans-serif; +} From 2b49e64d72b1168b8917e1e1b7a886c24afe9073 Mon Sep 17 00:00:00 2001 From: Anna Tuhusova Date: Sun, 2 Jun 2024 22:44:44 +0200 Subject: [PATCH 2/5] add task solution --- readme.md | 8 ++++---- src/style.css | 14 +++----------- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/readme.md b/readme.md index 2952ef144b..090536160f 100644 --- a/readme.md +++ b/readme.md @@ -30,7 +30,7 @@ ___ ❗️ 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/style.css b/src/style.css index 392eb0d425..72c70e14c2 100644 --- a/src/style.css +++ b/src/style.css @@ -14,12 +14,8 @@ font-weight: 300px; } -body { - margin: 0; - padding: 0; -} - .search-bar-input { + margin: 20px 0; box-sizing: border-box; border-radius: 4px; background-image: url(/src/images/Search.svg); @@ -31,11 +27,9 @@ body { } .search-bar-input--top { - display: inline-block; - margin: 20px 0; + display: flex; color: #3d4e61; font-size: 16px; - padding: 0; height: 70px; padding-left: 62px; background-size: 19px 19px; @@ -43,9 +37,7 @@ body { } .search-bar-input--down { - margin: 0; - padding: 0; - display: inline-block; + display: flex; font-size: 14px; border-radius: 5; height: 42px; From 42d1e095b3ca4203824737df9eb6719c5b128809 Mon Sep 17 00:00:00 2001 From: Anna Tuhusova Date: Mon, 3 Jun 2024 09:43:02 +0200 Subject: [PATCH 3/5] add task solution --- src/index.html | 46 ++++++++++++++++++++++------------------------ 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/src/index.html b/src/index.html index b86f98216a..0f015ec414 100644 --- a/src/index.html +++ b/src/index.html @@ -17,30 +17,28 @@ /> -
-
- -
+
+ +
-
- -
-
+
+ +
From a2d1146fd869818d966993884c06ce9916a112f4 Mon Sep 17 00:00:00 2001 From: Anna Tuhusova Date: Mon, 3 Jun 2024 18:10:04 +0200 Subject: [PATCH 4/5] add task solution --- src/style.css | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/style.css b/src/style.css index 72c70e14c2..7bf97a510a 100644 --- a/src/style.css +++ b/src/style.css @@ -8,22 +8,21 @@ color: rgba(61, 78, 97, 1); } -* { +html { font-family: Avenir, Arial, Helvetica, sans-serif; - box-sizing: border-box; - font-weight: 300px; + font-weight: 300; } .search-bar-input { margin: 20px 0; box-sizing: border-box; border-radius: 4px; - background-image: url(/src/images/Search.svg); + background-image: url(/images/Search.svg); background-repeat: no-repeat; width: 100%; border: 1px solid #e1e7ed; box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); - line-height: 21.86px; + font-family: Avenir, Arial, Helvetica, sans-serif; } .search-bar-input--top { @@ -39,7 +38,6 @@ .search-bar-input--down { display: flex; font-size: 14px; - border-radius: 5; height: 42px; padding-left: 33px; background-size: 11px 11px; @@ -59,7 +57,6 @@ box-shadow: 0 4px 4px 0; color: rgba(0, 0, 0, 0.25); font-size: 16px; - line-height: 21.86px; text-align: left; font-family: Avenir-Heavy, sans-serif; } From 1420a1a0c342af8a96e615e3ff7a105ffa0ba567 Mon Sep 17 00:00:00 2001 From: Anna Tuhusova Date: Mon, 3 Jun 2024 20:07:56 +0200 Subject: [PATCH 5/5] add task solution --- src/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index 7bf97a510a..d0bef1fed8 100644 --- a/src/style.css +++ b/src/style.css @@ -22,7 +22,7 @@ html { width: 100%; border: 1px solid #e1e7ed; box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); - font-family: Avenir, Arial, Helvetica, sans-serif; + font-family: inherit; } .search-bar-input--top {