1

'use strict';

(function () {
  var navSection = document.querySelector('.main-nav');
  var toggler = navSection.querySelector('.main-nav__toggle');

  navSection.classList.remove('main-nav--nojs') &
  navSection.classList.remove('main-nav--opened') &
  navSection.classList.add('main-nav--closed');

  let clickTogglerHandler = function () {
    if (navSection.classList.contains("main-nav--closed")) {
      navSection.classList.remove("main-nav--closed");
      navSection.classList.add("main-nav--opened");
    }
    else {
      navSection.classList.add("main-nav--closed");
      navSection.classList.remove("main-nav--opened");
    }
  };

  toggler.addEventListener('click', clickTogglerHandler);
})();
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  position: relative;
  height: 100%;
}

body {
  min-width: 320px;
  font-family: 'PT Sans', 'Arial', sans-serif;
  font-size: 17px;
  line-height: 30px;
  color: #233539;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  body {
    min-width: 768px;
  }
}
@media (min-width: 1150px) {
  body {
    min-width: 1050px;
  }
}
.main-container {
  background-image: url("https://images.unsplash.com/photo-1517788783049-b396d32b5852?ixlib=rb-0.3.5&s=75deaa14f86707d43f183bc3aa60b547&auto=format&fit=crop&w=1029&q=80 1029w");
  background-size: cover;
  background-position: top;
}

@media (min-width: 1150px) {
  .main-container {
    background-image: url("https://images.unsplash.com/photo-1517788783049-b396d32b5852?ixlib=rb-0.3.5&s=75deaa14f86707d43f183bc3aa60b547&auto=format&fit=crop&w=1029&q=80 1029w");
    background-position: 0 -80px;
  }
}
.main-header {
  min-height: 50px;
  background-color: #233539;
  padding-top: 20px;
}

.main-header__container {
  position: relative;
  display: flex;
  flex-direction: column;
}

.main-header__logo {
  text-align: center;
  margin-bottom: 10px;
}

