feat: add Form Fieldset UI component

blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css

@@ -1,3 +1,23 @@
 .form-fieldset__legend_for_achievements{
-  padding:14px 31px;
+  padding: 0 25px;
+  background-color:rgb(255, 255, 255);
+  position: absolute;
+  top: -9px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+/* @media screen and (max-width: 1199px) {
+  .form-fieldset__legend_for_achievements{
+    padding: 0;
+    width: 370px;
+  }
+} */
+@media screen and (max-width: 659px) {
+  .form-fieldset__legend_for_achievements{
+    width: 100%;
+    position: static;
+    transform: none;
+    padding:42px 0 40px;
+    background-color:rgba(242, 242, 242, 1);
+  }
 }

blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css

@@ -1,9 +1,23 @@
 .form-fieldset__legend_for_app-type{
-  width: 370px;
-  padding: 0;
-  position: absolute;
+  padding: 0 25px;
   background-color:rgb(255, 255, 255);
+  position: absolute;
   top: -9px;
   left: 50%;
   transform: translateX(-50%);
+}
+@media screen and (max-width: 1199px) {
+  .form-fieldset__legend_for_app-type{
+    padding: 0;
+    width: 370px;
+  }
+}
+@media screen and (max-width: 659px) {
+  .form-fieldset__legend_for_app-type{
+    width: 100%;
+    position: static;
+    transform: none;
+    padding:42px 0 40px;
+    background-color:rgba(242, 242, 242, 1);
+  }
 }

blocks/form-fieldset/_for/form-fieldset_for_achievements.css

@@ -9,5 +9,6 @@
 @media (max-width:659px){
   .form-fieldset_for_achievements{
     padding:0;
+    background-color:rgba(242, 242, 242, 1);
   }
 }

blocks/form-fieldset/_for/form-fieldset_for_app-type.css

@@ -1,5 +1,7 @@
 .form-fieldset_for_app-type{
   padding: 54px 74px;
+  display: flex;
+  flex-wrap: wrap;
 }
 @media (max-width:1199px){
   .form-fieldset_for_app-type{
@@ -9,5 +11,6 @@
 @media (max-width:659px){
   .form-fieldset_for_app-type{
     padding: 0px;
+    background-color:rgba(242, 242, 242, 1);
   }
 }

blocks/form-fieldset/_for/form-fieldset_for_personal-info.css

@@ -0,0 +1,5 @@
+.form-fieldset_for_personal-info{
+  border: none;
+  padding: 0;
+  margin: 0;
+}

blocks/form-fieldset/form-fieldset.css

@@ -1,5 +1,4 @@
 .form-fieldset{
-  border: rgb(229, 229, 229) solid 2px;
   width: 100%;
   box-sizing: border-box;
   margin: 0;

components.html

@@ -129,11 +129,13 @@ <h2 class="component__name">Form-fieldset</h2>
                 <li><code>form-fieldset__legend_for_impressions</code></li>
                 <li><code>form-fieldset__legend_for_achievements</code></li>
               </ul>
-              <div class="component__wrapper component__wrapper_theme_light">
-                <fieldset class="form-fieldset form-fieldset_for_app-type">
-                  <legend class="form-fieldset__legend form-fieldset__legend_for_app-type">С каким приложением путешествовали?</legend>
+              <div class="component__wrapper ">
+                <fieldset class="form-fieldset form-fieldset_for_achievements">
+                  <legend  class="form-fieldset__legend form-fieldset__legend_for_achievements">Ваши безбашенные
+                    достижения в путешествии</legend>
                 </fieldset>
               </div>
+            </div>
           </li>
         </ul>
       </section>

pages/components.css

@@ -57,6 +57,7 @@
 @import url(../blocks/form-fieldset/_for/form-fieldset_for_app-type.css);
 @import url(../blocks/form-fieldset/_for/form-fieldset_for_achievements.css);
 @import url(../blocks/form-fieldset/_for/form-fieldset_for_impressions.css);
+@import url(../blocks/form-fieldset/_for/form-fieldset_for_personal-info.css);
 /* legend */
 @import url(../blocks/form-fieldset/__legend/form-fieldset__legend.css);
 @import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css);