Merge branch 'main' of https://github.com/ViktorSvertoka/your-energy

ViktorSvertoka · Dec 17, 2023 · aefe8b4 · aefe8b4
2 parents 291193e + fab8e1a
commit aefe8b4
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 23 deletions.
diff --git a/src/css/layout/03-exercises.css b/src/css/layout/03-exercises.css
@@ -77,7 +77,7 @@
   align-items: center;
 }
 .exersices__title {
-  /* font-family: DMSans-Regular; */
+  margin-bottom: 20px;
   font-style: normal;
   font-weight: 400;
   font-size: 28px;
@@ -90,12 +90,101 @@
     font-size: 44px;
     line-height: 1.1em;
     letter-spacing: -0.88px;
+    margin-bottom: 0;
+  }
+}
+
+.exersices__search-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media screen and (min-width: 768px) {
+  .exersices__search-btn-wrap {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .exersices__search-btn-wrap {
+    gap: 30px;
   }
 }
+
+/* Search form */
+
+.search__form {
+  position: relative;
+}
+
+.search__input {
+  padding: 12px 14px;
+  width: 100%;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42em;
+  background-color: var(--color-white);
+  border-radius: 30px;
+}
+
+@media screen and (min-width: 768px) {
+  .search__input {
+    width: 273px;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .search__input {
+    font-size: 16px;
+    line-height: 1.5em;
+  }
+}
+
+.search__input::placeholder {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42em;
+  color: var(--color-black);
+}
+
+@media screen and (min-width: 1440px) {
+  .search__input::placeholder {
+    font-size: 16px;
+    line-height: 1.5em;
+  }
+}
+
+.search__button {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+.search__icon {
+  padding: 0;
+  stroke: var(--color-black);
+  fill: var(--color-white);
+  transition: all var(--transition-dur-and-func);
+}
+
+.search__button:hover .search__icon {
+  transform: scale(1.1);
+}
+
 .exercises__btn.active {
   position: relative;
   padding: 0 0 4px;
-  /* font-family: DMSans-Regular; */
   font-style: normal;
   font-weight: 400;
   font-size: 14px;

diff --git a/src/img/sprite.svg b/src/img/sprite.svg
diff --git a/src/partials/03-exercises.html b/src/partials/03-exercises.html
@@ -2,28 +2,33 @@
 <section class="section">
   <div class="exersices__container container">
     <h2 class="exersices__title">Exercises</h2>
-
-    <form class="search__form hidden">
-      <input class="search__input" type="text" />
-      <button class="search__button" type="button">svg</button>
-    </form>
-    <ul class="exersices__list">
-      <li>
-        <button class="exercises__btn btnFilters active" type="button">
-          Muscles
-        </button>
-      </li>
-      <li>
-        <button class="exercises__btn btnFilters" type="button">
-          Body parts
-        </button>
-      </li>
-      <li>
-        <button class="exercises__btn btnFilters" type="button">
-          Equipment
+    <div class="exersices__search-btn-wrap">
+      <form class="search__form">
+        <input class="search__input" type="text" placeholder="Search" />
+        <button class="search__button" type="button">
+          <svg class="search__icon" width="18" height="18">
+            <use href="./img/sprite.svg#icon-search"></use>
+          </svg>
         </button>
-      </li>
-    </ul>
+      </form>
+      <ul class="exersices__list">
+        <li>
+          <button class="exercises__btn btnFilters active" type="button">
+            Muscles
+          </button>
+        </li>
+        <li>
+          <button class="exercises__btn btnFilters" type="button">
+            Body parts
+          </button>
+        </li>
+        <li>
+          <button class="exercises__btn btnFilters" type="button">
+            Equipment
+          </button>
+        </li>
+      </ul>
+    </div>
   </div>
 
   <div class="quote-filters__container container">