Solution

mate-academy · Aug 19, 2024 · 52333c0 · 52333c0
1 parent afacaf6
commit 52333c0
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 13 deletions.
diff --git a/src/index.html b/src/index.html
@@ -10,23 +10,45 @@
       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“"
-    />
+  <body class="main">
+    <div class="main__search-bar">
+      <form
+        class="search-bar search-bar--big"
+        data-qa="big"
+        action="#"
+        method="post"
+      >
+        <div class="search-bar__icon"></div>
 
-    <input
-      type="text"
-      data-qa="hover"
-      placeholder="Try “Los Angeles“"
-    />
+        <input
+          class="search-bar__input"
+          type="text"
+          data-qa="keypress"
+          placeholder="Try “Los Angeles“"
+        />
+      </form>
+
+      <form
+        class="search-bar search-bar--small"
+        data-qa="small"
+        action="#"
+        method="post"
+      >
+        <div class="search-bar__icon"></div>
+
+        <input
+          class="search-bar__input"
+          type="text"
+          data-qa="hover"
+          placeholder="Try “Los Angeles“"
+        />
+      </form>
+    </div>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1 +1,3 @@
-/* add styles here */
+@import 'styles/main.css';
+@import 'styles/search-bar.css';
+@import 'styles/variables.css';
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -0,0 +1,29 @@
+@font-face {
+  font-family: Avenir;
+  src: url(../fonts/Avenir-Book.ttf);
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: Avenir;
+  src: url(../fonts/Avenir-Heavy.ttf);
+  font-weight: 900;
+}
+
+html {
+  font-family: Avenir, Arial, Helvetica, sans-serif;
+  font-weight: 300;
+  color: #3d4e61;
+  margin: 0;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+.main__search-bar {
+  margin-top: 20px;
+  margin-inline: 8px;
+}
diff --git a/src/styles/search-bar.css b/src/styles/search-bar.css
@@ -0,0 +1,53 @@
+.search-bar {
+  display: flex;
+  align-items: center;
+
+  border: 1px solid var(--sb-border-color);
+  border-radius: 4px;
+  box-shadow: 0 1px 8px #3d4e611a;
+}
+
+.search-bar:hover {
+  box-shadow: 0 3px 6px var(--sb-border-color);
+}
+
+.search-bar:not(:first-of-type) {
+  margin-top: 20px;
+}
+
+.search-bar:has(.search-bar__input:focus) {
+  border-radius: 3px;
+  background: var(--sb-focus-background);
+  box-shadow: 0 3px 6px var(--sb-border-color);
+}
+
+.search-bar__icon {
+  background-image: url(../images/Search.svg);
+  height: var(--sb-icon-size);
+  width: var(--sb-icon-size);
+  margin: var(--sb-icon-margin);
+  background-position: center;
+  background-size: cover;
+}
+
+.search-bar__input {
+  border: none;
+  padding: 1px 0 0;
+  flex-grow: 1;
+
+  font-size: var(--sb-input-font-size);
+  line-height: calc(var(--sb-height) - 1px);
+  font-family: inherit;
+  color: inherit;
+  background: inherit;
+}
+
+.search-bar__input::placeholder {
+  color: inherit;
+}
+
+.search-bar__input:focus {
+  outline: none;
+  background: var(--sb-focus-background);
+  font-weight: 900;
+}
diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -0,0 +1,18 @@
+.search-bar {
+  --sb-focus-background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
+  --sb-border-color: #e1e7ed;
+}
+
+.search-bar--big {
+  --sb-height: 68px;
+  --sb-icon-size: 19px;
+  --sb-icon-margin: 24px 18px 25px 25px;
+  --sb-input-font-size: 16px;
+}
+
+.search-bar--small {
+  --sb-height: 40px;
+  --sb-icon-size: 11px;
+  --sb-icon-margin: 14px 10px 15px 12px;
+  --sb-input-font-size: 14px;
+}