Задать вопрос
  • Как сделать это при помощи grid?

    JamesHatfield
    @JamesHatfield
    Front-end developer
    Выровнял блоки как на примере, бэкграунды сами определите.
    <div class="main">
              <div class="main-gourmet"></div>
              <div class="main-carhartt"></div>
              <div class="main-adidas"></div>
              <div class="main-deep"></div>
              <div class="main-palace"></div>
              <div class="main-nike"></div>
          </div>


    .main {
    	height: 100vh;
      display: grid;
      grid-template-areas: 
          "gourmet gourmet carhartt" 
          "gourmet gourmet adidas"
          "deep palace nike";
      grid-template-columns: 3fr 3fr 3fr;
      grid-template-rows: 3fr 3fr 4fr;
      grid-gap: 15px;
      background-color: green;
    }
    .main-gourmet {
      grid-area: gourmet;
      opacity: 0.9;
      background-color: red;
    }
    .main-carhartt {
      grid-area: carhartt;
      opacity: 0.9;
        background-color: gray;
    }
    .main-adidas {
      grid-area: adidas;
      background-blend-mode: multiply, ;
      background-color: black;
    }
    .main-deep {
      grid-area: deep;
      opacity: 0.9;
        background-color: white;
    }
    .main-palace {
      grid-area: palace;
      opacity: 0.9;
        background-color: black;
    }
    .main-nike {
      grid-area: nike;
      opacity: 0.9;
      background-color: red;
    }
    Ответ написан
    1 комментарий
  • Как сделать это?

    PlugIN
    @PlugIN
    A Little Programmer
    Лучше использовать CSS flexbox (https://tproger.ru/translations/how-css-flexbox-works/ ; https://html5book.ru/css3-flexbox/). Просто нужно для себя понять, как он работает. Я набросал здесь не самый лучший вариант (форк от вашего скетча): https://codepen.io/theUniverseAsMatrix/full/rNeRMVV

    Раньше использовали float. Полезно будет посмотреть, как это сделано в Bootstrap: https://getbootstrap.com/docs/4.1/layout/grid/ Возможно, вы уже смотрели, но все же.

    Прим.: полупрозрачный белый абрис использован для демонстрации границ элемента.
    Ответ написан
    Комментировать
  • Как исправить сползание объектов?

    Enguipro
    @Enguipro
    Backend developer
    Форме вы зачем-то задали фиксированное позиционирование, поэтому при любых изменениях размера окна браузера и при прокрутке она у вас будет оставаться на одном и том же расстоянии от правого и нижнего краев окна.

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

    Почитайте про позиционирование, посмотрите уроки по вёрстке и научитесь форматировать свой код, тогда и вам самому, и другим будет легче в нем разбираться.
    Ответ написан
    1 комментарий