ksnk

А что сделать-то надо ? Если полностью резиновый дизайн - то для начала - сделать полностью "резиновую" кривую, с возможностью получить реперные координаты блоков. Лучше такую кривую делать на svg, так как при расширяемой картинке будет меняться ширина линии. Само решение для линии может выглядет так - по window.resize, через маленький интервал времени перерисовываем кривую на svg и вставляем ее в бякграунд.
Для блоков с текстом все страшнее - нужно расставлять блоки не точно в реперные точки, а так, чтобы блоки не налезали друг на друга. Если сам текстовый блок будет не такой, как кажется дизайнеру, а такой как хочется владельцу сайта, то придется освоить ремесло плиточника ;)
Как простой вариант - ставить текстовые блоки с репером в левом-верхнем углу, а если выходит за рамки - то правым или нижним... на том же window.resize

<link rel="stylesheet" type="text/css" href="create_css.php">

В файле create_css.php содержится css
На JS тоже можно генерировать стили, но, imho, разумнее заниматься этим на стороне сервера

Тот язык, на котором написан пример называется Javascript (js). Чем еще можно помочь? :)

setTimeout(function () {
    notificate('Заголовок', 'Содержание уведомления1');
  }, 15*60000); // 15 мин

Можно проверять смещение клика мышки внутри элемента. Если элемент before вставлен слева и сам элемент смещен вправо по margin - offsetX будет отрицательным

$(document).on('click', '.selector', function (e) {
  if(e.offsetX<0) {
      console.log('before');
      return false;
  }
})