redid code

mate-academy · Sep 11, 2024 · 3e5c96c · 3e5c96c
1 parent 366b6d0
commit 3e5c96c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/src/index.html b/src/index.html
@@ -21,15 +21,15 @@
       class="search"
       data-qa="big"
     >
-      <button class="search--button">
+      <button class="search__button">
         <img
-          class="search_img search--img--big"
+          class="search__img search__img--big"
           src="/src/images/Search.svg"
-          alt="button"
+          alt="Search icon"
         />
       </button>
       <input
-        class="search_txt search--big"
+        class="search__txt search--big"
         type="text"
         data-qa="keypress"
         placeholder="Try “Los Angeles“"
@@ -40,19 +40,18 @@
       class="search"
       data-qa="small"
     >
-      <button class="search--button">
+      <button class="search__button">
         <img
-          class="search_img search--img--small"
+          class="search__img search__img--small"
           src="/src/images/Search.svg"
-          alt="button"
+          alt="Search icon"
         />
       </button>
       <input
-        class="search_txt search--small"
+        class="search__txt search--small"
         type="text"
         data-qa="hover"
         placeholder="Try “Los Angeles“"
-        src="/src/images/Search.svg"
       />
     </div>
   </body>

diff --git a/src/style.css b/src/style.css
@@ -20,10 +20,10 @@ body {
 
 .search:hover,
 .search:focus-within {
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 4px #3d4e611a;
 }
 
-.search_txt {
+.search__txt {
   padding: 0;
   border: none;
   outline: none;
@@ -32,7 +32,7 @@ body {
   font-size: 16px;
 }
 
-.search_txt:focus {
+.search__txt:focus {
   font-weight: bold;
 }
 
@@ -42,7 +42,7 @@ body {
 
 .search--big::placeholder,
 .search--small::placeholder {
-  font-family: Avenir, serif;
+  font-family: Avenir, Arial, Helvetica, sans-serif;
   color: #3d4e61;
 }
 
@@ -56,26 +56,28 @@ body {
   font-size: 14px;
 }
 
-.search--button {
+.search__button {
   border: none;
   background-color: #fff;
   padding: 0;
 }
 
-.search_img {
+.search__img {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.search--img--big {
+.search__img--big {
   width: 19px;
   height: 19px;
-  margin: 0 17px 0 26px;
+  margin-right: 17px;
+  margin-left: 26px;
 }
 
-.search--img--small {
+.search__img--small {
   width: 11px;
   height: 11px;
-  margin: 0 9px 0 13px;
+  margin-right: 9px;
+  margin-left: 13px;
 }