xmoonlight

Я бы сделал подобное на Crafty.js: там наследование легко делается и поворот, и всё это возможно делать с DOM-объектами без использования Canvas'а (чтобы стили задавать в CSS по-старинке).

Заведите глобальную переменную from и далее, сразу после отображения - инкрементируйте её:

$.getJSON("gallery.json?from="+from, displayPhotos);

А на сервере - отдавайте нужный контент на основе $_GET['from'].

jsfiddle.net/n9uuv0hd/54

SVG или Canvas (рисуем в памяти и вставляем в блок бэкграундом).

1. www.olivermusebrink.de/beta/curvedtext
2. https://github.com/codrops/Arctext
3. https://circletype.labwire.ca/
4. https://css-tricks.com/snippets/svg/curved-text-al...
5. https://www.visualcinnamon.com/2015/09/placing-tex...

BONUS: roundsliderui.com

1. Изогнутую картинку - можно так или так.
2. Тени - так.

https://codepen.io/dalgard/pen/Dbnus

Как выучить JS? План обучения и ресурсы., п.2: "top-10-functions" (п.7):

addClass() / removeClass()

Простой пример задания:

Здесь 3 слоя, 3 стиля, нет ни одного изображения, нет SVG, нет clip-path; полностью "резиновое" поведение с пропорциональным сохранением всех расстояний.

Могу написать ряд задач (с прямоугольными областями и расстояниями), которые нужно сделать на "чистом" CSS.
Если сможете - можно переходить на следующий уровень изучения CSS.

1. www.erikosterberg.com/terminaljs
2. https://mattboldt.com/demos/typed-js/
3. https://www.jqueryscript.net/other/Blinking-Cursor...

Подборки:
1. https://www.jqueryscript.net/plus/search.php?keywo...
2. https://codepen.io/tag/terminal

Нужно один раз после загрузки страницы перебрать все элементы и сохранить их стили в один результирующий файл.
upshots.org/javascript/jquery-copy-style-copycss
Или через плагин "Save Page WE" для Chrome попробовать сохранить скомпилированный стиль: плагин.

https://www.sven.de/dpi/

У меня была идея, чтобы сайт состоял из одного index.html файла. А остальные страницы загружались бы в div при помощи JavaScript. Но как мне кажется, в этом случае будет не очень удобно править ошибки ...

Пробуйте моё творение: includeHTML (я использую для SPA)

Можете помочь человеку написать такую либу по его информации: https://www.quirksmode.org/compatibility.html

HTML:

<div class="poster">
  <div class="info">
      Lorem ipsum...
  </div>
</div>

CSS:

.poster {
   display:inline-block;
   width:100%;
   position:relative;
}
.poster .info {
   position:absolute;
   left:0px;
   bottom:0px;
}