5. Добавляем блок "Команда"

5. Добавляем блок "Команда"

На этом уроке продолжим строить сайт и жобавим очень нужный блок "О нас" В нем будет фото ваших сотрудников с краткими данными о них, описание вашей фирмы и вставим небольшой прогресс бар который можно отредоктировать для любых нужд.

Откроем наш файл index.html который мы закончили на прошлом уроке.

 Добавим пункт меню

                  <li>
                    <a href="#about-us">About</a>
                  </li>	

Весь код меню у вас должен получиться вот таким

            <div class="col-md-8 col-xs-12 nav-wrap">
              <div class="collapse navbar-collapse text-center" id="navbar-collapse">

                <ul class="nav navbar-nav local-scroll text-center">

                  <li class="active">
                    <a href="#home">Главная</a>
                  </li>
                  <li>
                    <a href="#about-us">О нас</a>
                  </li> 
                  <li>
                    <a href="#blog">Новости</a>
                  </li>
                  <li>
                    <a href="#portfolio">Фотогалерея</a>
                  </li>
                  <li>
                    <a href="#about-us">About</a>
                  </li>				  
                </ul>
              </div>
            </div>

Теперь добавим в место которое вы выбрали блок "О нас"

   <!-- О нас -->
    <section class="section-wrap pb-0 our-team" id="about-us">
      <div class="container">

        <div class="row heading">
          <div class="col-md-6 col-md-offset-3">
            <h2 class="text-center bottom-line">Наши сотрудники</h2>
            <p class="subheading text-center">Лучшая команда</p>
          </div>
        </div>

        <div class="row team-row">

          <div class="col-md-4 col-sm-6 team-wrap">
            <div class="team-member text-center">
              <div class="team-img">
                <img src="img/team_1.jpg" alt="">
                <div class="overlay">
                  <div class="team-details text-center">
                    <p>
                      Описание сотрудника
                    </p>
                    <div class="socials mt-20">
                      <a href="#"><i class="fa fa-facebook"></i></a>
                      <a href="#"><i class="fa fa-twitter"></i></a>
                      <a href="#"><i class="fa fa-google-plus"></i></a>
                      <a href="#"><i class="fa fa-envelope"></i></a>
                    </div>
                  </div>
                </div>
              </div>
              <h6 class="team-title">John Marshall</h6>
              <span>Designer</span>           
            </div>
          </div> <!-- Конец 1 сотрудника -->

          <div class="col-md-4 col-sm-6 team-wrap">
            <div class="team-member text-center">
              <div class="team-img">
                <img src="img/team_2.jpg" alt="">
                <div class="overlay">
                  <div class="team-details text-center">
                    <p>
                      Описание сотрудника
                    </p>
                    <div class="socials mt-20">
                      <a href="#"><i class="fa fa-facebook"></i></a>
                      <a href="#"><i class="fa fa-twitter"></i></a>
                      <a href="#"><i class="fa fa-google-plus"></i></a>
                      <a href="#"><i class="fa fa-envelope"></i></a>
                    </div>
                  </div>
                </div>
              </div>
              <h6 class="team-title">Steve Roberts</h6>
              <span>Photographer</span>           
            </div>
          </div> <!-- Конец 2 сотрудника -->

          <div class="col-md-4 col-sm-6 team-wrap">
            <div class="team-member last text-center">
              <div class="team-img">
                <img src="img/team_3.jpg" alt="">
                <div class="overlay">
                  <div class="team-details text-center">
                    <p>
                      Описание сотрудника
                    </p>
                    <div class="socials mt-20">
                      <a href="#"><i class="fa fa-facebook"></i></a>
                      <a href="#"><i class="fa fa-twitter"></i></a>
                      <a href="#"><i class="fa fa-google-plus"></i></a>
                      <a href="#"><i class="fa fa-envelope"></i></a>
                    </div>
                  </div>
                </div>
              </div>
              <h6 class="team-title">Michael Cartney</h6>
              <span>Designer</span>           
            </div>
          </div> <!-- Конец 3 сотрудника -->

        </div>
      </div>
    </section> <!-- Конец блока о нас -->


    <!-- О нас / Progress Bars -->
    <section class="section-wrap pt-110">
      <div class="container">
        <div class="row mt-minus-30">

          <div class="col-sm-6">
            <div class="about-description mt-30">
              <h4>О нас</h4>
              <p>Описание вашей фирмы </p>
              <p>Описание вашей работы и похвататься достижениями, Описание вашей работы и похвататься достижениями, Описание вашей работы и похвататься достижениями, Описание вашей работы и похвататься достижениями, Описание вашей работы и похвататься достижениями, Описание вашей работы и похвататься достижениями, Описание вашей работы и похвататься достижениями,</p>
            </div>
          </div> <!-- Конец колонки -->

          <div class="col-sm-6">
            <div class="skills-progress" id="skills">

              <h6>Производительность <span>100%</span></h6>
              <div class="progress-solid meter">
                <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar" role="progressbar">
                  <span class="sr-only">100% Complete</span>
                </div>
              </div>

              <h6>Маркетинг <span>70%</span></h6>
              <div class="progress-solid meter">
                <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" class="progress-bar" role="progressbar">
                  <span class="sr-only">70% Complete</span>
                </div>
              </div>

              <h6>Увеличение производства<span>90%</span></h6>
              <div class="progress-solid meter" id="animated-skills">
                <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" class="progress-bar" role="progressbar">
                  <span class="sr-only">90% Complete</span>
                </div>
              </div>

            </div>
          </div> <!-- Конец колонки -->   

        </div>
      </div>
    </section> <!-- Конец прогресс бар -->

В описание сотруника в строчке кода <a href="#"><i class="fa fa-facebook"></i></a> решетку # замените на ссылку страницы соц сети. Иконку соц сети например фейсбук "fa fa-facebook" можете заменить на свою коды иконок сможете найти тут 

Строчка кода прогресс бара - цыфры отвечают за Конец шкалы, Начало шкалы, и значение которое нужно указать.

Вот и готово, сохраните свой файл index.html и можно посмотреть результат.

Если возникли вопросы, пишите в коментариях или в "VK" в группу можно подписаться в подвале сайта.