add task solution 2

mate-academy · Aug 18, 2024 · 6406cf6 · 6406cf6
1 parent e80bc08
commit 6406cf6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 31 deletions.
diff --git a/src/index.html b/src/index.html
@@ -18,30 +18,21 @@
   </head>
   <body class="body">
     <form class="form">
-      <div
-        class="search-bar big"
+      <input
+        type="text"
+        class="big-input"
         data-qa="big"
-      >
-        <div class="search-bar__icon"></div>
-        <input
-          type="text"
-          class="big-input"
-          data-qa="keypress"
-          placeholder="Try “Los Angeles“"
-        />
-      </div>
+        placeholder="Try “Los Angeles“"
+      />
+    </form>
 
-      <div
-        class="search-bar small"
+    <form class="form">
+      <input
+        type="text"
+        class="small-input"
         data-qa="small"
-      >
-        <div class="search-bar__icon"></div>
-        <input
-          type="text"
-          class="small-input"
-          placeholder="Try “Los Angeles“"
-        />
-      </div>
+        placeholder="Try “Los Angeles“"
+      />
     </form>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -17,38 +17,33 @@
 .form {
   width: 100%;
   margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-}
-
-.search-bar {
-  display: flex;
   margin-bottom: 20px;
+  display: flex;
 }
 
 .big-input {
   flex: 1;
-  padding: 10px;
   padding-left: 26px;
+  gap: 17px;
   height: 70px;
   border-radius: 4px;
   border: 1px solid #e1e7ed;
   box-sizing: border-box;
   box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1);
-  background: #fff url('./images/Search.svg') no-repeat left center;
+  background: #fff url('./images/Search.svg') no-repeat left 10px center;
 }
 
 .small-input {
   flex: 1;
-  padding: 10px;
   padding-left: 13px;
+  gap: 9px;
   height: 42px;
   font-size: 14px;
   border-radius: 4px;
   border: 1px solid #e1e7ed;
   box-sizing: border-box;
   box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1);
-  background: #fff url('./images/Search.svg') no-repeat left center;
+  background: #fff url('./images/Search.svg') no-repeat left 5px center;
 }
 
 input:hover {