add task solution

mate-academy · Jul 19, 2024 · 1a49b5e · 1a49b5e
1 parent afacaf6
commit 1a49b5e
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@mate-academy/backstop-config": "latest",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.7.3",
+    "@mate-academy/scripts": "^1.8.5",
     "@mate-academy/stylelint-config": "latest",
     "backstopjs": "6.2.2",
     "jest": "^29.7.0",

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://IvanSierov.github.io/layout_search-bar-airbnb/)
+- [TEST REPORT LINK](https://IvanSierov.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/index.html b/src/index.html
@@ -17,16 +17,42 @@
     />
   </head>
   <body>
-    <input
-      type="text"
-      data-qa="keypress"
-      placeholder="Try “Los Angeles“"
-    />
+    <form
+      action="http://localhost:8080/"
+      method="post"
+      data-qa="big"
+    >
+      <div href="#">
+        <img
+          src="images/Search.svg"
+          alt="search-icon"
+        />
+      </div>
 
-    <input
-      type="text"
-      data-qa="hover"
-      placeholder="Try “Los Angeles“"
-    />
+      <input
+        type="text"
+        data-qa="keypress"
+        placeholder="Try “Los Angeles“"
+      />
+    </form>
+
+    <form
+      action="http://localhost:8080/"
+      method="post"
+      data-qa="small"
+    >
+      <div href="#">
+        <img
+          src="images/Search.svg"
+          alt="search-icon"
+        />
+      </div>
+
+      <input
+        type="text"
+        data-qa="hover"
+        placeholder="Try “Los Angeles“"
+      />
+    </form>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1 +1,111 @@
 /* add styles here */
+@font-face {
+  font-family: Avenir;
+  src: url('fonts/Avenir-Book.ttf') format('truetype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: Avenir;
+  src: url('fonts/Avenir-Heavy.ttf') format('truetype');
+  font-weight: 900;
+}
+
+html {
+  font-family: Avenir, Helvetica, sans-serif;
+}
+
+form {
+  /* border: black 1px solid; */
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  border: 1px solid #e1e7ed;
+  border-radius: 4px;
+  box-shadow: 0 1px 8px 0 #3d4e611a;
+}
+
+form:hover {
+  box-shadow: 0 3px 8px 0 #3d4e6133;
+}
+
+form:focus {
+  border-radius: 3px;
+  border: 1px solid #e1e7ed;
+  background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
+}
+
+div {
+  position: relative;
+  top: -0.5px;
+  left: -1px;
+  display: flex;
+}
+
+[data-qa='big'] {
+  margin: 20px auto;
+}
+
+[placeholder] {
+  display: block;
+  border: none;
+  padding: 0;
+}
+
+[data-qa='keypress'] {
+  position: relative;
+  top: -0.5px;
+  height: 68px;
+  margin-left: 17px;
+}
+
+[data-qa='big'] div {
+  margin-left: 26px;
+}
+
+[data-qa='small'] div {
+  height: 11px;
+  width: 11px;
+  margin-left: 13px;
+}
+
+[data-qa='hover'] {
+  position: relative;
+  top: -1.5px;
+  height: 40px;
+  margin-left: 9px;
+}
+
+input::placeholder {
+  color: #3d4e61;
+  font-weight: 400;
+  font-family: Avenir, sans-serif;
+  border-image-width: 0;
+}
+
+input {
+  font-weight: 900;
+  color: #3d4e61;
+}
+
+input:focus {
+  border: 0;
+  border-image-width: 0;
+  outline: none;
+  box-shadow: none;
+}
+
+input:hover {
+  border: 0;
+  border-image-width: 0;
+}
+
+[data-qa='keypress']::placeholder {
+  font-size: 16px;
+  line-height: 21.86px;
+}
+
+[data-qa='hover']::placeholder {
+  font-size: 14px;
+  line-height: 19.12px;
+}