Сергей delphinpro

https://qna.habr.com/q/651105

https://yandex.ru/search/?text=javascript+click+ou...

Так кнопка будет красная:

.Button { color: green; }
@media only screen and (min-width: 1450px) {
  .Button { color: red; }
}

А так – зеленая:

@media only screen and (min-width: 1450px) {
  .Button { color: red; }
}
.Button { color: green; }

https://jsfiddle.net/DelphinPRO/kLa2ovtx/

Недавно предлагал вот такое решение. https://jsfiddle.net/DelphinPRO/qghvzfxm/

То есть как, прописать для одного тега шрифт regular 400, а для другого тега bold 700 italic, а один вообще поставить в шрифт Open sea?

Ну ровно так и делать, как вы написали.

p.one {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
}
p.two {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-style: italic;
}
p.three {
  font-family: 'Open Sea', sans-serif;
}

Как отметили выше, основное семейство шрифта лучше задать для всей страницы, в нужных местах менять только жирность и начертание.

.main {
  $this: &;

  .theme_1 & {
    #{$this}-child:hover #{$this}-img {
    }
 }
}

.main {
  $this: &;

  @at-root {
    .theme_1 {
      #{$this}-child:hover #{$this}-img {
      }
    }
  }
}

Если именно такую, то делите столбики и строки вот так, и размещайте в ячейках картинки

пришла идея сделать 3 разные фотки, под мобилку, планшет, пк и менять их. Нормально ли так сделать?

Это не только нормально, но и правильно. https://webref.ru/html/img/sizes
https://developer.mozilla.org/en-US/docs/Web/API/H...

Вариантов много. Например, так.
Здесь я применил свойство aspect-ratio, просто чтобы сократить код, и побыстрее написать пример. Вы можете использовать хак с паддингом и дополнительным элементом для круга, если нужна поддержка более старых браузеров.

Чтобы сделать отступы, делайте их для самих блоков, а не для обертки.
https://jsfiddle.net/DelphinPRO/avwoj7hd/

https://yandex.ru/search/?clid=1882628&text=css+ma...

.main {
  width: 70%;
}
.main:last-child {
  width: 100%;
}

<div class="option">
  <div id="result">TextContent</div>
  <button id="copy">Copy</button>
</div>

let result = document.getElementById("result");

let copy = document.getElementById("copy");

copy.addEventListener("click", function () {
  copyToClipboard(result.innerText);
});

function copyToClipboard(text, onComplete) {
  if (navigator.clipboard) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        if (typeof onComplete === "function") onComplete();
      })
      .catch((err) => {
        console.error("Copy fail", err);
      });
  } else {
    let area = document.createElement("textarea");
    document.body.appendChild(area);
    area.value = text;
    area.select();
    document.execCommand("copy");
    document.body.removeChild(area);
    if (typeof onComplete === "function") onComplete();
  }
}

В песочнице работать не будет