config.toml

@@ -4,6 +4,7 @@ title = "ContenidosOnline"
 
 [params.navigation]
   logo = "CO"
+  items = [ "servicios", "nosotros", "contacto" ]
 
 [params.header]
   title = "ContenidosOnline"
@@ -12,6 +13,8 @@ title = "ContenidosOnline"
 [params.intro]
   text = "En ContenidosOnline, creemos que un sitio web es una herramienta esencial para cualquier empresa. Por eso, es importante contar con un sitio web profesional, seguro y que cumpla con los estándares actuales. Nosotros te ofrecemos servicio de web hosting, consultoría Linux y programación web para ayudarte a crear el sitio web que tu empresa necesita."
 
+# Icons: https://fontawesome.com/icons
+
 [params.services]
   titleService = "Consultoria Linux"
   titleService2 = "Desarrollo web"
@@ -72,4 +75,18 @@ title = "ContenidosOnline"
     description = [
         "Optimizamos nuestros sitios web para que sean fáciles de encontrar en los resultados de búsqueda. Esto significa que sus clientes potenciales pueden encontrar su sitio web cuando buscan información sobre su negocio.",
       ]
-    icon = "fa-solid fa-magnifying-glass"
+    icon = "fa-solid fa-magnifying-glass"
+
+  [[params.services.item_service_2]]
+    title = "Usabilidad"
+    description = [
+        "Se trata de simplificar la interacción del usuario con su sitio web. Creamos interfaces amigables que permiten a los visitantes navegar y realizar acciones de manera eficiente, mejorando así la retención y la conversión de clientes.",
+      ]
+    icon = "fa-regular fa-hand-pointer"
+
+  [[params.services.item_service_2]]
+    title = "Experiencia de usuario (UX)"
+    description = [
+        "Se enfoca en crear sitios web que sean fáciles de usar y agradables para los visitantes. Nos aseguramos de que los usuarios encuentren lo que necesitan de manera intuitiva, lo que mejora la satisfacción y fidelidad del cliente.",
+      ]
+    icon = "fa-regular fa-face-smile"

layouts/index.html

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

layouts/partials/footer.html

@@ -1,3 +1,5 @@
-<footer>
-  
+<footer class="footer-container">
+  <div class="container">
+    Footer
+  </div>
 </footer>

layouts/partials/head.html

@@ -1,6 +1,7 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>{{ .Title }}</title>
+<link rel="icon" href="img/Logo-2.svg" type="image/svg+xml">
 
 <!-- Style -->
 <link rel="stylesheet" href="css/main.css">

layouts/partials/header.html

@@ -1,5 +1,6 @@
 <header class="header-top">
   <div class="container__header">
+    <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>
   </div>

layouts/partials/nav.html

@@ -9,8 +9,8 @@
     <span class="menu-icon__line"></span>
   </label>
   <ul class="nav-links">
-    <li class="nav-link"><a href="#">Servicios</a></li>
-    <li class="nav-link"><a href="#">Nosotros</a></li>
-    <li class="nav-link"><a href="#">Contacto</a></li>
+    {{ range $item := .Site.Params.navigation.items }}
+      <li class="nav-link"><a href="#{{$item}}">{{$item}}</a></li>
+    {{ end }}
   </ul>
 </nav>

layouts/partials/services.html

@@ -1,4 +1,4 @@
-<div class="services-container">
+<div class="services-container" id="servicios"> 
   <div class="container">
     <h3 class="title-section">Servicios</h3>
     <span>{{ .Site.Params.services.titleService }}</span>

layouts/partials/usTeam.html

@@ -0,0 +1,32 @@
+<div class="usTeam-container" id="nosotros">
+  <div class="container">
+    <h3 class="title-section ligth-bg-text">Nosotros</h3>
+    <div class="container__item-usTeam">
+      <div class="team-item-container">
+        <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>
+        <div class="container__text">
+          <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>
+          </div>
+        </div>
+      </div>
+      <div class="team-item-container">
+        <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>
+        <div class="container__text">
+          <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

static/css/main.css

@@ -35,6 +35,14 @@ body {
   margin: 0 auto;
 }
 
