diff --git a/package.json b/package.json index b3b9ce4091..40559d1158 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.7.3", + "@mate-academy/scripts": "^1.8.1", "@mate-academy/stylelint-config": "latest", "backstopjs": "6.2.2", "jest": "^29.7.0", diff --git a/src/index.html b/src/index.html index abe507e10c..e03de369c0 100644 --- a/src/index.html +++ b/src/index.html @@ -17,16 +17,28 @@ /> - +
+ +
- +
+ +
diff --git a/src/style.css b/src/style.css index a63fa10d43..e896817ed5 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,89 @@ -/* add styles here */ +@font-face { + font-family: Avenir; + src: url(./fonts/Avenir-Book.ttf); + font-weight: 300; + color: rgba(61, 78, 97, 1); +} + +.search { + margin-top: 20px; + + display: flex; + position: relative; + box-sizing: border-box; +} + +.search::after { + background-image: url('./images/Search.svg'); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ''; + position: absolute; +} + +.search:hover { + box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); +} + +.search--big { + height: 70px; +} + +.search--big::after { + height: 19px; + width: 19px; + top: 25px; + left: 26px; +} + +.search__input { + height: 100%; + width: 100%; + + outline: none; + box-sizing: border-box; + box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); + border: 1px solid rgba(225, 231, 237, 1); + border-radius: 4px; + + font-family: Avenir, sans-serif; +} + +.search__input--big { + padding-left: 62px; + line-height: 21px; + font-size: 16px; +} + +.search__input--small { + padding-left: 33px; + line-height: 19px; + font-size: 14px; +} + +.search__input_big:focus { + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); + background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); + + font-weight: bold; +} + +.search--small { + height: 42px; + margin-top: 20px; +} + +.search--small::after { + width: 11px; + height: 11px; + top: 15px; + left: 13px; +} + +.search__input_small:focus { + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); + background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); + + font-weight: bold; +}