add solution

mate-academy · Feb 15, 2025 · f621d44 · f621d44
1 parent b64f3c5
commit f621d44
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 17 deletions.
diff --git a/readme.md b/readme.md
@@ -25,12 +25,12 @@ ___
 
 ❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:
 
-- [DEMO LINK](https://<your_account>.github.io/layout_search-bar-airbnb/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_search-bar-airbnb/report/html_report/)
+- [DEMO LINK](https://irinashiriievska.github.io/layout_search-bar-airbnb/)
+- [TEST REPORT LINK](https://irinashiriievska.github.io/layout_search-bar-airbnb/report/html_report/)
 
 ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
 
-- [ ] Icon implemented using background-image CSS property
-- [ ] Inputs are written inside of 'form' tag with correctly passed attributes
-- [ ] All `Typical Mistakes` from `BEM` lesson theory are checked.
-- [ ] Code follows all the [Code Style Rules ❗️](./checklist.md)
+- [x] Icon implemented using background-image CSS property
+- [x] Inputs are written inside of 'form' tag with correctly passed attributes
+- [x] All `Typical Mistakes` from `BEM` lesson theory are checked.
+- [x] Code follows all the [Code Style Rules ❗️](./checklist.md)
diff --git a/src/index.html b/src/index.html
@@ -10,23 +10,37 @@
       http-equiv="X-UA-Compatible"
       content="ie=edge"
     />
-    <title>Document</title>
+    <title>Search-bar</title>
     <link
       rel="stylesheet"
       href="style.css"
     />
   </head>
   <body>
-    <input
-      type="text"
-      data-qa="keypress"
-      placeholder="Try “Los Angeles“"
-    />
+    <div class="wrapper">
+      <div
+        class="input-wrapper__big"
+        data-qa="big"
+      >
+        <input
+          class="input-with-icon-1"
+          type="text"
+          data-qa="keypress"
+          placeholder="Try “Los Angeles“"
+        />
+      </div>
 
-    <input
-      type="text"
-      data-qa="hover"
-      placeholder="Try “Los Angeles“"
-    />
+      <div
+        class="input-wrapper__small"
+        data-qa="small"
+      >
+        <input
+          class="input-with-icon-2"
+          type="text"
+          data-qa="hover"
+          placeholder="Try “Los Angeles“"
+        />
+      </div>
+    </div>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1 +1,79 @@
 /* add styles here */
+@font-face {
+  font-family: Avenir;
+  src: url(/src/fonts/Avenir.ttc);
+}
+
+@font-face {
+  font-family: Avenir;
+  src: url(/src/fonts/Avenir-Book.ttf);
+}
+
+@font-face {
+  font-family: Avenir;
+  src: url(/src/fonts/Avenir-Heavy.ttf);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.input-wrapper__big input {
+  width: 100vh;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding-left: 50px;
+}
+
+.input-wrapper__small input {
+  width: 427px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding-left: 30px;
+}
+
+.input-wrapper__big input:hover {
+  box-shadow: 0 3px 8px 0 #E1E7ED;
+  border-radius: 5px;
+}
+
+.input-wrapper__big input:focus {
+  outline: none;
+  box-shadow: 0 4px 4px 0 #E1E7ED;
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 22px;
+  color: #3d4e61;
+}
+
+.input-with-icon-1 {
+  background-image: url(/src/images/Search.svg);
+  background-position: left 20px center;
+  background-repeat: no-repeat;
+  background-size: 15px;
+}
+
+.input-wrapper__small input:hover {
+  box-shadow: 0 3px 8px 0 #E1E7ED;
+  border-radius: 5px;
+}
+
+.input-wrapper__small input:focus {
+  outline: none;
+  box-shadow: 0 4px 4px 0 #E1E7ED;
+  font-size: 14px;
+  font-weight: 900;
+  line-height: 19px;
+  color: #3d4e61;
+}
+
+.input-with-icon-2 {
+  background-image: url(/src/images/Search.svg);
+  background-position: left 10px center;
+  background-repeat: no-repeat;
+  background-size: 12px;
+}