После подвала идет очень много белого цвет, но его быть не должно

301
07 февраля 2018, 11:08

Если открыть файл index.html(в браузере) и пролистать в footer, то там будет подвал, а дальше пойдет тупо белый цвет. Подскажите, пожалуйста, как исправить это?

body { 
  margin: 0; 
  font-family: 'Roboto'; 
} 
 
img { 
  max-width: 100%; 
} 
 
header { 
  background-color: #3a7dfd; 
  color: #fff; 
  padding-top: 59px; 
  /* Внутренне пространство */ 
  padding-bottom: 22px; 
} 
 
.web-developer { 
  margin-top: 102px; 
} 
 
.name-developer { 
  font-size: 48px; 
  font-weight: 700; 
  margin-top: 21px; 
  /* Внешнее пространство */ 
} 
 
.info-about-develop { 
  margin-top: 20px; 
  font-size: 18px; 
} 
 
.header-button { 
  box-shadow: 10px 17px 34px 6px rgba(18, 61, 145, 0.83); 
  /* Тень */ 
  border-radius: 50px; 
  background-color: #ffffff; 
  color: #072b6f; 
  font-size: 18px; 
  font-weight: 700; 
  padding-top: 17px; 
  /* Верхний отступ */ 
  padding-left: 55px; 
  /* Левый отступ */ 
  padding-right: 55px; 
  /* Правый отступ */ 
  padding-bottom: 17px; 
  /* Нижний отступ */ 
  /* Сокращенно можно записать так: padding: 17px 55px 17px 55px; */ 
  margin-top: 33px; 
  -webkit-transition: 0.2s; 
  -o-transition: 0.2s; 
  transition: 0.2s; 
} 
 
.header-button:hover { 
  /* Анимация */ 
  box-shadow: none; 
} 
 
header small { 
  font-size: 12px; 
  display: block; 
  text-align: center; 
  margin-top: 9px; 
} 
 
.header-button-block { 
  max-width: 210px; 
} 
 
 
/* Сексция портфолио */ 
 
.portfolio { 
  background-color: #dddddd; 
  padding-top: 44px; 
  padding-bottom: 71px; 
} 
 
.portfolio-block { 
  background-color: #fff; 
  padding-top: 29px; 
  padding-bottom: 41px; 
} 
 
.portfolio-title { 
  text-transform: uppercase; 
  font-size: 18px; 
  color: #072b6f; 
  margin-bottom: 10px; 
} 
 
.portfolio-subtitle { 
  color: #7bb9ff; 
  font-size: 14px; 
  margin-top: 10px; 
  margin-bottom: 30px; 
} 
 
.portfolio-title, 
.portfolio-subtitle { 
  text-align: center; 
} 
 
.portfolio-col-1 { 
  padding-left: 50px; 
} 
 
.portfolio-col-2 { 
  padding-right: 50px; 
} 
 
.portfolio-block h3 { 
  color: #072b6f; 
  font-size: 18px; 
  font-weight: 700; 
  text-transform: uppercase; 
} 
 
.portfolio-text { 
  color: #8f8f8f; 
  font-size: 14px; 
  font-weight: 400; 
} 
 
.portfolio-block a { 
  color: #072b6f; 
  font-size: 14px; 
  font-weight: 400; 
  text-decoration: underline; 
} 
 
 
/* Подвал портфолио */ 
 
footer { 
  background-color: #3a7dfd; 
  color: #ffffff; 
  padding-top: 60px; 
  padding-bottom: 110px; 
} 
 
.footer-author { 
  font-size: 24px; 
  margin-bottom: 7px; 
} 
 
.development-of-sites-turnkey { 
  font-size: 18px; 
  margin-top: 0px; 
} 
 
.social-block { 
  text-align: center; 
} 
 
.social-block a { 
  display: inline-block; 
  /* Посмотреть что за значение */ 
  margin-right: 13px; 
  margin-left: 13px; 
} 
 
.footer-button { 
  display: inline-block; 
  border: 1px solid #fff; 
  /* Спросить в чате */ 
  background-color: transparent; 
  /* Прозрачный цвет */ 
  color: #fff; 
  font-size: 18px; 
  border-radius: 50px; 
  /*Скругление */ 
  padding: 12px 40px; 
  -webkit-transition: 0.2s; 
  -o-transition: 0.2s; 
  transition: 0.2s; 
} 
 
