появился отступ снизу сайта [закрыт]

145
22 декабря 2021, 06:00
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

у меня на сайте появилась белая полоса снизу, не могу понять из-за чего, убирал методом тыка разные блоки сайта - не помогло, но на другой страничке этого же сайта у меня нет полоски снизу. Моя первая большая верстка сайта, прошу слишком агрессивно не реагировать на ошибки, но если найдете, то укажите на них, пожалуйста, буду очень Вам благодарен =)

::-webkit-scrollbar { 
  width: 0px; 
  background: transparent; 
} 
 
html { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
} 
 
* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  font-family: Play, sans-serif; 
} 
 
.fullbg { 
  width: 100%; 
  background-image: url(img/fbg.jpg); 
  background-position: center center; 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background-size: cover; 
} 
 
 
/*ШАПКА*/ 
 
#header { 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.17); 
} 
 
.container { 
  width: 90%; 
  margin: 0 auto; 
} 
 
.header-flex { 
  min-height: 100px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
} 
 
.header-left { 
  display: flex; 
  justify-content: center; 
} 
 
.header-right { 
  display: flex; 
  align-items: center; 
} 
 
.header-right .button:hover { 
  box-shadow: 0 0 32px 3px rgba(0, 0, 0, .38); 
  transition: all .5s ease; 
} 
 
.header-right .button { 
  background-color: #000; 
} 
 
.button { 
  color: #fff; 
  font-size: 15px; 
  font-weight: 400; 
  padding: 12px 19px; 
  text-align: center; 
  border-radius: 25px; 
  letter-spacing: 0.38px; 
  text-decoration: none; 
  cursor: pointer; 
  transition: 0.5s; 
} 
 
.cart-img { 
  padding-top: 4px; 
  margin-right: 24px; 
} 
 
.form { 
  display: flex; 
  align-items: center; 
} 
 
 
/* НАВИГАЦИЯ */ 
 
nav { 
  width: 175px; 
  margin: 0 auto; 
} 
 
.topnav { 
  display: flex; 
  list-style: none; 
  justify-content: center; 
  transition: 0.5s; 
  margin: 0; 
  padding: 0; 
} 
 
.topnav a { 
  color: #fff; 
  text-align: center; 
  padding: 18px 16px; 
  text-decoration: none; 
  font-size: 16px; 
  transition: 0.5s; 
  font-size: 18px; 
} 
 
.topnav:hover a { 
  transform: scale(1.5); 
  opacity: .2; 
  filter: blur(5px); 
} 
 
.menu-link { 
  color: #ffffff; 
  font-size: 14px; 
  font-weight: 500; 
  text-transform: uppercase; 
  text-decoration: none; 
  display: block; 
  padding: 14px 23px 17px; 
} 
 
.topnav a:hover { 
  transform: scale(2); 
  opacity: 1; 
  filter: blur(0); 
} 
 
.topnav a:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  transition: transform 0.5s; 
  transform-origin: right; 
  transform: scaleX(0); 
  z-index: -1; 
  border-radius: 25px; 
} 
 
.topnav a:hover:before { 
  transition: transform 0.5s; 
  transform-origin: left; 
  transform: scaleX(1); 
} 
 
.topnav .icon { 
  display: none; 
} 
 
.hamburger-menu { 
  display: none; 
} 
 
@media screen and (max-width: 718px) { 
  .hamburger-menu { 
    display: block; 
    position: fixed; 
    width: 280px; 
    height: 100vh; 
    top: 0; 
    right: 0; 
    z-index: 999999; 
  } 
  .header-right { 
    display: none; 
  } 
  .header-left { 
    display: block; 
    margin: 0 auto; 
  } 
  nav { 
    display: none; 
  } 
} 
 
#menu__toggle { 
  opacity: 0; 
} 
 
.menu__btn { 
  display: flex; 
  align-items: center; 
  position: fixed; 
  top: 30px; 
  left: 20px; 
  width: 26px; 
  height: 26px; 
  cursor: pointer; 
  z-index: 1; 
} 
 
 
/* добавляем "гамбургер" */ 
 
.menu__btn>span, 
.menu__btn>span::before, 
.menu__btn>span::after { 
  display: block; 
  position: absolute; 
  width: 100%; 
  height: 2px; 
  background-color: #616161; 
} 
 