.main-header__logo-text {
  font-family: 'PT Sans Bold', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

@media (min-width: 768px) {
  .main-header {
    padding-top: 0;
  }

  .main-header__container {
    width: 768px;
    min-height: 60px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 50px;
    padding-right: 50px;
    margin: 0 auto;
  }

  .main-header__logo {
    margin-bottom: 0;
  }
}
@media (min-width: 1150px) {
  .main-header__container {
    width: 1150px;
    padding-left: 100px;
    padding-right: 100px;
  }

  .main-header__logo {
    margin-bottom: 0;
  }
}
@media (min-width: 1441px) {
  .main-header__container {
    width: 1440px;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .main-nav {
    position: relative;
  }

  .main-nav__list {
    width: 100%;
  }

  .main-nav--closed .main-nav__list {
    display: none;
  }

  .main-nav__toggle {
    display: none;
    position: absolute;
    z-index: 50;
    top: -30px;
    right: 30px;
    padding: 0;
  }

  .main-nav--closed .main-nav__toggle {
    display: block;
  }

  .main-nav--opened .main-nav__toggle {
    display: block;
  }

  .main-nav--nojs .main-nav__toggle {
    display: none;
  }

  .main-nav--opened .main-nav__wrapper {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    background-color: rgba(35, 53, 57, 0.95);
  }

  .main-nav--nojs .main-nav__wrapper {
    position: static;
  }
}
@media (min-width: 768px) {
  .main-nav__toggle {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }

  .main-nav__wrapper {
    display: flex;
    justify-content: space-between;
    width: 500px;
  }
}
@media (min-width: 1150px) {
  .main-nav__wrapper {
    width: 700px;
  }
}
.navigation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navigation-list__element {
  margin-bottom: 10px;
}
.navigation-list__element:last-child {
  margin-bottom: 0;
}

.navigation-list__element-link {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}
.navigation-list__element-link--active {
  color: #dd3366;
}

@media (min-width: 768px) {
  .navigation-list {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
  }

  .navigation-list__element {
    margin-right: 20px;
    margin-bottom: 0;
  }
  .navigation-list__element:last-child {
    margin-right: 0;
  }
}
@media (min-width: 1150px) {
  .navigation-list__element {
    margin-right: 35px;
  }

  .navigation-list__element-link {
    font-size: 19px;
  }
  .navigation-list__element-link:hover, .navigation-list__element-link:focus {
    color: #dd3366;
  }
  .navigation-list__element-link:active {
    opacity: 0.3;
  }
}
.page-main {
  min-height: 85vh;
}

.main-preview {
  padding-top: 70px;
  padding-bottom: 50px;
}

.main-preview__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  margin: 0 auto;
}

.main-preview__title {
  font-family: 'PT Sans Bold', sans-serif;
  font-size: 28px;
  margin: 0;
  margin-bottom: 10px;
}
.main-preview__title::before {
  top: -10px;
}

.main-preview__subtitle {
  font-family: 'PT Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}
.main-preview__subtitle::before {
  bottom: -10px;
}

.main-preview__title::before,
.main-preview__subtitle::before {
  position: absolute;
  content: '';
  width: 230px;
  height: 2px;
  left: 45px;
  background-color: #233539;
}

@media (min-width: 768px) {
  .main-preview {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .main-preview__container {
    width: 768px;
  }

  .main-preview__title {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .main-preview__title::before {
    top: -15px;
  }

  .main-preview__subtitle {
    font-size: 23px;
  }
  .main-preview__subtitle::before {
    bottom: -10px;
  }

  .main-preview__title::before,
  .main-preview__subtitle::before {
    width: 250px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 900px) {
  .main-preview {
    padding-top: 130px;
  }
}
@media (min-width: 1150px) {
  .main-preview {
    padding-top: 90px;
  }

  .main-preview__title {
    font-size: 45px;
  }

  .main-preview__subtitle {
    font-size: 29px;
  }

  .main-preview__title::before,
  .main-preview__subtitle::before {
    width: 400px;
  }
}
@media (min-width: 1330px) {
  .main-preview {
    padding-top: 170px;
  }

  .main-preview__container {
    width: 1150px;
  }
}
@media (min-width: 1700px) {
  .main-preview {
    padding-top: 260px;
  }

  .main-preview__title {
    font-size: 65px;
    margin-bottom: 50px;
  }
  .main-preview__title::before {
    top: -40px;
  }

  .main-preview__subtitle {
    font-size: 45px;
  }
  .main-preview__subtitle::before {
    bottom: -30px;
  }

  .main-preview__title::before,
  .main-preview__subtitle::before {
    width: 500px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 2100px) {
  .main-preview {
    padding-top: 370px;
  }
}
.main-footer {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #233539;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
}

.main-footer__text {
  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
  color: #ffffff;
  margin: 0;
}

@media (min-width: 1150px) {
  .main-footer__text {
    font-size: 16px;
  }
}
<body>
  <div class="main-container">
      <header class="main-header">
        <img src="https://unsplash.com/photos/pnwh6uARCQ4" alt="" width="200" height="200">
        <img src="https://monosnap.com/file/MWLOHUiYiptN6DoNB6PR2PThOrtYTU" alt="" width="200" height="200">
        <div class="main-header__container">
          <div class="main-header__logo">
            <span class="main-header__logo-text">ЛОГО</span>
          </div>
          <nav class="main-header__navigation main-nav main-nav--nojs main-nav--opened">
            <button class="main-nav__toggle" type="button">
              <span >Открыть меню</span>
            </button>
            <div class="main-nav__wrapper">
              <ul class="main-nav__list navigation-list">
                <li class="navigation-list__element">
                  <span class="navigation-list__element-link navigation-list__element-link--active">Главная</span>
                </li>
                <li class="navigation-list__element">
                  <a class="navigation-list__element-link" href="#">Пункт 1</a>
                </li>
                <li class="navigation-list__element">
                  <a class="navigation-list__element-link" href="#">Пункт 2</a>
                </li>
                <li class="navigation-list__element">
                  <a class="navigation-list__element-link" href="#">Пункт 3</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </header>

      <main class="page-main">
        <section class="main-preview">
          <div class="main-preview__container">
            <h1 class="main-preview__title">Title-title</h1>
            <h2 class="main-preview__subtitle">Subtitle-Subtitle-Subtitle</h2>
          </div>
        </section>
      </main>

      <footer class="main-footer">
        <p class="main-footer__text">© Copyright</p>
      </footer>
    </div>  
</body>

Здравствуйте, у меня есть страничка, которую сверстал — Страница на codeopen

Так вот, я не могу совладать с фоновым изображением. То есть, я на своей ширине браузера — 1440px выставил заголовок как мне хотелось бы чтобы он выглядел. Но так как изображение масштабируется в блоке (background-size: cover), то на разных ширинах Заголовок оказывается в разных частях картинки. Собственно вопрос в том, как можно зафиксировать мой заголовок, чтобы он всегда был по середине картинки (экран ноутбука) ? Картинку задаю в диве .main-container Хочется какое-то верное решение, чтобы не изобретать велосипед, не задавать постоянные padding на разных media requires.

4
  • Попробуйте способы с этого сайта, особенно вариант с display: table-cell: shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html Когда начинал эта шпаргалка много чему научила.
    – Telion
    5 фев 2018 в 1:01
  • @Telion, спасибо, шпаргалка конечно полезная, но как она относится к background-image ?:) 5 фев 2018 в 1:14
  • 1
    зафиксировать мой заголовок я думал это текстовый блок, а не картинка. Если хотите выровнять картинку по центру используйте фиксированные размеры. Например background-size: 100px 100px; background-position: 50%;
    – Telion
    5 фев 2018 в 1:16
  • @Telion, хм, да, это наверно то, что нужно. Думаю о фиксированном размере, но почему то не сделал так. Сам себя передумал, спасибо! Сейчас попробую тогда в адаптиве это все сделать, вроде получается 5 фев 2018 в 1:23

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.