Tilonorrinco

Новенький
  • Публикации

    15
  • Зарегистрирован

  • Посещение

  • Дней в лидерах

    2

Последний раз Tilonorrinco выиграл 21 февраля

Публикации Tilonorrinco были самыми популярными!

Репутация

6 Обычная

О Tilonorrinco

  • Звание
    Новичок

Информация

  • Пол
    мужской
  1. grovskiy, Семантика дает большой простор для вкусовщины, имхо. Уж слишком все субъективно. Вот что бы я исправил: 1. тэги <header>, <footer> -- обязательно прописать класс, т.к. их может быть несколько на странице 2. слово "Доставка" в шапке сайта -- не <strong> (нет здесь смыслового выделения), а <b> или <span> 3. Слоган сайта в h1? Я бы не делал его заголовком, но тут кому как нравится 4. подвал: зачем список? Если в режиме работы он еще более-менее подходит, то для этого блока: присылайте резюме info@ggpa.ru список вообще никак не подходит.
  2. Hasiev, 1. Одна и та же ошибка повторяется по всех трех ваших макетах: при уменьшении экрана пропорции макета нарушаются. Попробуйте уменьшить размер окна и обратите внимание на то, что творится с сеткой. В этом макете нужно будет поработать с параметрами width у блоков. Не понятно зачем блоку container задано свойство max-width в 990px, в то время как gallery-row задано свойство min-width в 1014px, зачем? Хедеру с градиентом надо будет задать минимальную ширину, т.к. при уменьшении экрана ширина этого блока, а значит и фонового изображения будет равняться ширине экрана браузера. 2. Оранжевая звездочка на фотографиях -- это не декоративный элемент, а элемент управления (по-моему, это кнопка "добавить в избранное"), поэтому лучше сделать ее ссылкой, а не псевдоэлементом 3. Иконки социальных сетей вы хорошо сделали (я о невидимом тексте), но работу нужно довести до конца и прописать картинкам alt (логотип, изображения в галерее).
  3. Серия head first (html, css, js etc.) -- неплохое начало, если опыта в разработке сайтов раньше не было. Я сейчас читаю про javascript, мне нравится, думаю, другие книги серии не хуже. По CSS могу еще посоветовать книгу Макфарланда "Большая книга CSS", тоже очень неплохо разжевывается материал. Сам я по ней учил css. Книга Мейера тоже очень хорошая, но читается сложнее, чем Макфарланд или Head First. Но если любите сухие тексты, где все максимально по делу, Мейер хорошо подходит. Видеозаписи интенсива htmlacademy (базовый, продвинутый) можно скачать бесплатно в сети, они довольно хорошие. Для того, чтобы понимать, какие технологии используются в верстке, и вообще, о практической стороне этого дела. Участвовать в интенсиве, имхо, нет особой нужды. Главное слишком в книги не углубляться, и много практиковаться.
  4. У меня в примере использованы обычные кавычки, а в макете -- закрывающая "лапка" (”), исправьте в псевдоэлементе content: "”";
  5. John106, 1. Такую же, какую и у дочернего блока wrapper, т.е. .slider { min-width: 1170px; }, аналогично для классов head, foot. 5. Как-то так: https://jsfiddle.net/7ou5cLyo/
  6. John106, 1. При уменьшении экрана обрезаются изображения в блоках foot и slider. Можно назначить им в стилях минимальную ширину, тогда будет норм. При использовании фоновых изображений нужно прописать также и фоновый цвет, похожий на это изображение, чтобы, в случае проблем с загрузкой фоновых изображений текст на этом фоне хорошо читался. При задании шрифтов также полезно помимо основного шрифта прописывать также и несколько безопасных. 2. Тэгу header нужно прописать класс, на будущее, т.к. хедеров может быть несколько на странице. 3. Названия классов не очень информативны. Css сложнее читать, и приходится смотреть в разметку. Что такое line-bot? Что содержится в этом блоке, какое место этот блок занимает по отношению к другим блокам? Сложно сказать, если не заглянуть в html. Еще один пример: блок внутри секции works назван la-works. Не понятно, что такое 'la'. Информативнее, имхо, будет works-item (классика). 4. Уменьшение прозрачности шрифта при наведении на кнопку -- некрасиво. Читабельность пропадает. Цвет текста лучше не изменять, вполне достаточно более темного фона. Такие большие отступы я бы повесил не на саму ссылку, а на slider: прописал бы ему минимальную высоту или что-то в этом роде. А ссылке прописал бы только верхнее поле. А то получается -- удалили кнопку -- slider уменьшился до смешных размеров. 5. С оформлением цитаты как-то сложно вышло. Зачем элемент оформления (кавычка) вынесен в разметку? Можно ведь использовать для этого псевдоэлементы. Почему такие странные поля у параграфа с цитатой (кстати, для такой цитаты можно использовать тег <blockquote>): зачем прописывать ему отступ слева в 217 пикселей, чтобы просто выровнять его по центру?
  7. Так и должно быть. NaN != NaN.
  8. inono, 1. id используются для идентификации элементов страницы при выполнении скриптов, для создания якорей. 2. Псевдоэлементы нужны для создания дополнительных сущностей в коде html и последующей их стилизации. Псевдоэлементы я изучал по книге Макфарланда "Большая книга css", но, мне кажется достаточно будет любой статьи по теме и тренировки в песочнице, там все очень просто: https://habrahabr.ru/post/154319/ 3. по дизайну сайта ничего толкового сказать не могу, т.к. не очень в этих вещах разбираюсь. Как рядовой пользователь могу сказать, что явного неприятия дизайн не вызывает, однако и эмоции "офигенно!" тоже.
  9. 1) Откажитесь от использования id, чтобы не было проблем с каскадностью. (заодно не придется так часто использовать !important, что тоже не очень хорошо) 2) Названия для стилей лучше давать осмысленные, связанные с предназначением блока, а не с его оформлением (класс h1_and_picture -- не есть гуд, класс section-title уже лучше). 3) Самое главное: очень много лишней разметки, цель которой -- только оформление страницы. Все оформление лучше вынести в css: вместо пустых дивов можно использовать псевдоэлементы, вместо бессмысленного <hr> на логотипе просто использовать нижнюю границу у тега h1 или псевдоэлемент. 4) С шапкой очень мудрено вышло, что-то вроде браузерного фотошопа Зачем обрабатывать эту тяжеленную шапку (http://f0115661.xsph.ru/ik_sauna.jpg) в браузере, накладывая дополнительные слои с фильтрами, градиентами и пр., если все это можно сделать в фотошопе и просто вставить одну уже обработанную картинку? Аналогично в подвале: под логотип студии с прозрачными буквами подкладывается дополнительный слой (дополнительный пустой див в разметке) для того, чтобы сделать эти буквы темнее цветом. 5) По тегам: тегов <nav>, <header>, <footer> на странице может быть несколько, поэтому на перспективу лучше сразу же присваивать им классы и задавать стили не элементу, а классу.
  10. SatoRi, на самом деле все просто: https://jsfiddle.net/Tilonorrinco/xgaawnhb/ Здесь псевдоэлемент (тот, который .wrapper:before) стилизован под рамку, растянут по ширине блока-обертки (80% от wrapper) и отцентрирован по-вертикали.
  11. 1) полосы -- фон, который задается либо через изображение, либо через градиент 2) фон этот, скорее всего, присвоен блоку-обертке, который является родительским для двух других блоков (с текстом who we are, what we do) 3) изображения можно обрезать через css, поместив их в контейнер (типа <figure>) с overflow: hidden. Но проще всего обрезать в фотошопе. 4) рамку, разделяющую два блока можно реализовать через псевдоэлемент, присвоенный блоку-обертке, отцентрированный вертикально с помощью абсолютного позиционирования. Псевдоэлемент этот может быть как фиксированной высоты, так и растягивающийся в зависимости от высоты блока-обертки. 5) Сетку можно строить как через флоат, так и через инлайн-блок, у каждого способа свои плюсы и минусы.
  12. fowl, если пользуетесь хромом: 0. переходите на сайт с иконками 1. Нажимаете ctrl+alt+i (или f12) чтобы вызвать инспектор. Появляется новая панель (по умолчанию выходит справа). 2. Жмете ctrl+shift+c (или иконку с изображением стрелки) 3. наводите курсор на то место, где показывается иконка, кликаете. 4. в верхней части панели отображается html код, содержащий инспектируемый элемент (это <div class="lp-address-info lp-address-info-archive lp-icon">). В нижней части -- css код, задающий форматирование элемента. В данном случае видим, что иконка загружается с помощью псевдоэлемента ::before .lp-address-info.lp-icon:before {background: url(../Camafon2/images/icon-map.png);}
  13. Через инспектор (ctrl+shift+i): (http://camafon.ru/wp-content/themes/Camafon2/images/icon-map.png) (http://camafon.ru/wp-content/themes/Camafon2/images/tel.png)
  14. Мужика тоже можно сделать через псевдоэлемент. https://jsfiddle.net/bth3uuL4/3/
  15. Я немного поизвращался в песочнице и получилось вот так: https://jsfiddle.net/bth3uuL4/2/