Task 2 | feat add page about and fix styles

assets/css/style.css

@@ -1835,7 +1835,7 @@ body:has(.modal_open) .modal_back{
     z-index: 1;
 }
 .hero .cont{
-    padding-top: 151px;
+    padding-top: 245px;
     padding-bottom: 132px;
     position: relative;
 }
@@ -1847,7 +1847,7 @@ body:has(.modal_open) .modal_back{
     mix-blend-mode: soft-light;
 }
 .hero_title{
-    font-size: 96px;
+    font-size: 82px;
     font-weight: 700;
     line-height: normal;
     text-transform: uppercase;
@@ -1890,7 +1890,7 @@ body:has(.modal_open) .modal_back{
     font-weight: 700;
     line-height: 110.5%;
     text-transform: uppercase;
-    margin: 0 0 25px 0;
+    margin: 0 0 15px 0;
     color: var(--grey-black);
 }
 .description{
@@ -1924,6 +1924,9 @@ body:has(.modal_open) .modal_back{
     width: 435px;
     max-width: calc(50% - 15px);
 }
+.advantage_item:last-child .advantage_title, .advantage_item:last-child .description:not(.for_border .description){
+    width: 100%;
+}
 .advantage_title{
     font-size: 36px;
     font-weight: 700;
@@ -1931,19 +1934,24 @@ body:has(.modal_open) .modal_back{
     text-transform: uppercase;
     color: var(--grey-black);
     margin: 0 0 24px 0;
-    z-index: 0;
+    width: 85%;
 }
 .advantage_image{
     position: absolute;
     left: 0;
     z-index: -1;
-    top: -170px;
+    top: -130px;
+    max-width: 234px;
+    max-height: 234px;
+}
+.advantage_item .description:not(.for_border .description){
+    width: 80%;
 }
 .advantage_image2{
     width: 100%;
 }
-.advantage_row .advantage_item:nth-child(2) .advantage_image{
-    top: -130px;
+.advantage_row .advantage_item:nth-child(3) .advantage_image{
+    top: -165px;
 }
 .advantage_row .advantage_item:nth-child(3){
     margin: 82px 0 0 0;
@@ -1978,7 +1986,40 @@ body:has(.modal_open) .modal_back{
     background-size: contain;
     background-repeat: no-repeat;
     z-index: -1;
+    animation: rotateAnimation 10s infinite;
 }
+@keyframes rotateAnimation {
+    0% {
+        transform: rotate(0deg);
+    }
+    50% {
+        transform: rotate(45deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
+.protein .description{
+    position: absolute;
+    z-index: 1;
+}
+.protein .description:first-child{
+    left: 16px;
+    top: -23px;
+}
+.protein .description:nth-child(2){
+    top: -25px;
+    right: 0;
+}
+.protein .description:nth-child(3){
+    left: 0;
+    bottom: 112px;
+}
+.protein .description:nth-child(4){
+    right: 0;
+    bottom: 113px;
+}
+
 .diagram{
     margin: 0 0 200px 0;
 }
@@ -2001,6 +2042,8 @@ body:has(.modal_open) .modal_back{
     gap: 120px;
     justify-content: flex-start;
     margin: 135px 0 100px 0;
+    position: relative;
+    padding-right: 252px;
 }
 .etaps_col{
     display: flex;
@@ -2013,6 +2056,16 @@ body:has(.modal_open) .modal_back{
     align-items: flex-start;
     gap: 25px;
 }
+.etap_item:nth-child(2) .description{
+    max-width: 67%;
+}
+.etaps_anim{
+    max-width: 252px;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(0,-50%);
+}
 .faq_section{
     background: radial-gradient(358.38% 263.16% at 123.55% -27.98%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%);
     padding: 140px 0 160px 0;
@@ -2413,6 +2466,18 @@ body:has(.modal_open) .modal_back{
     .advantage_title {
         font-size: 28px;
     }
+    .protein .description:nth-child(4) {
+        bottom: 98px;
+    }
+    .protein .description:nth-child(3) {
+        bottom: 98px;
+    }
+    .etaps_anim{
+        display: none;
+    }
+    .etaps_row{
+        padding-right: 0;
+    }
 }
 
 @media only screen and (max-width: 776px){
@@ -2759,11 +2824,14 @@ body:has(.modal_open) .modal_back{
         max-height: 150px;
         width: 100%;
         height: auto;
-        object-fit: cover;
+        object-fit: contain;
         top: -100px;
     }
     .advantage_row .advantage_item:nth-child(2) .advantage_image {
-        top: -65px;
+        top: -108px;
+    }
+    .advantage_row .advantage_item:nth-child(3) .advantage_image {
+        top: -115px;
     }
     .for_border .advantage_item{
         padding: 25px 24px 25px 30px;
@@ -2798,6 +2866,9 @@ body:has(.modal_open) .modal_back{
         margin: 150px 0 100px 0;
         gap: 90px;
     }
+    .advantage_title:not(.advantage_row2 .advantage_title){
+        width: 54%;
+    }
     .etaps_row {
         margin: 80px 0;
     }
@@ -2810,6 +2881,18 @@ body:has(.modal_open) .modal_back{
     .advantage_title {
         font-size: 20px;
     }
+    .protein .description:first-child {
+        top: -16px;
+    }
+    .protein .description:nth-child(2) {
+        top: -16px;
+    }
+    .protein .description:nth-child(3) {
+        bottom: 78px;
+    }
+    .protein .description:nth-child(4) {
+        bottom: 78px;
+    }
 }
 
 @media only screen and (max-width: 576px){
@@ -3397,7 +3480,7 @@ body:has(.modal_open) .modal_back{
     }
     .description{
         font-size: 12px;
-        line-height: 100%;
+        line-height: 115%;
     }
     .main_link {
         font-size: 12px;
@@ -3407,21 +3490,19 @@ body:has(.modal_open) .modal_back{
         padding: 7px;
     }
     .hero .cont {
-        padding-top: 0;
+        padding-top: 217px;
         padding-bottom: 54px;
     }
     .hero_block {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
-        min-height: 66svh;
         gap: 18px;
         padding: 0 0 54px 0;
     }
     .hero_title {
         font-size: 32px;
         width: 100%;
-        word-break: break-word;
         padding: 0;
     }
 
@@ -3457,12 +3538,27 @@ body:has(.modal_open) .modal_back{
     }
     .advantage_title {
         font-size: 12px;
-        margin: 0 0 2px 0;
+        margin: 0 0 5px 0;
+    }
+    .advantage_image2{
+        margin: 10px 0 0 0;
     }
     .advantage_image{
         max-width: 87px;
         max-height: 87px;
-        top: -68px;
+        top: -55px;
+    }
+    .advantage_row .advantage_item:nth-child(2) .advantage_image {
+        top: -58px;
+    }
+    .advantage_row .advantage_item:nth-child(3) .advantage_image {
+        top: -70px;
+    }
+    .advantage_item .description:not(.for_border .description) {
+        width: 84%;
+    }
+    .for_border .advantage_item .description{
+        line-height: 115%;
     }
     .advantage_row {
         margin: 90px 0 70px 0;
@@ -3489,6 +3585,15 @@ body:has(.modal_open) .modal_back{
     }
     .diagram_texts{
         margin: 30px 0 10px 0;
+        gap: 19px;
+    }
+    .diagram_texts .description {
+        width: 26.3%;
+    }
+    .diagram img {
+        width: 110%;
+        left: -5%;
+        position: relative;
     }
     .etaps_row {
         margin: 10px 0 0 0;
@@ -3503,11 +3608,11 @@ body:has(.modal_open) .modal_back{
         gap: 5px;
     }
     .etap_item img{
-        max-width: 30px;
-        max-height: 30px;
-        height: auto;
-        width: 100%;
-        object-fit: cover;
+        width: 29px;
+        height: 26px;
+    }
+    .etap_item .description{
+        line-height: 135%;
     }
     .etaps_col {
         gap: 50px;
@@ -3540,6 +3645,27 @@ body:has(.modal_open) .modal_back{
         width: 17px;
         height: 17px;
     }
+    .protein .description{
+        max-width: 106px;
+    }
+    .protein .description:first-child {
+        top: -25px;
+    }
+    .protein .description:nth-child(2) {
+        top: -25px;
+    }
+    .protein .description:nth-child(3) {
+        bottom: 59px;
+    }
+    .protein .description:nth-child(4) {
+        bottom: 57px;
+    }
+    .protein::before{
+        top: -15%;
+    }
+    .etap_item:nth-child(2) .description {
+        max-width: 100%;
+    }
 }
 
 @media only screen and (min-width: 576px){
@@ -3618,4 +3744,11 @@ body:has(.modal_open) .modal_back{
         margin: 0 -22px 0 0;
         gap: 1px;
     }
+    .protein .description:nth-child(3) {
+        bottom: 48px;
+    }
+    .protein .description:nth-child(4) {
+        bottom: 46px;
+        right: -25px;
+    }
 }