Add UsTeam Section

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/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>