.menu__btn>span::before { 
  content: ''; 
  top: -8px; 
} 
 
.menu__btn>span::after { 
  content: ''; 
  top: 8px; 
} 
 
 
/* контейнер меню */ 
 
.menu__box { 
  display: block; 
  position: fixed; 
  visibility: hidden; 
  top: 0; 
  left: -100%; 
  width: 300px; 
  height: 100%; 
  margin: 0; 
  padding: 80px 0; 
  list-style: none; 
  text-align: center; 
  background-color: #ECEFF1; 
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); 
} 
 
 
/* элементы меню */ 
 
.menu__item { 
  display: block; 
  padding: 12px 24px; 
  color: #333; 
  font-size: 20px; 
  font-weight: 600; 
  text-decoration: none; 
  border-bottom: 1px solid #e6e6e6; 
} 
 
.menu__item:hover { 
  background-color: #CFD8DC; 
} 
 
#menu__toggle:checked~.menu__btn>span { 
  transform: rotate(45deg); 
} 
 
#menu__toggle:checked~.menu__btn>span::before { 
  top: 0; 
  transform: rotate(0); 
} 
 
#menu__toggle:checked~.menu__btn>span::after { 
  top: 0; 
  transform: rotate(90deg); 
} 
 
#menu__toggle:checked~.menu__box { 
  visibility: visible; 
  left: 0; 
} 
 
 
/*БАННЕР*/ 
 
@media screen and (max-width: 715px) { 
  .genban { 
    display: none; 
  } 
} 
 
.banner { 
  height: 460px; 
} 
 
.banner-top { 
  display: flex; 
  justify-content: flex-end; 
  align-items: center; 
} 
 
.banner-top p { 
  color: #fff; 
  font-size: 12px; 
  font-weight: 500; 
  text-transform: uppercase; 
  letter-spacing: 1.68px; 
  margin-bottom: 0; 
  padding-right: 10px; 
  padding-top: 153px; 
} 
 
.banner-top span { 
  width: 25px; 
  height: 25px; 
  background-color: #fff; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #111; 
  margin-right: 204px; 
  margin-top: 153px; 
  border-radius: 50%; 
  font-size: 18px; 
  font-weight: 600; 
} 
 
.banner-center { 
  display: flex; 
  justify-content: flex-end; 
  flex-direction: space-around; 
  /* margin-right: 205px;  */ 
  padding-top: 18px; 
  transition: 0.5s; 
} 
 
.banner-container { 
  width: 85%; 
} 
 
.banner-bottom p { 
  position: relative; 
  left: 71.7%; 
  bottom: 0; 
  top: 10px; 
  color: #fff; 
} 
 
.pink { 
  color: #fcac45; 
} 
 
 
/* некое отступление */ 
 
.job { 
  /* height: 100%; 
    	background: #ffffff; */ 
  position: relative; 
  overflow: hidden; 
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000); 
  contain: strict; 
  display: -webkit-box; 
  display: flex; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  width: 100%; 
  height: 140px; 
  background: #fff; 
  text-transform: uppercase; 
} 
 
.job p { 
  display: flex; 
  justify-content: center; 
  text-align: center; 
  font-weight: 600; 
  font-size: 2em; 
  letter-spacing: 2.6px; 
} 
 
 
/* 	ФУТЕР */ 
 
@media screen and (max-width: 1024px) { 
  .footer-right__bottom { 
    display: none; 
  } 
  .footer-wrp { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    text-align: center; 
    align-items: center; 
  } 
  .footer-left__bottom { 
    position: relative; 
    left: 2px; 
    bottom: 10px; 
  } 
  .logo { 
    width: 150px; 
    height: 30px; 
    position: relative; 
    left: 40px; 
  } 
  .footer-contacts-item { 
    display: flex; 
    justify-content: space-between; 
    text-align: center; 
    padding-right: 130px; 
    padding-left: 130px; 
  } 
  .footer-contacts-item .cont-p { 
    position: relative; 
    top: 4px; 
    margin-right: 20px; 
  } 
  .footer-pay { 
    position: relative; 
    right: 370px; 
  } 
  .footer-contacts-item p { 
    position: relative; 
    right: 15px; 
  } 
  .footer-pay-item img { 
    padding-left: 20px; 
  } 
  .footer-pay-item .visa { 
    width: 60px; 
    position: relative; 
    left: 30px; 
  } 
  .footer-pay-item .master { 
    width: 60px; 
    position: relative; 
    left: 180px; 
    bottom: 60px; 
  } 
  .footer-pay-item p { 
    position: relative; 
    color: #c9c9c9; 
    font-size: 16px; 
    font-weight: 400; 
    margin-bottom: 0; 
    left: 147px; 
    padding-bottom: 27px; 
  } 
  .footer-menu { 
    position: relative; 
    left: 295px; 
  } 
  .footer-socials { 
    display: none; 
  } 
} 
 
