feat: adds Form Fieldset UI component

* feat: add html structure

* feat: add css structure

* feat: add styles for the fieldset.css file

* feat: add styles for the fieldset__title.css file

* feat:imported styles into components.css

* fix:changed the html structure, names of classes and modifiers

* feat: add styles for the form-fieldset__legend.css file

* feat: add styles for the form-fieldset.css file

* feat: add styles for form-fieldset__legend_for_impressions and form-fieldset_for_impressions modifiers

* feat: add styles for form-fieldset__legend_for_achievements and form-fieldset_for_achievements modifiers

* feat: add styles for form-fieldset__legend_for_contact-info and form-fieldset_for_contact-info modifiers

* feat: add styles for form-fieldset_for_app-type and form-fieldset__legend_for_app-type modifiers

* feat: added description to the element

* fix:set the margin of the form-fieldset element to zero

* fix:added centering to the form-fieldset__legend element

* fix: changed legend positioning for desktop version

* fix: fixed legend behavior on phone versions on the _for_app-type modifier

* fix: added absolute positioning to the _achievements and _app-type modifier

* fix: indentation in modifiers for the fieldset element

* fix: corrected errors

* fix: reverts changes to index.html

* style: ensures CSS formatting follows project code style

* fix: removes extra closing div tag, ensures proper indentation in components.html

* docs: improves Form Fieldset UI Component description

* style: updates components.css for formatting consistency, ensures visually-hidden mix imports the last

---------

Co-authored-by: Irina Naumchik <[email protected]>

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

@@ -0,0 +1,9 @@
+.form-fieldset__legend_for_achievements{
+    padding: 0 31px;
+}
+@media screen and (max-width: 659px){
+    .form-fieldset__legend_for_achievements{
+        top: 38px;
+        padding: 0;
+    }
+}

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

@@ -0,0 +1,16 @@
+.form-fieldset__legend_for_app-type{
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: max-content;
+    padding: 0 25px;
+    background-color: rgb(255, 255, 255);
+}
+@media screen and (max-width: 659px){
+    .form-fieldset__legend_for_app-type{
+        top: 40px;
+        padding: 0;
+        background-color: rgb(242, 242, 242);
+    }
+}

blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css

@@ -0,0 +1,8 @@
+.form-fieldset__legend_for_contact-info{
+    padding: 0 31px;
+}
+@media (max-width:659px){
+    .form-fieldset__legend_for_contact-info{
+        display: none;
+    }
+}

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

@@ -0,0 +1,9 @@
+.form-fieldset__legend_for_impressions{
+    padding: 0 38px;
+}
+@media screen and (max-width: 659px){
+    .form-fieldset__legend_for_impressions{
+        top: 34px;
+        padding: 0;
+    }
+}

blocks/form-fieldset/__legend/form-fieldset__legend.css

@@ -0,0 +1,20 @@
+.form-fieldset__legend{
+    margin: 0 auto;
+    font-size: 14px;
+    line-height: 30px;
+    letter-spacing: -.15px;
+    color: rgb(210, 40, 86);
+    text-transform: uppercase;
+    text-align: center;
+}
+@media screen and (max-width: 659px){
+    .form-fieldset__legend{
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        max-width: 240px;
+        line-height: 18px;
+        letter-spacing: unset;
+    }
+}

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

@@ -0,0 +1,10 @@
+.form-fieldset_for_achievements{
+    padding: 42px 60px 60px;
+}
+@media screen and (max-width: 659px){
+	  .form-fieldset_for_achievements{
+        position: relative;
+        padding: 117px 20px 46px;
+        background-color: rgb(242, 242, 242);
+    }
+}

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

@@ -0,0 +1,16 @@
+.form-fieldset_for_app-type{
+    position: relative;
+    top: -3px;
+    padding: 59px 59px 56px;
+}
+@media screen and (max-width: 1199px){
+    .form-fieldset_for_app-type{
+        padding: 59px 45px 56px;
+    }
+}
+@media screen and (max-width: 659px){
+    .form-fieldset_for_app-type{
+        padding: 116px 20px 46px;
+        background-color: rgb(242, 242, 242);
+    }
+}

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

@@ -0,0 +1,8 @@
+.form-fieldset_for_contact-info{
+    padding: 28px 58px 10px;
+}
+@media screen and (max-width: 659px){
+    .form-fieldset_for_contact-info{
+        padding: 32px 20px 44px;
+    }
+}

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

@@ -0,0 +1,9 @@
+.form-fieldset_for_impressions{
+    padding: 29px 60px 43px;
+}
+@media screen and (max-width: 659px){
+    .form-fieldset_for_impressions{
+        position: relative;
+        padding: 68px 20px 52px;
+    }
+}

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

@@ -0,0 +1,8 @@
+.form-fieldset_for_personal-info{
+    border: none;
+}
+@media screen and (max-width: 659px){
+    .form-fieldset_for_personal-info{
+        padding: 0 20px 44px;
+    }
+}

blocks/form-fieldset/form-fieldset.css

@@ -0,0 +1,8 @@
+.form-fieldset{
+    border: 2px solid rgb(229, 229, 229);
+}
+@media screen and (max-width: 659px){
+    .form-fieldset{
+        border: none;
+    }
+}

pages/components.css

@@ -36,21 +36,34 @@
 @import url(../blocks/button/_place/button_place_form.css);
 @import url(../blocks/button/_place/button_place_photo-editor.css);
 
+/* Form Fieldset UI Component */
+@import url(../blocks/form-fieldset/form-fieldset.css);
+@import url(../blocks/form-fieldset/_for/form-fieldset_for_personal-info.css);
+@import url(../blocks/form-fieldset/_for/form-fieldset_for_app-type.css);
+@import url(../blocks/form-fieldset/_for/form-fieldset_for_contact-info.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/__legend/form-fieldset__legend.css);
+@import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css);
+@import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css);
+@import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css);
+@import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css);
+
 /* Radio Input UI Component */
 @import url(../blocks/radio-input/radio-input.css);
 @import url(../blocks/radio-input/__label/radio-input__label.css);
 
 /* Textarea UI Component */
 @import url(../blocks/textarea/textarea.css);
 
-/* Section-intro UI Component*/
-@import url(../blocks/section/__intro/section__intro.css);
+/* Section Intro UI Component */
 @import url(../blocks/section/section.css);
+@import url(../blocks/section/__intro/section__intro.css);
 @import url(../blocks/section/__intro/_place/section__intro_place_form.css);
 @import url(../blocks/section/__intro/_place/section__intro_place_gallery.css);
 @import url(../blocks/section/__intro/_place/section__intro_place_photo-editor.css);
 
-/* Input UI Component*/
+/* Input UI Component */
 @import url(../blocks/input/input.css);
 @import url(../blocks/input/__label/input__label.css);
 @import url(../blocks/input/__input/input__input.css);