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 animation-scroll">
+    <h3 class="title-section">Contacto</h3>
+    <div class="row">
+      <div class="column-left">
+      </div>
+      <div class="column-right">
+        <form id="contactForm">
+          <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="mensaje" 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>

layouts/partials/header.html

@@ -1,5 +1,5 @@
 <header class="header-top">
-  <div class="container__header">
+  <div class="container__header animation-scroll">
     <img src="img/Logo-2.svg" alt="Logo" width="260" height="145">
     <h1 class="no-margins">{{ with .Site.Params.header.title }}{{ . | markdownify }}{{ end }}</h1>
     <h2 class="no-margins">{{ with .Site.Params.header.subtitle }}{{ . | markdownify }}{{ end }}</h2>

layouts/partials/intro.html

@@ -1,5 +1,5 @@
 <div class="container">
   <div class="intro-container">
-    <span>{{ with .Site.Params.intro.text }}{{ . | markdownify }}{{ end }}</span>
+    <span class="animation-scroll">{{ with .Site.Params.intro.text }}{{ . | markdownify }}{{ end }}</span>
   </div>
 </div>

layouts/partials/script.html

@@ -1 +1,4 @@
+<!-- Email -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
+<script type="text/javascript">emailjs.init('KjgzLqUvLg29kOMXi')</script>
 <script src="js/main.js"></script>

layouts/partials/services.html

@@ -4,7 +4,7 @@
     <span>{{ .Site.Params.services.titleService }}</span>
     <div class="container-services__items">
       {{ range $item := .Site.Params.services.item_service_1 }}
-        <div class="service-item">
+        <div class="service-item animation-scroll">
           <div class="icon-item-container">
             <i class="{{$item.icon }}"></i>
           </div>
@@ -22,7 +22,7 @@
     <span>{{ .Site.Params.services.titleService2 }}</span>
     <div class="container-services__items">
       {{ range $item := .Site.Params.services.item_service_2 }}
-        <div class="service-item">
+        <div class="service-item animation-scroll">
           <div class="icon-item-container">
             <i class="{{$item.icon }}"></i>
           </div>

layouts/partials/usTeam.html

@@ -2,7 +2,7 @@
   <div class="container">
     <h3 class="title-section ligth-bg-text">Nosotros</h3>
     <div class="container__item-usTeam">
-      <div class="team-item-container">
+      <div class="team-item-container animation-scroll">
         <figure>
           <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 22 24"><path fill="currentColor" d="M14.041 16.683a14.884 14.884 0 0 1-.035-.72c2.549-.261 4.338-.872 4.338-1.585c-.007 0-.006-.03-.006-.041C16.432 12.619 19.99.417 13.367.663a3.344 3.344 0 0 0-2.196-.664h.008C2.208.677 6.175 12.202 4.13 14.377h-.004c.008.698 1.736 1.298 4.211 1.566c-.007.17-.022.381-.054.734C7.256 19.447.321 18.671.001 24h22.294c-.319-5.33-7.225-4.554-8.253-7.317z"/></svg>
         </figure>
@@ -10,12 +10,17 @@
           <h4 class="no-margins">Paula Pereyra</h4>
           <h6 class="no-margins">Desarrolladora Web</h6>
           <div class="container-links">
-            <i class="fa-brands fa-linkedin"></i>
-            <i class="fa-brands fa-github"></i>
+            <a class="social" href="https://www.linkedin.com/in/paula-pereyra-b1031622a/" target="_blank">
+              <i class="fa-brands fa-linkedin">
+              </i>
+            </a>
+            <a class="social" href="https://github.com/PereyraPaula" target="_blank">
+              <i class="fa-brands fa-github"></i>
+            </a>
           </div>
         </div>
       </div>
-      <div class="team-item-container">
+      <div class="team-item-container animation-scroll">
         <figure>
           <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 22 24"><path fill="currentColor" d="M14.145 16.629a23.876 23.876 0 0 1-.052-2.525l-.001.037a4.847 4.847 0 0 0 1.333-2.868l.002-.021c.339-.028.874-.358 1.03-1.666a1.217 1.217 0 0 0-.455-1.218l-.003-.002c.552-1.66 1.698-6.796-2.121-7.326C13.485.35 12.479 0 11.171 0c-5.233.096-5.864 3.951-4.72 8.366a1.222 1.222 0 0 0-.455 1.229l-.001-.008c.16 1.306.691 1.638 1.03 1.666a4.858 4.858 0 0 0 1.374 2.888a24.648 24.648 0 0 1-.058 2.569l.005-.081C7.308 19.413.32 18.631 0 24h22.458c-.322-5.369-7.278-4.587-8.314-7.371z"/></svg>
         </figure>
