diff --git a/package.json b/package.json index b3b9ce4091..cd733fd137 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.9.3", "@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..43ea5fd75e 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..96f9cb12b8 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,57 @@ -/* add styles here */ +@font-face { + 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: bold; +} + +.search-form-input { + font-family: Avenir, sans-serif; + display: block; + width: 100%; + margin-top: 20px; + + box-sizing: border-box; + box-shadow: 0 1px 8px 0 #3d4e611a; + + border: 1px solid #e1e7ed; + border-radius: 5px; + + color: #3d4e61; +} + +.search-form-input::placeholder { + color: #3d4e61; +} + +.search-form-input:focus { + outline: none; + font-weight: 700; +} + +.search-form-input--big { + height: 70px; + font-size: 16px; + + padding-left: 62px; + + background-image: url(/src/images/Search.svg); + background-repeat: no-repeat; + background-size: 19px; + background-position: left 26px center; + background-color: #ffff; +} + +.search-form-input--small { + height: 42px; + font-size: 14px; + padding-left: 33px; + box-shadow: 0 1px 8px 0 #3d4e611a; + + background: url(/src/images/Search.svg) no-repeat 13px center/11px 11px; +}