mate-academy · hma-3 · Aug 14, 2024 · Aug 14, 2024 · Aug 17, 2024
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://hma-3.github.io/layout_search-bar-airbnb/)
+- [TEST REPORT LINK](https://hma-3.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
@@ -2,31 +2,64 @@
 <html lang="en">
   <head>
     <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"
     />
+
     <meta
       http-equiv="X-UA-Compatible"
       content="ie=edge"
     />
+
     <title>Document</title>
+
     <link
       rel="stylesheet"
-      href="style.css"
+      href="style/style.css"
     />
   </head>
+
   <body>
-    <input
-      type="text"
-      data-qa="keypress"
-      placeholder="Try “Los Angeles“"
-    />
+    <main class="main">
+      <div class="main__form">
+        <form
+          class="search-form search-form--large"
+          data-qa="big"
+        >
+          <span
+            href="#"
+            class="search-form__search-icon search-form__search-icon--large"
+          ></span>
 
-    <input
-      type="text"
-      data-qa="hover"
-      placeholder="Try “Los Angeles“"
-    />
+          <input
+            type="text"
+            data-qa="keypress"
+            placeholder="Try “Los Angeles“"
+            class="search-form__input search-form__input--large"
+          />
+        </form>
+      </div>
+
+      <div class="main__form">
+        <form
+          class="search-form search-form--small"
+          data-qa="small"
+        >
+          <a
+            href="#"
+            class="search-form__search-icon search-form__search-icon--small"
+          ></a>
+
+          <input
+            type="text"
+            data-qa="hover"
+            placeholder="Try “Los Angeles“"
+            class="search-form__input search-form__input--small"
+          />
+        </form>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
diff --git a/src/style/base/normalize.css b/src/style/base/normalize.css
@@ -0,0 +1,15 @@
+@font-face {
+  font-family: Avenir;
+  src: url(../../fonts/Avenir.ttc);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+input {
+  font-family: Avenir, Arial, Helvetica, sans-serif;
+  color: var(--text-color);
+  font-weight: 300;
+}
diff --git a/src/style/base/reset.css b/src/style/base/reset.css
@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}
diff --git a/src/style/blocks/input.css b/src/style/blocks/input.css
@@ -0,0 +1,31 @@
+.search-form__input {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+
+  font-size: 16px;
+
+  border: none;
+}
+
+.search-form__input::placeholder {
+  color: inherit;
+}
+
+.search-form__input--small {
+  font-size: 14px;
+}
+
+.search-form__input:focus {
+  outline: none;
+  font-weight: 900;
+
+  background: linear-gradient(
+    var(--first-gradient-form-color),
+    var(--second-gradient-form-color)
+  );
+}
+
+.search-form__input--large:focus {
+  text-shadow: 0 4px 4px var(--box-shadow-dark-color);
+}
diff --git a/src/style/blocks/main.css b/src/style/blocks/main.css
@@ -0,0 +1,7 @@
+.main {
+  margin: 0 8px;
+}
+
+.main__form {
+  margin-top: 20px;
+}
diff --git a/src/style/blocks/search-form.css b/src/style/blocks/search-form.css
@@ -0,0 +1,48 @@
+.search-form {
+  display: flex;
+  align-items: center;
+  height: 70px;
+
+  border: 1px solid var(--box-border-color);
+  border-radius: 4px;
+  box-shadow: 0 1px 8px var(--box-shadow-color);
+}
+
+.search-form--small {
+  height: 42px;
+}
+
+.search-form__search-icon {
+  height: var(--icon-large-size);
+  min-width: var(--icon-large-size);
+  margin: 0 17px 0 26px;
+
+  background: center no-repeat url(../../images/Search.svg);
+  background-size: cover;
+}
+
+.search-form__search-icon--small {
+  height: var(--icon-small-size);
+  min-width: var(--icon-small-size);
+  margin: 0 9px 0 13px;
+}
+
+.search-form--large:hover,
+.search-form:has(.search-form__input--large:focus) {
+  box-shadow: 0 4px 4px var(--box-large-hover-shadow-color);
+}
+
+.search-form--small:hover {
+  box-shadow: 0 3px 8px var(--box-small-hover-shadow-color);
+}
+
+.search-form--small:has(.search-form__input:focus) {
+  box-shadow: none;
+}
+
+.search-form:has(.search-form__input:focus) {
+  background: linear-gradient(
+    var(--first-gradient-form-color),
+    var(--second-gradient-form-color)
+  );
+}
diff --git a/src/style/style.css b/src/style/style.css
@@ -0,0 +1,6 @@
+@import 'utils/variables.css';
+@import 'base/normalize.css';
+@import 'base/reset.css';
+@import 'blocks/main.css';
+@import 'blocks/search-form.css';
+@import 'blocks/input.css';
diff --git a/src/style/utils/variables.css b/src/style/utils/variables.css
@@ -0,0 +1,11 @@
+html {
+  --text-color: #3d4e61;
+  --box-border-color: #e1e7ed;
+  --box-shadow-color: #3d4e611a;
+  --box-large-hover-shadow-color: #00000040;
+  --box-small-hover-shadow-color: #3d4e6133;
+  --first-gradient-form-color: #fff;
+  --second-gradient-form-color: #f6f6f7;
+  --icon-large-size: 19px;
+  --icon-small-size: 11px;
+}