TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Віджет учасника команди Bootstrap з фоном Parallax

2

Якщо у вас є команда, непогано представити її на своєму сайті. Це підвищить довіру користувачів і змусить їх повірити, що вони працюють з реальними людьми. У цій статті давайте покроково пояснимо, як створити віджет учасника команди з фоном паралаксу за допомогою популярної платформи Bootstrap.

Віджет учасника команди буде виглядати так:

Віджет учасника команди Bootstrap з фоном Parallax

Віджет має дві частини:

  • Частина заголовка, включаючи Bootstrap, чудовий шрифт та користувацький CSS.
  • Частина HTML для чотирьох членів команди із зображеннями профілю, заголовком, описом та соціальними іконками.

Спочатку зв’яжіть Bootstrap і вкажіть чудовий CSS, як показано нижче, всередині… тегів вашої сторінки. Ми використовували посилання CDN, ви можете скористатися посиланнями CDN або розмістити файли на своєму сервері та зробити посилання тут.

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

Вставте наступний користувацький CSS перед закривальним тегом.

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

Користувацький CSS дуже легко зрозуміти. В основному ми визначили стиль для горизонтального роздільника (hr), абзацу (p), заголовків (h2, h4) та значків шрифту (fa). Також клас "team-md" використовується для створення ефекту тіні вікна.

HTML для віджетів

Частина HTML дуже проста, ніж CSS. Нижче наведено HTML для одного члена команди:

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

Давайте створимо повний HTML для чотирьох членів команди:

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

Поєднавши це разом

Тепер CSS і HTML готові !!! Джут зібрав це, як показано нижче, щоб мати повний віджет. Не забудьте використовувати власні зображення та додавати теги alt для всіх зображень.

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

Ви можете використовувати наведений вище код як нову сторінку учасника команди на своєму веб -сайті Bootstrap. В іншому випадку просто скопіюйте користувацьку частину CSS та HTML та додайте заголовки та розділи відповідно відповідно, щоб вставити віджет учасника команди будь -де на вашому сайті.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі