Robert-critical-thoughts

https://codepen.io/mrd/pen/yJAkVb - принцип будет понятен.

Недавно такая тема была, делайте по аналогии - Решение

Какую книгу посоветуете к прочтению по css или начать изучение js?

Отложить в сторону книги, взять 3 дизайна в psd - лендинг (одностраничный сайт), корпоративный(многостраничный, с более сложной структурой), интернет-магазин - начать с лендинга и дальше по увеличению:

1. Сверстать ручками, без использования бутстрапа и других библиотек(с учетом семантики, доступности, адаптивности под все экраны, прикрутить несложную анимацию - карусели, popup, разобраться в анимации с помощью css и js(что можно сделать с помощью css, а где лучше написать на js) - в чем профит - (поможет разобраться как работает css без библиотек и фреймворков, начнет развиваться логика построения хороших интерфейсов, как перестраиваются блоки, дизайнерские ошибки, свои ошибки).

2. После первого-второго пет проекта - используете все элементы автоматизации - препроцессоры, сборщики, библиотеки которые вы точно не напишите сами, и пишите интерфейс с нуля в 2-5 раз быстрее - в чем профит - зная, что под капотом, не задавая глупых вопросов, почему иногда проще написать сетку с нуля, чем использовать сетку бутстрапа(в случае если дизайнер придумал "СУПЕР-МЕГО-САЙТ на 100000000 шекелей, не заморачивась о сетке и не думая о тех людях, которые будут верстать его шедевр), познакомитесь с gulp\grunt\pug,sass\scss\less и еще кучи прикладных инструментов.

3. Посадить его на любую из популярных CMS(для лендинга\корпоративного - WP, Modx, Joomla, Drupal, для магазина (WP, Bitrix, OpenCart) - в чем профит - поймете что нужно клиенту на рынке(не в каждую дырку заталкивается SPA(очень много бизнеса работает на стандартных инструментах), как организована работа контент менеджеров, которые наполняют сайты, оптимизация, плюсы и минусы)

4. Проделав все этапы - у вас есть хорошая база(отличный html и css, вы знаете что такое семантика, кроссбраузерность, адаптивность, знаете базу js, jquery и пишите простые скрипты без подключения библиотеки в 100кб, для того что бы вывести в меню "гамбургер" на мобилках.
Дальше вы решаете - либо делаете упор на JS(и углубляетесь в React\Vue, Angular) участвуя в проектах по разработке SPA и становитесь после года тяжкой работы джуном), либо делаете упор на PHP(CMS, Laravel, Symfony и тд и тп) и так же через год тяжкой работы становитесь джуном.

5. Через 3-4 месяца пытаетесь устроится на работу, особо не заморачиваясь на деньгах.

position: relative; у body
position: absolute; top: 0px; right: 0; у модального окна

Советую прочитать книгу Кит Грант: CSS для профи - там отлично описываются принципы каскадности, которые нужны. Т.к на большинство сайтов без слез нельзя смотреть. и плюс БЭМ ответом выше.

Переправлять долго, суть такая:
Дополнительная обертка для label и input с flex-direction: column; (что бы выстроились по вертикали)
Дополнительная обертка для textarea и button, тоже самое.

И для сообщения существует свой тэг, не input type="text", а textarea
Label не привязывают к 5 input, обычно label нужен что бы связать его с input по id => for, что бы при клике по label ставился чекпоинт(или курсор), на тот инпут к которому привязан label

Картинка на фон, либо если у вас есть psd макет (авокодом или фигмой вытаскиваете линейный градиент и делаете его background). Блок который у вас по центру:

margin: 0 auto; \ display: flex; justify-content:center; align-items:center;

На выбор.

2 меню на сайте - это признак криворукости. Правильный путь - переверстать и сделать меню одним для всех разрешений.

Ваш путь - делаете обертку для вашего меню в стиле ~ lg-menu - и как только у вас подходит к нужному вам разрешению, допустим

@media screen and (max-width: 900px) { lg-menu: dispay: none;}

Следовательно алгоритм мобильного меню вам должен быть понятен,

.mobile-menu \ @media screen and (max-width: 900px) { lg-menu: dispay: flex;}

Нужный вам скрипт подключить\отключить в зависимости от разрешения -

<script>
If (document.body.clientWidth>768){
  document.write('<script src=...>')
}
</script>

https://codepen.io/ant-one/pen/XWrxKgm

.head__inner {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;