Merge branch 'myFit--ContactPageForm' of MyFit/www-myfit into master

src/assets/css/style.css

@@ -3521,6 +3521,90 @@ header.fix_style.white_header {
   margin-bottom: 20px;
 }
 
+.contact_page_section .contact_inner .contact_form form .form-group textarea {
+  resize: none;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn{
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn p{
+  margin: 0 !important;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group .contact_btn > span{
+  width: 24px;
+  height: 24px;
+}
+
+#contact_body{
+  min-height: 48rem;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.contact_body{
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 20px;
+  font-weight: 800;
+  text-align: center;
+}
+
+/* Animations */
+.animate.pop {
+  animation-name: animate-pop;
+  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
+  animation-duration: 0.5s;
+}
+
+@keyframes animate-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.5, 0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+
+/* For the err msg */
+#errText{
+  text-align: center;
+  color: tomato;
+  font-weight: 600;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group span{
+  font-size: 12px;
+  color: tomato;
+  padding: 3px;
+  display: none;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:valid[focused="true"]{
+  border: 1px solid var(--dark-purple);
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"]{
+  border: 1px solid tomato;
+}
+
+.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"] ~ span{
+  display: block;
+}
+
 .contact_page_section
   .contact_inner
   .contact_form
@@ -4585,6 +4669,55 @@ header.fix_style.white_header {
   padding: 20px 0 0 0;
 }
 
+/* Loader */
+
+.loader{
+  border-radius: 100%;
+  position: relative;
+}
+
+.loader-sm{
+  width: 24px;
+  height: 24px;
+}
+
+/* LOADER 1 */
+
+#loader-1:before, #loader-1:after{
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  border: 3.5px solid transparent;
+  border-top-color: var(--body-text-purple);
+}
+
+#loader-1:before{
+  z-index: 100;
+  animation: spin 1.5s infinite;
+}
+
+#loader-1:after{
+  border: 3.5px solid #ccc;
+}
+
+@keyframes spin{
+  0%{
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100%{
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 992px) {
   .navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
     position: absolute !important;