+.ligth-bg-text {
+  color: #329998 !important;
+}
+
+.ligth-bg-text::after {
+  background: #329998 !important;
+}
+
 @media screen and (max-width: 767px) {
   .container {
     width: 100%;
@@ -326,7 +334,6 @@ body {
   font-size: 80px;
 }
 
-
 .text-item-container > h2 {
   font-size: 18px;
   font-weight: bold;
@@ -367,6 +374,105 @@ body {
   }
 }
 
+/* UsTeam */
+
+.usTeam-container {
+  padding: 4rem 0;
+}   
+
+.container__item-usTeam {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.team-item-container {
+  border: 2px solid #f2f2f2;
+  padding: 80px 30px 30px 30px;
+  float: left;
+  width: 100%;
+  position: relative;
+  margin: 4rem 2rem;
+  max-width: 340px;
+}
+
+.team-item-container > figure {
+  position: absolute;
+  margin-top: -30px;
+  top: 0;
+  left: 50%;
+  margin-left: -3rem;
+  display: block;
+  padding: 15px;
+  border: 5px solid #329998;
+  border-radius: 50%;
+}
+
+.team-item-container > figure > svg {
+  color: #267271;
+}
+
+.team-item-container > figure > svg:hover {
+  color: #329998;
+}
+
+.team-item-container > .container__text > h4 {
+  color: #000;
+  font-family: "Source Sans Pro", Arial, sans-serif;
+  font-weight: 400;
+  font-size: 24px;
+  text-align: center;
+  margin-bottom: .4rem;
+}
+
+.team-item-container > .container__text > h6 {
+  color: #b3b3b3;
+  font-weight: 300;
+  font-size: 18px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.team-item-container > .container__text > .container-links {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  margin: 1rem 0;
+}
+
+.team-item-container > .container__text > .container-links > i {
+  margin-right: 0.5rem;
+  font-size: 1.3rem;
+  background-color: #329998;
+  color: #fff;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+.team-item-container > .container__text > .container-links > i:hover {
+  cursor: pointer;
+  background-color: #1c4645;
+}
+
+@media screen and (max-width: 768px)  {
+  .container__item-usTeam {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .container__item-usTeam > .team-item-container {
+    width: 100%;
+    margin: 2rem 0;
+  }
+}
+
+/* Footer */
+
+.footer-container {
+  background: var(--primary-color-gradient);
+  padding: 4rem 2rem;
+}
 
 /* Animaciones */
 @keyframes pulse {

static/img/Logo-1.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_3" data-name="Capa 3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 414.28 243.02">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        font-family: MicrosoftPhagsPa-Bold, 'Microsoft PhagsPa';
+        font-size: 45px;
+        font-weight: 700;
+      }
+
+      .cls-2 {
+        stroke: #fff;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-4 {
+        mask: url(#mask);
+      }
+
+      .cls-5 {
+        fill: #74bf48;
+      }
+
+      .cls-6 {
+        filter: url(#luminosity-invert-noclip);
+      }
+    </style>
+    <filter id="luminosity-invert-noclip" x="175.6" y=".5" width="238.68" height="174.96" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feColorMatrix result="cm" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
+      <feFlood flood-color="#fff" result="bg"/>
+      <feBlend in="cm" in2="bg"/>
+    </filter>
+    <mask id="mask" x="175.6" y=".5" width="238.68" height="174.96" maskUnits="userSpaceOnUse">
+      <g class="cls-6">
+        <polygon class="cls-1" points="233.92 87.98 273.88 35.06 316 35.06 354.88 87.98 318.16 137.66 273.88 137.66 233.92 87.98"/>
+      </g>
+    </mask>
+  </defs>
+  <rect class="cls-5" x="10.36" y=".5" width="395.28" height="174.96" rx="34.02" ry="34.02"/>
+  <polygon class="cls-2" points="61.09 85.82 98.89 35.06 187.45 35.06 213.37 .5 61.09 .5 .61 85.82 63.25 175.46 213.37 175.46 188.53 138.74 98.89 138.74 61.09 85.82"/>
+  <g class="cls-4">
+    <polygon class="cls-1" points="175.6 81.5 238.24 .5 348.4 .5 414.28 87.98 351.64 175.46 241.48 175.46 175.6 81.5"/>
+  </g>
+  <text class="cls-3" transform="translate(18.27 231.23)"><tspan x="0" y="0">ContenidosOnline</tspan></text>
+</svg>

static/img/Logo-2.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_3" data-name="Capa 3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 414.28 175.96">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        stroke: #fff;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-3 {
+        mask: url(#mask);
+      }
+
+      .cls-4 {
+        fill: #74bf48;
+      }
+
+      .cls-5 {
+        filter: url(#luminosity-invert-noclip);
+      }
+    </style>
+    <filter id="luminosity-invert-noclip" x="175.6" y=".5" width="238.68" height="174.96" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feColorMatrix result="cm" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/>
+      <feFlood flood-color="#fff" result="bg"/>
+      <feBlend in="cm" in2="bg"/>
+    </filter>
+    <mask id="mask" x="175.6" y=".5" width="238.68" height="174.96" maskUnits="userSpaceOnUse">
+      <g class="cls-5">
+        <polygon class="cls-1" points="233.92 87.98 273.88 35.06 316 35.06 354.88 87.98 318.16 137.66 273.88 137.66 233.92 87.98"/>
+      </g>
+    </mask>
+  </defs>
+  <rect class="cls-4" x="10.36" y=".5" width="395.28" height="174.96" rx="34.02" ry="34.02"/>
+  <polygon class="cls-2" points="61.09 85.82 98.89 35.06 187.45 35.06 213.37 .5 61.09 .5 .61 85.82 63.25 175.46 213.37 175.46 188.53 138.74 98.89 138.74 61.09 85.82"/>
+  <g class="cls-3">
+    <polygon class="cls-1" points="175.6 81.5 238.24 .5 348.4 .5 414.28 87.98 351.64 175.46 241.48 175.46 175.6 81.5"/>
+  </g>
+</svg>