add task solution 3

mate-academy · Jul 20, 2024 · a8651cf · a8651cf
1 parent 74475e6
commit a8651cf
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 67 deletions.
diff --git a/src/index.html b/src/index.html
@@ -23,13 +23,6 @@
       method="post"
       data-qa="big"
     >
-      <div class="icon icon__first">
-        <img
-          src="images/Search.svg"
-          alt="search-icon"
-        />
-      </div>
-
       <input
         class="input input--first"
         type="text"
@@ -44,13 +37,6 @@
       method="post"
       data-qa="small"
     >
-      <div class="icon icon--second">
-        <img
-          src="images/Search.svg"
-          alt="search-icon"
-        />
-      </div>
-
       <input
         class="input input--second"
         type="text"

diff --git a/src/style.css b/src/style.css
@@ -15,68 +15,39 @@ html {
   font-family: Avenir, Helvetica, sans-serif;
 }
 
-.form {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  border: 1px solid #e1e7ed;
-  border-radius: 4px;
-  box-shadow: 0 1px 8px 0 #3d4e611a;
-}
-
-.form :hover {
-  box-shadow: 0 3px 8px 0 #3d4e6133;
-}
-
-.form :focus {
-  border-radius: 3px;
-  border: 1px solid #e1e7ed;
-  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
-}
-
-.icon {
-  position: absolute;
-  z-index: 1;
-  left: -1px;
-  display: flex;
-}
-
 .first--form {
-  margin: 20px auto;
+  margin: 20px 0;
 }
 
 .input {
-  border: none;
-  display: block;
+  box-sizing: border-box;
+  border: 1px solid #e1e7ed;
+  border-radius: 4px;
+  box-shadow: 0 1px 8px 0 #3d4e611a;
   font-weight: 900;
   color: #3d4e61;
-  padding: 0;
   outline: none;
+  width: 100%;
+  background-color: #fff;
 }
 
 .input--first {
+  background-image: url(images/Search.svg);
+  background-repeat: no-repeat;
+  background-size: 19px 19px;
+  background-position: 25px 24px;
+  height: 70px;
+  padding-left: 62px;
   position: relative;
-  top: -0.5px;
-  height: 68px;
-  margin-left: 62px;
-}
-
-.icon__first {
-  margin-left: 26px;
-}
-
-.icon--second {
-  height: 11px;
-  width: 11px;
-  margin-left: 13px;
 }
 
 .input--second {
-  position: relative;
-  top: -1.5px;
-  height: 40px;
-  margin-left: 33px;
+  background-image: url(images/Search.svg);
+  background-repeat: no-repeat;
+  background-size: 11px 11px;
+  background-position: 12px 14px;
+  height: 42px;
+  padding-left: 33px;
 }
 
 .input::placeholder {
@@ -85,22 +56,40 @@ html {
   font-family: Avenir, sans-serif;
 }
 
+input:hover {
+  box-shadow: 0 3px 8px 0 #3d4e6133;
+}
+
 .input:focus {
-  border: 0;
-  outline: none;
-  box-shadow: none;
+  border-radius: 3px;
+  border: 1px solid #e1e7ed;
+  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
 }
 
-.input:hover {
-  border: 0;
+.input--first:focus {
+  background-image: url(images/Search.svg);
+  background-repeat: no-repeat;
+  background-size: 19px 19px;
+  background-position: 25px 24px;
+}
+
+.input--second:focus {
+  background-image: url(images/Search.svg);
+  background-repeat: no-repeat;
+  background-size: 11px 11px;
+  background-position: 12px 14px;
 }
 
 .input--first::placeholder {
   font-size: 16px;
   line-height: 21.86px;
+  position: relative;
+  top: -1px;
 }
 
 .input--second::placeholder {
   font-size: 14px;
   line-height: 19.12px;
+  position: relative;
+  top: -2px;
 }