.footer-button:hover { 
  /* Анимация */ 
  background-color: #fff; 
  color: #3a7dfd; 
} 
 
.footer-feedback { 
  margin-bottom: 13px; 
} 
 
.footer-feedback-block { 
  text-align: center; 
} 
 
@media (max-width: 1200px) { 
  .web-developer { 
    margin-top: 60px; 
  } 
} 
 
@media (max-width: 992px) { 
  .header-img { 
    display: none; 
  } 
  .web-developer { 
    margin-top: 10px; 
  } 
  .footer-autor { 
    font-size: 18px; 
  } 
  .development-of-sites-turnkey { 
    font-size: 14px; 
  } 
  .social-block a { 
    margin-left: 5px; 
    margin-right: 5px; 
  } 
  .social-block img { 
    width: 30px; 
  } 
  .footer-feedback-block { 
    font-size: 14px; 
    padding: 8px 35px; 
  } 
} 
 
@media (max-width: 768px) { 
  .portfolio-col-1 { 
    padding-left: 20px; 
    padding-right: 20px; 
  } 
  .portfolio-col-2 { 
    padding-left: 20px; 
    padding-right: 20px; 
  } 
  .footer-autor { 
    text-align: center; 
  } 
  .development-of-sites-turnkey { 
    text-align: center; 
  } 
}
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <!-- Техническая информация браузеру --> 
  <meta charset="UTF-8"> 
  <!-- Кодировка сайта --> 
  <!-- Приравниваем Internet Explorer к браузеру Edge --> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <!-- Делаем адаптивность на сайте. Приравнивает ширину экрана к ширие с устройства с которого смотрим сайт. --> 
  <meta http-equiv="viewport" content="width=device-width, initial-scale=1"> 
 
  <!-- Информация о об авторе и описании сайта --> 
  <meta name="description" content="Сайт разработчика Ярослава Салимова"> 
  <meta name="author" content="Ярослав Салимов"> 
 
  <!-- Икона во вкладке с браузером --> 
  <link rel="icon" href="/favicon.ico"> 
  <!-- Заголовок сайта --> 
  <title>Ярослав Салимов - разработка сайтов</title> 
  <!-- Подключаем Bootstrap и CSS --> 
  <link rel="stylesheet" href="css/style.css"> 
  <link rel="stylesheet" href="css/bootstrap-grid.min.css"> 
  <!-- Шрифты Google --> 
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=cyrillic-ext" rel="stylesheet"> 
  <!-- Анимация --> 
  <link rel="stylesheet" href="css/animate.css"> 
  <!-- Яндекс. Метрика - счетчик --> 
  <script type="text/javascript"> 
    (function(d, w, c) { 
      (w[c] = w[c] || []).push(function() { 
        try { 
          w.yaCounter47563081 = new Ya.Metrika({ 
            id: 47563081, 
            clickmap: true, 
            trackLinks: true, 
            accurateTrackBounce: true, 
            webvisor: true 
          }); 
        } catch (e) {} 
      }); 
 
      var n = d.getElementsByTagName("script")[0], 
        s = d.createElement("script"), 
        f = function() { 
          n.parentNode.insertBefore(s, n); 
        }; 
      s.type = "text/javascript"; 
      s.async = true; 
      s.src = "https://mc.yandex.ru/metrika/watch.js"; 
 
      if (w.opera == "[object Opera]") { 
        d.addEventListener("DOMContentLoaded", f, false); 
      } else { 
        f(); 
      } 
    })(document, window, "yandex_metrika_callbacks"); 
  </script> 
  <noscript><div><img src="https://mc.yandex.ru/watch/47563081" style="position:absolute; left:-9999px;" alt="" /></div></noscript> 
  <!-- Яндекс.Метрика - счетчик --> 
</head> 
 
