From afdd8df2c73c1d40918f40c3e262a308e007195f Mon Sep 17 00:00:00 2001 From: Dmytro Kosstenko Date: Wed, 17 Jul 2024 09:06:47 +0200 Subject: [PATCH 1/5] update readme.md --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index b635aa290b..f6ade05273 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://dkosstenko.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://dkosstenko.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. From 7f320b9fac248cc440c58a803dca187da2c447c1 Mon Sep 17 00:00:00 2001 From: Dmytro Kosstenko Date: Thu, 18 Jul 2024 02:36:44 +0200 Subject: [PATCH 2/5] add my own vision of task solution --- src/index.html | 49 +++++++++++++++---- src/style.css | 127 ++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 165 insertions(+), 11 deletions(-) diff --git a/src/index.html b/src/index.html index abe507e10c..69ea55a58b 100644 --- a/src/index.html +++ b/src/index.html @@ -17,16 +17,45 @@ /> - +
+ +
+ + +
+
- +
+
+ + +
+
diff --git a/src/style.css b/src/style.css index a63fa10d43..614947ba40 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,126 @@ -/* add styles here */ +:root { + --text-color: #3d4e61; + --search-input-border-color: #e1e7ed; + --search-input-hover-color: #3d4e6133; + --search-inpute-shadow-color: #3d4e611a; +} + +body { + font-weight: 300; +} + +/* Importing fonts */ + +@font-face { + font-family: Avenir; + src: url('fonts/Avenir.ttc'); + font-style: normal; + font-weight: 400; +} + +@font-face { + font-family: Avenir; + src: url('fonts/Avenir-Book.ttf'); + font-style: normal; + font-weight: 700; +} + +@font-face { + font-family: Avenir; + src: url('fonts/Avenir-Heavy.ttf'); + font-style: normal; + font-weight: 900; +} + +.search-container { + display: flex; + align-items: center; + + width: 100%; + border: 1px solid var(--search-input-border-color); + border-radius: 4px; + + box-shadow: 0 1px 8px 0 var(--search-input-hover-color); + + transition: box-shadow 0.3s ease-in-out; + + margin-top: 20px; +} + +.search-container:focus { + background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); +} + +.search-container:hover { + box-shadow: 0 3px 8px 0 var(--search-input-hover-color); +} + +.search-container--large { + /* + width: 900px; + */ + height: 70px; +} + +.search-container--small { + /* + width: 427px; + */ + height: 42px; +} + +.search-input { + font-family: Avenir, Helvetica, Arial, sans-serif; + font-weight: 400; + color: var(--text-color); + + height: 100%; + + flex: 1; + + background: transparent; + + outline: none; + border: 0; +} + +.search-input--large { + font-size: 16px; +} + +.search-input--small { + font-size: 14px; +} + +.search-input:focus { + font-weight: 900; +} + +.search-input--large:focus { + text-shadow: 0 4px 4px 0 #00000040; +} + +.search-icon { + background: url('images/Search.svg') no-repeat center center; + background-size: contain; + + cursor: pointer; + border: none; + outline: none; +} + +.search-icon--large { + width: 19px; + height: 19px; + background-size: 19px; + + margin: 0 17px 0 26px; +} + +.search-icon--small { + width: 11px; + height: 11px; + background-size: 11px; + + margin: 0 9px 0 13px; +} From a54dc058616279f184b81c3c46147dcba66db0f3 Mon Sep 17 00:00:00 2001 From: Dmytro Kosstenko Date: Thu, 18 Jul 2024 02:44:02 +0200 Subject: [PATCH 3/5] add smoother transition for the input text on focus --- src/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/style.css b/src/style.css index 614947ba40..e25461bdb6 100644 --- a/src/style.css +++ b/src/style.css @@ -80,6 +80,8 @@ body { background: transparent; + transition: font-weight, text-shadow 0.1s ease-in-out; + outline: none; border: 0; } From 9ef30ea5aeb609e5de0767cf7a4abca9c8865614 Mon Sep 17 00:00:00 2001 From: Dmytro Kosstenko Date: Thu, 18 Jul 2024 21:20:24 +0200 Subject: [PATCH 4/5] add "proper" task solution --- src/index.html | 89 +++++++++++++-------------------- src/style.css | 131 ++++++++++++++----------------------------------- 2 files changed, 70 insertions(+), 150 deletions(-) diff --git a/src/index.html b/src/index.html index 69ea55a58b..8d64c4c048 100644 --- a/src/index.html +++ b/src/index.html @@ -1,61 +1,38 @@ - - - + + + + Document + + + +
+ - - Document - - - - - -
- - -
-
+ -
-
- - -
-
- +
+ +
+ diff --git a/src/style.css b/src/style.css index e25461bdb6..9a26007d46 100644 --- a/src/style.css +++ b/src/style.css @@ -1,128 +1,71 @@ -:root { - --text-color: #3d4e61; - --search-input-border-color: #e1e7ed; - --search-input-hover-color: #3d4e6133; - --search-inpute-shadow-color: #3d4e611a; -} - -body { - font-weight: 300; -} - -/* Importing fonts */ - @font-face { font-family: Avenir; - src: url('fonts/Avenir.ttc'); - font-style: normal; - font-weight: 400; + src: url('./fonts/Avenir.ttc'); } -@font-face { - font-family: Avenir; - src: url('fonts/Avenir-Book.ttf'); - font-style: normal; - font-weight: 700; -} - -@font-face { - font-family: Avenir; - src: url('fonts/Avenir-Heavy.ttf'); - font-style: normal; - font-weight: 900; +body { + font-family: Avenir, Helvetica, Arial, sans-serif; } -.search-container { +.search { display: flex; - align-items: center; - width: 100%; - border: 1px solid var(--search-input-border-color); - border-radius: 4px; + box-sizing: border-box; + + font-weight: 300; + + outline: none; - box-shadow: 0 1px 8px 0 var(--search-input-hover-color); + color: #3d4e61; - transition: box-shadow 0.3s ease-in-out; + background: url(images/Search.svg) no-repeat center center; margin-top: 20px; -} + width: 100%; -.search-container:focus { - background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); -} + border: solid 1px #e1e7ed; + border-radius: 4px; -.search-container:hover { - box-shadow: 0 3px 8px 0 var(--search-input-hover-color); -} + box-shadow: 0 1px 8px #3d4e611a; -.search-container--large { - /* - width: 900px; - */ - height: 70px; + transition: text-shadow 0.2s, font-weight 0.1s ease-in-out; } -.search-container--small { - /* - width: 427px; - */ - height: 42px; +.search::placeholder { + color: #3d4e61; } -.search-input { - font-family: Avenir, Helvetica, Arial, sans-serif; - font-weight: 400; - color: var(--text-color); - - height: 100%; - - flex: 1; - - background: transparent; - - transition: font-weight, text-shadow 0.1s ease-in-out; +.search:hover { + box-shadow: 0 4px 4px #00000040; +} - outline: none; - border: 0; +.search:focus { + font-weight: 900; } -.search-input--large { +.search--big { font-size: 16px; -} -.search-input--small { - font-size: 14px; -} + height: 70px; -.search-input:focus { - font-weight: 900; -} + background-size: 19px 19px; + background-position: 26px 24px; -.search-input--large:focus { - text-shadow: 0 4px 4px 0 #00000040; + padding-left: 62px; } -.search-icon { - background: url('images/Search.svg') no-repeat center center; - background-size: contain; - - cursor: pointer; - border: none; - outline: none; +.search--big:focus { + text-shadow: 0 4px 4px #00000040; } -.search-icon--large { - width: 19px; - height: 19px; - background-size: 19px; - margin: 0 17px 0 26px; -} +.search--small { + font-size: 14px; + + height: 42px; -.search-icon--small { - width: 11px; - height: 11px; - background-size: 11px; + background-size: 11px 11px; + background-position: 13px 15px; - margin: 0 9px 0 13px; + padding-left: 33px; } From 4fb7d089e5497816c333e15ff115ddc5d2a5d49a Mon Sep 17 00:00:00 2001 From: Dmytro Kosstenko Date: Thu, 18 Jul 2024 21:26:44 +0200 Subject: [PATCH 5/5] fixes --- src/index.html | 66 +++++++++++++++++++++++++------------------------- src/style.css | 15 +++++++----- 2 files changed, 42 insertions(+), 39 deletions(-) diff --git a/src/index.html b/src/index.html index 8d64c4c048..f1222b1450 100644 --- a/src/index.html +++ b/src/index.html @@ -1,38 +1,38 @@ - - - - - Document - - - -
- + + -
- -
- + Document + -
- + + +
+ +
+ +
+ +
+ diff --git a/src/style.css b/src/style.css index 9a26007d46..42ff81f1af 100644 --- a/src/style.css +++ b/src/style.css @@ -3,8 +3,9 @@ src: url('./fonts/Avenir.ttc'); } -body { - font-family: Avenir, Helvetica, Arial, sans-serif; +@font-face { + font-family: Avenir-Heavy; + src: url('./fonts/Avenir-Heavy.ttf'); } .search { @@ -12,13 +13,14 @@ body { box-sizing: border-box; + font-family: Avenir, Helvetica, Arial, sans-serif; font-weight: 300; outline: none; color: #3d4e61; - background: url(images/Search.svg) no-repeat center center; + background: url(images/Search.svg) no-repeat; margin-top: 20px; width: 100%; @@ -28,7 +30,9 @@ body { box-shadow: 0 1px 8px #3d4e611a; - transition: text-shadow 0.2s, font-weight 0.1s ease-in-out; + transition: + text-shadow 0.2s, + font-weight 0.1s ease-in-out; } .search::placeholder { @@ -40,7 +44,7 @@ body { } .search:focus { - font-weight: 900; + font-family: Avenir-Heavy, Helvetica, Arial, sans-serif; } .search--big { @@ -58,7 +62,6 @@ body { text-shadow: 0 4px 4px #00000040; } - .search--small { font-size: 14px;