Adik Izat

flex: align items stretch

Интересный вопрос, который сложно понять. Хз умеет ли это делать css, надо реализовывать через js.

Как? С упорством. Мыслите как работадатель. Вы бы дали свой проект начинающему верстальщику? Я бы не дал. Поищите сперва должность помощника верстальщика. Или лучше поучитесь самостоятельно (но лучше с ментором), набросайте средненьких проектов у себя в портфолио, и смело трудоустраивайтесь. Минимум, что сейчас нужно знать junior frontend (начинающий верстальщик):
- Уверенные HTML, CSS;
- Базовые знания JS (что такое событие, метод, функция, свойство);
- Желательны знания JS на хотя бы среднем уровне (что такое промисы, классы, зачем нужны конструкторы и.т.д.)
- Желательно знание препроцессорного языка, вроде SCSS, SASS;
- Желательно знание модулей вроде jQuery
- Понимание о работе сборщиков вроде Gulp, WebPack

Для этого и существуют options.
1) Отследите событие изменения ширины окна
2) В отслеженном событии переинициализируйте ваш слайдер
3) В опшнс передайте false на все onTouchDrag, onMouseDrag итд. и готово

Попробуйте использовать скрипты по работе с элементом canvas.

$(window).scroll(function(){
 allHeight = body.height()//высота бадика
 curHeight = $(this).top()//насколько прокручено
// тут работа с канвас библиотекой и чики пики
})

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

Изучайте Grid и Flex! Это очень важно для адаптивки, 2019 год уже!

<div class="roditel">
   <div class="div1"></div>
   <div class="div2"></div>
</div>

.roditel{
position: relative;
width: 100%;
}
.div1, .div2{
width: 100%;
height: 200px;
}
.div2{
position: absolute;
top: 15px; // насколько отступить сверху
left: 15px; // насколько отступить слева
z-index: 100;
}

.absolute{
  position: absolute;
  bottom: 100%;
  left: auto;
  right: auto;
}

Можно подключить Node Js и хранить данные в каком-нибудь json файле в закодированном виде, это бэк, но если как вы указали в тэгах вы знаете хотябы начало JS, то это не сложно. Необходимо будет только узнать как выгружать/загружать данные в json файл, и написать функции шифрования/дешифрования(в интернете существует более 10000 ассиметрических функции шифрования, ключ дешифровки главное сохранить надежно, а лучше всего подгружать из внешнего файла).

Да все равно работадателям на чем ты верстаешь. Главное быстро чтоб было. Я например на чистом css с использованием флексов, %, vw,vh верстаю, и лендос за 2-3 часа могу запилить. Все зависит от человека.

space-between + padding-right/left. Чтобы края менюшки при изменении вьюпорта были красивые. Просто сделай пять пунктов меню. 3-ий пункт меню оставь пустым(тот, который останется под лого). А картинку по центру поставь через abbsolute; top: 0;
left: calc(50% - ( *ширина картинки* / 2 ) )

извилинку сверху делаешь создавая блок с bg: white, z-index выше выпадающей менюхи, и посишн absolute. Тоже делал такую, с извилинкой сверху траблы были.

У вас там все заабсалючено. Когда блок с абсолютным позиционированием стоит в блоке с абсолютным позиционированием его высота становится равна 0. Тут нужно много корректировок.

z-index-ы не менял. Сами поиграетесь

P.S. Старайтесь не указывать right/left, top/bottom вместе. А если нужно поставить блок по центру лучше использовать флексы.

display: flex;
align-items: center;
justify-content: center;

<div class="block-with-video">
    <div class="fullscreen-bg">
        <div class="overlay"></div>
        <video loop muted autoplay class="fullscreen-bg__video">
            <source src="/img/video/bg.mp4" type="video/mp4">
            <source src="/img/video/bg.webm" type="video/webm">
        </video>
    </div>
</div>

.block-with-video{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}

.fullscreen-bg {
    overflow: hidden;
    z-index: -100;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.fullscreen-bg__video {
    position: absolute;
    overflow: hidden;
    z-index: -1000;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    background: rgba(0, 0, 0, 0.85);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
}