.footer-pay-item p { 
  color: #c9c9c9; 
  font-size: 16px; 
  font-weight: 400; 
  padding-bottom: 12px; 
} 
 
#footer { 
  background-color: #0f0f0f; 
  padding: 44px; 
  min-height: 100%; 
} 
 
.footer-wrp { 
  display: flex; 
  justify-content: space-between; 
} 
 
.footer-menu { 
  position: absolute; 
} 
 
ul { 
  padding-left: 0!important; 
  margin-bottom: 0!important; 
  color: #767676; 
} 
 
.footer-menu li { 
  display: inline-block; 
  margin-left: -15px; 
  color: #767676; 
} 
 
.footer-menu ul li { 
  padding: 5px; 
} 
 
.footer-menu ul li a { 
  display: block; 
  position: relative; 
  text-decoration: none; 
  padding: 7px; 
  font-size: 18px; 
  font-family: sans-serif; 
  color: #fff; 
} 
 
.footer-menu ul li a:hover { 
  border-bottom: 1px solid #fcac45; 
  transition: transform 0.5s; 
} 
 
.footer-left__center { 
  margin: 60px 0 21px; 
  display: flex; 
  align-items: flex-end; 
} 
 
.footer-socials { 
  margin-left: 10px; 
} 
 
@media screen and (max-width: 1580px) { 
  #footer { 
    position: relative; 
  } 
} 
 
.footer-socials .vk { 
  padding-right: 5px; 
  padding-left: 5px; 
} 
 
.footer-left__bottom p { 
  color: #c9c9c9; 
  font-size: 18px; 
  font-weight: 400; 
  margin-bottom: 0; 
  display: inline-block; 
  margin-right: 15px; 
} 
 
.footer-right { 
  text-align: right; 
} 
 
.footer-right__bottom p { 
  color: #fff; 
} 
 
.footer-socials a { 
  text-decoration: none; 
} 
 
.footer-contacts-item p:first-child { 
  color: #fff; 
  margin-bottom: 2px; 
  font-size: 13px; 
  font-weight: 300; 
  letter-spacing: .78px; 
  text-transform: uppercase; 
} 
 
.footer-contacts-item p:nth-child(2) { 
  color: #bfbfbf; 
  margin-bottom: 15px; 
  font-size: 19px; 
  font-weight: 400; 
} 
 
.footer-pay img:nth-child { 
  display: block; 
  margin-bottom: 10px; 
  margin-top: 6px; 
  position: relative; 
  left: 8px; 
} 
 
.footer-pay img:nth-child(2) { 
  margin-right: 12px; 
  display: inline-block; 
} 
 
.footer-pay { 
  float: right; 
  width: 166px; 
  margin-left: 35px; 
  text-align: right; 
} 
 
.footer-pay .visa { 
  padding-bottom: 25px; 
} 
 
.footer-right__bottom p { 
  float: right; 
  color: #fff; 
  font-size: 18px; 
  font-weight: 400; 
  line-height: 23px; 
  letter-spacing: .72px; 
  margin-bottom: 0; 
}
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <link rel="stylesheet" href="main.css"> 
  <script type="text/javascript" src="js/jquery.js"></script> 
  <meta charset="UTF-8"> 
  <title>Рукодельница</title> 
</head> 
 
