TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Widżet członka zespołu Bootstrap z tłem paralaksy

2

Kiedy masz zespół, dobrym pomysłem jest zaprezentowanie go na swojej stronie. Poprawi to wiarygodność wśród użytkowników i sprawi, że będą wierzyć, że pracują z prawdziwymi ludźmi. W tym artykule wyjaśnimy krok po kroku, jak stworzyć widżet członka zespołu z tłem paralaksy przy użyciu popularnego frameworka Bootstrap.

Widżet członka zespołu będzie wyglądał jak poniżej:

Widżet członka zespołu Bootstrap z tłem paralaksy

Widget składa się z dwóch części:

  • Część nagłówka zawierająca Bootstrap, font-awesome i custom CSS.
  • Część HTML dla czterech członków zespołu ze zdjęciami profilowymi, tytułem, opisem i ikonami społecznościowymi.

Najpierw połącz Bootstrap i stwórz niesamowity CSS, tak jak poniżej, wewnątrz … tagów Twojej strony. Użyliśmy łączy CDN, możesz użyć łączy CDN lub hostować pliki na swoim serwerze i link tutaj.

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

Wstaw następujący niestandardowy kod CSS przed tagiem zamykającym.

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

Niestandardowy CSS jest bardzo łatwy do zrozumienia. Zasadniczo zdefiniowaliśmy styl podziału poziomego (hr), akapitu (p), nagłówków (h2,h4) oraz ikon czcionek (fa). Również klasa „team-md" służy do tworzenia efektu cienia pudełkowego.

HTML dla widżetu

Część HTML jest super prosta niż CSS. Poniżej znajduje się kod HTML pojedynczego członka zespołu:

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

Zróbmy kompletny kod HTML dla czterech członków zespołu:

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

Składamy to razem

Teraz CSS i HTML są gotowe!!! Po prostu złóż to razem, jak poniżej, aby mieć kompletny widżet. Pamiętaj, aby używać własnych obrazów i dodawać znaczniki alt do wszystkich obrazów.

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

Możesz użyć powyższego kodu jako strony nowego członka zespołu w swojej witrynie Bootstrap. W przeciwnym razie po prostu skopiuj niestandardową część CSS i HTML i dodaj odpowiednio sekcje nagłówka i treści, aby wstawić widżet członka zespołu w dowolnym miejscu w witrynie.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów