MamaLuyba

можно, конечно, кто же запрещает? другой разговор - сколько заказов есть под чистый js и питон.

вешаешь на цвет обработчик, который будет менять картинку.

function change(elem) {
 let color = elem.innerText;
 switch(color) {
 case "Amber": elem.style.backgroundImage = 'amber phone pic';
 break;
// и т.д.
}
}

на блок с цветом вешаешь:
onclick='change(this)'

если надо, чтобы слайдились, выставляешь блоку с фото смещение за границу окна, и после делаешь transition на место.

смещение через left/right задать, position: relative, и ширину 100%

а для чего? для красоты? так тут не угадаешь - заголовок может быть очень длинным, как и анонс.
единственный вариант - делать фиксированную высоту каждой части новости, а все, что выходит за рамки, прятать через text-overflow: ellipsis.

так там же и так показываются несколько вариантов?
п.с. да ничего он о тебе не думает, забей.

сравнить ширину элемента с шириной окна/родителя? если элемент шире - должен быть скролл.
но это не точно.

оптимальнее - бэкграундом фон сделать.
а так - svg, но точное решение не подскажу.

сталкивался с такой проблемой. промучившись пару дней, сделал принудительное раскрытие меню при скролле. правда, у меня такая фигня была только на главной странице, так что особо это ни на что не повлияло.
попробуй повесить listener'ы на меню на разные события: клик, скролл, тач и т.д. и посмотри, после какого события меню схлопывается. ну и потом принудительно запретить это событие.
в моем случае, я в лавине из чужих решений так и не нашел нужное событие.

ну, как по мне - у всех высота одинаковая.
точнее надо вопрос формулировать: куда смотреть, какой код, что нужно...

судя по отзывам, у нас нигде в стране нормально программирование и иже с ним не преподают. тем более data science. так что только, как завещал дедушка ленин: учиться, учиться и учиться! взять какой-нибудь хороший вуз для диплома, а дальше самому.

намудрили там, конечно, сверху. все проще:
каждому меню прописываешь один класс (например), ставишь этому классу display: none;
потом вешаешь на каждое меню функцию типа:

function show(elem) {
[...document.getElementsByClassName("menu")].forEach((e)=>{
 e.style.display  = 'none'; // тут ты скрываешь все меню
})
elem.style.display = 'block'; // тут раскрываешь нужное
}

html:
<div class='menu' onclick='show(this)'></div>

потом можно поиграться в css с анимацией и т.д.
если нужно плавное сворачивание, то вместо работы с display, играешься с height блока меню (от 0% до 100%), ну и transition не забудь.

с google.sheets я без поллитры еле разобрался, конечно - но надо разбираться.
был бы дома - глянул свой код по этой теме, а так - смотри https://developers.google.com/sheets/api/reference...

в общих чертах:
1) прописываешь зависимость размера части круга от размера ставки;
2) крутишь сам блок с кругами на случайное (math.random) количество градусов;
3) ???
4) PROFIT!