<body> 
  <header> 
    <div class="container"> 
      <div class="row"> 
        <div class="col-lg-7"> 
          <img class="header-img wow fadeInLeftBig" src="img/logo-img.png" alt="Компьютер"> 
        </div> 
        <!-- /.col-7 --> 
        <div class="col-lg-5"> 
          <p class="web-developer wow fadeInRightBig" data-wow-delay="0.1s">Веб-разработчик</p> 
          <h1 class="name-developer wow fadeInRightBig" data-wow-delay="0.2s">Ярослав Салимов</h1> 
          <p class="info-about-develop wow fadeInRightBig" data-wow-delay="0.3s">Верстка на HTML/CSS <br> Разработка сайтов под ключ</p> 
          <div class="header-button-block wow fadeInRightBig"> 
            <a href="https://vk.com/im?sel=296937602" target="_blank"><button class="header-button" data-wow-delay="0.4s" >Связаться</button></a> 
            <small>*Это бесплатно</small> 
          </div> 
        </div> 
        <!-- /.col-5 --> 
      </div> 
      <!-- /.row --> 
    </div> 
    <!-- /.container --> 
  </header> 
  <section class="portfolio"> 
    <div class="container"> 
      <div class="portfolio-block animated fadeIn"> 
        <h2 class="portfolio-title">Портфолио</h2> 
        <p class="portfolio-subtitle">Мои работы</p> 
        <div class="row"> 
          <div class="col-md-6"> 
            <div class="portfolio-col-1"> 
              <img src="img/main-logo.png" alt="Газпром"> 
              <h3>внутренний университет «Газпром нефти»</h3> 
              <p class="portfolio-text">У «Газпром нефти» есть внутренний Корпоративный университет для сотрудников. Это настоящий университет, где сотрудники проходят обучение у внутренних тренеров компании или у специально приглашенных лекторов и экспертов....</p> 
              <a href="#">Смотреть работу</a> 
            </div> 
          </div> 
          <!-- /.col-6 --> 
          <div class="col-md-6"> 
            <div class="portfolio-col-2"> 
              <img src="img/logo3.png" alt="Платежная система МИР"> 
              <h3>Сайт платежной системы «Мир»</h3> 
              <p class="portfolio-text">Обновленная версия сайта знакомит посетителей с компаниями, уже принимающими карты к оплате, и приглашает всех остальных присоединиться к проекту...</p> 
              <a href="#">Смотреть работу</a> 
            </div> 
          </div> 
          <!-- /.col-6 --> 
        </div> 
      </div> 
    </div> 
  </section> 
 
  <footer> 
    <div class="container"> 
      <div class="row"> 
        <div class="col-md-4"> 
          <h4 class="footer-author">Ярослав Салимов</h4> 
          <p class="development-of-sites-turnkey">Разработка сайтов под ключ</p> 
        </div> 
        <div class="col-md-4"> 
          <div class="social-block"> 
            <p>Подпишитесь:</p> 
            <a href="#"><img class="animated bounceInUp" src="socials/facebook-logo-button.png" alt="Facebook"></a> 
            <a href="#"><img class="animated bounceInUp" src="socials/telegram-symbol.png" alt="Telegram"></a> 
            <a href="#"><img class="animated bounceInUp" src="socials/vk-social-logotype.png" alt="Vkontakte"></a> 
            <a href="#"><img class="animated bounceInUp" src="socials/youtube-symbol.png" alt="YouTube"></a> 
          </div> 
        </div> 
        <div class="col-md-4"> 
          <div class="footer-feedback-block"> 
            <p class="footer-feedback">Напишите мне:</p> 
            <button class="footer-button">Написать</button> 
          </div> 
        </div> 
      </div> 
      <!-- /.row --> 
    </div> 
    <!-- /.container --> 
  </footer> 
  <script src="js/wow.min.js"> 
    new WOW().init(); 
  </script> 
</body> 
 
</html>

READ ALSO
Как работает аудиоплеер [требует правки]
CSS

Как работает аудиоплеер [требует правки]

Здравствуйте, давно интересует вопрос как работает аудиоплеер на примере сайта: https://book-audiocom/find/genre=%D1%84%D0%B0%D0%BD%D1%82%D0%B0%D1%81%D1%82%D0%B8%D0%BA%D0%B0/2117:strugatskie-piknik-na-obochine

 206
Отменить адаптивность JS
CSS

Отменить адаптивность JS

Всем привет, есть адаптивный сайт, возник вопрос как правильно реализовать переход на основную версию сайта для мобильных устройствВедь...

 233
Использование css и bootstrap
CSS

Использование css и bootstrap

Занимаюсь вёрсткой около годаВ данный момент пишу проект для моего диплома

 185
Иконка календарь с помощью CSS3
CSS

Иконка календарь с помощью CSS3

Есть такой вопросУ меня иконка для календаря на сайте

 282