From 74475e69e5ba02cae3cffc885c30ef3b20f42642 Mon Sep 17 00:00:00 2001
From: Ivan Sierov <iserov1989@gmail.com>
Date: Sat, 20 Jul 2024 00:24:49 +0300
Subject: [PATCH] add task solution

---
 src/index.html |  8 ++++++--
 src/style.css  | 53 +++++++++++++++++++++++---------------------------
 2 files changed, 30 insertions(+), 31 deletions(-)
diff --git a/src/index.html b/src/index.html
index 12a21ef6df..96ea23bbc1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,11 +18,12 @@
   </head>
   <body>
     <form
+      class="form first--form"
       action="http://localhost:8080/"
       method="post"
       data-qa="big"
     >
-      <div href="#">
+      <div class="icon icon__first">
         <img
           src="images/Search.svg"
           alt="search-icon"
@@ -30,6 +31,7 @@
       </div>
 
       <input
+        class="input input--first"
         type="text"
         data-qa="keypress"
         placeholder="Try “Los Angeles“"
@@ -37,11 +39,12 @@
     </form>
 
     <form
+      class="form second--form"
       action="http://localhost:8080/"
       method="post"
       data-qa="small"
     >
-      <div href="#">
+      <div class="icon icon--second">
         <img
           src="images/Search.svg"
           alt="search-icon"
@@ -49,6 +52,7 @@
       </div>
 
       <input
+        class="input input--second"
         type="text"
         data-qa="hover"
         placeholder="Try “Los Angeles“"
diff --git a/src/style.css b/src/style.css
index 017aa0dfb5..22cb1c94b5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -15,8 +15,8 @@ html {
   font-family: Avenir, Helvetica, sans-serif;
 }
 
-form {
-  /* border: black 1px solid; */
+.form {
+  position: relative;
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -25,87 +25,82 @@ form {
   box-shadow: 0 1px 8px 0 #3d4e611a;
 }
 
-form:hover {
+.form :hover {
   box-shadow: 0 3px 8px 0 #3d4e6133;
 }
 
-form:focus {
+.form :focus {
   border-radius: 3px;
   border: 1px solid #e1e7ed;
   background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
 }
 
-div {
-  position: relative;
-  top: -0.5px;
+.icon {
+  position: absolute;
+  z-index: 1;
   left: -1px;
   display: flex;
 }
 
-[data-qa='big'] {
+.first--form {
   margin: 20px auto;
 }
 
-[placeholder] {
-  display: block;
+.input {
   border: none;
+  display: block;
+  font-weight: 900;
+  color: #3d4e61;
   padding: 0;
+  outline: none;
 }
 
-[data-qa='keypress'] {
+.input--first {
   position: relative;
   top: -0.5px;
   height: 68px;
-  margin-left: 17px;
+  margin-left: 62px;
 }
 
-[data-qa='big'] div {
+.icon__first {
   margin-left: 26px;
 }
 
-[data-qa='small'] div {
+.icon--second {
   height: 11px;
   width: 11px;
   margin-left: 13px;
 }
 
-[data-qa='hover'] {
+.input--second {
   position: relative;
   top: -1.5px;
   height: 40px;
-  margin-left: 9px;
+  margin-left: 33px;
 }
 
-input::placeholder {
+.input::placeholder {
   color: #3d4e61;
   font-weight: 400;
   font-family: Avenir, sans-serif;
-  border-image-width: 0;
-}
-
-input {
-  font-weight: 900;
-  color: #3d4e61;
 }
 
-input:focus {
+.input:focus {
   border: 0;
-  border-image-width: 0;
   outline: none;
   box-shadow: none;
 }
 
-input:hover {
+.input:hover {
   border: 0;
-  border-image-width: 0;
 }
 
-[data-qa='keypress']::placeholder {
+.input--first::placeholder {
   font-size: 16px;
   line-height: 21.86px;
 }
 
-[data-qa='hover']::placeholder {
+.input--second::placeholder {
   font-size: 14px;
   line-height: 19.12px;
 }
