TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Widget de miembro del equipo Bootstrap con fondo Parallax

2

Cuando tienes un equipo, es una buena idea mostrarlos en tu sitio. Esto mejorará la credibilidad entre los usuarios y les hará creer que están trabajando con personas reales. En este artículo, vamos a explicar paso a paso cómo crear un widget de miembro del equipo con fondo de paralaje utilizando el popular marco Bootstrap.

El widget de miembro del equipo se verá a continuación:

Widget de miembro del equipo Bootstrap con fondo Parallax

El widget tiene dos partes:

  • Parte del encabezado que incluye Bootstrap, font-awesome y CSS personalizado .
  • Parte HTML para cuatro miembros del equipo con imágenes de perfil, título, descripción e íconos sociales.

Primero, vincule el Bootstrap y la fuente CSS impresionante como se muestra a continuación dentro de las etiquetas … de su página. Hemos utilizado enlaces CDN, puede utilizar los enlaces CDN o alojar los archivos en su servidor y enlace aquí.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head>

Inserte el siguiente CSS personalizado antes de la etiqueta de cierre.

<style> #team { background: url(https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team.jpg) no-repeat center center fixed; padding: 60px 0; text-align: center; background-size: cover; } #team h2 { color: #fff; } #team p { color: #fff; line-height: 25px; } #team h4 { padding-top: 10px; color: #fff; font-weight:bold; } #team p.large { margin-top: 60px; margin-bottom: 30px; } #team .fa { width: 30px; height: 30px; margin: 0 3px; border-radius: 100%; font-size: 15px; line-height: 30px; outline: 0; color: #fff; background-color: #e91e63; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } #team .fa:hover { background-color: #673ab7; } .teamborder { border: 1px solid lightgray; padding: 20px; } hr { display: block; height: 3px; border: 0; margin: 3em 0; padding: 0; background-image: linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff); width: 50%; left: 25%; position: relative; border: none; } #team hr { display: block; height: 3px; border: 0; margin: 3em 0; padding: 0; background-image: linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0)); width: 50%; left: 25%; position: relative; border: none; } .row { margin: 10px; } .btn-md { border-width: 0; outline: none; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); transition: .2s ease-out; cursor: pointer; } .team-md { box-shadow: inset 0px 0px 22px 2px #e3d1d1; transition: .2s ease-out; } </style>

El CSS personalizado es muy fácil de entender. Básicamente, hemos definido el estilo para el divisor horizontal (hr), párrafo (p), encabezados (h2, h4) y los iconos de fuente (fa). También la clase "team-md" se usa para crear un efecto de sombra de caja.

HTML para el widget

La parte HTML es súper simple que la CSS. A continuación se muestra el código HTML para un solo miembro del equipo:

<div class="col-lg-3 teamborder team-md"> <!-- Profile Image --> <img class="img img-circle" data-src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team01.jpg" height="120px" width="120px" alt=""> <!-- Title --> <h4>Team Member 1</h4> <!-- Description --> <p>Here is a short description to explain the profile of the member.</p> <!-- Social Icons --> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div>

Hagamos el HTML completo para cuatro miembros del equipo:

<div id="team" name="team"> <div class="container"> <div class="row centered"> <h2 class="centered">MEET OUR AWESOME TEAM</h2> <hr> <div class="col-lg-3 teamborder team-md"> <img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team01.jpg" height="120px" width="120px" alt=""> <h4>Team Member 1</h4> <p>Here is a short description to explain the profile of the member.</p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div> <div class="col-lg-3 teamborder team-md"> <img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team02.jpg" height="120px" width="120px" alt=""> <h4>Team Member 2</h4> <p>Here is a short description to explain the profile of the member.</p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div> <div class="col-lg-3 teamborder team-md"> <img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team03.jpg" height="120px" width="120px" alt=""> <h4>Team Member 3</h4> <p>Here is a short description to explain the profile of the member.</p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div> <div class="col-lg-3 teamborder team-md"> <img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team04.jpg" height="120px" width="120px" alt=""> <h4>Team Member 4</h4> <p>Here is a short description to explain the profile of the member.</p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div> <div class="col-lg-8 col-lg-offset-2 centered"> <p class="large">Enter any additional information to be provided here.</p> </div> </div> </div> </div>

Poniendo todo junto

¡Ahora el CSS y HTML están listos! Júntelo como se muestra a continuación para tener un widget completo. Recuerde usar sus propias imágenes y agregar etiquetas alt para todas las imágenes.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> #team { background: url(https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team.jpg) no-repeat center center fixed; padding: 60px 0; text-align: center; background-size: cover; } #team h2 { color: #fff; } #team p { color: #fff; line-height: 25px; } #team h4 { padding-top: 10px; color: #fff; font-weight:bold; } #team p.large { margin-top: 60px; margin-bottom: 30px; } #team .fa { width: 30px; height: 30px; margin: 0 3px; border-radius: 100%; font-size: 15px; line-height: 30px; outline: 0; color: #fff; background-color: #e91e63; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } #team .fa:hover { background-color: #673ab7; } .teamborder { border: 1px solid lightgray; padding: 20px; } hr { display: block; height: 3px; border: 0; margin: 3em 0; padding: 0; background-image: linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff); width: 50%; left: 25%; position: relative; border: none; } #team hr { display: block; height: 3px; border: 0; margin: 3em 0; padding: 0; background-image: linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #71c9d6, rgba(255, 255, 255, 0)); width: 50%; left: 25%; position: relative; border: none; } .row { margin: 10px; } .team-md { box-shadow: inset 0px 0px 22px 2px #e3d1d1; transition: .2s ease-out; } </style> </head> <body> <!-- Team Section --> <div id="team" name="team"> <div class="container"> <div class="row centered"> <h2 class="centered">MEET OUR AWESOME TEAM</h2> <hr> <div class="col-lg-3 teamborder team-md"> <img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team01.jpg" height="120px" width="120px" alt=""> <h4>Team Member 1</h4> <p>Here is a short description to explain the profile of the member.</p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div> <div class="col-lg-3 teamborder team-md"> <img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team02.jpg" height="120px" width="120px" alt=""> <h4>Team Member 2</h4> <p>Here is a short description to explain the profile of the member.</p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div> <div class="col-lg-3 teamborder team-md"> <img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team03.jpg" height="120px" width="120px" alt=""> <h4>Team Member 3</h4> <p>Here is a short description to explain the profile of the member.</p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div> <div class="col-lg-3 teamborder team-md"> <img class="img img-circle" src="https://www.webnots.com/bootstrap/assets/bootstrap3.3.7/img/team04.jpg" height="120px" width="120px" alt=""> <h4>Team Member 4</h4> <p>Here is a short description to explain the profile of the member.</p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </div> <div class="col-lg-8 col-lg-offset-2 centered"> <p class="large">Enter any additional information to be provided here.</p> </div> </div> </div> </div> </body> </html>

Puede usar el código anterior como una nueva página de miembro del equipo en su sitio de Bootstrap. De lo contrario, simplemente copie la parte CSS y HTML personalizada y agregue las secciones de encabezado y cuerpo respectivamente para insertar el widget de miembro del equipo en cualquier lugar de su sitio.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More