try#5

mate-academy · Sep 6, 2024 · 9b62a7e · 9b62a7e
1 parent 13ac4fc
commit 9b62a7e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/src/index.html b/src/index.html
@@ -10,22 +10,22 @@
       http-equiv="X-UA-Compatible"
       content="ie=edge"
     />
-    <title>Document</title>
+    <title>Search-bar-airbnb</title>
     <link
       rel="stylesheet"
       href="style.css"
     />
   </head>
 
-  <body>
+  <body class="body">
     <form
       class="searchbar"
       data-qa="big"
     >
       <input
         type="text"
         data-qa="keypress"
-        class="big__searchbar"
+        class="searchbar big__searchbar"
         placeholder="Try “Los Angeles“"
       />
     </form>
@@ -37,7 +37,7 @@
       <input
         type="text"
         data-qa="hover"
-        class="small__searchbar"
+        class="searchbar small__searchbar"
         placeholder="Try “Los Angeles“"
       />
     </form>

diff --git a/src/style.css b/src/style.css
@@ -15,25 +15,22 @@
   src: url('fonts/Avenir.ttc');
 }
 
-body {
+.body {
   margin: 8px;
 }
 
 .searchbar {
   margin-top: 20px;
-}
-
-input {
   border: 1px solid #e1e7ed;
   box-shadow: 0 1px 8px 0 #3d4e611a;
-  box-sizing: border-box;
   border-radius: 4px;
   font-weight: 300;
   font-size: 16px;
   color: #3d4e61;
 }
 
 .big__searchbar {
+  margin: 0;
   width: 100%;
   height: 70px;
   line-height: 22px;
@@ -51,10 +48,13 @@ input {
 .big__searchbar:focus {
   font-family: AvenirHeavy, sans-serif;
   box-shadow: 0 4px 4px 0 #53484840;
-  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
+  background-image: url('images/Search.svg');
+  background-repeat: no-repeat;
+  text-shadow: 0 4px 4px 0 #00000040;
 }
 
 .small__searchbar {
+  margin: 0;
   height: 42px;
   width: 100%;
   line-height: 20px;
@@ -73,11 +73,9 @@ input {
 
 .small__searchbar:focus {
   font-family: AvenirHeavy, sans-serif;
-  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
-}
-
-:focus::placeholder {
-  color: transparent;
+  background-image: url('images/Search.svg');
+  background-repeat: no-repeat;
+  text-shadow: 0 4px 4px 0 #00000040;
 }
 
 .big__searchbar::placeholder {