From 21a651a20ea26d0ac1c8dbb3b7edd1e913ddf068 Mon Sep 17 00:00:00 2001 From: Volodymyr Mandzii Date: Mon, 17 Jun 2024 20:15:42 -0400 Subject: [PATCH] add task solution --- src/images/Icon.png | Bin 0 -> 352 bytes src/index.html | 36 +++++++++++++------ src/style.css | 86 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 110 insertions(+), 12 deletions(-) create mode 100644 src/images/Icon.png diff --git a/src/images/Icon.png b/src/images/Icon.png new file mode 100644 index 0000000000000000000000000000000000000000..bb6720cf4a30289a46ba6daf5959f324a69ec8a2 GIT binary patch literal 352 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhoCO|{#XvD(5N2eUHAey{$XFcY z?!>U}oXkrghb7(7*O7r?V?XzwL{=dGtEY=&NCji#FEaF|;eU08O?X`%xwWPEq>i1TMio-wU7u>kpT&bG) z{e$9G?z!6+?EE8tJUc`4oz$lyu5^QzTm$=eGd6llOuUs~lp@&}$*4SIv3bXv>01uG zKfl?}J6%)s#JN@X``0|*Q|NFfQqz95($r+8+E_`W=*EZ?mB#&lcBDUH|8n%~@pgXu u@*)At$GiV{g}zAJ8mN~s*CjcKGw;vpjC_VfX?tJ*FnGH9xvX @@ -16,17 +17,30 @@ href="style.css" /> - - + + +
+ +
- +
+ +
diff --git a/src/style.css b/src/style.css index a63fa10d43..03f83d7738 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,85 @@ -/* add styles here */ +@font-face { + font-family: Avenir; + font-weight: 300; + font-style: normal; + src: url('./fonts/Avenir-Book.ttf'); +} + +@font-face { + font-family: Avenir; + font-weight: 900; + font-style: normal; + src: url('./fonts/Avenir-Heavy.ttf'); +} + +* { + box-sizing: border-box; +} + +.body { + font-family: Avenir, sans-serif; + color: #3d4e61; +} + +.input { + display: block; + width: 100%; + background-image: url(images/Search.svg); + background-repeat: no-repeat; + border: 1px solid #e1e7ed; + border-radius: 4px; + box-shadow: 0 1px 8px 0 #3d4e611a; + color: #3d4e61; + margin-top: 20px; +} + +.input__big { + height: 70px; + background-size: 19px 19px; + background-position: 26px center; + padding-left: 62px; + font-family: Avenir, sans-serif; + font-size: 16px; +} + +.input__small { + height: 42px; + background-size: 11px 11px; + background-position: 12px 14px; + padding-left: 33px; + font-family: Avenir, sans-serif; + font-size: 14px; +} + +.input__big::placeholder { + font-family: Avenir, sans-serif; + font-weight: 400; +} + +.input__small::placeholder { + font-family: Avenir, sans-serif; + font-weight: 400; +} + +.input__big:hover { + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); +} + +.input__small:hover { + box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); +} + +.input__big:focus { + color: #3d4e61; + text-shadow: 1px 4px 4px rgba(0, 0, 0, 0.25); + outline: none; + font-weight: 900; + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); +} + +.input__small:focus { + color: #3d4e61; + text-shadow: none; + outline: none; + font-weight: 900; +}