alex-1917

Давно бы вырезал картинку, сжал её в Tinypng и делал бы дальше свой фронт работ... Под что клепаете, под эльдорадо что ли , что так важны пара кБ?

да, рентабельно.
иной раз нет.
чаще да, чем нет, причем скорее всего нет и потом да

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

другой вопрос - найдется ли покупатель на такое?

))
автор. учись читать между строк! в половине ответов скромно не поставлен значок сарказма...

По опыту менеджера подобных верстальщиков-программеров-etc... ни у кого нет желания возиться с миллиардами побочных файлов, пытаясь нащупать полет мысли предыдущего разраба. Берется проект с хостинга и с ним идет работа. Зачем мне платить 1,5-2-ой ценник за то, что могут сделать и за 1-й ценник??? Именно столько и ломят программеры, когда им суешь ЧУЖИЕ ИСХОДНИКИ... По срокам все оптимально, клиент доволен - что ещё?..
Подытоживая - #обожимой.

Стили для <section id="header"> и для<div class="container"> не указаны, судя по верстке, шаблон не типовой - чо ты хошь тут услышать???!!!
Уже не говоря о том, что все что касается формы вообще молчок. А вопрос вроде про неё. Или нет?

Про что вопрос???!!!

И не раскрыто - КАК у вас меню должно показываться? Со сдвигом контента вниз или как всплывашка? если всплывашка - стилей не хватает.

Код выложи на любой сервис, кто тут будет экспериментировать с твоими простынями???
ради интереса набрал в гугле твой вопрос - 230 страниц.!! галку красную ставлю.

970 - подсмотрел за вас у бутстрап
погуглить еще могу.. погуглить?

WP в большей степени заточен под блог.

поменьше гуглите на ночь!!! )))

открой файлы дефолтной темы и изучай, это я про тот бред, что выше написали касаемо шапок и подвалов!!! ну что за бред!! ппц.
файл шапки - ОДИН
файл подвала - ОДИН!
Отверстать нужно так, чтобы эти файлы были одинаковыми для всех страниц, сам увидишь, это обеспечит полное отсутствие геморроя в дальнейшем!!!
Затем, если тебе надо разные шаблоны для разных страниц, используй РЕКОМЕНДУЕМЫЙ способ:
1. копируешь файл page.php,
2. обзываешь land-page-one.php,
3. меняешь в начале файле на это:

<?php
/*
Template Name: Лендинг#1
*/

4. заливаешь этот файл в папку шаблона
5. в админке для нужной страницы выбираешь этот шаблон (он будет в списке шаблонов под именем Лендинг#1
6. пьешь коньяк
7. половину бутылки отсылаешь мне
8. я тоже пью коньяк

Щас ДВА запроса актуальны, какие 11??!!!!!! ну край ТРИ.

@media (max-width:1199px) {} //редко использую
@media (max-width:991px) {} //довольно часто юзаю вась
@media screen and (max-width:767px) {} //то что дохтор прописал
@media (max-width:479px) {} // для маньяков)))

основная хитрость, который ты бы давно уже мог подсмотреть в том же бутстрапе - основной контейнер делается шириной 100% + лимит для экранов выше 991, например max-width=1040px - ВСЁ!!!

мой вариант проверяется в каждом проекте на реальных устройствах (афони все от 4s до восьмерки, ябло-планши все, пара ябло-буков, самсунги 4 смарта и три планша, за глаза!!) так что никого не слушай, Alex-1917 дело говорит!!

O E S - принципиально другие. Чо вы там скачали из гугл-фонтс и чо было в макете одному богу известно.
Макет в чем был?
Скриншоты вообще чем сделаны, из макета фотошопом?

adobe creative cloud - какашка

Заголовок должен что-то озаглавливать, поэтому однозначно в начале текста.
А ваши эти header или main - это вообще ниочем, что это в вашей ситуации?? похоже на типичный шаблон WP - там эти секции кто в лес кто по дрова, видел даже как-то H1 перед крошками, но зато в секции MAIN... )))

