2. Создание сайта

2. Создание сайта

Приступим к редактированию нашего файла index.html

Сегодня мы добавим пункт меню и ссылку для перемещения к этому разделу на странице. Как я уже писал в первом уроке, сайт у нас одностраничный, представляет собой одну большую страницу, разделенную на блоки, каждый блок принадлежит своему пункту меню и при клике на нужный пункт меню страница прокручивается к соответствующему блоку на странице.

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

Открываем в notepad++ или удобном Вам редакторе файл index.html (Все файлы я выложил в архиве в предыдущем уроке)

После секции приветствие вставляем вот этот код:

 

  <!-- О нас / Диаграмма  -->
    <section class="section-wrap pt-110" id="about-us">
      <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> <!-- Конец колонки col -->

          <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> <!--Конец диаграммы -->

Обратите внимание на выделенное красным цветом, это метка, адрес для пункта меню. 

Теперь добавим пункт меню:

                  <li class="active">
                    <a href="#home">Главная</a>
                  </li>
                  <li>
                    <a href="#about-us">О нас</a>
                  </li> 

Красным выделен код который нам надо добавить. href="#about-us" ссылка на наш блок "О нас"  Сохраняйте файл и можно посмотреть что у нас получилось.

 На этом урок и закончим, на следующем уроке создадим блок "Новости" этот блок будет содержать краткое содержание новостей с сылкой на саму новость.