Мм, непонятен вопрос... То что вы нарисовали на картинке, да, можно сделать на html+css. Если нужно чтобы еще и открывалось по клику, то требуется код на js, который вы собственно уже и написали.
Вообще на сколько я помню, если верстка фиксированная, то width=device-width будет маштабировать точно так же, как если бы вы прописали конкретное число.
Хм, по поводу 200$ неясно, может быть вы неправильно сформулировали задачу, или описали ее слишком кратко, поэтому люди ставят цены от головы.
Нужно конретно видеть ТЗ и тд, но вообще, то что вы описали на фрилансе обычно выполняется на раз.
Верстка лендингов никак не отличается от верстки обычных макетов, имхо. Если вы умеете верстать обычные макеты, то вы сможете сверстать и лендинг.
Для добавления интерактивности на лендинг наверное имеет смысл поизучать css анимации и javascript.
На счет фреймворков, по-моему тут очень по-разному, кто-то использует, кто-то нет. Если вам удобно верстать на фреймворке, то и верстайте на фреймворке.
Недавно столкнулся с такой же проблемой. Закомментировал viewport, все стало нормально отображаться. Правда у меня viewport был width=device-width, initial-scale=1