TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Widget del membro del team Bootstrap con sfondo parallasse

2

Quando hai una squadra, è una buona idea mostrarla sul tuo sito. Ciò migliorerà la credibilità tra gli utenti e farà credere loro di lavorare con persone reali. In questo articolo spieghiamo passo dopo passo come creare un widget per i membri del team con sfondo parallasse utilizzando il popolare framework Bootstrap.

Il widget dei membri del team avrà il seguente aspetto:

Widget del membro del team Bootstrap con sfondo parallasse

Il widget ha due parti:

  • Parte dell’intestazione che include Bootstrap, font-awesome e CSS personalizzato .
  • Parte HTML per quattro membri del team con immagini del profilo, titolo, descrizione e icone social.

Per prima cosa collega il Bootstrap e il font CSS impressionante come di seguito all’interno dei tag … della tua pagina. Abbiamo utilizzato i collegamenti CDN, puoi utilizzare i collegamenti CDN o ospitare i file sul tuo server e collegarti qui.

<!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>

Inserisci il seguente CSS personalizzato prima del tag di chiusura.

<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>

Il CSS personalizzato è molto facile da capire. Fondamentalmente abbiamo definito lo stile per il divisore orizzontale (hr), il paragrafo (p), le intestazioni (h2,h4) e le icone dei caratteri (fa). Anche la classe "team-md" viene utilizzata per creare l’effetto ombra della scatola.

HTML per il widget

La parte HTML è super semplice rispetto al CSS. Di seguito è riportato l’HTML per singolo membro del team:

<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>

Creiamo l’HTML completo per quattro membri del team:

<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>

Mettendolo insieme

Ora il CSS e l’HTML sono pronti!!! Mettilo insieme come sotto per avere un widget completo. Ricorda di utilizzare le tue immagini e di aggiungere tag alt per tutte le immagini.

<!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>

Puoi utilizzare il codice sopra come pagina di un nuovo membro del team sul tuo sito Bootstrap. Altrimenti, copia semplicemente la parte CSS e HTML personalizzata e aggiungi rispettivamente le sezioni dell’intestazione e del corpo per inserire il widget del membro del team in qualsiasi punto del tuo sito.

Fonte di registrazione: webnots.com
Lascia una risposta

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