diff options
-rw-r--r-- | grid.css | 28 | ||||
-rw-r--r-- | index.html | 48 |
2 files changed, 74 insertions, 2 deletions
@@ -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; +} @@ -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> |