<body> 
  <div class="fullbg"> 
    <header id="header" class="header-main"> 
      <div class="container header-flex"> 
        <div class="header-left"> 
          <a class="logo" href="index.html"><img class="logo-img" src="img/logo.png" width="200" height="40" alt="logo"></a> 
        </div> 
        <div class="header-right"> 
          <a href="product.html"><img class="cart-img" src="img/cart.png" width="25" height="25" alt="cart"></a> 
          <a href="login.html" class="button">Мой аккаунт</a> 
        </div> 
      </div> 
 
      <nav> 
        <div class="topnav responsive" id="myTopnav"> 
          <a href="picture.html">Lorem ipsum</a> 
          <a href="rabbits.html">Lorem ipsum</a> 
        </div> 
      </nav> 
 
      <div class="hamburger-menu"> 
        <input id="menu__toggle" type="checkbox" /> 
        <label class="menu__btn" for="menu__toggle"> 
        <span></span> 
      </label> 
        <ul class="menu__box"> 
          <li><a class="menu__item" href="index.html">Lorem ipsum</a></li> 
          <li><a class="menu__item" href="picture.html">Lorem ipsum</a></li> 
          <li><a class="menu__item" href="rabbits.html">Lorem ipsum</a></li> 
          <li><a class="menu__item" href="login.html">Lorem ipsum</a></li> 
          <li><a class="menu__item" href="booking.html">Lorem ipsum</a></li> 
        </ul> 
      </div> 
 
    </header> 
 
 
    <div class="banner"> 
      <div class="genban"> 
        <div class="banner-top"> 
          <p>Lorem ipsum</p> 
          <span>!</span> 
        </div> 
        <div class="banner-center banner-container"> 
          <a href="" target="_blank"><img src="img/k1.jpg" width="300" height="180" alt="picture"></a> 
        </div> 
        <div class="banner-bottom"> 
          <p>Lorem ipsum</p> 
        </div> 
      </div> 
    </div> 
  </div> 
 
 
 
  <div class="job"> 
    <p>Lorem ipsumLorem ipsumLorem ipsum</p> 
  </div> 
 
  <footer id="footer"> 
    <div class="footer-wrp"> 
      <div class="footer-left"> 
        <nav class="footer-menu"> 
          <ul class="menu"> 
            <li class="menu-list"><a href="#" class="menu-link">Lorem ipsum</a></li> 
            <li class="menu-list"><a href="#" class="menu-link">Lorem ipsum</a></li> 
          </ul> 
        </nav> 
        <div class="footer-left__center"> 
          <div class="footer-logo"> 
            <a href="/" class="router-link-exact-active router-link-active"> 
              <img class="logo" src="img/logo.png" width="100" height="30" alt="logo"> 
            </a> 
          </div> 
          <div class="footer-socials"> 
            <a href="#" target="_blank"> 
              <img class="vk" src="img/vk-icon.png" width="20" height="20" alt="vk"> 
            </a> 
            <a href="#" target="_blank"> 
              <img class="inst" src="img/insta-icon.png" width="20" height="20" alt="insta"> 
            </a> 
          </div> 
        </div> 
        <div class="footer-left__bottom"> 
          <p>© 2019, Lorem ipsum</p> 
          <!-- <a href="/storage/public_offer.pdf" target="_blank">Публичная оферта</a> --> 
        </div> 
      </div> 
      <div class="footer-right"> 
        <div class="footer-right-top"> 
          <div class="footer-contacts"> 
            <div class="footer-contacts-item"> 
              <p class="cont-p">E-mail:</p> 
              <p class="cont-p1">Lorem ipsum</p> 
            </div> 
 
          </div> 
          <div class="footer-pay"> 
            <div class="footer-pay-item"> 
              <p>Lorem ipsum</p> 
              <img class="visa" src="img/visa-grey.png" alt="visa"> 
              <img class="master" src="img/master-grey.png" alt="master"> 
            </div> 
          </div> 
        </div> 
        <div class="footer-right__bottom"> 
          <p> 
            Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum.<br> «Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum<br> Lorem ipsum 
          </p> 
        </div> 
      </div> 
    </div> 
  </footer> 
</body> 
 
</html>

Answer 1

Задать дополнительно всему документу body { overflow: hidden; } или другой обертке разметки.

::-webkit-scrollbar { 
  width: 0px; 
  background: transparent; 
} 
 
html { 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
} 
 
* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  font-family: Play, sans-serif; 
  overflow: hidden; 
} 
 
.fullbg { 
  
  width: 100%; 
  background-image: url(img/fbg.jpg); 
  background-position: center center; 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background-size: cover; 
} 
 
 
/*ШАПКА*/ 
 
#header { 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.17); 
} 
 
.container { 
  width: 90%; 
  margin: 0 auto; 
} 
 
.header-flex { 
  min-height: 100px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
} 
 
.header-left { 
  display: flex; 
  justify-content: center; 
} 
 
.header-right { 
  display: flex; 
  align-items: center; 
} 
 
.header-right .button:hover { 
  box-shadow: 0 0 32px 3px rgba(0, 0, 0, .38); 
  transition: all .5s ease; 
} 
 
.header-right .button { 
  background-color: #000; 
} 
 
.button { 
  color: #fff; 
  font-size: 15px; 
  font-weight: 400; 
  padding: 12px 19px; 
  text-align: center; 
  border-radius: 25px; 
  letter-spacing: 0.38px; 
  text-decoration: none; 
  cursor: pointer; 
  transition: 0.5s; 
} 
 
.cart-img { 
  padding-top: 4px; 
  margin-right: 24px; 
} 
 
.form { 
  display: flex; 
  align-items: center; 
} 
 
 
/* НАВИГАЦИЯ */ 
 
nav { 
  width: 175px; 
  margin: 0 auto; 
} 
 
.topnav { 
  display: flex; 
  list-style: none; 
  justify-content: center; 
  transition: 0.5s; 
  margin: 0; 
  padding: 0; 
} 
 
.topnav a { 
  color: #fff; 
  text-align: center; 
  padding: 18px 16px; 
  text-decoration: none; 
  font-size: 16px; 
  transition: 0.5s; 
  font-size: 18px; 
} 
 
.topnav:hover a { 
  transform: scale(1.5); 
  opacity: .2; 
  filter: blur(5px); 
} 
 
.menu-link { 
  color: #ffffff; 
  font-size: 14px; 
  font-weight: 500; 
  text-transform: uppercase; 
  text-decoration: none; 
  display: block; 
  padding: 14px 23px 17px; 
} 
 
.topnav a:hover { 
  transform: scale(2); 
  opacity: 1; 
  filter: blur(0); 
} 
 
.topnav a:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  transition: transform 0.5s; 
  transform-origin: right; 
  transform: scaleX(0); 
  z-index: -1; 
  border-radius: 25px; 
} 
 
.topnav a:hover:before { 
  transition: transform 0.5s; 
  transform-origin: left; 
  transform: scaleX(1); 
} 
 
.topnav .icon { 
  display: none; 
} 
 
.hamburger-menu { 
  display: none; 
} 
 
@media screen and (max-width: 718px) { 
  .hamburger-menu { 
    display: block; 
    position: fixed; 
    width: 280px; 
    height: 100vh; 
    top: 0; 
    right: 0; 
    z-index: 999999; 
  } 
  .header-right { 
    display: none; 
  } 
  .header-left { 
    display: block; 
    margin: 0 auto; 
  } 
  nav { 
    display: none; 
  } 
} 
 
#menu__toggle { 
  opacity: 0; 
} 
 
.menu__btn { 
  display: flex; 
  align-items: center; 
  position: fixed; 
  top: 30px; 
  left: 20px; 
  width: 26px; 
  height: 26px; 
  cursor: pointer; 
  z-index: 1; 
} 
 
 
/* добавляем "гамбургер" */ 
 
.menu__btn>span, 
.menu__btn>span::before, 
.menu__btn>span::after { 
  display: block; 
  position: absolute; 
  width: 100%; 
  height: 2px; 
  background-color: #616161; 
} 
 
.menu__btn>span::before { 
  content: ''; 
  top: -8px; 
} 
 
.menu__btn>span::after { 
  content: ''; 
  top: 8px; 
} 
 
 
/* контейнер меню */ 
 
.menu__box { 
  display: block; 
  position: fixed; 
  visibility: hidden; 
  top: 0; 
  left: -100%; 
  width: 300px; 
  height: 100%; 
  margin: 0; 
  padding: 80px 0; 
  list-style: none; 
  text-align: center; 
  background-color: #ECEFF1; 
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); 
} 
 
 
/* элементы меню */ 
 
