3. создание сайта/блок новостей/

3. создание сайта/блок новостей/

Продолжаем цикл уроков о создании сайта на HTML. На сайте блок новостей очень нужен, он привлекает новых клиентов, да и поисковым роботам надо видеть что ваш сайт не заброшен и не снижает ваш поисковый индекс. 

Приступим, открываем наш файл index.html который мы уже продолжили на прошлом уроке и добавим в скрипт пункт меню "Новости"

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

Новый пункт я выделил красным. Блок новостей у нас будет состоять из трех новостей, можно сделать и больше они все будут распологаться горизонтально и ниже их будет стрелка для перемещения их, потому что н странице убирается только две новости. Добавляем код нашего блока там где закончили на прошлом уроке:

    <!-- From Blog -->
    <section class="section-wrap bg-light from-blog" id="blog">
      <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="container">

          <div class="row">

            <div id="owl-blog" class="owl-carousel owl-theme">
              <!-- Начало новости -->
              <div class="blog-col">
                <div class="entry-img">
                  <a href="blog-single.html">
                    <img src="img/blog_1.jpg" alt="">
                  </a>
                </div>
                <div class="entry-box">
                  <div class="entry-title">
                    <h4><a href="blog-single.html">Заголовок новости</a></h4>
                  </div>
                  <ul class="entry-meta">
                    <li>Автор <a href="blog-single">Имя автора</a></li>
                    <li>
                      <a href="#">Апр 30, 2018</a>
                    </li>                   
                  </ul>
                  <div class="entry-content">
                    <p>Краткий текст вашей новости. Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.</p>
                    <a href="blog-single1.html" class="read-more">Читать далее</a>
                  </div>
                </div>
              </div> <!-- Конц новости-->

                <!-- Начало новости -->
              <div class="blog-col">
                <div class="entry-img">
                  <a href="blog-single.html">
                    <img src="img/blog_1.jpg" alt="">
                  </a>
                </div>
                <div class="entry-box">
                  <div class="entry-title">
                    <h4><a href="blog-single.html">Заголовок новости</a></h4>
                  </div>
                  <ul class="entry-meta">
                    <li>Автор <a href="blog-single">Имя автора</a></li>
                    <li>
                      <a href="#">Апр 30, 2018</a>
                    </li>                   
                  </ul>
                  <div class="entry-content">
                    <p>Краткий текст вашей новости. Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.Краткий текст вашей новости.</p>
                    <a href="blog-single2.html" class="read-more">Читать далее</a>
                  </div>
                </div>
              </div> <!-- Конц новости-->

              <div class="blog-col last">
                <div class="entry-slider oh">
                  <div class="flexslider" id="one-img-slide">
                    <ul class="slides">
                      <li>
                        <a href="#">
                          <img src="img/blog_gallery_1.jpg" alt="">
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="img/blog_gallery_2.jpg" alt="">
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="img/blog_gallery_3.jpg" alt="">
                        </a>
                      </li>
                    </ul>
                  </div>
                </div> <!-- конец Ссылки на фото -->

                <div class="entry-box">
                  <div class="entry-title">
                    <h4><a href="blog-single.html">Заголовок</a></h4>
                  </div>
                  <ul class="entry-meta">
                    <li>Автор <a href="blog-single">Имя автора</a></li>
                    <li>
                      <a href="#">Апр 30, 2018</a>
                    </li>                   
                  </ul>
                  <div class="entry-content">
                    <p>Последняя новость, Последняя новость, Последняя новость, Последняя новость, Последняя новость, Последняя новость, Последняя новость, Последняя новость, Последняя новость, </p>
                    <a href="blog-single3.html" class="read-more">Читать далее</a>
                  </div>
                </div>

              </div> <!-- Конц последней новости -->

            </div>

            <div class="customNavigation mt-40 text-center">
              <a class="prev"><i class="icon arrow_left"></i></a>
              <a class="next"><i class="icon arrow_right"></i></a>
            </div>

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

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

Вот на этом пока и все. До встречи на следующем уроке.