s-jet

Что-то тип того

constructor(props) {
        super(props);
        this.state = {
          data: []
        };
};
renderInput () {
   return this.state.data.map(item => {
       return <div>
           <input type="text" value={item}/>
       </div>
   })
}

addInput () {
   let data = this.state.data;
   data.push('Новый инпут');
   this.setState({ data: data });
}

render() {
   return (<div>
       <button onClick={this.addInput.bind(this)}>Добавить</button>
       {this.renderInput()}
    </div>
    )
}

@-webkit-keyframes toHaveBeerInFriday {
  0% {
    -webkit-filter: none;
  }
  50% {
    -webkit-filter: blur(2px);
  }
  100% {
    -webkit-filter: blur(8px);
  }
}

.programmer {
  animation: toHaveBeerInFriday 7200s;
}

Теперь попробуйте установить на локалку простенькую СMS c шаблонами и изучить как все работает, поисправлять шаблон, вывести-вывести данные

let images = document.querySelectorAll('.container img');

Array.prototype.forEach.call(images, function(el) {
        el.addEventListener("click", function(event) { 
            //делай с картинками все что хочешь
        });  
});

Возможно вам поможет object-fit https://html5book.ru/svoystva-object-fit-i-object-...

-webkit-appearance: button;

https://jsfiddle.net/onm5186c/1/

Вырезать png, не парится и сэкономить свое время и деньги. ИМХО никому не нужны заморочки со статическими страницами типа "визитка"

В текущей верстке, при абсолютном позиционировании видимо так нужно поменять:

.box__row-cell {
    top: 0;
    left: 50%;
    height: 49%;
}

.box__row-cell:nth-child(2) {
    left: 50%;
    bottom: 0;
    top: inherit;
}

смотреть через js количество ссылок через length и добавлять контейнеру класс _two-links.

Разметка:

<ul>
 <li><a>link</a></li>
 <li><a>link</a></li>
</ul>

В стилях:

._two-links li {
    width:50%;
    text-align: right;
}
._two-links li:last-child {
   text-align: left;
}