сделал projects и how, а также input для ПК

assets/css/gp-style-core.css

@@ -190,6 +190,83 @@ body{
     text-decoration-skip-ink: none;
     color: var(--link);
 }
+
+.input__block{
+    display: flex;
+    flex-direction: column;
+
+    border-radius: 4px;
+
+    position: relative;
+}
+.input__label{
+    position: absolute;
+    top: 14px;
+    left: 24px;
+
+
+    font-size: 12px;
+    color: var(--link);
+    text-transform: uppercase;
+
+    transition: all 0.3s;
+}
+.input__field{
+    height: 64px;
+
+    padding: 31px 24px 14px 24px;
+
+    height: 64px;
+
+    background-color: var(--background-grey-hover);
+    border: none;
+    border-radius: 4px;
+
+    font-weight: 400;
+    font-size: 16px;
+    color: var(--text-white);
+
+    outline: none;
+    transition: all 0.3s;
+}
+.input__field:hover{
+    border: 1px solid var(--text-white);
+}
+.input__field:focus{
+    border: 1px solid var(--text-white);
+}
+.input__field:placeholder-shown + .input__label{
+    top: 22.5px;
+    left: 24px;
+
+    font-weight: 400;
+    font-size: 16px;
+    color: var(--text-white);
+}
+.input__field:focus + .input__label{
+    top: 14px;
+    left: 24px;
+
+
+    font-size: 12px;
+    color: var(--link);
+}
+.input__field:not(:placeholder-shown):invalid{
+    border: 1px solid #ef120a;
+}
+.input__error{
+    margin-top: 16px;
+
+    font-weight: 400;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    display: none;
+}
+.form.checked .input__error{
+    display: block;
+}
 /* components */
 
 /* header */

assets/css/gp-style-desktop.css

@@ -361,10 +361,208 @@
 
 /* projects */
 .projects{
-    margin: 34px -20px -20px -20px;
+    margin: 37px -20px -20px -20px;
+
+    display: flex;
+    flex-wrap: wrap;
+}
+.projects__item{
+    margin: 20px;
+
+    width: calc(50% - 40px);
+
+    display: flex;
+    flex-direction: column;
+
+    border-radius: 4px;
+    overflow: hidden;
+}
+.projects-item__img{
+    width: 100%;
+    height: 304px;
+
+    object-fit: cover;
+}
+.projects-item__content{
+    min-height: 275px;
+
+    padding: 32px;
+
+    background-color: var(--background-grey);
+}
+.projects-item__tags{
+    display: flex;
+    align-items: center;
+}
+.projects-item__tag{
+    margin-left: 40px;
+
+    display: flex;
+    align-items: center;
+}
+.projects-item__tag:first-child{
+    margin-left: 0;
+}
+.projects-item-tag__icon{
+    width: 24px;
+    aspect-ratio: 1;
+}
+.projects-item-tag__name{
+    margin-left: 16px;
+}
+.projects-item__text{
+    margin-top: 32px;
+}
+.projects-item__text .text-2{
+    margin-top: 16px;
+}
+.projects__next{
+    margin-top: 56px;
+
+    display: flex;
+    justify-content: center;
 }
 /* projects */
 