@@ -23,7 +28,7 @@
           <h4 class="no-margins">Roberto Pereyra</h4>
           <h6 class="no-margins">Administrador de servidores <br>Unix - Linux</h6>
           <div class="container-links">
-            <i class="fa-solid fa-envelope"></i>
+            <a href="#contacto" class="social"><i class="fa-solid fa-envelope"></i></a>
           </div>
         </div>
       </div>

static/css/main.css

@@ -29,6 +29,21 @@ body {
   padding: 0;
 }
 
+.none {
+  display: none;
+}
+
+.animation-scroll {
+  view-timeline-name: --animated;
+  view-timeline-axis: block;
+
+  animation-timeline: --animated;
+  animation-name: show;
+
+  animation-range: entry 25% cover 50%;
+  animation-fill-mode: both;
+}
+
 .container {
   /* Extra Large: xl */ 
   max-width: 1200px;
@@ -107,7 +122,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 +300,7 @@ body {
 }
 
 .intro-container > span {
-  font-size: clamp(16px, 1.1vw, 28px);
+  font-size: clamp(16px, 1.1vw, 17px);
 }
 
 /* Services Section */
@@ -440,7 +455,12 @@ body {
   margin: 1rem 0;
 }
 
-.team-item-container > .container__text > .container-links > i {
+a.social {
+  text-decoration: none;
+  color: inherit
+}
+
+.team-item-container > .container__text > .container-links > a.social > i {
   margin-right: 0.5rem;
   font-size: 1.3rem;
   background-color: #329998;
@@ -467,11 +487,112 @@ body {
   }
 }
 
+/* Contact */
+
+.contact-container {
+  padding: 6rem 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;
+}
+
+@media screen and (max-width: 768px) {
+  .contact-container > .container > .row {
+    grid-template-columns: 1fr;
+  }
+
+  .contact-container {
+    padding: 4rem 1rem
+  }
+}
+
 /* 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-footer > .nav-links > li {
+  text-transform: uppercase;
+  margin: 0 1rem 1rem 0;
+}
+
+.nav-footer > .nav-links > li:last-child {
+  margin: 0;
+}
+
+.nav-footer > .nav-links > li > a {
+  color: inherit;
+  font-weight: bold;
+  text-decoration: none;
 }
 
 /* Animaciones */
@@ -503,3 +624,15 @@ body {
   50% { transform: translateY(0px) rotate(0deg); }
   100% { transform: translateY(0px) rotate(90deg); }
 }
+
+@keyframes show {
+	from {
+		opacity: 0;
+		scale: 25%;
+	}
+	
+	to {
+		opacity: 1;
+		scale: 100%;
+	}
+}

static/js/main.js

@@ -1,5 +1,5 @@
+// CONFIGURATION NAVBAR
 const header = document.querySelector(".main-header");
-
 window.addEventListener("scroll", () => {
   const scrollPos = window.scrollY;
   if (scrollPos > 10) {
@@ -7,4 +7,78 @@ window.addEventListener("scroll", () => {
   } else {
     header.classList.remove("scrolled");
   }
-})
+})
+
+// CONFIGURATION FORM
+
+const form = document.getElementById("contactForm");
+const fields = {
+  nombre: false,
+  email: false,
+  mensaje: false
+}
+const expresiones = {
+  nombre: /^.{4,30}$/,
+  email: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
+}
+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();
+  if (fields.nombre && fields.email && fields.mensaje) {
+    inputSubmit.disabled = true;
+    inputSubmit.value = "Enviando...";
+
+    const serviceID = 'default_service';
+    const templateID = 'template_ab3seev';
+
+    emailjs.sendForm(serviceID, templateID, document.getElementById("contactForm"))
+      .then(() => {
+        inputSubmit.value = 'Enviar';
+        document.querySelector(".contact-form-response").classList.remove('none');
+        form.reset();
+      }, (err) => {
+        inputSubmit.value = 'Enviar';
+        // console.log(JSON.stringify(err));
+      });
+  }
+});