Твою ж дивизию, открывай свой бутстрап и ищи демо-примеры - они там для таких как ты собсно и придуманы.
https://getbootstrap.com/docs/3.3/examples/jumbotron/
Или тут готовые куски, для особо ленивых
https://bootsnipp.com/snippets/featured/portfolio-...

Про отступы 5-10 забудь, бутстрап - это по 15 по краям, т.е. между соседними будет 30

безобразнейшая верстка
что за ***?:

.woeks{
margin-top:
}

Аж две ошибки

.titles__first
Создавать названия классов с двумя подчеркиваниями, равно как и с несколькими тире, считаю дурным тоном, это пошло из древнючих C++ кусков кода, когда безумные бородатые дядьки с отсутствием фантазии именовали таким образом функции... Так как тупо не уважение к последующим разработчикам, эти ваше два подчерка видны как один, приходится вглядываться, это разве дело программиста - вглядываться?

Скорее всего, компания нищеброды, так как если сотрудникам надо будет работать в фотошопе, то этот фотошоп должен быть как минимум куплен официально))) Причем на каждую рабочую станцию...
Банальная экономия...

Убирай малые срезы, а длинный срез банальными псевдоэлементами - треугольник что ли ни разу не рисовали через css???
В итоге делаешь два блока - синий и черный, у каждого свой срез по длинной стороне, для 640px делай ширину 100% (т.е. будет сверху черный, ниже синий), для остальных разрешений - как на эскизе.
Естественно, на 640px эти безумные срезы будут ляпом, т.е. там делай все прямоугольное.

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

Еще частый вариант - иконка белая, а цвет фона под ней меняем стилями. Сам фон делаем круглым, итого смотрится как цельная иконка круглой формы.
Плюсы:
1. Цвет можно корректировать с точностью до одной миллионной оттенка))
2. Картинку можно вставлять как элементом. так и стилем.
3. Не увеличивается общий размер картинок - в два раза!
4. Белая картинка как известно самая маленькая по весу.
Минусы:
1. Не соответствие дизайну иконки, предложенной например дизайнером (гнать такого дизайнера!!)) )

Приложен скрин:

Перефразируй свой вопрос и получишь как минимум половину ответа)))
Как сделать высоту картинки равной высоте текста.
Т.е. меняем высоту картинки в зависимости от размеров блока, в котором она находится.
В css это так height:auto;
А размеры блока этого будут стартовать от высоты текста.

В 2007 году было 25% заказов с макетами в виде картинки, в 2017 таких заказов чуть более чем 85%! Что говорит о перегретом рынке дизайнеров, они видимо чуют свой скорый конец и задирают свои ценники, ибо роботизация этой отрасли назрела и уже на подходе))) UPD. Статистика моих выполненных работ, сорри что сразу не указал)))

По Вашему вопросу:
1. Иной раз сайт создается из наброска на салфетке из дорогого ресторана, ужин в коем иной раз составляет 3 бюджета на сайт)))
2. Спрашивая про онлайн-сервисы, Вы тем самым подтверждаете свою абсолютную лень или, что более вероятно, пишете курсовик на тему "Осведомленность программистов об онлайн-сервисах". Как раз макет в psd более приспособлен для так называемых онлайн-сервисов, а сервис для распознавания и преобразования в верстку именно рисунка думаю не будет еще лет 100) Ибо профита в том мало.... Хотя есть что-то похожее по типу - пришлите рисунок, нажмите кнопку ОПЛАТИТЬ и через неделю у вас верстка - это да, это наше всё!
3. Не было, нет и думаю вряд ли появится такой макет, который невозможно было бы реализовать в виде html+css+js!
4. Ваши стенания о непрозрачности элементов, тех же кнопках, просто до слёз))) Как писали выше, для начала покажите ваш так называемый невероятно сложный макет, чтобы продолжать далее в предметном духе, а не в стиле "На заборе написано..." или "Если бы у бабушки был ..."

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