TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Bootstrap Team Member Widget med Parallax -bakgrund

4

När du har ett team är det en bra idé att visa upp dem på din webbplats. Detta kommer att förbättra trovärdigheten bland användarna och få dem att tro att de arbetar med riktiga människor. I den här artikeln ska vi förklara steg för steg hur du skapar en teammedlemswidget med parallaxbakgrund med det populära Bootstrap -ramverket.

Teammedlemswidgeten kommer att se ut nedan:

Bootstrap Team Member Widget med Parallax -bakgrund

Widgeten har två delar:

  • Rubrikdel inklusive Bootstrap, font-awesome och anpassad CSS.
  • HTML -del för fyra teammedlemmar med profilbilder, titel, beskrivning och sociala ikoner.

Länka först Bootstrap och typsnitt CSS som nedanför inuti … taggarna på din sida. Vi har använt CDN -länkar, du kan antingen använda CDN -länkarna eller vara värd för filerna på din server och länka hit.

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

Infoga följande anpassade CSS före stängningstaggen.

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

Den anpassade CSS är mycket lätt att förstå. I grund och botten har vi definierat stilen för horisontell avdelare (hr), stycke (p), rubriker (h2, h4) och typsnittsikonerna (fa). Även "team-md" -klass används för att skapa box-skuggaeffekt.

HTML för widgeten

HTML -delen är superenkel än CSS. Nedan finns HTML för enskild teammedlem:

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

Låt oss göra den fullständiga HTML -koden för fyra teammedlemmar:

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

Sätta ihop det

Nu är CSS och HTML redo !!! Jut satte ihop det som nedan för att få en komplett widget. Kom ihåg att använda dina egna bilder och lägga till alt -taggar för alla bilder.

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

Du kan använda koden ovan som en ny teammedlemsida på din Bootstrap -webbplats. Annars är det bara att kopiera den anpassade CSS- och HTML -delen och lägga till i rubrik respektive kroppsavsnitt för att infoga teammedlemswidgeten var som helst på din webbplats.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer