Максим

Если вы о линиях, то я для одного ответа тут уже делал :))


Можно, конечно, просто картинкой на задний фон поставить эти круги.

А ежели вы о вёрстке всего блока — то это уже задание, а не вопрос.

В связи с тем, что автор нашел скругления в своем макете, вариант с SVG:


Например, так
Для скруглений на CSS еще пошаманить с https://jsfiddle.net/xt1chyvn/
Либо псевдоэлементом с градиентом или бордером, если фон цветом (который голубой у вас), а не картинкой.

Один общий блок с картинкой,
внутри несколько блоков с белыми рамками без фона.
Внутренние блоки флексами.

no-repeat?

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Потому-что у изображения не хватает ширины и оно заново заполняет блок.

Пофиксить

background-repeat: no-repeat;
background-size: cover;

js offset.top windows.scrollTop проверяешь например 80px от верха вьюпорта и делаешь position fixed

Нет

навскидку по-быстрому
как-то так?
https://jsfiddle.net/gw70yp9b/1/

sec6 section img{
    background: url(/images/157195/kvadratikshema1.png#size_98x98) center no-repeat;
    padding: 98px;
  }

тут ты задаешь бакграунд всем картинкам, а хочешь бакграунд с квадратиком только картинкам, которые внутри дива (.sec6 section div img)

<input type="text" name="city" value="" id="input-city"  />
<ul>
  <li data-value="Город 1" class="js-item">
    <a href="#">Город 1</a>
  </li>
  <li data-value="Город 2" class="js-item">
    <a href="#">Город 2</a>
  </li>
  <li data-value="Город 3" class="js-item">
    <a href="#">Город 3</a>
  </li>
</ul>

const inp_city = document.querySelector('#input-city');
const li_item = document.querySelectorAll('.js-item');

for (let i = 0;i < li_item.length;i = i + 1) {
	li_item[i].addEventListener('click',function () {
  	inp_city.value = this.dataset.value;
  }, false)
}

https://jsfiddle.net/ruetz08q/14/

$('li').click(function(e) {
  e.preventDefault();
  let text = $(this).attr('data-value')
  $('input').val(text)
})

$('li').click(function(e) {
  e.preventDefault();
  let text = $(this).find('a').text();
  $('input').val(text)
})

.box1 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 50%;
	height: 50%;
	top:0;left:0;bottom:0;right:0;
	margin:auto;
	border:1px solid #333333;

}

.box2 {
	width: 120%;
	height: 120%;
	flex-shrink: 0;
	background: blue;
	opacity:0.5;
}

function sortChildren(el, key) {
  el.append(...Array
    .from(el.children, n => [ n, key(n) ])
    .sort((a, b) => a[1] - b[1])
    .map(n => n[0])
  );
}


sortChildren(document.querySelector('.menu'), n => +n.dataset.num);

Retina-макетов не бывает. Retina — не более чем маркетинговое название экранов с высоким разрешением (300+ px на дюйм). Retina могут быть только ресурсы, например, картинки, которые будут иметь в несколько раз большее, чем целевой макет, разрешение, чтобы попасть в пиксельную сетку реального разрешения.

Вы же верстает не под размеры экрана в физических px, а под viewport с его «виртуальными» px, которые получаются из:
[физическое разрешение] : [степень масштабирования]

Чем выше разрешение при равных размерах экрана — тем всё мельче, если масштаб 1:1. Поэтому принято увеличивать масштаб, иначе всё мелкое-мелкое. Таким образом достигается высокая чёткость + адекватные размеры элементов на экране (эффект retina).


Так, старый iPhone 6 и iPhone XS имеют одинаковый размер viewport (375px), но реальное разрешение различается очень сильно: 750px против 1125px. Достигается это с помощью масштаба: x2 у iPhone 6 и x3 у iPhone XS.

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

Наличие или отсутствие retina в этом деле вам совершенно не важно, ибо вы верстает под чёткие размеры viewport, которые могут быть одинаковыми на устройствах с совершенно разными физическими разрешениями: например, ширину viewport 375px (как у iPhone XS) можно достичь на древнем VGA-экране, сжав в нём окно браузера до этих 375px.


Если у вас в макете текст имеет 15px, то и делайте его 15px. Надеюсь, кстати, что макет вам делал не совсем отбитый дизайнер, который не забыл поставить px вместо pt в макете для текстов. Иначе — либо подгонять на глаз, либо пытаться конвертировать их в px, исходя из выбранном плотности печати в настройках документа макета. Ибо pt — это относительная единица для печати, в web её нет.

Есть дизайнеры-уникумы, которые делают макеты в два раза больше необходимых размеров, типа, блин, retina x2. А если у меня retina x3 — что мне тогда делать? Или же делают макеты вообще неведомых размеров. Да и в Photoshop'e web-макеты в 2019-м году уже делать не надо, конечно.

В CSS и HTML есть методы детекции наличия масштаба, чтобы грузить нужный ресурс в зависимости от его степени.
UPDATE. С макетом полный порядок, тут уже дело в навыках верстки.

Заголовок страницы менять только через js получится, по другому не изобрели вроде :)