From 0628d9c0b8bdf0f19fbf1d5c46a022d033d83129 Mon Sep 17 00:00:00 2001 From: Adeveloper Date: Wed, 26 Jul 2023 22:20:38 +0300 Subject: [PATCH 1/3] add for search bar --- readme.md | 4 +-- src/index.html | 48 ++++++++++++++++++++++++-- src/style.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 142 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 872de150c2..d6834d09e6 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # Search bar for Airbnb 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://Anton201220.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://Anton201220.github.io/layout_search-bar-airbnb/report/html_report/) > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/#how-to-solve-the-layout-tasks-on-github) diff --git a/src/index.html b/src/index.html index 4ad0cb2352..61addae2db 100644 --- a/src/index.html +++ b/src/index.html @@ -4,13 +4,57 @@ Search bar airbnb -

Search bar airbnb

+ +
+ +
+ + + +
+ +
+ +
+ +
+ + + +
+ +
+ + diff --git a/src/style.css b/src/style.css index e69de29bb2..43840023db 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,94 @@ +@font-face { + font-family: Avenir-Book; + src: url(./fonts/Avenir-Book.ttf); + font-weight: 300; +} + +@font-face { + font-family: Avenir-Heavy; + src: url(./fonts/Avenir-Heavy.ttf); + font-weight: 700; +} + +html { + --border-color: #e1e7ed; + --background-color: #fff; + --font-color: #3d4e61; +} + +body { + font-family: Avenir-Book, Arial, sans-serif; + font-size: 16px; +} + +.search-form { + margin-top: 20px; + position: relative; +} + +.input { + width: 100%; + box-sizing: border-box; + font-family: "Avenir-Heavy", Arial, sans-serif; + + border-radius: 4px; + border: 1px solid var(--border-color); + background: var(--background-color); + box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); +} + +.search-form__input::before { + content: ""; + position: absolute; + background-image: url("./images/Search.svg"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + +.input--big { + height: 70px; + padding-left: 62px; + font-size: 16px; +} + +.search-form__input--big::before { + height: 19px; + width: 19px; + top: 25px; + left: 26px; +} + +.input--sm { + height: 42px; + font-size: 14px; + padding-left: 33px; +} + +.search-form__input--sm::before { + width: 11px; + height: 11px; + top: 15px; + left: 13px; +} + +.input::placeholder { + font-family: Avenir-Book, Arial, sans-serif; + font-weight: 400; + color: var(--font-color); + +} + +.input:hover { + box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); + +} + +.input:focus { + outline: none; + border-radius: 3px; + background: linear-gradient(180deg, var(--background-color) 0%, #f6f6f7 100%); + font-family: Avenir-Heavy, Arial, sans-serif; + color: var(--font-color); + text-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); +} From 5f1673e1e3f73912a4afb6cfdcba36ca8e91e9bc Mon Sep 17 00:00:00 2001 From: Adeveloper Date: Fri, 28 Jul 2023 00:44:56 +0300 Subject: [PATCH 2/3] deleted div and add name-tag --- src/index.html | 40 ++++++++++++------------------- src/style.css | 65 ++++++++++++++++++++++---------------------------- 2 files changed, 44 insertions(+), 61 deletions(-) diff --git a/src/index.html b/src/index.html index 61addae2db..7e11dbd292 100644 --- a/src/index.html +++ b/src/index.html @@ -20,39 +20,29 @@ action="#" method="post" data-qa="big" - class="search-form" + class="search-form search-form--big" > - -
- - - -
- +
- -
- - - -
- +
diff --git a/src/style.css b/src/style.css index 43840023db..f9c7782d83 100644 --- a/src/style.css +++ b/src/style.css @@ -4,20 +4,10 @@ font-weight: 300; } -@font-face { - font-family: Avenir-Heavy; - src: url(./fonts/Avenir-Heavy.ttf); - font-weight: 700; -} - html { --border-color: #e1e7ed; --background-color: #fff; --font-color: #3d4e61; -} - -body { - font-family: Avenir-Book, Arial, sans-serif; font-size: 16px; } @@ -26,25 +16,44 @@ body { position: relative; } +.search-form::before { + content: ""; + position: absolute; + background-image: url("./images/Search.svg"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + +.search-form--big::before { + height: 19px; + width: 19px; + top: 25px; + left: 26px; +} + +.search-form--sm::before { + width: 11px; + height: 11px; + top: 15px; + left: 13px; +} + .input { width: 100%; box-sizing: border-box; - font-family: "Avenir-Heavy", Arial, sans-serif; + font-family: "Avenir-Book", Arial, sans-serif; + font-weight: 700; border-radius: 4px; border: 1px solid var(--border-color); background: var(--background-color); box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); } - -.search-form__input::before { - content: ""; - position: absolute; - background-image: url("./images/Search.svg"); - background-position: center; - background-size: cover; - background-repeat: no-repeat; -} +/* if i*m wrong about fonts. I've confused in this - - Remember that inputs and +other interactive elements don’t inherit font styles by default. +- Remember that placeholder has its own set of styles available using ` +::placeholder` pseudo-element. */ .input--big { height: 70px; @@ -52,26 +61,12 @@ body { font-size: 16px; } -.search-form__input--big::before { - height: 19px; - width: 19px; - top: 25px; - left: 26px; -} - .input--sm { height: 42px; font-size: 14px; padding-left: 33px; } -.search-form__input--sm::before { - width: 11px; - height: 11px; - top: 15px; - left: 13px; -} - .input::placeholder { font-family: Avenir-Book, Arial, sans-serif; font-weight: 400; @@ -88,7 +83,5 @@ body { outline: none; border-radius: 3px; background: linear-gradient(180deg, var(--background-color) 0%, #f6f6f7 100%); - font-family: Avenir-Heavy, Arial, sans-serif; color: var(--font-color); - text-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); } From 28d3a0c288d397d8a608a1a7311632b6476ed92d Mon Sep 17 00:00:00 2001 From: Adeveloper Date: Mon, 31 Jul 2023 23:49:10 +0300 Subject: [PATCH 3/3] removed extra classess --- src/index.html | 4 ++-- src/style.css | 24 +++++++++++------------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/index.html b/src/index.html index 7e11dbd292..7e05c8008c 100644 --- a/src/index.html +++ b/src/index.html @@ -20,12 +20,12 @@ action="#" method="post" data-qa="big" - class="search-form search-form--big" + class="search-form" > diff --git a/src/style.css b/src/style.css index f9c7782d83..5d16252855 100644 --- a/src/style.css +++ b/src/style.css @@ -1,13 +1,20 @@ @font-face { - font-family: Avenir-Book; + font-family: "Avenir"; src: url(./fonts/Avenir-Book.ttf); font-weight: 300; } +@font-face { + font-family: "Avenir"; + src: url(./fonts/Avenir-Heavy.ttf); + font-weight: 700; +} html { --border-color: #e1e7ed; --background-color: #fff; --font-color: #3d4e61; + font-family: "Avenir", Arial, sans-serif; + font-weight: 300; font-size: 16px; } @@ -23,9 +30,6 @@ html { background-position: center; background-size: cover; background-repeat: no-repeat; -} - -.search-form--big::before { height: 19px; width: 19px; top: 25px; @@ -42,20 +46,14 @@ html { .input { width: 100%; box-sizing: border-box; - font-family: "Avenir-Book", Arial, sans-serif; + font-family: "Avenir", Arial, sans-serif; font-weight: 700; border-radius: 4px; border: 1px solid var(--border-color); background: var(--background-color); box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); -} -/* if i*m wrong about fonts. I've confused in this - - Remember that inputs and -other interactive elements don’t inherit font styles by default. -- Remember that placeholder has its own set of styles available using ` -::placeholder` pseudo-element. */ -.input--big { height: 70px; padding-left: 62px; font-size: 16px; @@ -68,8 +66,8 @@ other interactive elements don’t inherit font styles by default. } .input::placeholder { - font-family: Avenir-Book, Arial, sans-serif; - font-weight: 400; + font-family: "Avenir", Arial, sans-serif; + font-weight: 300; color: var(--font-color); }