Максим

Вот так попробуй https://jsfiddle.net/fco6gvau/

https://codepen.io/xgad/pen/3dca3c1c396966acc4f8db...

https://codepen.io/sergiopedercini/pen/jmKdbj

https://codepen.io/saadeghi/pen/IBhfJ

Как можно задать такое формирование не используя гриды ?

Флексами

https://jsfiddle.net/o843byap/

Это обычный аккордеон или гамбургер или collapse, готовых скриптов куча.

Стили добавишь по вкусу
https://codepen.io/freislot/pen/qgWxoX

.home:hover {
  transform: scale(3);
  transform-origin: 0 0;
}

Вы дважды определяете window.onload - естественно, второе определение затирает первое, поэтому первый график не создаётся. Объедините обе функции в одну. Или назначайте обработчики с помощью addEventListener:

window.addEventListener('load', function() {
  var ctx = document.getElementById('canvas').getContext('2d');
  window.myLine = new Chart(ctx, config);
});

А в разделе MY SKILLS надо будет написать "Умею задавать вопросы на Тостере, сам ничего не делаю".

Решение есть тут например.
Кто как адаптивно верстает 50% бэкграунды (слева одна картинка, справа другая)?
Там более сложный пример, но думаю, при правильном рассмотрении примера, разберетесь.

Хотя у этой задачи есть и другие способы решения, возможно кто-то опишет их еще.
Я дал именно этот пример, так как давал ответ туда, и он мне просто запомнился.
Искать какие-то другие решения на Тостере или писать свое решение под вашу задачу - не вариант.

PS: Когда что-то пытаетесь делать, прикладывайте СВОЙ код, который не получился.
Вам будут указывать на ошибки и давать советы.
А делать верстку за вас никто не будет, тем более на сервисе Вопросов и Ответов.

PPS: На большом мониторе в вашем примере будет большая жопа, так как картинка растянется по ширине и на всю высоту блока будет лицо, а не полная фигура человека %)))
Если вы реально запланировали сделать картинку прижатой к левому краю.

Удачного плавания на просторах сайтостроения :)

PPPS: Короче, пришлось все-таки для ответа нарисовать пример.
https://jsfiddle.net/oz8mgcwp/
Но большего не сделаю)))

Добавьте динамический блок возле кнопки для отображения статуса. Например добавьте возле кнопки <span class="status"></span> и допишите в AJAX-запрос:

.....
function myAJAX() {
    $.ajax({
        url : "add_to_cart.php",
        type : "GET",
        data : { "count" : $('#col').val() },
        dataType: 'json', /* сразу же даем понять в запросе, что принимаем JSON, чтобы не декодировать отдельно */
        success : function(data) {
            console.log(data);
            $('.status').html(data.message); /* добавляем текст статуса в элемент .status */
        }
    });
}

Ну и на счет PHP-кода он у вас конечно во многих местах крайне невалидный. Перепишите для начала хотя бы так:

require_once("db.php"); 

/* во-первых для чего вы везде делаете вывод данных через echo если у вас это будет
просто скрипт, который должен отдавать статус добавления товара в JSON-формате */

header('Content-Type: application/json'); /* даем понять в заголовках, что тип данных у нас JSON */

if (mysqli_connect_errno()) {
    $arr = array('message' => 'Error');
    echo json_encode($arr);
    exit(); /* отдаем ошибку подключения к базе данных и завершаем выполнение скрипта */   
}

/* принимать для записи в базу данных значения из $_GET без дополнительной фильтрации небезопасно
проще говоря так делать нельзя, хоть это конечно и будет работать */
$count = (is_numeric($_GET['count'])) ? intval($_GET['count']) : false; /* проверяем если нам отправили не число, а строку, то возвращаем false, если число то обязательно округляем до целого */
if (!$count) { /* соответственно если нам отправили некорректное значением то отдаем ошибку и завершаем выполнение скрипта */  
    $arr('message' => 'Error');
    echo json_encode($arr);
    exit();
}
$user_ip = $_SERVER['REMOTE_ADDR'];
$date = date('Y-m-d H:i:s');

$sql = "INSERT INTO `orders` (`order_id`, `order_date`, `ip`, `product_count`) VALUES (NULL, '$date', '$user_ip', '$count')";
/* не используйте в массиве значения ключей с пробелами: status code => status_code */
if (mysqli_query($conn, $sql)) {
    $arr = array('status_code' => 1, 'message' => 'Item added to cart');
} else {
    $arr = array('status_code' => 0, 'message' => 'Error');
}
echo json_encode($arr);

Это не меню, это слайдер. реализуется с помощью любого скрипта слайдера, например: kenwheeler.github.io/slick

На js можно просто offsetLeft элемента сравнивать с offsetLeft следующего, если больше, то это последний в строке.
Примерно так:
https://codepen.io/anon/pen/aPPbGV

При вызове события @whell передается объект события WheelEvent, в нем есть свойство deltaY, оно как раз указывает, куда крутится мышь. Если число положительно, но колесико крутится вниз, если отрицательно - вверх.

Пример
там можете вместо назначений this.pos, поставить вызов своих методов wheelUp, wheelDown.
UPD: чтобы окно браузера не скролилось, можно добавить в определению события .prevent
<div id="app" @wheel.prevent="wheel"></div>

Так? - второй параметр отвечает за длительность анимации.

UPD. Вынесено из комментариев:

а есть возможность, что бы анимация меню и ссылкок начиналась одновременно ?

Есть.