Noder SS

https://clientjs.org/
https://github.com/jackspirou/clientjs
https://github.com/fingerprintjs/fingerprintjs

Перечень того, что "можно узнать о пользователе", используя js:
ClientJS Methods
Fingerprint Methods
User Agent Methods
Browser Methods
Engine Methods
OS Methods
Device Methods
CPU Methods
Mobile Methods
iOS Methods
Screen Methods
Plugin Methods
Mime Type Methods
Font Methods
Plugin Methods
Mime Type Methods
Font Methods
Storage Methods
Time Methods
Language Methods
Canvas Methods
Additional Info

Если пользователь не сопротивляется (например специфические настройки и приватный режим браузера, плагины-блокировщики, виртуализация и т.п.) то:
* информация о железе - ос, параметры экрана и от сюда вплоть до конкретной модели мобильного устройства, ну по классам, наличие видеоускорителя, бенчмарки процессора и много чего еще
p.s. кстати webgl это огромная дыра, при должном старании как я понимаю можно даже содержимое экрана получить, буквально чем занимается пользователь вне браузера.
сюда же можно докинуть шрифты и алгоритмы их отрисовки, к примеру при должном старании можно понять, установлен ли тот или иной софт (крупный, какой-нибудь cad) по тому как браузер отрисовывает тексты шрифтами, устанавливаемыми этим софтом.
* fingerprint - набор технологий позволяющих вытянуть из поведения браузера идентификатор пользователя (читай куки) даже если он сопротивляется этому
* наличие плагинов/расширений браузера, по каждому расширению нужно проводить свои проверки но детектировать можно все
* поведенческий анализ, стиль работы с мышкой и клавиатурой, можно оценить реакцию пользователя на раздражители

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

* банальщина вида - подменять содержимое clipboard, браузер позволяет его устанавливать на реакцию пользователя, типа клик(одно время и читать тоже, но это поменяли), как с этим можно смошенничать догадывайся сам

Не надо путать цену и себестоимость. Себестоимость - это сколько тебе стоит всю работу сделать. Цена - это себестоимость плюс наценка (прибыль). Цену можешь ставить любую, какую клиент согласен платить, НО не ниже себестоимости, иначе будешь работать себе в убыток.
Когда заказов нет и кушать хочется, то ставь цену = себестоимость + 10% (на всякий случай).
Когда заказов много на месяцы вперед, то ставь цену высокую, сколько твоя наглость позволит. А вдруг прокатит. Если не прокатит, то ты и так заказами обеспечен.
Принцип простой. Заказов нет - ценник вниз, заказы есть - ценник вверх.
Только с постоянными клиентами нужно придерживаться одинаковых однажды установленных расценок, во избежание их потери, если они тебе нужны, конечно.

Цена складывается из множества параметров, так же из-за количества людей, которые могут быть привлечены к этому. Одно дело, когда вы один, на шаблоне, делаете какой-то сайт, другое дело - когда у нас дизайнеры рисуют дизайн, верстальщики верстают, программирование/натягивание на CMS, кто-то пишет тексты, рисует иллюстрации и т.д.

Можно вывести какую-то минимальную цифру стоимости за типовый сайт и накидывать дальше цену за доп функционал.

Либо переход на почасовую оплату. Выбрать стоимость часа работы и дальше уже считать время потраченное на проект. Либо планировать, сколько времени может понадобится и выводить какую-то цифру на основе этого. Конечно, всё это будет примерно, временами может понадобиться меньше времени, а бывает и намного больше, чем планировалось.

Вот пример реализации.
Родительскому блоку необходимо задать
position: relative;
Дочерним (картинка и текст)
position: absolute;
Положение относительно z оси задается через z-index

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

С наставником тебе явно не повезло. Хотя бы так сделай для начала что ли

.standart {
  background: rgb(246, 246, 248);
  position: relative;
  top: 195px;
}
.standart .container {
  margin: auto;
  max-width: 980px; 
  width:95%;
}
.in-main{
  display: flex;
}
.main_header{
  font-family:'Montserrat', sans-serif ;
  font-weight: 700;
  font-size: 33px;
  color:rgba(50, 50, 50, 1);
  line-height: 52.66px;    
}
.main_des {
  color: rgba(153, 153, 153, 1);
  line-height: 25.36px;
  font-family:'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  width: 431px;
  margin: 26px 0px 20px 0px;
}    
.company_link{
  font-family:'Montserrat', sans-serif ;
  font-weight: 500;
  color: rgba(73, 133, 255, 1);
  font-size: 14px;    
}
.photo_sandart{
  width: 440px;
  height: 340px;
  margin-left: 50px;    
}

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

1. Предоплату.
2. Договариваться - что делаете вы, а что вам даёт заказчик.
3. Писать и согласовывать ТЗ по пожеланиям заказчика (заказчик его вам все равно корректно не напишет поэтому лучше это делать самостоятельно) - по хорошему после предоплаты хотябы за написание ТЗ

