Add footer

2 files changed, 74 insertions, 2 deletions

diff --git a/grid.css b/grid.css
index 4b1b5ec..4b188e2 100644
--- a/grid.css
+++ b/grid.css
@@ -40,6 +40,10 @@ body {
     /* grid-template-rows: auto 1fr auto; */
 }
 
+.text-center {
+    text-align: center;
+}
+
 .header {
     display: grid;
     grid-template-columns: 0.3fr auto;
@@ -102,4 +106,26 @@ label[for="navbar-toggle-cbox"] {
     margin-bottom: 0.5rem;
 }
 .main { grid-area: main; }
-.footer { grid-area: footer; }
+
+.footer {
+    grid-area: footer;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+        "footer-info"
+        "copy-info";
+    margin: auto;
+}
+
+.footer-info {
+    grid-area: footer-info;
+}
+.copy-info {
+    grid-area: copy-info;
+}
+
+.copy-info > address > p {
+    margin: 0px;
+}
diff --git a/index.html b/index.html
index 366006f..d283ea8 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,52 @@
 
         </header>
         <main class="main"></main>
-        <footer class="footer"></footer>
+        <footer class="footer">
+            <div class="footer-info">
+                <aside>
+                    <h4>Servicio</h4>
+                    <ul>
+                        <li><a href="#">Privacidad</a></li>
+                        <li><a href="#">Quiénes somos</a></li>
+                        <li><a href="#">Contacto</a></li>
+                        <li><a href="#">Empleos <span>Nuevas posiciones</span></a></li>
+                        <li><a href="#">Términos y condiciones</a></li>
+                        <li><a href="#">Prensa</a></li>
+                    </ul>
+                </aside>
+                <aside>
+                    <h4>Para los pacientes</h4>
+                    <ul>
+                        <li><a href="#">Especialistas</a></li>
+                        <li><a href="#">Clínicas</a></li>
+                        <li><a href="#">Pregunta al Experto</a></li>
+                        <li><a href="#">Enfermedades</a></li>
+                        <li><a href="#">Medicamentos</a></li>
+                        <li><a href="#">Servicios</a></li>
+                        <li><a href="#">Preguntas Frecuentes</a></li>
+                        <li><a href="#">Consulta online <span>nuevo</span></a></li>
+                    </ul>
+                </aside>
+                <aside>
+                    <h4>Para profesionales</h4>
+                    <ul>
+                        <li><a href="#">Para especialistas</a></li>
+                        <li><a href="#">Planes y precios</a></li>
+                        <li><a href="#">Recursos</a></li>
+                        <li><a href="#">Widget para su web</a></li>
+                        <li><a href="#">Para clínicas</a></li>
+                        <li><a href="#">Consulta online <span>nuevo</span></a></li>
+                    </ul>
+                </aside>
+            </div>
+            <aside class="copy-info">
+                <a href="/"></a>
+                <address class="text-center">
+                    <p>Doctoralia Internet SL</p>
+                    <p>C/ Josep Pla 2 - Building B2, floor 13</p>
+                    <p>08019 Barcelona, Spain</p>
+                </address>
+            </aside>
+        </footer>
     </body>
 </html>