mate-academy · LadyLiza · Jul 25, 2023 · Jul 27, 2023 · Jul 28, 2023 · volodymyr-soltys97
diff --git a/readme.md b/readme.md
@@ -1,20 +1,24 @@
 # Search bar for Airbnb
+
 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://LadyLiza.github.io/layout_search-bar-airbnb/)
+- [TEST REPORT LINK](https://LadyLiza.github.io/layout_search-bar-airbnb/report/html_report/)
 
 > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/#how-to-solve-the-layout-tasks-on-github)
 
-___
+---
 
 ## ❗️❗️❗️ DON'T FORGET TO PROOFREAD YOUR CODE WITH [CHECKLIST](https://github.com/mate-academy/layout_search-bar-airbnb/blob/master/checklist.md) BEFORE SENDING YOUR PULL REQUEST❗️❗️❗️
 
 ## The task
+
 > Create HTML page with two search bars as designed in [the mockup](https://www.figma.com/file/kf3AWulK9elrNk34wtpjPw/Airbnb-Search-bar?node-id=0%3A1). This search bar will be part of big project.
 
 ![screenshot](./references/search-bar-example.png)
 
 ### Requirements:
+
 - use images from [src/images](src/images)
 - there must be two search bars
 - search bar must have width 100%
@@ -27,20 +31,21 @@ ___
 - use `@font-face` for fonts
 - add attribute `data-qa="big"` for big search form, and `data-qa="small"` for small
 - add attribute `data-qa="keypress"` to input in big search form
+
 ---
+
 --> [CHECKLIST](https://github.com/mate-academy/layout_search-bar-airbnb/blob/master/checklist.md)
 
 ### Tips & Hints
+
 - Add **ALL** `data-qa` attributes required in the task
 - Text `Try "Los Angeles"` is a placeholder.
 - Use `&quot;` instead of `"` in the placeholder.
 - Pay close attention to font styles. Use fonts from `fonts` folder.
 - You have to put `input` inside the `form` for correct data processing. Form should have `action` and `method`
-attributes.
+  attributes.
 - Each search bar be inside its own `form` element.
 - Task has styling for `:focus` state. Forms, labels, divs are not focusable by default. Consider it when selecting your
-layout.
+  layout.
 - Remember that inputs and other interactive elements don’t inherit font styles by default.
 - Remember that placeholder has its own set of styles available using `::placeholder` pseudo-element.
-
-
diff --git a/src/index.html b/src/index.html
@@ -4,13 +4,34 @@
     <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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Search bar airbnb</title>
     <link rel="stylesheet" href="./style.css">
   </head>
   <body>
-    <h1>Search bar airbnb</h1>
+    <div class="search-container">
+      <form
+        class="search-bar big-form"
+        data-qa="big"
+        method="get"
+        action="/">
-      <form
-        class="search-bar big-form"
-        data-qa="big"
-        method="get"
-        action="/">
+      <form
+        class="search-bar big-form"
+        data-qa="big"
+        method="get"
+        action="/"
+      >
-      <form
-        class="search-bar big-form"
-        data-qa="big"
-        method="get"
-        action="/">
+      <form
+        class="search-bar big-form"
+        data-qa="big"
+        method="get"
+        action="/"
+      >
+        <input
+          class="input"
+          type="text"
+          placeholder="Try &quot;Los Angeles&quot;"
+          data-qa="keypress">
+      </form>
+      <form
+        class="search-bar small-form"
+        data-qa="small"
+        method="get"
+        action="/">
+        <input
+          class="input"
+          type="text"
+          placeholder="Try &quot;Los Angeles&quot;">
+      </form>
+    </div>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,68 @@
+@font-face {
+  font-family: "Avenir";
+  src: url("./fonts/Avenir-Book.ttf");
+  font-style: normal;
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Avenir Heavy";
+  src: url("./fonts/Avenir-Heavy.ttf");
+  font-style: normal;
-  font-style: normal;
-  font-style: normal;
+  font-weight: 900;
+}
+
+* {
+  font-family: "Avenir", sans-serif;
+}
+
+body {
+  margin: 0;
+  --color-primary: rgba(61, 78, 97, 1);
+  --background-color: rgba(225, 231, 237, 1);
+  --shadow: 1px 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+.search-container {
+  margin: 20px 8px 0;
+}
+
+.search-bar input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--background-color);
+  border-radius: 4px;
+  background-image: url("./images/search.svg");
+  background-repeat: no-repeat;
+}
+
+.big-form .input {
+  margin-bottom: 20px;
+  background-size: 19px 19px;
+  height: 70px;
+  font-size: 16px;
+  padding-left: 62px;
+  background-position: 25px center;
+}
+
+.small-form .input {
+  background-size: 11px 11px;
+  height: 42px;
+  font-size: 14px;
+  padding-left: 33px;
+  background-position: 13px center;
+}
+
+.input::placeholder {
+  color: var(--color-primary);
+}
+
+.input:hover {
+  box-shadow: var(--shadow);
+}
+
+.input:focus {
+  outline: none;
+  box-shadow: var(--shadow);
+  font-family: "Avenir Heavy", sans-serif;
+}