Верстаю пикрил 2/3/4, есть некоторые вопросы, ПАМАГИТЕ!!!Блок, котрый под менюшкой, где предлагается скачать приложение - header, секция внутри header, секция под header, что-то другое?Как делать этот косой background, использовать clip-path: polygon(); для блока, или делать как-то по-другому? А что с треугольничком над картой, тоже юзать clip-path: polygon(); ?В макете он вставлен svg-шкой, может просто экспортировать и добавить его на страницу так же svg-шкой?
Меню где лого + меню это блок header он фиксированный либо абсолютныйБлок где предлагается скачать приложение называется heroКосые можно делать по разному, можно клипом, можно отдельным блоком
>>205630282>можно отдельным блокомЭто как? Сделать пиздец широкий блок и повернуть его на нужный градус, подложив под блок, которому нужен косой верх?
>>205630127Пиздец школьника порвало, мамка знает, что ты не спишь? >>205630185Какой пиар, какое говно, шизоид? Ты тред читал? Хули ты пиздишь, быдло ебаное? >>205630275Ебет
>>205630433Бекграунд нахуяч и или бленд или z-index вставь. Но вообще уебански выглядит, нахуй так делать, этож информативный элемент и на нем какая-то залупа нависла, причем со стороны скролла, т.е. юзер первым делом увидит эту хуйню.
Есть ещё такой вариант: не делать эту залупу, потому что дизайнер пидор, а заказчику скорее всего не заметит отсутствия этой залупы.
>>205630558>Бекграунд нахуячМожно сделать косой background? Сделать градиент и как-то его повернуть, чтобы стал косым? >блендКак может помочь эта штука? >z-index вставьТы про это >>205630401 ?
>>205630433Всегда верстаю такие штуки с помощью псевдоэлементов, если это декоративное, и с помощью background, если сверху есть контент. В твоем случае я бы импортнул этот треугольник в пнг, и просто вставил бы его в бэкграунд. Не изобретай велосипеды, используй проверенные штуки - на этих макетах тебе нужна совместимость с ие-11, не забывай. Этот пнг не будет весить почти нихуя.
>>205630978В дополнение - первый элемент (серый треугольничек) можно сделать псевдоэлементом ::before (со 100% шириной и какой там тебе нужно высотой) к секции с серым бэкграундом. Можешь отрисовать его программно, если умеешь, а можешь так же импортнуть картинкой и вставить.
>>205631087Алсо, умеешь инлайнить SVG в цсс? Можешь вынуть треугольник в свг из фш, а потом пропустить его через вот эту штуку, и вставлять уже в свг как бэкграунд без всяких импортов.https://yoksel.github.io/url-encoder/
>>205630769А можно задать этому треугольнику width > размера экрана, чтобы только одна половина треугольника была видима и создавала эту косую штуку над секциями?
>>205631167Можешь не отвечать на этот ответ, я понял, что спросил хуйню, можно же сделать прямоугольный треугольник
>>205629957 (OP)С хедером не понял тебя, изъяснись как человек.Любая косая графония делается вставкой свг, пнг и для особо изъебистых - клип-пасом, но я на практике никогда не использовал это свойство.
>>205631087>Можешь отрисовать его программноУже понял, как такое делать >>205631139>Алсо, умеешь инлайнить SVG в цсс?Да, думал просто вставить треугольник над картой как svg, он бы нормально адаптировался, можно сделать его резиновым? >Можешь вынуть треугольник в свг из фш, а потом пропустить его через вот эту штукуЧто за штука, как работает? Я просто с телефона сейчас, нет возможности опробовать. Если долго объяснять, не хочется писать много буков, то не объясняй, завтра потыкаю, может разберусь что к чему.
>>205631458>С хедером не понял тебя, изъяснись как человек.Ну вот блок с рукой и кнопкой "скачать" входит в header, или тут в header только навигация?
>>205631580Тебе эти черти не обозначили разве соглашения?Но я бы сделал хэдер только для лого и меню.
>>205631703>Тебе эти черти не обозначили разве соглашения?Какие? Которые выложили этот макет на торренты?
>>205631766Аштамаэль-экадемиЕсли не по их интенсиву делаешь то вообще забей на такие мелочи. Тебя тимлид потом поправит когда (никогда) устроишься на работу.
>>205631493Вкратце: кормишь энкодеру свг, а он выдаёт тебе цсс. Мне этот ресурс как раз-таки подсказал наставник, когда я проходил продвинутый (я верстал мишку тогда). Но если ты уже умеешь инлайнить свг в цсс, то наверняка чем-то таким пользуешься.Это свг, им можно вертеть как тебе удобно, так что адаптив проблем вызвать не должен. С резиной, думаю, разберешься.К слову, я резиново никогда не верстал макеты: ни на интенсиве, ни на работе - всегда выдавал просто фиксированные сетки по брейкпоинтам. Может где-то и нужна резина, но по мне это просто дрочь.
>>205631940По их интенсиву, но в лекциях про это ничего не говорится, там только рассказывают, как адаптивность сделать, про БЭМ и автоматизацию, а как такие штуки верстать, никто не объясняет.
>>205632189Много ли я теряю, проходя интенсивы с торрентов? Правда, что после этого интенсива можно вкатиться на РАБоту, или еще js нужно выучить, чтобы хоть куда-то взяли?
>>205632452>Много ли я теряю, проходя интенсивы с торрентов? Наставник поясняет какие-то частные моменты, которые просто не хватило бы времени охватить в лекциях. Алсо, пишет ревью на твой код, что важно: я никак не мог въехать в методологию БЭМ поначалу, всё время хотелось смешать блок и элемент, сделать элемент элемента, но наставник мне так вправил мозги по этому поводу, что мне теперь неудобно верстать по-другому (да и зачем: для фронтенда ничего лучше компонентного подхода вряд ли можно придумать, а когда под рукой только хтмл/цсс, то БЭМ - идеальное решение). У академии есть база выпускников, через которую на меня как раз и вышли (если не хватаешь звезд с неба, то быстро устроишься, но будь готов поначалу верстать под всякие битриксы). >Правда, что после этого интенсива можно вкатиться на РАБоту, или еще js нужно выучить, чтобы хоть куда-то взяли? Что значит "выучить js"?Верстале в зачаточном состоянии нужно знать js на уровне тоггла классов по нажатию кнопки. Ну, еще на богомерзком жиквери подтянуть либку какую-нибудь и вставить её на страницу.Но ты же с амбициями, правда? Так что жс лишним не будет, хотя бы просто потому, что на нем сейчас можно писать почти под что угодно - мне вот очень по душе реакт натив, ухх. Правда момент вот: жс у академии лучше не учи, у них очень хорошая верстка, но жаваскрипты - это к Hexlet.
>>205632917>Правда момент вот: жс у академии лучше не учи, у них очень хорошая верстка, но жаваскрипты - это к Hexlet.Спасибо за совет, а то я уж думал скачивать их курсы и по js. Js начинать учить с learn.javascript, а потом перекатываться на hexlet, или сразу на hexlet? У hexlet тоже есть база выпускников, через которую на меня могут выйти с предложением на 300кк в наносекунду? Абу благословил этот пост.
>>205633175>Js начинать учить с learn.javascript, а потом перекатываться на hexlet, или сразу на hexlet? Как хочешь. Кантор тоже хорош, но он начинает обучение с самого языка и хэлловорлдов, а на Хекслете ты начнёшь с рекурсии. Много синтаксиса там знать не надо, а тот, что надо - объяснят на ходу.У Хекслета, вроде бы, есть что-то вроде базы, но там они просто предлагают тебе примерно подходящие вакансии с хедхантера. Сообщество там не для этих целей существует.Кантор хорош при подготовке к собесам по жсу, это да. Но если ты настроен серьезно и готов ебашить по хардкору - это к Хекслету.
1. Блоки ты можешь называть, как хочешь. Сделай один header, остальные просто section2. Картинка, где розовый телефон - это бэкграунд, hero image, загугли что это.3. Тяни какой-нибудь bootstrap, чтобы было легко и адаптивно верстать, кроссбраузерно, не париться про сетку4. Карта - это google maps. Загугли их API. Маркер на карте - это картинка. Png или svg. Также через API ставится для нужных координат.5.белый треугольник над картой - это div до карты, где фон - картинка. Блок ты смещаешь через position relative и z-index. Не морочься с полигонами, они тут не нужны. Белый трегольник будет весить пару килобайт, так что никаких проблем. Бэкграунд делай с позиционированием по центру или с нужным тебе смещением.6. Загугли и установи эти плагины:Pixel perfect, firebug.
>>205633378Двачую.ОП, вкатывайся во фреймворки, авось сумеешь даже гиперссылку поставить там, где нужно!
>>2056333787. Косой фон розовый вызывает сложности? Это тоже картинка.Бэкграунд с позицией к верху. Сам фон остальной кодом цвета задается.