Деньги.

А если серьёзно, поищите примеры брифа на разработку сайтов (вот первый попавшийся для примера) и это должно закрыть большинство ваших вопросов, остальное по ходу.

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

смотря что Вы точно делаете. это всё обговаривается

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="page">
    <div class="content-container">
      <div class="header">
        <img src="https://uprostim.com/wp-content/uploads/2021/05/image001-7.jpg" alt="">
        <div class="head-pos">
          <h2 style="text-align: center;">Заголовок<p style="font-size: 12px">Текст</p></h2>
        </div>
      </div>
    </div>
  </div>
</body>
<style>
    @import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
    *{
        margin:0;
        padding:0;
    }
    html{
        font-family: 'Montserrat';
    }
    .head-pos{
        width: 100%;
        height: 100%;
        backdrop-filter: brightness(40%);
    }
    .header{
       color:white;
        width: 100%;
        /* 
        height: 450px;
        background-size: 100%;
        background-repeat: no-repeat;
        background-image: url(photo.jpg); 
        */
    }
    .page{
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: rgb(250, 250, 250);
    }
    .content-container{
        width: 800px;
        height: auto;
        margin: 0px 10px 0px 10px;
        background-color: white;
    }

    /***********/

    img {
      max-width: 100%;
      display: block;
    }
    
    .header {
      position: relative;
    }

    .head-pos {
      position: absolute;
      left: 0;
      top: 0;
    }
</style>
</html>

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

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

- const signinbtn = document.queryselector('.signn-btn');
- const signupbtn = document.queryselector('.signup-btn');
- const formbox = document.queryselector('.formbox');
+ const signinbtn = document.querySelector('.signin-btn'); // имя класса
+ const signupbtn = document.querySelector('.signup-btn');
+ const formbox = document.querySelector('.formbox');

Та же проблема потери заглавных букв в addEventListener и classList.
Косяки с именами классов кнопок — проверяйте. В разметке одно имя класса, в querySelector() – чуть другое.

На будущее, пожалуйста, такие простыни кода не пихайте в текст вопроса, а создавайте песочницу с работающим кодом, например, на Codepen.io:

document.addEventListener('DOMContentLoaded', function() {
  const headings = document.querySelectorAll('.heading');

  headings.forEach(heading => heading.classList.toggle('gsap-reveal-hero', window.innerWidth >= 768));
});

Нюанс в том, что Youtube сделан как SPA - тоесть формально у него только одна страница.
+ Какой-то SSR для индексации и чуть более быстрого первого открытия.

Чтобы сделать что-то подобное, тебе как минимум нужно знать какой-нибудь фреймворк для создания SPA. Например Vue или React.

Под мобилки требуется меньше стилей, по большей части это плиточки которые идут друг под другом. Используя Mobile First под мобильные устройства создается база, которая постепенно обрастает стилями доходя до десктопной версии, именно поэтому стилей получается меньше, потому что по больше части они дополняются, а не переопределяются или отменяются. Вам не придется выкручиваться и тратить лишнюю энергию на то чтобы впихнуть какой-то сложный блок, потому что он изначально простой. Это как бутон, который постепенно раскрывается и превращается в красивый цветок или как бабочка вылезает из кокона расправляя крылья, если их попытаться сжать обратно они сломаются.

Далее, даже если не обращать внимание на то с каких устройств заходят посетители, вам придется подстраиваться под поисковые системы, которые требуют оптимизацию под мобильные устройства. При Mobile First верстке у вас эта оптимизацию получится сама собой так как вы выбираете кратчайший путь к правильному отображению. Браузер не будет вообще применять свойства которые больше доступного размера, в то время как при first desktop будут применены все стили и переопределены, отсюда и всякие визуальные скачки при входе на сайт, которые критичны для первой отрисовки и прочие хорошо наблюдаемые не точности с отступами, вылезание блоков за пределы экрана и т.д.. А в случае, если начинают манипулировать вложенностью повышая специфичность, то первый рендеринг для мобильных устройств превращается в страдания

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

От того что я верстаю через min, свойств в css файле меньше не становится.

Ну так все приходит с опытом

Если бы я делал через min-width, то верхняя часть хедера изначально была бы скрыта (display: none), но при ширине выше, например 768px, я бы ее показал (display: block) и писал бы остальные свойства для нее в этом же медиа-запросе.

Это все нюансы, один display: block ничего не порешает. Но бывают ситуации когда стоит комбинировать и min и max, я например описываю меню в отдельных media, я не делаю общих стилей для десктопа и мобилок, потому что там общего практически ничего нет, даже цвета и шрифты иногда отличаются вот кстати размышления Вадима Макеева на эту тему, я делал так задолго до просмотра этого видео и это удобно, кроме того используя сборщик можно раскидать их в разные файлы работать как с отдельными блоками не оглядываясь на переопределения.

Никак.