task search-bar

mate-academy · Sep 3, 2024 · 01f7f5a · 01f7f5a
1 parent afacaf6
commit 01f7f5a
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 14 deletions.
diff --git a/readme.md b/readme.md
@@ -25,8 +25,8 @@ ___
 
 ❗️ 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://Varvara00.github.io/layout_search-bar-airbnb/)
+- [TEST REPORT LINK](https://Varvara00.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.
 

diff --git a/src/fonts/Avenir-Book.ttf b/src/fonts/Avenir-Book.ttf
diff --git a/src/fonts/Avenir-Heavy.ttf b/src/fonts/Avenir-Heavy.ttf
diff --git a/src/fonts/Avenir.ttc b/src/fonts/Avenir.ttc
diff --git a/src/images/search-small.svg b/src/images/search-small.svg
diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+      content="width=device-width, initial-scale=1.0"
     />
     <meta
       http-equiv="X-UA-Compatible"
@@ -17,16 +17,42 @@
     />
   </head>
   <body>
-    <input
-      type="text"
-      data-qa="keypress"
-      placeholder="Try “Los Angeles“"
-    />
+    <div
+      class="search"
+      data-qa="big"
+    >
+      <div class="searchPanel">
+        <img
+          src="images/Search.svg"
+          alt="Search Icon"
+          class="search-icon"
+        />
+        <input
+          class="search--big"
+          type="text"
+          data-qa="keypress"
+          placeholder="Try “Los Angeles”"
+        />
+      </div>
+    </div>
 
-    <input
-      type="text"
-      data-qa="hover"
-      placeholder="Try “Los Angeles“"
-    />
+    <div
+      class="search"
+      data-qa="small"
+    >
+      <div class="searchPanel">
+        <img
+          src="images/search-small.svg"
+          alt="Search Icon"
+          class="search-icon-smaller"
+        />
+        <input
+          class="search--small"
+          type="text"
+          data-qa="keypress"
+          placeholder="Try “Los Angeles” "
+        />
+      </div>
+    </div>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1 +1,55 @@
-/* add styles here */
+body {
+  margin: 0 10px;
+}
+
+.search {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin: 20px 0;
+}
+
+.searchPanel {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  border: 1px solid #e1e7ed;
+  border-radius: 4px;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
+}
+
+.search-icon {
+  width: 19px;
+  height: 19px;
+  padding: 0 17px 0 26px;
+}
+
+.search-icon-smaller {
+  width: 11px;
+  height: 11px;
+  padding: 0 9px 0 13px;
+}
+
+.search--big {
+  height: 66px;
+  font-size: 16px;
+  font-weight: 300px;
+  font-family: Avenir, sans-serif;
+}
+
+.search--small {
+  height: 38px;
+  font-size: 14px;
+  font-weight: 300px;
+  font-family: Avenir, sans-serif;
+}
+
+input {
+  flex: 1;
+  border: none;
+  outline: none;
+}
+
+.searchPanel:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}