Footer improvements, UI form contact

layouts/index.html

@@ -9,6 +9,7 @@
       {{ partial "intro.html" . }}
       {{ partial "services.html" . }}
       {{ partial "usTeam.html" . }}
+      {{ partial "contact.html" . }}
     </main>
 
     {{ partial "footer.html" .}}

layouts/partials/contact.html

@@ -0,0 +1,36 @@
+<div class="contact-container" id="contacto"> 
+  <div class="container">
+    <h3 class="title-section">Contacto</h3>
+    <div class="row">
+      <div class="column-left">
+      </div>
+      <div class="column-right">
+        <form action="" class="formulario" id="contactForm" method="POST" target="_blank">
+          <div class="row-form">
+            <label for="nombre">Nombre y Apellido</label>
+            <input type="text" id="nombre" name="nombre" required>
+            <p class="formulario__input-error none">Requerido. Debe ser mínimo 4 letras</p>
+          </div>
+          <div class="row-form">
+            <label for="email">Email</label>
+            <input type="text" id="email" name="email" required>
+            <p class="formulario__input-error none">Requerido. Revise si el formato es el correcto</p>
+          </div>
+          <div class="row-form">
+            <label for="telefono">Teléfono</label>
+            <input type="number" id="telefono" name="telefono">
+          </div>
+          <div class="row-form">
+            <label for="mensaje">Mensaje</label>
+            <textarea name="mensaje" id="" cols="30" rows="10" required></textarea>
+            <p class="formulario__input-error none">Requerido</p>
+          </div>
+          <input class="button__form" type="submit" value="Enviar">
+          <div class="contact-form-response none">
+            <p>Los datos han sido enviados</p>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/footer.html

@@ -1,5 +1,12 @@
-<footer class="footer-container">
+<footer class="footer">
   <div class="container">
-    Footer
+    <div class="nav-footer">
+      <ul class="nav-links">
+        {{ range $item := .Site.Params.navigation.items }}
+          <li class="nav-link"><a href="#{{$item}}">{{$item}}</a></li>
+        {{ end }}
+      </ul>
+    </div>
+    <p>Copyright &copy; {{ now.Format "2006" }} ContenidosOnline</p>
   </div>
 </footer>

static/css/main.css

@@ -29,6 +29,10 @@ body {
   padding: 0;
 }
 
+.none {
+  display: none;
+}
+
 .container {
   /* Extra Large: xl */ 
   max-width: 1200px;
@@ -107,7 +111,7 @@ body {
 }
 .main-header .nav-links .nav-link a:hover {
   background: rgba(255, 255, 255, 0.03);
-  color: #fff;
+  color: #0e3131;
 }
 .main-header .menu-icon {
   position: relative;
@@ -285,7 +289,7 @@ body {
 }
 
 .intro-container > span {
-  font-size: clamp(16px, 1.1vw, 28px);
+  font-size: clamp(16px, 1.1vw, 20px);
 }
 
 /* Services Section */
@@ -467,11 +471,102 @@ body {
   }
 }
 
+/* Contact */
+
+.contact-container {
+  padding: 4rem;
+  background: #329998;
+  min-height: 800px;
+  max-height: 1000px;
+  clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 93.85%);
+}
+
+.contact-container > .container > .row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+form > .row-form {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+}
+
+form > .row-form > input {
+  border: none;
+  padding: 1rem;
+  font-family: var(--ff-main);
+  font-size: 16px;
+}
+
+form > .row-form > textarea {
+  resize: vertical;
+  max-height: 250px;
+  padding: 1rem;
+  font-family: var(--ff-main);
+  font-size: 16px;
+}
+
+form > .row-form > label {
+  margin-bottom: .5rem;
+  color: #FFF;
+}
+
+#contactForm > input {
+  width: 100%;
+  padding: 1rem 0;
+  border: none;
+}
+
+.formulario__input-error {
+  color: #fb0000;
+  text-shadow: 1px 1px #143f3e;
+  font-weight: bold;
+}
+
+input[type="submit"] {
+  background-color: rgb(29 119 118);
+  color: rgb(232, 230, 227);
+  border-color: transparent;
+  text-transform: uppercase;
+  border-radius: 3px;
+  font-size: 18px;
+}
+
+input[type="submit"]:disabled {
+  background-color: rgb(48, 52, 54);
+  color: rgb(232, 230, 227);
+  outline-color: currentcolor;
+}
+
 /* Footer */
 
-.footer-container {
-  background: var(--primary-color-gradient);
-  padding: 4rem 2rem;
+footer {
+  padding: 2rem;
+  color: #329998;
+  text-align: center;
+}
+
+.nav-footer > .nav-links {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+}
+
+.nav-links > li {
+  text-transform: uppercase;
+  margin: 0 1rem 1rem 0;
+}
+
+.nav-links > li:last-child {
+  margin: 0;
+}
+
+.nav-links > li > a {
+  color: inherit;
+  font-weight: bold;
+  text-decoration: none;
 }
 
 /* Animaciones */

static/js/main.js

@@ -1,4 +1,8 @@
 const header = document.querySelector(".main-header");
+const expresiones = {
+  nombre: /^.{4,30}$/,
+  email: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
+}
 
 window.addEventListener("scroll", () => {
   const scrollPos = window.scrollY;
@@ -7,4 +11,71 @@ window.addEventListener("scroll", () => {
   } else {
     header.classList.remove("scrolled");
   }
-})
+})
+
+const form = document.getElementById("contactForm");
+const fields = {
+  nombre: false,
+  email: false,
+  mensaje: false
+}
+const loader = document.querySelector(".contact-form-loader");
+const inputs = document.querySelectorAll("input:not([type='submit']), textarea");
+const inputSubmit = document.querySelector("input[type='submit']")
+
+const validateForm = (e) => {
+  switch (e.target.name) {
+    case "nombre":
+      validateField(expresiones.nombre, e.target, 'nombre');
+      break;
+    case "email":
+      validateField(expresiones.email, e.target, 'email');
+      break;
+    case "mensaje":
+      if (e.target.value.length === 0) {
+        document.querySelector("textarea[name='mensaje'] + .formulario__input-error").classList.remove('none')
+        fields.mensaje = false;
+      } else {
+        document.querySelector("textarea[name='mensaje'] + .formulario__input-error").classList.add('none')
+        fields.mensaje = true;
+      }
+      break;
+  }
+}
+
+const validateField = (expresion, input, field) => {
+  if (expresion.test(input.value)) {
+    document.querySelector(`input[name='${field}']`).classList.remove('input__border-error')
+    document.querySelector(`input[name='${field}'] + .formulario__input-error`).classList.add('none')
+    fields[field] = true;
+  } else {
+    document.querySelector(`input[name='${field}']`).classList.add('input__border-error')
+    document.querySelector(`input[name='${field}'] + .formulario__input-error`).classList.remove('none')
+    fields[field] = false;
+  }
+}
+
+inputs.forEach((input) => {
+  input.addEventListener('keyup', validateForm);
+  input.addEventListener('blur', validateForm);
+});
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+
+  const data = {};
+  if (fields.nombre && fields.email && fields.mensaje) {
+    inputSubmit.disabled = true;
+    inputSubmit.value = "Enviando...";
+    for (const input of inputs) {
+      if (input.value.length === 0 || input.value === 0) {
+        data[input.name] = null  
+      } else {
+        data[input.name] = input.value;
+      }
+    }
+
+    console.log('Data', data);
+    // form.reset();
+  } 
+});