Помогите с версткой

Ссылка на codepen

https://codepen.io/exairus/pen/VwZmpKp

 

Ссылка на landing(6mb)

https://dropmefiles.com/QMiDg

 

Верстаю далеко не идеально, пока учусь. 

Собственно,в чем суть проблемы

Суть проблемы

1.Блок Working

При сужении ширины экрана кнопка в блоке working__more делится пополам.

 

2.Блок Team.

Когда наводишь мышкой на блок team__item все вроде бы нормально затемняется,появляется и переходит, но когда проводишь мышкой над областью блоков team__level и team__info  - картинка становится opacity: 1.Здесь картинки нет, поэтому верьте мне на слово

 

Сложно разобраться в разметке. Просто влепи min-width: 262px кнопке

Сказочник сказал(а):↑

Сложно разобраться в разметке. Просто влепи min-width: 262px кнопке

Нажмите, чтобы раскрыть...

А в чем сложность? Обилие классов?

LeeHach сказал(а):↑

А в чем сложность? Обилие классов?

Нажмите, чтобы раскрыть...

Нет, я так понимаю, ты пытаешься в БЭМ.  Просто у тебя кнопка position absolute зачем-то, все как-то причудливо едет

Сказочник сказал(а):↑

Нет, я так понимаю, ты пытаешься в БЭМ.  Просто у тебя кнопка position absolute зачем-то, все как-то причудливо едет

Нажмите, чтобы раскрыть...

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

Меня конечно интересует больше вторая часть проблемы) + так к тому же при наводе на team__lvl, начинает "скакать верстка". А по другому сверстать не приложу ума вообще

1. Зачем ты используешь флекс в .working__blocks, и не используешь wrap, к примеру? Или все четыре блока должны остаться на одной строке? Конкретно по кнопкам убери перенос у текста и поставь паддинг в 1vw, у кнопок. Но это не самая большая проблема, ты не обращал внимание на то куда у тебя контент самого блока уезжает при уменьшении ширины? Поизучай флекс, хотя можно сделать и без него, чтобы у тебя элементы перестраивались, просто когда текст кнопок начинает переноситься, то дизайн к тому моменту выглядит совсем не очень.

Опять же паддинг у .working лучше сделать не статическим, либо менять через медиа запрос. 

 

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

И я не знаю на чем ты пишешь, но у тебя идее не показывает ошибки в тех местах, где ты опечатываешься? всякие " oacity: 0.7;" и так далее по тексту

 

Еще раз пробежался: не понимаю в принципе, зачем ты юзаешь флекс? либо изучи его и пользуйся нормально возможностями, либо в той мере в которой ты пользуешься им достаточно будет обычного варианта с инлайн-блок и относительные размеры

 

LeeHach сказал(а):↑

так к тому же при наводе на team__lvl, начинает "скакать верстка"

Нажмите, чтобы раскрыть...

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

 

2. Чтобы сама картинка не меняла опасити, пока ты находишься внутри тим айтем, тебе нужно вместо

.team__img:hover { opacity:0.2 }

сделать так:

.team__item:hover .team__img{opacity: 0.2}

cgwic сказал(а):↑

1. Зачем ты используешь флекс в .working__blocks, и не используешь wrap, к примеру? Или все четыре блока должны остаться на одной строке? Конкретно по кнопкам убери перенос у текста и поставь паддинг в 1vw, у кнопок. Но это не самая большая проблема, ты не обращал внимание на то куда у тебя контент самого блока уезжает при уменьшении ширины? Поизучай флекс, хотя можно сделать и без него, чтобы у тебя элементы перестраивались, просто когда текст кнопок начинает переноситься, то дизайн к тому моменту выглядит совсем не очень.

Опять же паддинг у .working лучше сделать не статическим, либо менять через медиа запрос. 

 

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

И я не знаю на чем ты пишешь, но у тебя идее не показывает ошибки в тех местах, где ты опечатываешься? всякие " oacity: 0.7;" и так далее по тексту

 

Еще раз пробежался: не понимаю в принципе, зачем ты юзаешь флекс? либо изучи его и пользуйся нормально возможностями, либо в той мере в которой ты пользуешься им достаточно будет обычного варианта с инлайн-блок и относительные размеры

Нажмите, чтобы раскрыть...

Спасибо за замечания, я смотрю как верстает один чел на youtube, параллельно читаю книгу и гуглю инфу. Flex'ы учу сейчас, поэтому не суди строго)

