4. Продолжаем строить сайт

4. Продолжаем строить сайт

Извините за долгое отсутствие, по рабочим проблемам не мог выходить на сайт. sad 

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

Откройте свой файл index.html, сначала добавим пункт меню. Добавляем в код эти строки:

<li>
<a href="#photo">Фотогалерея</a>
</li>

Теперь добавляем сам блок галереи, он состоит из 6 блоков, два из них под видео. На миниатюре есть ссылка на страницу (Я её так и подписа) если Вам нужна эта ссылка то вставте ссылку вместо "#"    <a href="#">Ссылка</a>

В блоках с видео, ссылки всавлены не рабочие, вставьте свои. 

<a href="https://www.youtube.com/watch?v=Scxs7L0vhZ4?autoplay=1" class="lightbox-gallery mfp-iframe btn btn-lg btn-transparent">Просмотреть видео</a>

Теперь код блоков, всавьте в код index.html 

    

    <!-- Фотогалерея -->
    <section class="section-wrap works-grid-3-col-wide pb-0" id="photo">

      <div class="container-fluid">

        <div class="row heading">
          <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
            <h2 class="text-center bottom-line">Наша фото video галерея</h2>
            <p class="subheading text-center">Презентация фоторабот</p>
          </div>
        </div>

        <div class="grid-3-col grid-wide grid-gutter grayscale">

          <div class="work-item web-design print">
            <div class="work-img">
              <img src="img/project_1.jpg" alt="">
              <div class="work-overlay">        
                <div class="work-description">
                  <h3>
                    <a href="portfolio-single">Первая фото</a>
                  </h3>
                  <span>
                    <a href="#">Ссылка на страницу</a>
                  </span>
                </div>
                <a href="img/project_1_big.jpg" class="lightbox-gallery btn btn-lg btn-transparent" title="Poster Mockup">Просмотреть</a>
              </div>
            </div>
          </div> <!-- end work-item -->

          <div class="work-item web-design branding">
            <div class="work-img">
              <img src="img/project_2.jpg" alt="">
              <div class="work-overlay">        
                <div class="work-description">
                  <h3>
                    <a href="portfolio-single">Vimeo видео</a>
                  </h3>
                  <span>
                    <a href="#">Ссылка на страницу</a>
                  </span>
                </div>
                <a href="http://vimeo.com/19270640" class="lightbox-gallery mfp-iframe btn btn-lg btn-transparent">Посмотреть видео</a>
              </div>
            </div>
          </div> <!-- Конец блока -->

          <div class="work-item web-design branding">
            <div class="work-img">
              <img src="img/project_3.jpg" alt="">
              <div class="work-overlay">        
                <div class="work-description">
                  <h3>
                    <a href="portfolio-single">Youtube видео</a>
                  </h3>
                  <span>
                    <a href="#">ссылка на страницу</a>
                  </span>
                </div>
                <a href="https://www.youtube.com/watch?v=Scxs7L0vhZ4?autoplay=1" class="lightbox-gallery mfp-iframe btn btn-lg btn-transparent">Просмотреть видео</a>
              </div>
            </div>
          </div> <!-- конец блока -->

          <div class="work-item web-design print">
            <div class="work-img">
              <img src="img/project_4.jpg" alt="">
              <div class="work-overlay">        
                <div class="work-description">
                  <h3>
                    <a href="portfolio-single">Еще фото</a>
                  </h3>
                  <span>
                    <a href="#">Ссылка на страницу</a>
                  </span>
                </div>
                <a href="img/project_4_big.jpg" class="lightbox-gallery btn btn-lg btn-transparent" title="Brod Identity">Посмотреть фото</a>
              </div>
            </div>
          </div> <!-- Конец блока -->

          <div class="work-item web-design branding">
            <div class="work-img">
              <img src="img/project_5.jpg" alt="">
              <div class="work-overlay">        
                <div class="work-description">
                  <h3>
                    <a href="portfolio-single">Фото</a>
                  </h3>
                  <span>
                    <a href="#">Ссылка на страницу</a>
                  </span>
                </div>
                <a href="img/project_5_big.jpg" class="lightbox-gallery btn btn-lg btn-transparent" title="Cup Mockup">Посмотреть фото</a>
              </div>
            </div>
          </div> <!-- Конец блока -->

          <div class="work-item web-design branding">
            <div class="work-img">
              <img src="img/project_6.jpg" alt="">
              <div class="work-overlay">        
                <div class="work-description">
                  <h3>
                    <a href="portfolio-single">Фоточка</a>
                  </h3>
                  <span>
                    <a href="#">Ссылка на страницу</a>
                  </span>
                </div>
                <a href="img/project_6_big.jpg" class="lightbox-gallery btn btn-lg btn-transparent" title="Stationery Mockup">Посмотреть фоточку</a>
              </div>
            </div>
          </div> <!-- Конец блока -->

        </div>    
      </div>
    </section> <!-- Конец галереи-->

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