From a4ac8eeb9e9571cb846c08d7731cec830a23547e Mon Sep 17 00:00:00 2001 From: Ostap Tomashivskyi Date: Sun, 12 Nov 2023 22:51:56 +0300 Subject: [PATCH] Created search bars --- readme.md | 4 +-- src/index.html | 33 +++++++++++++++++- src/style.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 129 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 1a026f49fa..21d7bfba8e 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://OstTomash.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://OstTomash.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..30aa6daa35 100644 --- a/src/index.html +++ b/src/index.html @@ -11,6 +11,37 @@ -

Search bar airbnb

+
+ +
+ +
+ +
diff --git a/src/style.css b/src/style.css index e69de29bb2..f411c1897a 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,95 @@ +* { + box-sizing: border-box; + padding: 0; +} + +@font-face { + font-family: "Avenir"; + src: url("./fonts/Avenir-Book.ttf"); +} + +@font-face { + font-family: "AvenirHeavy"; + src: url("./fonts/Avenir-Heavy.ttf"); +} + +body { + font-family: "Avenir", sans-serif; + font-size: 16px; +} + +.form { + margin: 20px auto; + display: flex; + justify-content: center; + width: 100%; + height: 70px; +} + +.form__small { + height: 42px; +} + +.form__label { + display: block; + position: relative; + width: 100%; +} + +.form__label:after { + position: absolute; + content: ""; + display: block; + background-image: url("./images/Search.svg"); + background-repeat: no-repeat; + background-size: contain; + width: 20px; + height: 20px; + top: 25px; + left: 25px; +} + +.label_small:after { + width: 10px; + height: 10px; + top: 15px; + left: 15px; +} + +.form__input { + font-family: "Avenir", sans-serif; + width: 100%; + height: 100%; + border: 1px solid #e1e7ed; + border-radius: 5px; + color: #3d4e61; + font-weight: 300; + box-shadow: 0 1px 8px rgba(61, 78, 97, 0.1); + padding-left: 62px; + font-size: 16px; + line-height: 22px; + outline: none; +} + +.form__input:hover { + box-shadow: 0 3px 8px rgba(61, 78, 97, 0.2); + border-radius: 4px; +} + +.form__input::placeholder { + font-family: "Avenir", sans-serif; + color: inherit; + font-weight: 300; +} + +.form__input:focus { + background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); + font-weight: 700; + border: 1px solid #e1e7ed; +} + +.form__input--small { + padding-left: 33px; + font-size: 14px; + line-height: 19px; +}