add task solution

mate-academy · Sep 27, 2024 · dc4f211 · dc4f211
1 parent 952bc75
commit dc4f211
Showing 1 changed file with 43 additions and 26 deletions.
diff --git a/src/style.css b/src/style.css
@@ -1,11 +1,18 @@
 /* add styles here */
 @font-face {
-  font-family: Avenir, sans-serif;
-  src: url('/src/fonts/Avenir-Book.ttf') format('truetype');
-  src: url('./fonts/Avenir-Heavy.ttf') format('truetype');
-  src: url('./fonts/Avenir.ttc') format('truetype');
-  font-weight: normal;
-  font-style: normal;
+  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;
+}
+
+:root {
+  --text-font: Avenir, sans-serif;
 }
 
 .html {
@@ -24,33 +31,43 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  margin-top: 20px;
 }
 
 .form__searchBar {
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  background-image: url('/src/images/Search.svg'); /* Добавляем иконку */
-  background-repeat: no-repeat;
-  background-position: 25px center; /* Позиционируем иконку */
-  background-size: 19px 19px;
-  padding: 20px 20px 20px 60px;
-  margin: 20px;
   box-sizing: border-box;
-  border: 1px solid rgba(144, 122, 231, 0.25);
+  font-family: var(--text-font);
+  font-size: 16px;
+  background-color: #fff;
+  border: 1px solid #e1e7ed;
   border-radius: 4px;
-  color: rgba(61, 78, 97, 1);
+  background-image: url(images/Search.svg);
+  background-repeat: no-repeat;
+  background-position: 25px 48%;
+  width: 100%;
+  height: 70px;
+  padding-left: 62px;
+  box-shadow: 0 1px 8px rgba(61, 78, 97, 0.1);
+  outline: none;
 }
 
-.form > .form__searchBar:hover {
+.form__searchBar::placeholder {
+  font-weight: normal;
+}
+
+.form__searchBar:hover {
   box-shadow: 1px 4px 4px 1px rgba(0, 0, 0, 0.25);
 }
 
-.form > .form__searchBar:focus {
+.form__searchBar:focus {
   font-weight: bold;
-  box-shadow: 1px 4px 4px 1px rgba(0, 0, 0, 0.25);
-  color: blue;
+  border-radius: 3px;
+  background: url(images/Search.svg),
+    linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
+  background-repeat: no-repeat, no-repeat;
+  background-position:
+    25px 48%,
+    center;
 }
 
 .form__searchBar--big {
@@ -59,10 +76,10 @@
 }
 
 .form__searchBar--small {
-  height: 42px;
-  margin-top: 0;
-  background-position: 15px center;
   background-size: 11px 11px;
-  font-weight: 14px;
+  background-position: 12px 48%;
+  height: 42px;
+  font-size: 14px;
+  font-weight: 400;
   padding-left: 33px;
 }