From 1e27aa8360af5b95152a1a9342d2c6d9af7b0223 Mon Sep 17 00:00:00 2001 From: rwlp Date: Thu, 4 Jan 2024 18:05:03 -0300 Subject: [PATCH 1/7] add solution --- readme.md | 4 +- src/index.html | 39 ++++++++++- src/style.css | 178 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 215 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index b635aa290b..dcc0c92229 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://rwlp.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://rwlp.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 4ad0cb2352..0355b25bda 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + Search bar airbnb - -

Search bar airbnb

+ + + +
+
+ +
+ + +
+ +
+ +
+ +
+ + +
+
+
+ diff --git a/src/style.css b/src/style.css index a63fa10d43..3425088997 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,177 @@ -/* add styles here */ +/* #region fonts */ +@font-face { + font-family: Avenir; + src: url("fonts/Avenir-Book.ttf"); +} + +/* #endregion fonts */ + +/* #region normalize */ +* { + margin: 0; + padding: 0; +} + +/* #endregion normalize */ + +/* #region page */ +.page { + font-family: Avenir, sans-serif; + font-weight: 300; +} + +.page__body { + margin: 0 8px; +} + +.page__content { + display: flex; + width: 100%; + flex-direction: column; + padding: 20px 0; + gap: 20px; + + +} + +.page__form { + margin: 0; + padding: 0; +} + +.page__inputs-container-large { + padding: 0; + position: relative; + +} + +.page__inputs-container-small { + padding: 0; + position: relative; +} + +.page__form-big{ + position: relative; + top: 20px; +} + +/* #endregion page */ + +/* #region form */ +.form { + margin: 0; + padding: 0; +} + +.form__button-large { + position: absolute; /* relative to .page__inputs-container-large */ + top: 25px; + left: 26px; + z-index: 3; +} + +.form__button-small { + position: absolute; /* relative to .page__inputs-container-small */ + top: 15px; + left: 13px; + z-index: 3; +} + +/* #endregion form */ + +/* #region button-search */ +.button-search { + background-image: url(images/Search.svg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-color: transparent; + border: none; + color: #687C94; + padding: 0; + margin: 0; +} + + +.button-search--size--l { + width: 19px; + height: 19px; +} + +.button-search--size--s { + width: 11px; + height: 11px; +} + +/* #endregion button-search */ + +/* #region inputs */ +.input-search { + box-sizing: border-box; + border: 1px solid #E1E7ED; + border-radius: 4px; + box-shadow: 0 1px 8px #3D4E611A; + + font-family: inherit; + letter-spacing: 0; + color: #3D4E61; + text-align: left; + + padding: 0; + margin: 0; + width: 100%; + + + +} + +.input-search--size--l { + text-indent: 62px; + line-height: 22px; + font-size: 16px; + + height: 70px; + + +} + +.input-search--size--l:hover { + box-shadow: 0 4px 4px #00000040; +} + +.input-search--size--l:focus { + background: linear-gradient(180deg, #FFF 0%, #F6F6F7 100%); + outline: none; + + text-shadow: 0 4px 4px #00000040; + font-weight: 600; + letter-spacing: 0; + text-align: left; + +} + +.input-search--size--s { + text-indent: 33px; + line-height: 19px; + font-size: 14px; + font-weight: 400; + height: 42px; + + /* text-shadow: 0 4px 4px #00000040; */ + + +} + +.input-search--size--s:hover { + text-shadow: none; + box-shadow: 0 4px 4px #00000040; +} + +.input-search--size--s:focus { + font-weight: 900; + background: linear-gradient(180deg, #FFF 0%, #F6F6F7 100%); + outline: none; + +} + +/* #endregion inputs */ From 04cead5a82da793ee01f4fba306aba8345496a4a Mon Sep 17 00:00:00 2001 From: rwlp Date: Mon, 29 Jan 2024 16:23:35 -0300 Subject: [PATCH 2/7] add task solution again --- readme.md | 8 ++++---- src/style.css | 5 +++++ 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index dcc0c92229..268a59194e 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 3425088997..f445498a29 100644 --- a/src/style.css +++ b/src/style.css @@ -15,6 +15,11 @@ /* #endregion normalize */ /* #region page */ +html { + font-family: Avenir, sans-serif; + font-weight: 300; +} + .page { font-family: Avenir, sans-serif; font-weight: 300; From 947fd536f26aed75d834eede4b62a6fee0ad0b27 Mon Sep 17 00:00:00 2001 From: rwlp Date: Mon, 29 Jan 2024 16:59:44 -0300 Subject: [PATCH 3/7] add task solution 3 --- src/style.css | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/style.css b/src/style.css index f445498a29..e8ce668f74 100644 --- a/src/style.css +++ b/src/style.css @@ -35,8 +35,6 @@ html { flex-direction: column; padding: 20px 0; gap: 20px; - - } .page__form { @@ -47,7 +45,6 @@ html { .page__inputs-container-large { padding: 0; position: relative; - } .page__inputs-container-small { @@ -116,28 +113,20 @@ html { border: 1px solid #E1E7ED; border-radius: 4px; box-shadow: 0 1px 8px #3D4E611A; - font-family: inherit; letter-spacing: 0; color: #3D4E61; text-align: left; - padding: 0; margin: 0; width: 100%; - - - } .input-search--size--l { text-indent: 62px; line-height: 22px; font-size: 16px; - height: 70px; - - } .input-search--size--l:hover { @@ -147,24 +136,18 @@ html { .input-search--size--l:focus { background: linear-gradient(180deg, #FFF 0%, #F6F6F7 100%); outline: none; - text-shadow: 0 4px 4px #00000040; font-weight: 600; letter-spacing: 0; text-align: left; - } .input-search--size--s { - text-indent: 33px; + padding-left: 33px; line-height: 19px; font-size: 14px; font-weight: 400; height: 42px; - - /* text-shadow: 0 4px 4px #00000040; */ - - } .input-search--size--s:hover { @@ -176,7 +159,6 @@ html { font-weight: 900; background: linear-gradient(180deg, #FFF 0%, #F6F6F7 100%); outline: none; - } /* #endregion inputs */ From b4ee5714dbefd50e90af09816f67214c866642f3 Mon Sep 17 00:00:00 2001 From: rwlp Date: Mon, 29 Jan 2024 17:20:16 -0300 Subject: [PATCH 4/7] add task solution --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 0355b25bda..cc6eb7e519 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,7 @@ @@ -37,7 +38,6 @@ From ecb68f63ce06634eb82b1fe7e68e61243e793a04 Mon Sep 17 00:00:00 2001 From: rwlp Date: Tue, 30 Jan 2024 19:30:50 -0300 Subject: [PATCH 5/7] add task solution with better BEM and colors applied --- src/index.html | 63 +++++++++++++--------- src/style.css | 138 ++++++++++++++++++++----------------------------- 2 files changed, 95 insertions(+), 106 deletions(-) diff --git a/src/index.html b/src/index.html index cc6eb7e519..9b1802b393 100644 --- a/src/index.html +++ b/src/index.html @@ -6,44 +6,57 @@ name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" > - + Search bar airbnb - + -
+
+
+ -
- - -
- +
+
+ action="post" + class="form" + data-qa="small"> + -
- - -
+
+
- diff --git a/src/style.css b/src/style.css index e8ce668f74..dec63c53c2 100644 --- a/src/style.css +++ b/src/style.css @@ -15,150 +15,126 @@ /* #endregion normalize */ /* #region page */ -html { - font-family: Avenir, sans-serif; - font-weight: 300; -} - .page { - font-family: Avenir, sans-serif; font-weight: 300; } .page__body { - margin: 0 8px; + padding: 20px 8px 0; } -.page__content { +/* #endregion page */ + +/* #region container */ +.container { display: flex; - width: 100%; flex-direction: column; - padding: 20px 0; gap: 20px; -} - -.page__form { - margin: 0; - padding: 0; -} - -.page__inputs-container-large { - padding: 0; - position: relative; -} - -.page__inputs-container-small { + width: 100%; padding: 0; - position: relative; -} - -.page__form-big{ - position: relative; - top: 20px; } -/* #endregion page */ +/* #endregion container */ /* #region form */ .form { - margin: 0; - padding: 0; + width: 100%; + display: flex; + align-items: center; + position: relative; } -.form__button-large { - position: absolute; /* relative to .page__inputs-container-large */ +.form__search-button-big { + position: absolute; top: 25px; left: 26px; - z-index: 3; } -.form__button-small { - position: absolute; /* relative to .page__inputs-container-small */ +.form__search-button-small { + position: absolute; top: 15px; left: 13px; - z-index: 3; } /* #endregion form */ -/* #region button-search */ -.button-search { +/* #region icon-search */ +.icon-search { + margin: 0; + padding: 0; + border: none; + background-color: transparent; background-image: url(images/Search.svg); - background-position: center; background-repeat: no-repeat; - background-size: cover; - background-color: transparent; - border: none; - color: #687C94; - padding: 0; - margin: 0; + background-position: center; + background-size: contain; + z-index: 1; } - -.button-search--size--l { +.icon-search--size--big { width: 19px; height: 19px; } -.button-search--size--s { +.icon-search--size--small { width: 11px; height: 11px; } -/* #endregion button-search */ +/* #endregion icon-search */ -/* #region inputs */ +/* #region input-search */ .input-search { - box-sizing: border-box; + width: 100%; border: 1px solid #E1E7ED; - border-radius: 4px; + border-radius: 3px; box-shadow: 0 1px 8px #3D4E611A; - font-family: inherit; + box-sizing: border-box; + font-family: Avenir, sans-serif; +} + +.input-search:hover { + box-shadow: 0 3px 8px #3D4E6133; +} + +.input-search:focus { + background: linear-gradient(180deg, #fff 0%, #F6F6F7 100%); + border: 1px solid #E1E7ED; letter-spacing: 0; - color: #3D4E61; text-align: left; - padding: 0; - margin: 0; - width: 100%; } -.input-search--size--l { +.input-search--size--big { + height: 70px; text-indent: 62px; - line-height: 22px; font-size: 16px; - height: 70px; } -.input-search--size--l:hover { - box-shadow: 0 4px 4px #00000040; +.input-search--size--big::placeholder { + font-weight: 300; + color: #3D4E61; } -.input-search--size--l:focus { - background: linear-gradient(180deg, #FFF 0%, #F6F6F7 100%); - outline: none; +.input-search--size--big:focus { + color: #3D4E61; text-shadow: 0 4px 4px #00000040; - font-weight: 600; - letter-spacing: 0; - text-align: left; } -.input-search--size--s { +.input-search--size--small { + height: 42px; padding-left: 33px; - line-height: 19px; font-size: 14px; font-weight: 400; - height: 42px; + line-height: 19px; } -.input-search--size--s:hover { - text-shadow: none; - box-shadow: 0 4px 4px #00000040; +.input-search--size--small::placeholder { + font-weight: 300; + color:#3D4E61; } -.input-search--size--s:focus { - font-weight: 900; - background: linear-gradient(180deg, #FFF 0%, #F6F6F7 100%); - outline: none; +.input-search--size--small:focus { + font-weight: 900; } -/* #endregion inputs */ +/* #endregion input-search */ From 8b694ede9457fe79757477599483a6ae81310dd1 Mon Sep 17 00:00:00 2001 From: Rafael Wesley Date: Thu, 22 Feb 2024 12:34:54 -0300 Subject: [PATCH 6/7] correct issues --- src/index.html | 71 ++++++++++++++++++++++++-------------------------- src/style.css | 16 ++++++------ 2 files changed, 42 insertions(+), 45 deletions(-) diff --git a/src/index.html b/src/index.html index 9b1802b393..7a6d2a1bfc 100644 --- a/src/index.html +++ b/src/index.html @@ -2,17 +2,10 @@ - - + + Search bar airbnb - + @@ -20,41 +13,45 @@
- + action="post" + class="form" + data-qa="big" + > + + id="input-search" + class="input-search input-search--size-big form__search-input-big" + data-qa="keypress" + type="text" + placeholder="Try "Los Angeles"" + >
- + action="post" + class="form" + data-qa="small" + > + + id="small-search" + class="input-search input-search--size-small form__search-input-small" + type="text" + placeholder="Try "Los Angeles"" + >
diff --git a/src/style.css b/src/style.css index dec63c53c2..86b7f9ef18 100644 --- a/src/style.css +++ b/src/style.css @@ -71,12 +71,12 @@ z-index: 1; } -.icon-search--size--big { +.icon-search--size-big { width: 19px; height: 19px; } -.icon-search--size--small { +.icon-search--size-small { width: 11px; height: 11px; } @@ -104,23 +104,23 @@ text-align: left; } -.input-search--size--big { +.input-search--size-big { height: 70px; text-indent: 62px; font-size: 16px; } -.input-search--size--big::placeholder { +.input-search--size-big::placeholder { font-weight: 300; color: #3D4E61; } -.input-search--size--big:focus { +.input-search--size-big:focus { color: #3D4E61; text-shadow: 0 4px 4px #00000040; } -.input-search--size--small { +.input-search--size-small { height: 42px; padding-left: 33px; font-size: 14px; @@ -128,12 +128,12 @@ line-height: 19px; } -.input-search--size--small::placeholder { +.input-search--size-small::placeholder { font-weight: 300; color:#3D4E61; } -.input-search--size--small:focus { +.input-search--size-small:focus { font-weight: 900; } From e6dfe5375c73734d562fb536c36dfd2845d62adb Mon Sep 17 00:00:00 2001 From: rwlp Date: Tue, 27 Feb 2024 17:02:05 -0300 Subject: [PATCH 7/7] add corrections --- src/index.html | 27 +++++++++++++++------------ src/style.css | 26 ++++++++++++-------------- 2 files changed, 27 insertions(+), 26 deletions(-) diff --git a/src/index.html b/src/index.html index 7a6d2a1bfc..a5a3e5acb1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + @@ -8,29 +8,30 @@ - - +
+ > + > + +
@@ -40,18 +41,20 @@ data-qa="small" > + > + +
diff --git a/src/style.css b/src/style.css index 86b7f9ef18..1c02d1f536 100644 --- a/src/style.css +++ b/src/style.css @@ -16,16 +16,14 @@ /* #region page */ .page { + font-style: Avenir; font-weight: 300; -} - -.page__body { padding: 20px 8px 0; } /* #endregion page */ -/* #region container */ +/* #region container (Is used as a DOM element) */ .container { display: flex; flex-direction: column; @@ -44,13 +42,13 @@ position: relative; } -.form__search-button-big { +.form__search-button--big { position: absolute; top: 25px; left: 26px; } -.form__search-button-small { +.form__search-button--small { position: absolute; top: 15px; left: 13px; @@ -59,7 +57,7 @@ /* #endregion form */ /* #region icon-search */ -.icon-search { +.search-button { margin: 0; padding: 0; border: none; @@ -71,12 +69,12 @@ z-index: 1; } -.icon-search--size-big { +.search-button--size--big { width: 19px; height: 19px; } -.icon-search--size-small { +.search-button--size-small { width: 11px; height: 11px; } @@ -104,23 +102,23 @@ text-align: left; } -.input-search--size-big { +.input-search--size--big { height: 70px; text-indent: 62px; font-size: 16px; } -.input-search--size-big::placeholder { +.input-search--size--big::placeholder { font-weight: 300; color: #3D4E61; } -.input-search--size-big:focus { +.input-search--size--big:focus { color: #3D4E61; text-shadow: 0 4px 4px #00000040; } -.input-search--size-small { +.input-search--size--small { height: 42px; padding-left: 33px; font-size: 14px; @@ -128,7 +126,7 @@ line-height: 19px; } -.input-search--size-small::placeholder { +.input-search--size--small::placeholder { font-weight: 300; color:#3D4E61; }