.menu__item { 
  display: block; 
  padding: 12px 24px; 
  color: #333; 
  font-size: 20px; 
  font-weight: 600; 
  text-decoration: none; 
  border-bottom: 1px solid #e6e6e6; 
} 
 
.menu__item:hover { 
  background-color: #CFD8DC; 
} 
 
#menu__toggle:checked~.menu__btn>span { 
  transform: rotate(45deg); 
} 
 
#menu__toggle:checked~.menu__btn>span::before { 
  top: 0; 
  transform: rotate(0); 
} 
 
#menu__toggle:checked~.menu__btn>span::after { 
  top: 0; 
  transform: rotate(90deg); 
} 
 
#menu__toggle:checked~.menu__box { 
  visibility: visible; 
  left: 0; 
} 
 
 
/*БАННЕР*/ 
 
@media screen and (max-width: 715px) { 
  .genban { 
    display: none; 
  } 
} 
 
.banner { 
  height: 460px; 
} 
 
.banner-top { 
  display: flex; 
  justify-content: flex-end; 
  align-items: center; 
} 
 
.banner-top p { 
  color: #fff; 
  font-size: 12px; 
  font-weight: 500; 
  text-transform: uppercase; 
  letter-spacing: 1.68px; 
  margin-bottom: 0; 
  padding-right: 10px; 
  padding-top: 153px; 
} 
 
.banner-top span { 
  width: 25px; 
  height: 25px; 
  background-color: #fff; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #111; 
  margin-right: 204px; 
  margin-top: 153px; 
  border-radius: 50%; 
  font-size: 18px; 
  font-weight: 600; 
} 
 
.banner-center { 
  display: flex; 
  justify-content: flex-end; 
  flex-direction: space-around; 
  /* margin-right: 205px;  */ 
  padding-top: 18px; 
  transition: 0.5s; 
} 
 
.banner-container { 
  width: 85%; 
} 
 
.banner-bottom p { 
  position: relative; 
  left: 71.7%; 
  bottom: 0; 
  top: 10px; 
  color: #fff; 
} 
 
.pink { 
  color: #fcac45; 
} 
 
 
/* некое отступление */ 
 
.job { 
  /* height: 100%; 
    	background: #ffffff; */ 
  position: relative; 
  overflow: hidden; 
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000); 
  contain: strict; 
  display: -webkit-box; 
  display: flex; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  width: 100%; 
  height: 140px; 
  background: #fff; 
  text-transform: uppercase; 
} 
 
.job p { 
  display: flex; 
  justify-content: center; 
  text-align: center; 
  font-weight: 600; 
  font-size: 2em; 
  letter-spacing: 2.6px; 
} 
 
 
/* 	ФУТЕР */ 
 
@media screen and (max-width: 1024px) { 
  .footer-right__bottom { 
    display: none; 
  } 
  .footer-wrp { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    text-align: center; 
    align-items: center; 
  } 
  .footer-left__bottom { 
    position: relative; 
    left: 2px; 
    bottom: 10px; 
  } 
  .logo { 
    width: 150px; 
    height: 30px; 
    position: relative; 
    left: 40px; 
  } 
  .footer-contacts-item { 
    display: flex; 
    justify-content: space-between; 
    text-align: center; 
    padding-right: 130px; 
    padding-left: 130px; 
  } 
  .footer-contacts-item .cont-p { 
    position: relative; 
    top: 4px; 
    margin-right: 20px; 
  } 
  .footer-pay { 
    position: relative; 
    right: 370px; 
  } 
  .footer-contacts-item p { 
    position: relative; 
    right: 15px; 
  } 
  .footer-pay-item img { 
    padding-left: 20px; 
  } 
  .footer-pay-item .visa { 
    width: 60px; 
    position: relative; 
    left: 30px; 
  } 
  .footer-pay-item .master { 
    width: 60px; 
    position: relative; 
    left: 180px; 
    bottom: 60px; 
  } 
  .footer-pay-item p { 
    position: relative; 
    color: #c9c9c9; 
    font-size: 16px; 
    font-weight: 400; 
    margin-bottom: 0; 
    left: 147px; 
    padding-bottom: 27px; 
  } 
  .footer-menu { 
    position: relative; 
    left: 295px; 
  } 
  .footer-socials { 
    display: none; 
  } 
} 
 
