Init project

src/components/Form/Form.scss

@@ -0,0 +1,237 @@
+@import '../../styles/vars.scss';
+
+.consultation-form {
+    background: linear-gradient(270deg, #6ECBFF 0%, #FFFFFF 147.13%);
+}
+
+.consultation-form__info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    // justify-content: center;
+}
+
+.form-info__title {
+    display: block;
+    text-transform: uppercase;
+    // font-size: 25px;
+    margin: 80px 0;
+    line-height: 41px;
+    color: rgba(0, 0, 0, 1);
+}
+
+.form-info__title>span {
+    display: block;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 43px;
+    border-radius: 30px;
+    background-color: white;
+}
+
+form div {
+    display: flex;
+    margin: 45px 0;
+    column-gap: 43px;
+}
+
+form input,
+.form-btn {
+    text-align: center;
+    width: 280px;
+    height: 56.5px;
+    border-radius: 24px;
+    border: 0;
+    font-size: 17.5px;
+    background-color: rgba(186, 230, 255, 1);
+}
+
+.form-btn {
+    cursor: pointer;
+    background: linear-gradient(90deg, #6ECBFF 0%, #FFFFFF 147.13%);
+
+}
+
+.form-btn:hover {
+    background: linear-gradient(90deg, #25afff 0%, #FFFFFF 147.13%);
+}
+
+form p:nth-child(2) {
+    margin: 0;
+    line-height: 24.5px;
+    font-size: 15px;
+    text-transform: uppercase;
+}
+
+form p:last-child {
+    margin: 0;
+    font-size: 10px;
+}
+
+.form__title {
+    margin: 0;
+    font-size: 36px;
+    line-height: 60px;
+    text-transform: uppercase;
+}
+
+.que-form {
+    position: relative;
+    display: flex;
+    align-items: center;
+    column-gap: 43px;
+    margin: 60px 0;
+}
+
+.que-form p {
+    font-size: 20px;
+}
+
+.que__img {
+    width: 75px;
+    height: 75px;
+    cursor: pointer;
+}
+
+.arrow {
+    position: absolute;
+    right: 144%;
+    background-image: url(../../assets/images/icons/arrow.svg);
+    background-size: cover;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.6s ease-in-out;
+}
+
+.arrow__visible {
+    opacity: 1;
+}
+
+@media (min-width: 1800px) {
+    form {
+        padding: 53px;
+    }
+
+    form p:nth-child(2) {
+        margin: 19px 0;
+        line-height: 24.5px;
+        font-size: 18px;
+    }
+
+    .que-form p {
+        font-size: 24px;
+    }
+
+    .form-info__title {
+        font-size: 28px;
+    }
+
+    .form__title {
+        font-size: 40px;
+    }
+
+    form p:last-child {
+        font-size: 14px;
+    }
+
+    form input,
+    .form-btn {
+        width: 360px;
+        height: 66.5px;
+        font-size: 21.5px;
+        border-radius: 30px;
+    }
+
+    .que__img {
+        width: 95px;
+        height: 95px;
+    }
+
+    .arrow {
+        width: 70px;
+        height: 70px;
+    }
+}
+
+@media (max-width:1335px) {
+    .arrow__visible {
+        display: none;
+    }
+}
+
+@media (max-width:$laptopWidth) {
+    form div {
+        flex-direction: column;
+        row-gap: 22px;
+    }
+}
+
+@media (max-width:$tabletWidth) {
+
+    .que-form {
+        margin: 30px 0;
+    }
+
+    .que-form p {
+        font-size: 1.5em;
+        line-height: 31px;
+    }
+
+    .que-form>p span {
+        display: block;
+    }
+
+    .form-info__title {
+        margin: 50px 0;
+    }
+
+    .form__title {
+        font-size: 32px;
+    }
+}
+
+@media (max-width:600px) {
+
+    .form__title {
+        font-size: 26px;
+    }
+
+    .form-info__title {
+        margin: 40px 0;
+        font-size: 20px;
+    }
+
+}
+
+@media (max-width:$mobileWidth) {
+    .form-info__title {
+        font-size: 15px;
+        line-height: 31px;
+    }
+
+    .que-form p {
+        font-size: 16px;
+    }
+
+    .form__title {
+        font-size: 24px;
+    }
+
+    form p:nth-child(2) {
+        font-size: 13px;
+    }
+
+    form {
+        padding: 12px;
+    }
+
+    form p:last-child {
+        text-align: center;
+    }
+}