+/* how */
+.how{
+    margin-top: 56px;
+
+    display: flex;
+}
+.how__control{
+    width: 577px;
+
+    flex-shrink: 0;
+}
+.how-control__item{
+    margin-top: 24px;
+
+    padding: 16px;
+
+    display: flex;
+    align-items: center;
+
+    background-color: var(--background-grey);
+    border-radius: 4px;
+
+    transition: background-color .3s;
+}
+.how-control__item:first-child{
+    margin-top: 0;
+}
+.how-control-item__number{
+    width: 64px;
+    aspect-ratio: 1;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 4px;
+    background-color: var(--background-grey-hover);
+
+    transition: background-color .3s;
+}
+.how-control__item__name{
+    margin-left: 24px;
+
+    max-width: 440px;
+}
+.how-control__item:hover{
+    background-color: var(--background-grey-hover);
+}
+.how-control__item:hover .how-control-item__number{
+    background-color: var(--background-grey);
+}
+.how-control__item.active{
+    background-color: var(--background-grey-hover);
+}
+.how-control__item.active .how-control-item__number{
+    background-color: var(--background-grey);
+}
+
+.how__content{
+    margin-left: 40px;
+
+    width: 100%;
+}
+.how-content__item{
+    width: 100%;
+
+    padding: 32px;
+
+    background-color: var(--background-grey);
+
+    overflow: hidden;
+
+    display: none;
+}
+.how-content__item.active{
+    display: block;
+}
+.how-content__item .text-2{
+    margin-top: 16px;
+}
+.how-content-item__content{
+    margin-top: 24px;
+
+    display: flex;
+
+    position: relative;
+}
+.how-content-item__content .text-2{
+    margin-top: 16px;
+}
+.how-content-item__content .text-2:first-child{
+    margin-top: 0;
+}
+.how-content-item__text{
+    width: 480px;
+}
+.how-content-item__img--1{
+    position: absolute;
+    right: -36px;
+    bottom: -39px;
+
+    width: 303px;
+    height: 303px;
+}
+.how-content-item__img--2{
+    position: absolute;
+    right: -34px;
+    bottom: -41px;
+}
+.how-content-item__img--3{
+    position: absolute;
+    right: -31.98px;
+    bottom: -30.98px;
+
+    width: 336px;
+    height: 336px;
+}
+/* how */
+
+/* free */
+.free{
+    padding: 88px 64px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background-color: var(--background-grey);
+}
+/* .free > .title-1{
+    text-align: center;
+} */
+.free__content{
+    margin-top: 56px;
+
+    width: 800px;
+}
+/* free */
+
 /* services */
 .services{
     margin: 34px -20px -20px -20px;

assets/img/icon/pin.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 10.2647C19 13.1109 15.4774 17.8245 13.43 20.3238C12.6809 21.2382 11.3191 21.2382 10.57 20.3238C8.52261 17.8245 5 13.1109 5 10.2647C5 6.25252 8.13401 3 12 3C15.866 3 19 6.25252 19 10.2647Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M14.6004 10.0001C14.6004 11.436 13.4363 12.6001 12.0004 12.6001C10.5645 12.6001 9.40039 11.436 9.40039 10.0001C9.40039 8.56408 10.5645 7.40002 12.0004 7.40002C13.4363 7.40002 14.6004 8.56408 14.6004 10.0001Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

assets/img/icon/square.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3273 10.3274L7.00001 7M7.00001 7H9.21823M7.00001 7L7 9.21825M13.6726 13.6726L17 17M17 17H14.7817M17 17V14.7818M10.3273 13.6726L7.00001 17M7.00001 17H9.21823M7.00001 17L7 14.7818M13.6726 10.3274L17 7M17 7H14.7817M17 7V9.21825" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M15.1 2.5H8.9C6.65979 2.5 5.53969 2.5 4.68404 2.93597C3.93139 3.31947 3.31947 3.93139 2.93597 4.68404C2.5 5.53969 2.5 6.65979 2.5 8.9V15.1C2.5 17.3402 2.5 18.4603 2.93597 19.316C3.31947 20.0686 3.93139 20.6805 4.68404 21.064C5.53969 21.5 6.65979 21.5 8.9 21.5H15.1C17.3402 21.5 18.4603 21.5 19.316 21.064C20.0686 20.6805 20.6805 20.0686 21.064 19.316C21.5 18.4603 21.5 17.3402 21.5 15.1V8.9C21.5 6.65979 21.5 5.53969 21.064 4.68404C20.6805 3.93139 20.0686 3.31947 19.316 2.93597C18.4603 2.5 17.3402 2.5 15.1 2.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>