.footer-pay-item p { 
  color: #c9c9c9; 
  font-size: 16px; 
  font-weight: 400; 
  padding-bottom: 12px; 
} 
 
#footer { 
  background-color: #0f0f0f; 
  padding: 44px; 
  min-height: 100%; 
} 
 
.footer-wrp { 
  display: flex; 
  justify-content: space-between; 
} 
 
.footer-menu { 
  position: absolute; 
} 
 
ul { 
  padding-left: 0!important; 
  margin-bottom: 0!important; 
  color: #767676; 
} 
 
.footer-menu li { 
  display: inline-block; 
  margin-left: -15px; 
  color: #767676; 
} 
 
.footer-menu ul li { 
  padding: 5px; 
} 
 
.footer-menu ul li a { 
  display: block; 
  position: relative; 
  text-decoration: none; 
  padding: 7px; 
  font-size: 18px; 
  font-family: sans-serif; 
  color: #fff; 
} 
 
.footer-menu ul li a:hover { 
  border-bottom: 1px solid #fcac45; 
  transition: transform 0.5s; 
} 
 
.footer-left__center { 
  margin: 60px 0 21px; 
  display: flex; 
  align-items: flex-end; 
} 
 
.footer-socials { 
  margin-left: 10px; 
} 
 
@media screen and (max-width: 1580px) { 
  #footer { 
    position: relative; 
  } 
} 
 
.footer-socials .vk { 
  padding-right: 5px; 
  padding-left: 5px; 
} 
 
.footer-left__bottom p { 
  color: #c9c9c9; 
  font-size: 18px; 
  font-weight: 400; 
  margin-bottom: 0; 
  display: inline-block; 
  margin-right: 15px; 
} 
 
.footer-right { 
  text-align: right; 
} 
 
.footer-right__bottom p { 
  color: #fff; 
} 
 
.footer-socials a { 
  text-decoration: none; 
} 
 
.footer-contacts-item p:first-child { 
  color: #fff; 
  margin-bottom: 2px; 
  font-size: 13px; 
  font-weight: 300; 
  letter-spacing: .78px; 
  text-transform: uppercase; 
} 
 
.footer-contacts-item p:nth-child(2) { 
  color: #bfbfbf; 
  margin-bottom: 15px; 
  font-size: 19px; 
  font-weight: 400; 
} 
 
.footer-pay img:nth-child { 
  display: block; 
  margin-bottom: 10px; 
  margin-top: 6px; 
  position: relative; 
  left: 8px; 
} 
 
.footer-pay img:nth-child(2) { 
  margin-right: 12px; 
  display: inline-block; 
} 
 
.footer-pay { 
  float: right; 
  width: 166px; 
  margin-left: 35px; 
  text-align: right; 
} 
 
.footer-pay .visa { 
  padding-bottom: 25px; 
} 
 
.footer-right__bottom p { 
  float: right; 
  color: #fff; 
  font-size: 18px; 
  font-weight: 400; 
  line-height: 23px; 
  letter-spacing: .72px; 
  margin-bottom: 0; 
}
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <link rel="stylesheet" href="main.css"> 
  <script type="text/javascript" src="js/jquery.js"></script> 
  <meta charset="UTF-8"> 
  <title>Рукодельница</title> 
</head> 
 
