Ответы пользователя по тегу Вёрстка
  • Как это сверстать? Фотоколлаж?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Сама стилистика называется masonry (кирпичная кладка). Без js сделать именно так не получится пока. В гридах это есть, но только за флагом. В будущем возможно это будет везде, но пока так.

    Можно попробовать ещё через колонки сделать, но это все равно будет немного не то.
    Ответ написан
    Комментировать
  • Как правильно застилить футер?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    В общем контейнере footer__column'ы с помощью флексов и гридов разбивается на раз, а всё остальное - это прям совсем простота, имхо, даже думать не нужно.
    Ответ написан
    Комментировать
  • Как добавить ссылки в select?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Поставьте первым пунктом пустое значение - у вас сейчас у селекта значение первого пункта и события onChange не происходит, потому что пункт не меняется.

    Или поставьте рядом кнопку типа "Перейти", и событие повесьте на неё.
    Ответ написан
  • Какой скрипт подходит для решения?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Делаешь div с фиксированной позицией во весь экран (дополнительно на body хорошо поставить width: 100%; height: 100vh; overflow: hidden).

    После скриптом ждёшь нужный момент или просто определённое время (setTimeout), после чего вешаешь на блок с логотипом ещё один класс, в котором есть анимация сдвига. По окончании анимации блок удаляешь из DOM.
    Ответ написан
    Комментировать
  • Оцените пожалуйста вёрстку(2)?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Присоединяюсь к Ivan Bogachev, особо добавить даже нечего особенно, так по мелочи резанули такие вещи:

    В первом:
    - Очень маленькие иконки соцсетей, в них мышкой сложно попасть (те, которые наверху)
    - У постов/записей картинки не имеют ссылок. Опыт показывает, что достаточная часть пользователей будет нажимать на картинки, а не на текст.
    - У footer'a padding-bottom аж 140px, это многовато.
    - Мобильное меню - есть, но не работает. Это нужно исправлять.
    - В мобильной версии записи из aside-posts не во всю ширину, что неприятно контрастирует с соседними элементами.

    Во втором:
    - Это видимо дизайн такой.... Две плашки выглядят, как будто неверно отрисовался компонент заголовка или его два раза вывело.
    - Первый блок по левому краю не соотносится с остальными.
    - Социальные кнопки такие же неудобно маленькие. Вообще желательно таким кнопкам добавлять с помощью padding область, которая так же будет активна и соотнесена с этой кнопкой и позволит снизить число "промахов" у пользователя.
    - Качество изображений. Да, это демо-версия, тренировочная работа. Но визуал делает своё дело.

    В качестве источника идей для того, что ещё можно попробовать сверстать, рекомендую Behance, там много классного дизайна, есть на чем набить руку (ссылку на такие работы прикрепляю).
    Ответ написан
    Комментировать
  • Как грамотно реализовать 1экран лендинга во всю высоту браузера?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Сделайте .box флексом, внутренности оберните в ещё один контейнер и ему выставите равнение по центру. Где-то вот так:

    .box {
        display: flex;
        width: 100%;
        height: 100vh;
    }
    .box__inner_wrap {
        display:  block;
        width: 100%;  // или какая нужна
        margin: auto;
    }


    У других элементов уже настроиваете размеры, отступы и прочее. Используйте медиа-запросы, чтобы подогнать под нужные вам размеры экрана.
    Ответ написан
  • Что делать, если не запускается Koala компилятор на WinXP?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Коала очень капризная к пути пользовательской папки - чтобы только латиница.

    Можете попробовать scout.app - он такой же по своей сути. Ну или переходите на gulp.
    Ответ написан
    1 комментарий
  • Есть ли какие нибудь недочеты по сверстанной странице?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Дополню:
    - на мобильной версии секция с фактами немного расплылась (первый блок уже остальных)
    - в блоке с формой очень забавно получилось: вы выделили два слова красным, а белыми получилась более яркая фраза "и получите предложение конкурентов"; а вот слова "выгоднее" и "уже сегодня" как то теряются.

    Возможно, при открытии меню можно зафиксировать основной контент, чтобы не скроллился.
    Ответ написан
    1 комментарий
  • Лучший вариант создания мобильного меню на сайте?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Лучше, конечно, использовать чистый css без js. Ещё можно подключить библиотеку на php, называется Mobile-Detect - она определяет тип устройства, с которого заходит посетитель. Получая тип устройства, можно выводить различное меню для мобильных устройств и десктопов.
    Ответ написан
    Комментировать
  • Как реализовать переход между страницами сайта?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Для начала попробуйте стандартный подход, предусмотренный WordPress - при загрузке страницы / переходе на другую обновляются вкладка браузера и заново рисуется страница.

    В данном случае header/footer будет автоматически строиться - их можно прописать только один раз, а WP сам всё склеит. Вот контент на странице будет подтягиваться с базы данных, а если уникальная страница - с соответствующего файла.
    Ответ написан
    4 комментария
  • Wordpress. Как "обвести страницы в рамку"?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Тут с программированием ничего общего нет, только вёрстка - html + css. Нужно найти класс, который назначен на блок с контентом, затем найти его в файлах стилей (обычно style.css, но это не точно), и там уже прописать либо бордеры, либо тень - что будет лучше выглядеть. Опционально, внутренние (padding) и внешние (margin) отступы.
    Ответ написан
    Комментировать
  • Нужно ли верстать внутренние страницы, если производишь посадку под WP?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Если у вас главная страница по логике и отображению такая же, как и внутренние - тогда нет, не нужно.
    Почитайте про устройство тем WordPress, иерархию файлов - там этот вопрос разбирается.
    Ответ написан
    Комментировать
  • Как верно реализовать автозаполнение формы с подсказками Google Pay?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Насколько понял данные по карте автоматически предлагаются (при наличии правильных мета в разметке), если они есть: Автозаполнение форм Google Pay.

    Поэтому, скорее всего, если нет данных по карте в аккаунте, то предложений оплатить не будет.
    Ответ написан
    1 комментарий
  • Как сделать прозрачные буквы?

    anatoly_kulikov
    @anatoly_kulikov
    Помог ответ? Отметь решением!
    Согласен с предыдущими комментаторами, обернуть в span и навесить стиль color: rgba(255,255,255,0.5)
    Ответ написан
    Комментировать