add task solution

mate-academy · Jul 19, 2024 · 74475e6 · 74475e6
1 parent 1a49b5e
commit 74475e6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/src/index.html b/src/index.html
@@ -18,37 +18,41 @@
   </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"
         />
       </div>
 
       <input
+        class="input input--first"
         type="text"
         data-qa="keypress"
         placeholder="Try “Los Angeles“"
       />
     </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"
         />
       </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
@@ -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;
 }