<body> 
  <div class="fullbg"> 
    <header id="header" class="header-main"> 
      <div class="container header-flex"> 
        <div class="header-left"> 
          <a class="logo" href="index.html"><img class="logo-img" src="img/logo.png" width="200" height="40" alt="logo"></a> 
        </div> 
        <div class="header-right"> 
          <a href="product.html"><img class="cart-img" src="img/cart.png" width="25" height="25" alt="cart"></a> 
          <a href="login.html" class="button">Мой аккаунт</a> 
        </div> 
      </div> 
 
      <nav> 
        <div class="topnav responsive" id="myTopnav"> 
          <a href="picture.html">Lorem ipsum</a> 
          <a href="rabbits.html">Lorem ipsum</a> 
        </div> 
      </nav> 
 
      <div class="hamburger-menu"> 
        <input id="menu__toggle" type="checkbox" /> 
        <label class="menu__btn" for="menu__toggle"> 
        <span></span> 
      </label> 
        <ul class="menu__box"> 
          <li><a class="menu__item" href="index.html">Lorem ipsum</a></li> 
          <li><a class="menu__item" href="picture.html">Lorem ipsum</a></li> 
          <li><a class="menu__item" href="rabbits.html">Lorem ipsum</a></li> 
          <li><a class="menu__item" href="login.html">Lorem ipsum</a></li> 
          <li><a class="menu__item" href="booking.html">Lorem ipsum</a></li> 
        </ul> 
      </div> 
 
    </header> 
 
 
    <div class="banner"> 
      <div class="genban"> 
        <div class="banner-top"> 
          <p>Lorem ipsum</p> 
          <span>!</span> 
        </div> 
        <div class="banner-center banner-container"> 
          <a href="" target="_blank"><img src="img/k1.jpg" width="300" height="180" alt="picture"></a> 
        </div> 
        <div class="banner-bottom"> 
          <p>Lorem ipsum</p> 
        </div> 
      </div> 
    </div> 
  </div> 
 
 
 
  <div class="job"> 
    <p>Lorem ipsumLorem ipsumLorem ipsum</p> 
  </div> 
 
  <footer id="footer"> 
    <div class="footer-wrp"> 
      <div class="footer-left"> 
        <nav class="footer-menu"> 
          <ul class="menu"> 
            <li class="menu-list"><a href="#" class="menu-link">Lorem ipsum</a></li> 
            <li class="menu-list"><a href="#" class="menu-link">Lorem ipsum</a></li> 
          </ul> 
        </nav> 
        <div class="footer-left__center"> 
          <div class="footer-logo"> 
            <a href="/" class="router-link-exact-active router-link-active"> 
              <img class="logo" src="img/logo.png" width="100" height="30" alt="logo"> 
            </a> 
          </div> 
          <div class="footer-socials"> 
            <a href="#" target="_blank"> 
              <img class="vk" src="img/vk-icon.png" width="20" height="20" alt="vk"> 
            </a> 
            <a href="#" target="_blank"> 
              <img class="inst" src="img/insta-icon.png" width="20" height="20" alt="insta"> 
            </a> 
          </div> 
        </div> 
        <div class="footer-left__bottom"> 
          <p>© 2019, Lorem ipsum</p> 
          <!-- <a href="/storage/public_offer.pdf" target="_blank">Публичная оферта</a> --> 
        </div> 
      </div> 
      <div class="footer-right"> 
        <div class="footer-right-top"> 
          <div class="footer-contacts"> 
            <div class="footer-contacts-item"> 
              <p class="cont-p">E-mail:</p> 
              <p class="cont-p1">Lorem ipsum</p> 
            </div> 
 
          </div> 
          <div class="footer-pay"> 
            <div class="footer-pay-item"> 
              <p>Lorem ipsum</p> 
              <img class="visa" src="img/visa-grey.png" alt="visa"> 
              <img class="master" src="img/master-grey.png" alt="master"> 
            </div> 
          </div> 
        </div> 
        <div class="footer-right__bottom"> 
          <p> 
            Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum.<br> «Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum<br> Lorem ipsum 
          </p> 
        </div> 
      </div> 
    </div> 
  </footer> 
</body> 
 
</html>

READ ALSO
Очерёдность доступа к мьютексу в C++

Очерёдность доступа к мьютексу в C++

Есть 2 потока (a, b) и 1 мьютексМьютексом уже владеет какой то другой поток (не a и не b)

101
Передача параметров в классах с наследованием

Передача параметров в классах с наследованием

Всем привет! Вроде и простое, но не могу понять, как передавать параметрыХочу передать по значению, хотя не важно как

265
Вращение фигуры в openGL относительно заданной точки

Вращение фигуры в openGL относительно заданной точки

Можно ли задать точку вращения для фигуры в openGl? Используя glRotatef() вращается вся плоскость относительно центраДля примера: мне нужно вращать...

220
Как подключить Local Storage к скрипту?

Как подключить Local Storage к скрипту?

Есть переключатель:

237