From 02ec39e88e6b9e34d98754b74618f0d421e2c1cf Mon Sep 17 00:00:00 2001 From: Kryvytskyi Volodymyr Date: Mon, 10 Jun 2024 20:36:07 +0300 Subject: [PATCH 1/2] Update index.html --- src/index.html | 53 ++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 43 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index abe507e10c..9405cb17fa 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -15,18 +16,50 @@ rel="stylesheet" href="style.css" /> + + - +
+
+ + Search + +
- +
+ + + + Search +
+
From b5d3eea26124a08a1497198183c918e0ec99b970 Mon Sep 17 00:00:00 2001 From: Kryvytskyi Volodymyr Date: Mon, 10 Jun 2024 20:36:25 +0300 Subject: [PATCH 2/2] Update style.css --- src/style.css | 82 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/src/style.css b/src/style.css index a63fa10d43..2c46f3869a 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,83 @@ /* add styles here */ +* { + box-sizing: border-box; +} + +@font-face { + font-family: Avenir-Book, sans-serif; + src: url(fonts/Avenir-Book.ttf); +} + +@font-face { + font-family: Avenir-Heavy, sans-serif; + src: url(fonts/Avenir-Heavy.ttf); + font-style: bold; + font-weight: bold; +} + +.form { + margin-top: auto; +} + +.form-input { + display: block; + margin: o; + width: 100%; + font-family: Avenir-Book, sans-serif; + font-weight: 300; + font-size: 16px; /* розмір шрифтк */ + color: rgba(255, 255, 255, 1); + border: 1px solid rgba(225, 231, 237, 1); + border-radius: 4px; + box-shadow: rgba(61, 78, 97, 0.1); +} + +.form__input--large { + margin-top: 20px; + height: 70px; + padding-left: 62px; /* додаємо відступ, щоб текст не накладався на іконку */ +} + +.form__input--small { + height: 42px; + margin-top: 20px; + padding-left: 33px; /* додаємо відступ, щоб текст не накладався на іконку */ + size: 14px; +} + +.form__img { + margin-right: 100px; +} + +.form__img--large { + width: 19px; + height: 19px; + position: absolute; + top: 45px; + left: 34px; +} + +.form__img--small { + width: 11px; + height: 11px; + position: relative; + bottom: 30px; + left: 13px; +} + +.form-input:hover { + border: 1px solid rgba(225, 231, 237, 1); + box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.2); +} + +.form-input:focus { + font-family: Avenir-Heavy, sans-serif; + background: rgba(246, 246, 247, 1); + border-radius: 3px; + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); + color: rgba(61, 78, 97, 1); + border-color: rgba(225, 231, 237, 1); + text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); + font-weight: bold; + font-style: bold; +}