diff --git a/src/ex10_html-css-advanced/task-01.css b/src/ex10_html-css-advanced/task-01.css
new file mode 100644
index 0000000000..a7d577c20a
--- /dev/null
+++ b/src/ex10_html-css-advanced/task-01.css
@@ -0,0 +1,201 @@
+/* сбрасываем дефолтные внешние отступы */
+body {
+  margin: 0;
+}
+/* флекс-контейнер для всего задания */
+.app {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  background-color: #585f63;
+}
+/* разметка блоков для всех 3-ех анимаций */
+.loader-wrapper,
+.ball-wrapper,
+.animation-wrapper {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  margin: 20px;
+  width: 80%;
+  height: 400px;
+}
+
+.loader-wrapper {
+  flex-flow: column nowrap;
+}
+
+.loader-wrapper__loader:hover,
+.middle-block__:hover,
+.animation-wrapper__infinity-animation:hover {
+  cursor: pointer;
+}
+
+/* Первая анимация */
+.loader-wrapper__loader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100px;
+  width: 100px;
+  padding: 5px;
+  border-radius: 50%;
+  left: calc(50% - 50px);
+  top: calc(50% - 50px);
+  border: 5px dotted #f0d438;
+  animation: rotateLoader 2s linear infinite;
+}
+
+.loader__element-1 {
+  height: 30px;
+  width: 40px;
+  clip-path: polygon(
+    0% 20%,
+    60% 20%,
+    60% 0%,
+    100% 50%,
+    60% 100%,
+    60% 80%,
+    0% 80%
+  );
+  background: linear-gradient(45deg, #f1c01d, #96ec4f);
+  animation: scaleElement 2s linear infinite;
+}
+
+.loader__element-2 {
+  height: 30px;
+  width: 40px;
+  clip-path: polygon(
+    40% 0%,
+    40% 20%,
+    100% 20%,
+    100% 80%,
+    40% 80%,
+    40% 100%,
+    0% 50%
+  );
+  background: linear-gradient(45deg, #f1c01d, #96ec4f);
+  animation: scaleElement 2s linear infinite;
+}
+
+.loader-wrapper__text {
+  margin: 10px;
+  padding: 10px;
+  font-weight: bold;
+  color: #f1c01d;
+  border-right: 2px dotted #96ec4f;
+  border-left: 2px dotted #96ec4f;
+  text-transform: uppercase;
+}
+
+@keyframes rotateLoader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes scaleElement {
+  0% {
+    transform: scale(0);
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+  }
+  50% {
+    transform: scale(1);
+    height: 30px;
+    width: 50px;
+    border-radius: 10px;
+  }
+  100% {
+    transform: scale(0);
+    border-radius: 50%;
+    height: 20px;
+    width: 20px;
+  }
+}
+
+/* Вторая анимация */
+.ball-wrapper__block-1,
+.ball-wrapper__block-2 {
+  width: 200px;
+  height: 100%;
+  background: linear-gradient(45deg, #000000, #7dd4fd);
+  box-shadow: 2px 2px 10px black;
+  border-radius: 15px;
+}
+
+.ball-wrapper__middle-block {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.middle-block__ball {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(90deg, #f1c01d, #96ec4f);
+  box-shadow: 2px 2px 10px black;
+  animation: jumping 1.5s ease-in-out infinite;
+}
+
+@keyframes jumping {
+  0% {
+    left: 0;
+  }
+
+  50% {
+    left: calc(100% - 100px);
+  }
+
+  100% {
+    left: 0;
+  }
+}
+
+/* Третья анимация */
+.animation-wrapper__infinity-animation {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+
+  animation: steps 7s ease-in-out infinite;
+}
+
+@keyframes steps {
+  0% {
+    border-radius: 100%;
+    background: radial-gradient(#f18239, #16e227);
+  }
+  16% {
+    border-radius: 0%;
+  }
+  32% {
+    background: linear-gradient(45deg, #f18239, #16e227);
+  }
+  48% {
+    transform: scale(1.5);
+    filter: opacity(0.4);
+  }
+  64% {
+    transform: rotate(360deg);
+  }
+  80% {
+    background: linear-gradient(315deg, #f18239, #16e227);
+  }
+  100% {
+    border-radius: 100%;
+    background: radial-gradient(#f18239, #16e227);
+  }
+}
diff --git a/src/ex10_html-css-advanced/task-01.html b/src/ex10_html-css-advanced/task-01.html
new file mode 100644
index 0000000000..fef4f06069
--- /dev/null
+++ b/src/ex10_html-css-advanced/task-01.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="task-01.css" />
+    <title>Task-01</title>
+  </head>
+  <body>
+    <div class="app">
+      <!-- loader for page -->
+      <div class="loader-wrapper">
+        <div class="loader-wrapper__loader">
+          <div class="loader__element-1"></div>
+          <div class="loader__element-2"></div>
+        </div>
+        <div class="loader-wrapper__text">Loading...</div>
+      </div>
+      <!-- jumping ball -->
+      <div class="ball-wrapper">
+        <div class="ball-wrapper__block-1"></div>
+        <div class="ball-wrapper__middle-block">
+          <div class="middle-block__ball"></div>
+        </div>
+        <div class="ball-wrapper__block-2"></div>
+      </div>
+      <!-- infinity animation with keyframes steps -->
+      <div class="animation-wrapper">
+        <div class="animation-wrapper__infinity-animation"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/ex10_html-css-advanced/task-02.css b/src/ex10_html-css-advanced/task-02.css
new file mode 100644
index 0000000000..b9d8a1d015
--- /dev/null
+++ b/src/ex10_html-css-advanced/task-02.css
@@ -0,0 +1,172 @@
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+}
+
+input {
+  border: none;
+}
+
+.form-wrapper {
+  padding: 20px;
+  width: 420px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+}
+
+.header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid gray;
+}
+
+.header__burger {
+  width: 48px;
+  height: 48px;
+  background-image: url(../ex10_html-css-advanced/img/list.svg);
+}
+
+.header__button {
+  font-size: 20px;
+  color: gray;
+}
+
+.header__burger:hover {
+  cursor: pointer;
+}
+
+.header__button:hover {
+  color: rgb(0, 132, 255);
+  cursor: pointer;
+}
+
+.main {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.main__nav-button {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+}
+
+.nav-button__location,
+.nav-button__category {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  margin: 5px;
+  border: 1px solid black;
+  padding: 2px 10px;
+  height: 30px;
+  width: 50%;
+  border-radius: 15px;
+  color: gray;
+}
+
+.nav-button__location_svg {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+  background-repeat: no-repeat;
+  background-image: url(../ex10_html-css-advanced/img/location.svg);
+}
+
+.nav-button__category_svg {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+  background-repeat: no-repeat;
+  background-image: url(../ex10_html-css-advanced/img/category.svg);
+}
+
+.main__input-content {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.main__input-content_column {
+  height: 30px;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.main__input-content_row-1 {
+  height: 30px;
+  display: flex;
+  flex-flow: row nowrap;
+  border-bottom: 1px solid gray;
+}
+
+.main__input-content_row-2 {
+  height: 30px;
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.main__input-content_row-3 {
+  height: 30px;
+  display: flex;
+  flex-flow: row nowrap;
+  border-top: 1px solid gray;
+}
+
+.form-wrapper__title {
+  justify-content: flex-end;
+  position: relative;
+}
+
+.form-wrapper__location {
+  justify-content: flex-end;
+  position: relative;
+}
+
+.form-wrapper__price {
+  justify-content: flex-end;
+  position: relative;
+  border-right: 1px solid gray;
+}
+
+.form-wrapper__description {
+  justify-content: flex-end;
+  position: relative;
+}
+
+label {
+  margin-top: 3px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: gray;
+  opacity: 0;
+  font-family: Arial;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 8px;
+  transition: all 0.3s linear;
+}
+
+input:invalid + label {
+  top: 10px;
+  opacity: 0;
+}
+
+input:valid + label {
+  opacity: 1;
+  top: 0;
+}
+
+input:focus {
+  outline: none;
+}
+
+input:focus + label {
+  color: rgb(0, 132, 255);
+}
diff --git a/src/ex10_html-css-advanced/task-02.html b/src/ex10_html-css-advanced/task-02.html
new file mode 100644
index 0000000000..fff5576101
--- /dev/null
+++ b/src/ex10_html-css-advanced/task-02.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="task-02.css" />
+    <title>Task-02</title>
+  </head>
+  <body>
+    <div class="form-wrapper">
+      <div class="header">
+        <div class="header__burger"></div>
+        <div class="header__title">
+          <h2>New Post</h2>
+        </div>
+        <div class="header__button">Next</div>
+      </div>
+      <div class="main">
+        <form action="#">
+          <div class="main__nav-button">
+            <div class="nav-button__location">
+              <div class="nav-button__location_svg"></div>
+              Location
+            </div>
+            <div class="nav-button__category">
+              <div class="nav-button__category_svg"></div>
+              Category
+            </div>
+          </div>
+          <div class="main__input-content">
+            <div class="main__input-content_row-1">
+              <div class="form-wrapper__title main__input-content_column">
+                <input
+                  required
+                  type="text"
+                  name="title"
+                  id="title"
+                  placeholder="Title"
+                />
+                <label for="title">Title</label>
+              </div>
+            </div>
+            <div class="main__input-content_row-2">
+              <div class="form-wrapper__price main__input-content_column">
+                <input
+                  required
+                  type="text"
+                  name="price"
+                  id="price"
+                  placeholder="Price"
+                />
+                <label for="price">Price</label>
+              </div>
+              <div class="form-wrapper__location main__input-content_column">
+                <input
+                  required
+                  type="text"
+                  name="spec-location"
+                  id="spec-location"
+                  placeholder="Specific location (optional)"
+                />
+                <label for="spec-location">Specific location (optional)</label>
+              </div>
+            </div>
+            <div class="main__input-content_row-3">
+              <div class="form-wrapper__description main__input-content_column">
+                <input
+                  required
+                  type="text"
+                  name="description"
+                  id="description"
+                  placeholder="Description"
+                />
+                <label for="description">Description</label>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </body>
+</html>