Landing page:equipo humano
En este apartado podemos incluir el profesorado. Es un buen lugar para poner las materias de las que se encargan, sus titulaciones, algo de su curriculum. Todo lo que ued servir para aumentar la confianza del usuario.
Como muestra de esa confianza que buscamos es bueno poner sus contactos en redes sociales: twitter, facebook, instagram, linkedit... Las que posean.
La estructua de este apartado la he puesto simiar a la de beneficios.Cambiamos los iconos por fotografías del profesorado y prácticamente está hecho.
Puedes ver este módulo por separado
Código HTML
Se trata de colocar tres grupos de datos, uno para cada persona. Cada grupo tiene una imagen, un texto y un area para los contactos de redes.
<article class="bg-celeste apdo-ancho" id="profesores">
<header class="titarticulo"><h1>Nuestros profesores</h1></header>
<section class="fila ">
<div class="celdas columna" >
<div class="titulo"><img src="imgs/profesores3.png" alt=""/> </div>
<div class="cuerpo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam . </div>
<div class="fila sociales">
<div class="celdas">
<div class="botcirc"> <i class="icon-facebook" ></i> </div>
</div>
<div class="celdas">
<div class="botcirc"> <i class="icon-twitter " ></i> </div>
</div>
<div class="celdas">
<div class="botcirc"> <i class="icon-instagram" ></i> </div>
</div>
</div>
</div>
<div class="celdas columna" >
<div class="titulo"><img src="imgs/profesores2.png" alt=""/> </div>
<div class="cuerpo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div>
<div class="fila sociales">
<div class="celdas">
<div class="botcirc"> <i class="icon-facebook" ></i> </div>
</div>
<div class="celdas">
<div class="botcirc"> <i class="icon-twitter " ></i> </div>
</div>
<div class="celdas">
<div class="botcirc"> <i class="icon-instagram" ></i> </div>
</div>
</div>
</div>
<div class="celdas columna" >
<div class="titulo"><img src="imgs/profesores4.png" alt=""/> </div>
<div class="cuerpo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div>
<div class="fila sociales">
<div class="celdas">
<div class="botcirc"> <i class="icon-facebook" ></i> </div>
</div>
<div class="celdas">
<div class="botcirc"> <i class="icon-twitter " ></i> </div>
</div>
<div class="celdas">
<div class="botcirc"> <i class="icon-instagram" ></i> </div>
</div>
</div>
</div>
</section>
</article>
Como ves por los nombres de las clases la idea es tener una fila con tres celdas, cada celda es una columna con tres partes: bloque imagen, bloque texto, y una fila para contactos a redes.
Los estilos CSS
La estructura visual la definicmos con los estilos, casi todos están definidos en los modulos anteriores
.apdo-ancho img{
width:50%;
}
.botcirc{
width:32px;
height:32px;
margin:16px auto;
line-height:32px;
border-radius:50%;
background:#8e8eea;
color:white;
text-align:center;
}
.botcirc:hover{
cursor:pointer;
background:#2f2f84cc;
}
Lo único añadido es el estilo para la imagen y el de los botones que se van a usar en los enlaces a redes sociales.
Para la parte responsive los ajustes ya se definieroan anteriormente, al crear el apartado de beneficios. Solo es necesario asegurar que la barra sociales se mantiene como fila
@media (max-width: 1024px){
.sociales{
flex-direction: row !important;
}
}