Воващ

Да, в реальной жизни часто выглядит так: пришел макет от дезигнера для мобильных, а ты уже изобретаешь что сделать с этим всем великолепием, чтоб можно было на десктопах видеть красоту

На деле не плохая практика, просто надо перевернуть для тебя привычный взгляд ;)

1. берем бутсрапыч
2. делим по сетке
3. прикручиваем mock up яблофона с z-index'ом повыше (логично что это картинка с прозрачным фоном, если контент в яблофоне меняется, то там будет еще один блок и придется написать что по клику на таб меняется картинка в яблофоне)
4. прикручиваем табы

В вёрстке делаешь блок-обёртку для контента (c контентом естественно) => по клику на кнопку делаешь блок видимым
Стили подключаешь к html файлу (странице) => если тебе удобно работать с одним файлом, то работаешь с одним
В любом случае, потом следует свои css/scss/sass собрать в один и минифицировать (для этого можно использовать планировшик задач типа gulp)

Если судить по картинкам то:
кнопка -> клик -> auth__block меняет состояние из disaplay: none в block

есть вот ui-kit https://wiredjs.com/

ещё нарыл такую штуку https://bootswatch.com/sketchy/

наводишь -> заливает

-> z-index

Да, можно

логично что тебе надо вешать клик на меню, где при нажатии добавлять анимацию, далее искать расположение блока

toBlock = document.querySelector(hash).getBoundingClientRect().top

потом уже делать скролл.

А потом уже применять скролл => вручную листают наверх покажем header, вниз покажем что-то другое

window.addEventListener('scroll', () =>{
        if(document.documentElement.scrollTop > 1650){

        }else{

        }

циклом с условием:

for (let i = 0; i < arr.length; i++) { 
 if(i === 0){
document.write(arr[i])
}else{
document.write("➔" + arr[i])
}
}

ежели интересует перенос на новую строку, то можно например
document.write( "➔" + arr[i] + `<br>`)