Ответы пользователя по тегу Вёрстка
  • Как создают такие Landing Page?

    tendkuh
    @tendkuh
    PHP sucks, it's very important to remember, folks
    Верхняя картинка полностью растягивается по ширине независимо от разрешения, а её нижняя часть сделана белым цветом, чтобы не контрастировать на фоне нижнего блока, который стыкуется с вашим изображением:
    5d2d4e951dccc629801612.gif
    рис. Что-бы понять как это работает, надо сделать CTRL+SCROLLDOWN и CTRL+SCROLLUP

    Поскрольте сайт в браузере с зажатым контрол вверх и вниз, и вы увидите что нижний блок становится то выше, то ниже. Это потому что, высота изображения стало быть выставлена в auto; Вы заметите грань над надписью "We specialize in", если будете смотреть внимательно, она ровная, между картинкой и низом, в какойто момент она заметно заползает на изображение при масштабировании. Но по факту, это изображение прячется под неё, когда оно не вмещается

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

    https://www.w3schools.com/css/css_rwd_images.asp
    Ответ написан
  • Можно ли в атрибуте alt писать camelcase?

    tendkuh
    @tendkuh
    PHP sucks, it's very important to remember, folks
    Нет нельзя. C технической точки зрения возможно, но это совсем не будет "Useful".
    Атрибут alt служит только для указания альтернативного текста изображениям/формам, в прозе.

    Google ждёт от вас что текст с CamelCase будет в теге <code></code>

    Проще говоря, вам нужен текст описательный изображению, если оно недоступно, для роботов, и скринридеров.
    Не каждый скринридер сможет нормально прочитать такой текст, который вы хотите туда поместить.

    Атрибут alt="" у изображения должен быть обязательно, но не обязательно в него чтото заполнять.
    Если вы не знаете что написать в атрибут, то Googlе рекомендует его создать, и оставить пустым.
    Мой вам совет, лучше не трогайте его вовсе. Просто оставьте его не заполненным, ради своего же блага.
    https://developers.google.com/web/fundamentals/acc...

    Есть ли разница между img card, imgCard, img_card

    Между ними нет разницы, они все три плохие. Правильный вариант: An image of a card или Изображение карточки
    Ответ написан
  • Как сделать текст в две строки?

    tendkuh
    @tendkuh
    PHP sucks, it's very important to remember, folks
    <h1>Заголовок</h1>
    <p>Описание...</p>

    H1 и P оба "блочные" элементы, они начинаются с новой строки и без флексбоксов по умолчанию.
    Просто ничего не нужно делать.
    Ответ написан
  • Почему browsersync не обновляет страницу при верстке?

    tendkuh
    @tendkuh
    PHP sucks, it's very important to remember, folks
    Переустановите Node.JS (при переустановке убедитесь что галочка "npm" стоит)
    Затем, откройте cmd или powershell от имени администратора и напишите npm install -g browser-sync

    Если вы работаете из Windows, то создайте txt файл с этим содержанием:
    browser-sync start --server --directory --files="**/*"

    переименуйте его расширение на *.bat

    Поместите этот файл в папку, в которой лежат нужные вам файлы для обновления, и кликните 2 раза по нему.

    Если вы работаете на потоке, то вам потребуется плагин для Gulp и написать таску
    Ответ написан