Landing page: el pie
Como la mayoría de las páginas web de presentación o las home page de cualquier sitio web, las lánding page deben poseer un pie a modo de cierre.
El pie también es un buen sitio para colocar la llamada a la cción (call to action), o incluso una seganda acción secundaria, como una suscripción a novedades o similar. Si el usuario ha llegado hasta aquí, muy probablemente ya ha visto todo lo relativo al producto es el último lugar que verá y quizás un CTA en esta parte le termine de convencer.
Es el único lugar donde se colocan enlaces que llevan a otro lugar. Es donde se pueden colocar
- dirección de contacto: domicilio físico, teléfono, el email,
- Direcciones sociales: los iconos de facebook, twitter y demás
- Enlaces a páginas legales: política de privacidad, cookies
Puede ocupar todo el ancho de la página o solo el ancho de contenido usado el resto. Suelen usarsar colores oscuros o con gran constraste. No se debe escatimar en el área que ocupa.
Si quieres puedes ver el resultado en este enlace
Código HTML
<footer id="pie">
<section class="fila" >
<div class="celdas">
<p>Estamos en:</p>
<p>Calle Las academias, num 20</p>
<p>28001 Madrid</p>
<p>España</p>
</div>
<div class="celdas" >
<p>Contacto</p>
<p>cursos@example.com</p>
<p>tel: 111 222 333 444</p>
</div>
<div class="celdas" >
<p>Legal:</p>
<ul>
<li><a href="">Términos de uso</a></li>
<li><a href="">Protección de datos</a></li>
<li><a href="">Politica de cookies</a></li>
</ul>
</div>
</section>
</footer>
Estilos CSS.
Salvo que se queiran efectos especiales los estilos CSS para este bloque no requieren casi nada nuevo. Es una fila de tres celdas y cada celda es una columna. De esta forma todo queda alineado como quiero.
En este ejemplo uso listas pero no quiero usar el mismo estilo que en el resto de la página, asíq ue tengo que redefinir su estilo dentro del pie.
#pie{
border-radius: 25px;
color:white;
background-color:#3a3333;
height: auto;
margin-top:92px
}
#pie .fila {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
}
#pie .fila >div{
flex: 1 0 0%;
padding:0 3%
}
#pie li:before{
content:''
}
#pie .celdas{
border-bottom: 1px solid black;
flex: 1 0 0%;
align-self: stretch;
}
#pie .celdas:nth-child(3){
border-bottom: 0;
}
#pie ul{
list-style: '·';
color: white;
list-style: disc !important;
}
#pie ul a{
color:white;
text-decoration: none
}
En la parte responsive solo se trata de cambiar la fila poruna distribución tipo columna (en vertial) y ajustar tamaños y márgenes.
#pie .celdas{
flex-direction: column;
}
#pie .celdas{
border-bottom: 1px solid black;
}
#pie .celdas:nth-child(3){
border-bottom: 0;
}