Пока это дизайн без медиазапроса

cgwic сказал(а):↑

1. Зачем ты используешь флекс в .working__blocks, и не используешь wrap, к примеру? Или все четыре блока должны остаться на одной строке? Конкретно по кнопкам убери перенос у текста и поставь паддинг в 1vw, у кнопок. Но это не самая большая проблема, ты не обращал внимание на то куда у тебя контент самого блока уезжает при уменьшении ширины? Поизучай флекс, хотя можно сделать и без него, чтобы у тебя элементы перестраивались, просто когда текст кнопок начинает переноситься, то дизайн к тому моменту выглядит совсем не очень.

Опять же паддинг у .working лучше сделать не статическим, либо менять через медиа запрос. 

 

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

И я не знаю на чем ты пишешь, но у тебя идее не показывает ошибки в тех местах, где ты опечатываешься? всякие " oacity: 0.7;" и так далее по тексту

 

Еще раз пробежался: не понимаю в принципе, зачем ты юзаешь флекс? либо изучи его и пользуйся нормально возможностями, либо в той мере в которой ты пользуешься им достаточно будет обычного варианта с инлайн-блок и относительные размеры

 

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

 

2. Чтобы сама картинка не меняла опасити, пока ты находишься внутри тим айтем, тебе нужно вместо

.team__img:hover { opacity:0.2 }

сделать так:

.team__item:hover .team__img{opacity: 0.2}

Нажмите, чтобы раскрыть...

По поводу сообщений об ошибках, у меня стоит brackets с emmet'ом.Это все)

Ну и последнее: если оченьочень хочется оставить такой дизайн, то добавь в разметке: .team__item>.team__helper

с таким стилем:

.team__helper {

z-index: -1;

bottom: -50px;

width: 100%;

height: 100px;

background: #fff;

position: absolute;

}

LeeHach сказал(а):↑

Flex'ы учу сейчас

Нажмите, чтобы раскрыть...

если с английским норм и такой вариант зайдет, мне нравится как организованы курсы на scrimba

LeeHach сказал(а):↑

По поводу сообщений об ошибках, у меня стоит brackets с emmet'ом.Это все)

Нажмите, чтобы раскрыть...

у меня с бракетсом как-то не заладилось, но кажется там должны быть линтеры под css, я вообще в последнее время как-то расслабился и ушел на вебшторм, но для вскода точно есть линтеры. 

Кстати, попробуй заюзать какой-нибудь препроцессор, или вообще postcss, намного внятнее код получается, плюс линтеры, ну и куча доп плюсов.

В связке с parcel достаточно удобно получается, postcss там из коробки.

cgwic сказал(а):↑

Ну и последнее: если оченьочень хочется оставить такой дизайн, то добавь в разметке: .team__item>.team__helper

с таким стилем:

.team__helper {

z-index: -1;

bottom: -50px;

width: 100%;

height: 100px;

background: #fff;

position: absolute;

}

 

если с английским норм и такой вариант зайдет, мне нравится как организованы курсы на scrimba

у меня с бракетсом как-то не заладилось, но кажется там должны быть линтеры под css, я вообще в последнее время как-то расслабился и ушел на вебшторм, но для вскода точно есть линтеры. 

Кстати, попробуй заюзать какой-нибудь препроцессор, или вообще postcss, намного внятнее код получается, плюс линтеры, ну и куча доп плюсов.

В связке с parcel достаточно удобно получается, postcss там из коробки.

Нажмите, чтобы раскрыть...

я думал сверстать хотя бы 10 лендосов, а потом уже переходить на препроцессоры.Я не знаю как лучше в этом плане, где то читал что если не можешь писать код на обычном css'е, лучше не лезть в препроцессоры. Как пример, я еще недостаточно знаю те же флексы, хотя как мне казалось немного знаю) Я пока о препроцессорах знаю,что можно создать переменную,чтобы допустим не писать один и тот же цвет по 100 раз в коде

переменные: так чтобы для смены цветовой схемы и тп правился лишь один файл, к примеру

кста, переменные уже вроде всеми поддерживаются

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

кастомные селекторы, миксины

autoprefixer

ну и линтер

Это из базового набора.

 

по мне это не меняет семантики CSS, но упрощает многие моменты и повышает продуктивность, по моим ощущениям