AlexZaw

у вас в стилях указано *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } отключите это правило или увеличьте размеры inner:before и подправьте ему маржины чтобы он был по центру

Так я ваш пример переделал, а именно размеры и поведение inner:before

Маленько переделал. Так? https://jsfiddle.net/AlexZaw/mx8qjut6/

покажите что у вас получилось, оттуда будем плясать дальше

<div class="box"> <div class="inner"></div> <div class="circle"></div> </div> *{ box-sizing: border-box;} .box{ width: 300px; height: 300px; border: 1px solid grey; position: relative; margin-top: 100px; background-color: #fff; } .inner{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .inner:before{ content: ''; display: block; width: 100px; height: 100px; border-radius:50%; box-shadow: 0 0 0 11px grey; position: absolute; top: -50px; left: 50%; margin-left: -50px; } .circle{ width: 100px; height: 100px; border: 1px solid grey; border-radius:50%; position: absolute; top: -50px; left: 50%; margin-left: -50px; background-color: #fff; box-shadow: 0 0 0 10px #fff } тени добавить труда не составит я думаю

А ведь верно как часто верное решение лежит на поверхности, стоит только использовать всеми позабытые таблицы Пускай не по назначению, но ведь просто и кроссбраузерно.

Без флексов только через JS, ну или нужно знать ширину кнопки.

Уже не правильно. Эмм... А это как понимать? Или вы имеете ввиду то, что иконка является одновременно ссылкой? Так одно другому не мешает, и не меняет принципов решения задачи

Я прекрасно понял автора, есть круглая белая иконка с прозрачным рисунком, при наведении на иконку она должна менять цвет, а прозрачность оставаться. Рабочий вариант с свг есть в теме выше, где там костыли? Есть вариант использования двух иконок с разными цветами фона и прозрачным рисунком. Создаются за 5 минут в фотошопе. В этом методе костылей опять же не вижу. Сделать картинку ссылкой и при ховере менять картинки тоже далеко не костыль. Объясните в чем же я заблуждаюсь?

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

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

Ну сделайте два варианта иконки с нужными цветами и меняйте их по ховеру, хоть с помощью свойств display, opacity, visibility хоть спрайтами сделайте... Других вариантов кроме как "продырявить" изображение все-равно нет.

А в чем проблема с помощью фотошопа сделать "дырку" в иконке? Ну или найти уже готовые "дырявые" иконки?

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

Покритикуйте, похвалите, оцените первую верстку пожалуйста. Хотя бы визуально. Если по поводу кода прокоментируете буду премного благодарен. http://alexzaw.github.io Исходники: https://yadi.sk/d/4Bhyui6-3Pkw3t Картинки все брались из сети, ссылка на видео из youtube, а не тегом чтобы не увеличивать размер архива

В том что у вас для лишек задан float:left. Отмените им обтекание, задайте строчно-блочный тип, а для ul задайте text-align:center; Выравнивание не работает для плавающих элементов

В .carusel__item убираем float: left; В .carusel__list убираем text-align:right добавляем margin: 0 auto;

Далеко не всегда 1 пиксель на мобильном устройстве равен 1 пикселю монитора. у Galaxy S8 например pixel ratio 4 к 1, это означает что его 1440x2960 в css превращаются в 360x740 https://mydevice.io/devices/

Любая сетка привязывается к разрешению девайса, более того, даже если сетки нет, то все равно дизайн привязан к разрешению девайса. Как нарисовано в макете так и отображается, если конечно верстальщик нормальный. У макета есть какая-то максимальная ширина из которой он не выйдет хоть на километровом экране. Или вы что то другое имели ввиду?

Совершенно верно, кто-то верстает по бэм, кто то использует вложенные селекторы, кто то smacss, кто то другие стили. Ваш друг прав, единого метода нет, это ведь не сборка высокоточных приборов Это почти искусство, всегда можно сказать - я художник, я так вижу

Академия и loftschool дают базовый уровень знаний, по крайней мере бесплатные уроки у лофтскула, у академии, даже в платных курсах, уровень не очень высокий, да там есть хороший урок по всем вариантам nth-*, но в основном те же базовые знания, поверьте, у меня там пройдены полностью все курсы, хорошо я хоть за них не платил Лучше видео от Лаврика посмотрите, намного полезнее на мой взгляд. А верстаете вы совершенно правильно, на мой взгляд, я все никак не могу заставить себя верстать по бэм

Если я правильно понял, то такая методология, которую вы встречали, кроме головной боли при адаптиве ничего не даст htmlacamedy конечно хороший ресурс, но у них там почти везде используются фиксированные размеры, но ведь вы так не верстаете. Можно кстати ссылочку на примеры про которые вы говорите? Хотелось бы глянуть

все зависит от ситуации, запретить вам никто не может. Вы случайно не с вариантом для мобильной версии замерили? :), Я понимаю если бы тут было много горизонтальных элементов на странице, а так, если вы все таки правильно измерили, это называется дизайнер дорвался до большого монитора

Паралакс на первом экране явно лишний так как начинает закрываться форма, плюс при экране в 1366 пикселей ссылка "Узнать больше о смартфоне" скрывается практически мгновенно. Да и в целом он реализован так что присутствует белая полоса между блоками. Да, и у компании с таким сайтом я бы не стал заказывать технику apple,. Если компания торгует совсем не дешевой техникой и при этом не может позволить себе красивый и качественный сайт, а пользуется каким то шаблоном, то это какая-то шарашкина контора.

В футере 3 колонки на самом деле, видно по разделителям. На мой взгляд тут вообще нет смысла в сетке, просто задать блокам процентную ширину. Для контента 50%, для футера 50%, 30%, 20%, а для мобильной версии прописать один медиа запрос в котором переопределить ширину блоков в 100%