Ответы пользователя по тегу HTML
  • Как наложить картинку поверх ссылок так, чтобы они нажимались?

    apospeliri
    @apospeliri
    для псевдоэлемента &:before
    position: absolute
    left, top - задать !
    content: ''
    background-image: url("../img/leaf1.png")
    width, height - обязательно задать !!!
    background-position: 50% 50%;
    background-size: 100% 100%;
    Ответ написан
  • Оцените пожалуйста вёрстку(2)?

    apospeliri
    @apospeliri
    Правило дизайн не обсуждаю, но тут конечно дизайн просто финиш, очень жаль при оценке верстки тяжело отключить визуальную составляющую, и не понятно где косяки дизайна а где верстки.
    Исхожу из того что это пиксель перфект :)
    Если хочешь чтобы оценили верстку нужны исходники.

    1.Кнопка 'Show me More'
    class='btn get-tools__btn'
    меняем на
    class='btn btn--get-tools', все кнопки в отдельный файл.
    2.Моя рекомендация, если есть container, и есть секции на 100% ширины экрана то лучше сделать для них класс container-fluid (отдаем должное Boostrap).
    3.Тексты, заголовки и.т.д. Можно делать вложенные по БЕМ, или если страниц много и тексты в разных местах повторяются то
    h2 class="collection__title"
    меняй на
    h2 class="text text--50 text--red text--lh-1"
    4.Navbar не хватает ховеров, на флаги и на социальные ссылки.
    5.Про отсут слева и выпадающие меню тебе уже сказали.
    6. Слайдер не работает :(
    7. При клике на элемент слайдера, появляется рамка, а почему у рамки сверху не закруглены края ?
    8. quantity__events ховер срабатывает сразу не две кнопки, плюс и минус как то странно, и кнопки не работают.
    9. CSS медиа лучше сразу писать к нужному элементу.
    10.Скриптов мало, скрипты не сжаты.

    Верстка по БЕМ в целом все хорошо, на медиа не разваливает.
    Классы названы хорошо читаемо, есть контейнеры, ховеры, даже анимацию добавил ;), иконки через классы на бэкграунды, html/css сжат.

    P.S. Ivan Bogachev хорошо расписал, что визуально сразу режет глаз.
    Ответ написан
    Комментировать
  • Как сверстать эти блоки?

    apospeliri
    @apospeliri
    к блоку в котором 'крутой слоган' и сетка с элементами:
    position - relative;
    и дальше псевдоэлементы к нему (before, after)
    position - absolute
    (одному картинку вешаешь на бэкграунд, другому фон)
    Ответ написан
    Комментировать
  • Как еще ускорить верстку?

    apospeliri
    @apospeliri
    Из того что я прочитал в твоих комментариях, то я думаю что ты примерно делаешь что и я в свое время.
    Рекомендую связку BEM + Atomic css.
    Например у тебя есть несколько блоков и них есть заголовки.
    вместо:
    .block1__main-title
    .block2__main-title
    пишешь
    block1
    h2 class="text text--20 text--uppercase text--gray-lite text--space-05 mb-20
    block1

    block2
    h2 class="text text--14 text--gray-lite text--decorate-red text--space-1 mb-15"
    block2

    И теперь если к тебе прибегает дизайнер и говорит, ой надо срочно поменять в blocke1 размер шрифта с 20 на 24, ну не проблема , быстро в html меняешь один класс и погнали.
    Я когда первый раз услышал мне идея дико не понравилась у меня же есть BEM, НО в чем плюсы.
    первое берешь из bootstrap flex утилиты(d-flex, justify, align-content...), и половина вложенных блоков по BEM пропадает.
    И самая вкусная фишка все это дело можно использовать с брейкпоинтами, например
    pl-20 и pl-md-35. Это так экономит нервы, когда прибегает дизайнер, ой тут короче на вот это страницу в этом блоке тут внизу надо немного текст поменять и да, еще padding слева и вот тут еще давай кнопулечку справа добавим, и да это только на этой странице, на других давай все оставим все как есть.

    P.S. Вообще лучше на живом примере посмотреть твою верстку, и дать какой то совет.
    Ответ написан
    3 комментария