Как мне подойти к решению для разработки статического адаптивного HTML-файла, который, по-видимому, обладает функциональностью, выходящей за рамки возможностей CSS/HTML?

У меня есть проект, которому нужно решение, которое я не могу понять. Я даже не знаю, как к этому подойти: у меня есть два файла Photoshop, каждый с начальным макетом для адаптивного дизайна веб-страницы и слоями, которые имитируют предполагаемый функциональность. Я считаю, что требование состоит в том, чтобы найти решение, использующее только HTML со стилями CSS. «Ваша задача — создать единую функциональную статическую HTML-страницу». Первый файл .PSD был довольно простым. Однако второй файл .PSD резко изменился с наложением макета дизайна. И даже тот факт, что было два совершенно разных файла дизайна, кажется, противоречит инструкциям по разработке «одной» HTML-страницы. Это для потенциального работодателя, кстати.

Итак, второй файл имеет раздел заголовка с изображением логотипа и двумя кнопками меню. в вертикальной последовательности два изображения также расположены в вертикальной последовательности. Это все. Слой в файле, когда он становится видимым (Photoshop), кажется, смещает содержимое влево, изменяя значок меню с символа «меню» на символ «X» и отображая черную вертикальную панель с вертикальным меню навигации. . Я застрял в том, как сделать этот вид сдвига контейнера с помощью взлома события onclick без сценариев. я пробовал: 1.) используя контейнер div с переполнением: скрытый = содержимое веб-страницы должно накладываться на этот слой и сдвигаться с изображением... 2.) фоновое изображение с контейнером поверх него. = это должно отображать только центр изображения. поэтому div поверх фона должен быть непрозрачным вокруг централизованного прозрачного квадрата. я в растерянности...

есть ли какая-то техника или стиль дизайна, который мне здесь не хватает? кажется невозможным

это файл изображения в формате psd... http://www.adeninedesign.net/home-320-700.psd